Adaptivni dizajn (responzivni dizajn)

Lúa Louro

4 minuta

Adaptivni dizajn

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

  1. 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.
  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, brže će se web učitati.
  3. 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);

  4. Najčešće korištene rezolucije320px/480px/720px/768px/900px/1024px
  5. 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%
  6. 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.
  7. 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.
  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 treba dati slici tako da se njena širina vidi sto posto.
  9. 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.
  10. 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.
  11. 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


Ostavite komentar

Vaša e-mail adresa neće biti objavljena. Obavezna polja su označena sa *

*

*

  1. Za podatke odgovoran: Miguel Ángel Gatón
  2. Svrha podataka: Kontrola neželjene pošte, upravljanje komentarima.
  3. Legitimacija: Vaš pristanak
  4. Komunikacija podataka: Podaci se neće dostavljati trećim stranama, osim po zakonskoj obavezi.
  5. Pohrana podataka: Baza podataka koju hostuje Occentus Networks (EU)
  6. Prava: U bilo kojem trenutku možete ograničiti, oporaviti i izbrisati svoje podatke.

  1.   Didac Rios rekao je
    čini 11 godina

    Postoje stvari sa kojima se ne slažem previše.
    U tački 5 ... budući da je 200px = 15,38% i sljedećih ... ovo referentno poređenje ne može se izvršiti bez bilo kakve roditeljske mjere, veličina po pikselima nije relativna mjera poput postotaka!

    Navedite slike sa širinom: 100% pogrešno, mislim da to ne bi trebala biti preporuka. Slike ih bolje definiraju širinom i visinom, pa poslužitelju treba manje vremena za obradu informacija (ne mora izračunati njihovu veličinu), a poboljšavamo brzinu učitavanja stranice (što je vrlo važno u prilagodljivom ili responzivnom webu dizajn).

    Već bih uključio, iako je to nos, slike za mrežnice. Ako želimo raditi responzivni web dizajn, obavezno je koristiti slike za prikaz mrežnice, jer veliki broj prikaza na mobilnim uređajima i tabletima koristi ove ekrane. Dakle, nema smisla ulagati napore u njihov dizajn na pola gasa.

    Dobro za ostalo

    Odgovor na Dídac Rios
    1.    Didac Rios rekao je
      čini 11 godina

      U tački 5 stavljaju vas u kontekst i govore vam o ukupnom rasporedu od 1300px sa 3 stupca, jednim od 200, 300 i 1000.

      Ako ga prenesete na postotke, oni su oni kako vi kažete, 15,38% ((200 * 100) / 1300) (decimalni podatak ispod, međunarodni sistem: P)

      Ali ako govorimo o rasporedu od 500 piksela i imamo 3 stupca, jedan od 200, drugi od 200 i drugi od 100 piksela, procenti nisu isti, u ovom slučaju 200 piksela = 40% ((200 * 100) / 500)

      Oni bi bili: 200px = 40% i 100px = 10%

      Hajde, kao što sam rekao, oni nisu referenca ono što vi navodite, oni su referenca samo na rasporedu od 1300px.

      pozdravi

      Odgovor na Dídac Rios
      1.    Lua louro rekao je
        čini 11 godina

        Kakav neuspjeh, potpuno si u pravu u svijetu! Hvala još jednom ;)

        Odgovorite Lui Louro