Adaptivni dizajn (responzivni dizajn)

Korisnici koji Internetu pristupaju putem tableta i mobilnih telefona povećavaju se. To, kao što već znate, znači da nije dovoljno samo osmisliti dobru web stranicu koja dobro izgleda na našem računalu: ona se također mora vidjeti na svakom mobilnom uređaju. Problem? Različite veličine i rezolucije zaslona. Zbog toga je toliko teško izraditi 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. Obratiti pažnju!

Savjeti za adaptivni dizajn

1. Napravite jednostavan predložakPod jednostavnim ne mislim na bljutav. Govorim o struktura HTML vašeg web mjesta: što je jasniji, to je bolji. Imajte na umu da zaslon računala može stati u tri okomita stupca; na ekranu mobitela stavit ćete samo jedan. Razmislite o tome i kako ćete premjestiti elemente.
2. 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, web će se brže učitati.
3. Definirajte stil css za svaku "veličinu"Stvorite tiny.css, small.css i big.css (na primjer) koji se pokreću ovisno o uređaju na kojem se gleda. Na primjer:
   

   @uvoz url (tiny.css) (minimalna širina: 300px);

   @uvoz url (small.css) (minimalna širina: 600px);

   @uvoz url (big.css) (min-širina: 900px);

4. Najčešće korištene rezolucije320 px / 480 px / 720 px / 768 px / 900 px / 1024 px
5. Neka vaš predložak bude FLEKSIBILANKad god možete, radite s postocima umjesto s fiksnim iznosima. Evo nekoliko referentnih ekvivalenata: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Tipografija Važnije je nego ikad. Zaslon uređaja može biti toliko malen da je sve što vidite samo tekst. Zbog toga moramo vrlo pažljivo odabrati najbolje fontove na našoj web stranici, tako da kad se smanje u veličini ne izgube čitljivost. Uz to, moramo znati kombinirati neutralnije fontove s drugima s osobnošću koja daje webu potreban karakter. Stoga je prvi savjet da trošite vrijeme odabirom fontova koje ćete koristiti.
7. Koristiti slike visoke kvaliteteKako 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še kvalitete učinit će da vaše web mjesto izgleda loše.
8. 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 će slika dobiti kako bi se njena širina mogla vidjeti sto posto.
9. Sve nisko isti URLZaboravite na poddomene poput www.mysite.com/mobile, jer će ista datoteka index.html u korijenskoj mapi raditi za sve uređaje (ako pravilno prilagodite dizajn). Već znate prednost: što je manje poddomena, to će stranica biti brža.
10. Iskoristite potpore: Budite maštoviti Nije isto pristupiti web mjestu sa stolnog računala nego s iPada ili mobitela. S prvom ćete navigirati mirno i opušteno. S potonjim ćete to učiniti u praznim satima i zatvoriti prozor čim vam dosadi. Iskoristite ove uvjete da zabavite korisnika i zabavite ga u tih nekoliko minuta koje će vam posvetiti. Možda će se, kad se vrati kući, odlučiti posjetiti vas opet na opušteniji način.
11. Inspirirajte se U digitalnim publikacijama zapitat ćete se zašto ovaj savjet. Vrlo jednostavno: digitalni časopisi (dobri) znaju iskoristiti podršku i njihov je dizajn vrlo inteligentan. Inspirirajte se njima i napravite web stranicu koju je teško napustiti.

Više informacija - Digitalni časopisi

Izvor - splio, 960.gs, kolumna