Korisnici koji Internetu pristupaju putem tableta i mobilnih telefona povećavaju se. To, kao što već znate, znači da više nije dovoljno dizajnirati dobru web stranicu koja dobro izgleda na našem računaru: ona se također mora vidjeti na svakom mobilnom uređaju. Problem? Različite veličine i rezolucije ekrana. Zbog toga je toliko teško napraviti dizajn koji se ispravno prilagođava svim medijima (poznati odgovarajući dizajn, prevedeno kao adaptivni dizajn).
Evo nekoliko savjeta koje morate imati na umu prilikom izrade dizajna s ovim karakteristikama. Obrati pažnju!
Savjeti za adaptivni dizajn
- Napravite jednostavan obrazacPod jednostavnim ne mislim na nepristojno. Govorim o struktura HTML vaše web stranice: što je jasniji, to je bolji. Imajte na umu da zaslon računara može stati u tri vertikalna stupca; na ekranu mobitela stavit ćete samo jedan. Razmislite o tome i kako ćete premjestiti elemente.
- Uklonite sve nepotrebnoIzbjegavajte jQuery efekte, Flash animacije i bilo koji drugi kod koji usporava učitavanje vaše stranice. Što manje sadržaja ove vrste imate, brže će se web učitati.
- Definirajte stil css za svaku "veličinu"Stvorite tiny.css, small.css i big.css (na primjer) koji se pokreću na osnovu uređaja na kojem se gleda. Na primjer:
@import url (tiny.css) (minimalna širina: 300px);
@import url (small.css) (minimalna širina: 600px);
@import url (big.css) (min-širina: 900px);
- Najčešće korištene rezolucije320px/480px/720px/768px/900px/1024px
- Neka vaš predložak bude FLEKSIBILANKad god možete, radite s postocima umjesto fiksnih iznosa. Evo nekoliko referentnih ekvivalenata: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Tipografija važnije nego ikad Ponekad zaslon uređaja može biti toliko mali da je sve što vidite samo tekst. Zbog toga moramo vrlo pažljivo odabrati najbolje fontove na našoj web stranici, tako da kada se smanje u veličini ne izgube čitljivost. Pored toga, moramo znati kombinirati neutralnije fontove s drugima s ličnošću koja daje mreži potreban karakter. Stoga je prvi savjet da trošite vrijeme odabirom fontova koje ćete koristiti.
- SAD slike visokog kvalitetaKako se prostor smanjuje, slike će ga pratiti. Odaberite one koji ne gube na kvaliteti kad se smanje, a koji rade isto kad se skaliraju. Slika lošeg kvaliteta učinit će da vaša web stranica izgleda loše.
- Da se vaše slike uvijek vide punSpriječite odsijecanje fotografija dodavanjem img (širina: 100%;) koda u svoj css. Na taj način poručujete uređaju da preračuna visinu koju treba dati slici tako da se njena širina vidi sto posto.
- Sve nisko isti URLZaboravite na poddomene kao što je www.mysite.com/mobile, jer će ista datoteka index.html u osnovnoj mapi raditi za sve uređaje (ako pravilno prilagodite dizajn). Već znate prednost: što je manje poddomena, to će stranica biti brža.
- Iskoristite nosače: Budite maštoviti Nije isto pristupiti web lokaciji sa stolnog računara nego sa iPada ili mobilnog telefona. S prvom ćete se kretati mirno i smireno. S posljednjim ćete to učiniti u praznim satima i zatvoriti prozor čim vam dosadi. Iskoristite ove uvjete da zabavite korisnika i zabavite ih u tih nekoliko minuta koje će vam posvetiti. Možda se, kada se vrati kući, odluči posjetiti vas na opušteniji način.
- Budite inspirirani U digitalnim publikacijama zapitaćete se zašto ovaj savjet. Vrlo jednostavno: digitalni časopisi (dobri) znaju kako iskoristiti podršku i njihov dizajn je vrlo inteligentan. Inspirirajte se njima i napravite web stranicu koju je teško napustiti.
Više informacija - Digitalni časopisi
Izvor - splio, 960.gs, kolumna