Dizajni adaptiv (dizajni i përgjegjshëm)

Përdoruesit që hyjnë në internet përmes tabletëve dhe celularëve janë në rritje. Kjo, siç e dini tashmë, do të thotë se nuk është më e mjaftueshme për të hartuar një faqe të mirë në internet që duket mirë në kompjuterin tonë: ajo gjithashtu duhet të shihet në çdo pajisje të lëvizshme. Problemi? Madhësi dhe rezolucione të ndryshme të ekranit. Kjo është arsyeja pse është kaq e vështirë të bësh një dizajn që përshtatet në mënyrë korrekte për të gjitha mediat (e famshmja dizajn të përgjegjshëm, përkthyer si dizajn adaptiv).

Këtu janë disa këshilla që duhet të mbani mend kur bëni një dizajn me këto karakteristika. Kushtoj vëmendje!

Këshilla për dizajnin adaptiv

1. Bëni një model të thjeshtëMe thjeshtë nuk dua të them i butë. Unë jam duke folur për strukturë HTML i faqes suaj të internetit: sa më e qartë të jetë, aq më mirë. Mbani në mend se një ekran kompjuteri mund të përshtatet tre kolona vertikale; në ekranin e një celulari, do të vendosni vetëm një. Mendoni për atë dhe si do t'i ripoziciononi elementet.
2. Eliminoni gjithçka të panevojshmeShmangni efektet e jQuery, animacionet Flash dhe çdo kod tjetër që ngadalëson ngarkimin e faqes tuaj. Sa më pak përmbajtje të këtij lloji të keni, aq më shpejt do të ngarkohet interneti.
3. Përcaktoni një stil CSS për secilën "madhësi"Krijoni një tiny.css, small.css dhe big.css (për shembull) që funksionon bazuar në pajisjen në të cilën shikohet. Për shembull:
   

   url @import (tiny.css) (gjerësia min: 300px);

   url @import (small.css) (gjerësia min: 600px);

   url @import (big.css) (gjerësia min: 900px);

4. Rezolucionet më të përdorura320px/480px/720px/768px/900px/1024px
5. Bëni modelin tuaj FLEXIBLEKurdo që të keni mundësi, punoni me përqindje në vend të shumave fikse. Këtu janë disa ekuivalente referimi: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipografia më e rëndësishme se kurrë Ndonjëherë ekrani i pajisjes suaj mund të jetë aq i vogël sa gjithçka që shihni është teksti. Kjo është arsyeja pse ne duhet të zgjedhim me shumë kujdes shkronjat më të mira në faqen tonë, në mënyrë që kur ato të zvogëlohen në madhësi të mos humbin lexueshmërinë. Për më tepër, ne duhet të dimë se si të kombinojmë fonte më neutrale me të tjera me personalitetin që i japin rrjetit karakterin e nevojshëm. Prandaj, këshilla e parë është që ju të kaloni kohë duke zgjedhur gërmat që do të përdorni.
7. Përdorim imazhe me cilësi të lartëNdërsa hapësira zvogëlohet, imazhet do ta shoqërojnë atë. Zgjidhni ato që nuk e humbasin cilësinë kur zvogëlohen, dhe që punojnë njësoj kur shkallëzohen. Një imazh me cilësi të ulët do ta bëjë faqen tuaj të internetit të duket keq.
8. Se pamjet tuaja shihen gjithmonë plotParandaloni që fotografitë tuaja të priten duke shtuar kodin img (gjerësia: 100%;) në css tuaj. Në këtë mënyrë, ju po i thoni pajisjes që të rillogarisë lartësinë që do t'i jepet imazhit në mënyrë që gjerësia e saj të shihet njëqind për qind.
9. Të gjitha të ulëta e njëjta URLHarrojeni nënfushat si www.mysite.com/mobile, pasi i njëjti skedar index.html në dosjen rrënjësore do të funksionojë për të gjitha pajisjet (nëse e bëni saktë modelin adaptiv). Ju tashmë e dini avantazhin: sa më pak nën-domene, aq më shpejt do të jetë ngarkesa e faqes.
10. Përfitoni nga mbështetësit: Jini imagjinativ Nuk është e njëjta gjë për të hyrë në një faqe në internet nga një kompjuter desktop sesa nga një iPad ose një telefon celular. Me të parën, do të lundroni në një mënyrë të qetë dhe të qetë. Me këtë të fundit, do ta bëni në orë boshe dhe do të mbyllni dritaren sapo të mërziteni. Përfitoni nga këto kushte për të argëtuar përdoruesin dhe për t'i bërë ata të argëtohen në ato pak minuta që do t'ju kushtojnë. Ndoshta kur të kthehet në shtëpi ai do të vendosë t'ju vizitojë në një mënyrë më të relaksuar.
11. Frymëzohuni Në botimet dixhitale, do të pyesni veten pse kjo këshillë. Shumë e lehtë: revista dixhitale (mirë) di të përfitojë nga mbështetja dhe dizajni i tyre është shumë inteligjent. Frymëzohuni prej tyre dhe krijoni një faqe në internet që është e vështirë të lihet.

Më shumë informacion - Revista dixhitale

Burimi - splio, 960.gs, kolone