Utilizatorii care accesează Internetul prin tablete și telefoane mobile sunt în creștere. Acest lucru, după cum știți deja, înseamnă că nu mai este suficient să creați o pagină web bună care să arate bine pe computerul nostru: trebuie să fie văzută și pe fiecare dispozitiv mobil. Problema? Diferite dimensiuni și rezoluții ale ecranului. De aceea este atât de dificil să realizezi un design care să se adapteze corect la toate mediile (celebrul receptiv Design, tradus ca design adaptiv).
Iată câteva sfaturi de care trebuie să ții cont atunci când faci un design cu aceste caracteristici. Fiți atenți!
Sfaturi pentru design adaptiv
- Realizați un șablon simpluPrin simplă nu mă refer la fad. Vorbesc despre structură HTML al site-ului dvs.: cu cât este mai clar, cu atât mai bine. Rețineți că pe ecranul unui computer se pot potrivi trei coloane verticale; pe ecranul unui telefon mobil, nu veți potrivi decât unul. Gândiți-vă la asta și la modul în care veți repoziționa elementele.
- Eliminați tot ce nu este necesarEvitați efectele jQuery, animațiile Flash și orice alt cod care încetinește încărcarea paginii dvs. Cu cât aveți mai puțin conținut de acest tip, cu atât se va încărca mai repede webul.
- Definiți un stil CSS pentru fiecare "dimensiune"Creați un tiny.css, small.css și big.css (de exemplu) care rulează pe baza dispozitivului pe care este vizualizat. De exemplu:
@import url (tiny.css) (lățime minimă: 300px);
@ import url (small.css) (lățime minimă: 600 px);
@ import url (big.css) (lățime minimă: 900 px);
- Cele mai utilizate rezoluții320px/480px/720px/768px/900px/1024px
- Faceți șablonul FLEXIBILOri de câte ori puteți, lucrați cu procente în loc de sume fixe. Iată câteva echivalențe de referință: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tipografie Este mai important ca niciodată Uneori, ecranul dispozitivului dvs. poate fi atât de mic încât nu vedeți decât text. De aceea trebuie să selectăm cu mare atenție cele mai bune fonturi de pe site-ul nostru, astfel încât, atunci când sunt reduse în dimensiune, să nu piardă lizibilitatea. În plus, trebuie să știm cum să combinăm fonturi mai neutre cu altele cu personalitate care să dea web caracterul necesar. Prin urmare, primul sfat este că petreceți timp selectând fonturile pe care urmează să le utilizați.
- Folosi imagini de înaltă calitatePe măsură ce spațiul este redus, imaginile îl vor însoți. Selectați-le pe cele care nu pierd calitate atunci când sunt reduse și care funcționează la fel când sunt reduse. O imagine de calitate slabă va face ca site-ul dvs. să arate prost.
- Că imaginile tale sunt întotdeauna văzute al completÎmpiedicați tăierea fotografiilor prin adăugarea codului img (lățime: 100%;) în css. În acest fel, îi spuneți dispozitivului să recalculeze înălțimea pe care ar trebui să o ofere imaginii, astfel încât lățimea sa să poată fi văzută sută la sută.
- Toate scăzute aceeași adresă URLUitați de subdomenii precum www.mysite.com/mobile, deoarece același fișier index.html din folderul rădăcină va funcționa pentru toate dispozitivele (dacă faceți corect proiectarea adaptivă). Știți deja avantajul: cu cât sunt mai puține subdomenii, cu atât va fi mai rapidă încărcarea paginii.
- Profitați de suporturi: Fii imaginativ Nu este același lucru să accesezi un site web de pe un computer desktop decât de pe un iPad sau un telefon mobil. Cu primul, veți naviga într-un mod calm și relaxat. Cu acesta din urmă, o veți face în ore inactive și veți închide fereastra imediat ce vă veți plictisi. Profitați de aceste condiții pentru a distra utilizatorul și faceți-l să se distreze în acele câteva minute pe care urmează să vi le dedice. Poate când va ajunge acasă va decide să vă viziteze din nou într-un mod mai relaxat.
- A fi inspirat În publicațiile digitale, vă veți întreba de ce acest sfat. Foarte usor: reviste digitale (bine) știu să profite de suport și designul lor este foarte inteligent. Inspirați-vă de ei și creați un site web greu de părăsit.
Mai multe informatii - Reviste digitale
Sursă - splio, 960.gs, columnar
Sunt lucruri în care nu prea sunt de acord.
La punctul 5 ... deoarece 200px = 15,38% și următoarele ... această comparație de referință nu poate fi făcută fără nicio măsură părinte, dimensiunea pe pixeli nu este o măsură relativă ca procentele!
Specificați imaginile cu lățime: 100% greșit, nu cred că ar trebui să fie o recomandare. Imaginile le definesc mai bine cu lățimea și înălțimea lor, astfel încât serverul necesită mai puțin timp pentru a procesa informațiile (nu trebuie să-și calculeze dimensiunea) și îmbunătățim viteza de încărcare a paginii (ceea ce este foarte important în web adaptabil sau receptiv proiectare).
Aș include deja, chiar dacă este o atingere a nasului ... imaginile pentru ecranele retinei. Dacă vrem să facem design web receptiv, este obligatoriu să folosim imagini pentru afișarea retinei, deoarece un procent ridicat de vizualizări pentru mobil și tabletă utilizează aceste ecrane. Deci, nu are rost să punem eforturi într-un design pentru ei la jumătate de accelerație.
Bun pentru rest
La punctul 5, ei vă pun în context și vă spun despre un aspect total de 1300px cu 3 coloane, una dintre 200, 300 și 1000.
Dacă îl transferați la procente, în cazul lor sunt după cum spuneți, 15,38% ((200 * 100) / 1300) (zecimală mai jos, sistem internațional: P)
Dar dacă vorbim despre un aspect de 500 px și avem 3 coloane, una de 200, alta de 200 și alta de 100 px, procentele nu mai sunt aceleași, în acest caz 200 px = 40% ((200 * 100) / 500)
Acestea ar fi: 200px = 40% și 100px = 10%
Haide, așa cum am spus, nu sunt o referință ceea ce indicați, ci doar o referință pe un aspect de 1300px.
salutări
Ce eșec, ai absolut dreptate în lume! Multumesc din nou ;)