Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Jednostavna, Mobile First Navigacija

by
Length:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Izgraditi ćemo jednostavnu, responzivnu navigaciju za web stranicu. Naše rješenje pomoći će nam da stavimo naglasak na sadržaj stranice, nedvojbeno prioritet pri dizajniranju za mobilne uređaje. Nećete biti JavaScript-a, a mi ćemo dizajniranju pristupiti Mobile First pristupom.

Mobilna Navigacija

Ako ste čitali Luke Wroblewskijev Mobile First, upoznati ste sa njegovom izjavom da:

Kao osnovno pravilo, sadržaj ima prednost pred navigacijom na mobilnom uređaju.

Ono što želi reći jest da mobilni korisnici često traže trenutne odgovore; oni žele sadržaj koji su tražili, a ne više navigacijskih opcija.

Mnoge stranice, čak i responzivne, pridržavaju se konvencije da navigacija pripada na vrh bilo koje stranice. Taj pristup može uzrokovati probleme upotrebljivosti na mobilnim uređajima jer mobilnim korisnicima često nedostaju dvije stvari: prostor na zaslonu i vrijeme. Ako se primarna navigacija nalazi na vrhu stranice, postoji dobra šansa da će zasjeniti cijeli mobilni zaslon. Taj se problem još više pogoršava velikim "touch-friendly" poveznicama na izborniku, prisiljavajući korisnike da skrolaju dalje od navigacije kako bi došli do bilo kakvog vrijednog sadržaja.

Uzmite ovaj primjer London & Partners:

Savršeno pristojno responzivan dizajn, ali na standardnim dimenzijama mobilnog prikaza (320 x 480 piksela) sve što stvarno vidite je navigacijski izbornik. Naravno, nakon što upravo stignete na početnu stranicu, želite vidjeti nešto drugo osim toga? To nije slučaj samo s London & Partners - praksa je viđena kod mnogih responzivnih dizajna diljem weba.

Pa, Koja su Rješenja?

Vidjeli smo nekoliko načina da se ovo zaobiđe, često se oslanjajući na jQuery kako bi popravio stvari za nas. Uzmite objašnjenje Chris Coyiera u Pet Jednostavnih Koraka responzivnog padajućeg izbornika.


Veliki zaslon, maleni zaslon.

Koristeći jQuery, duplikat izbornika je stvoren u obliku <select> padajućeg izbornika, inicijalno skrivenog od pogleda pomoću CSS-a. Kada medijski upiti detektiraju manji zaslon, padajuće izbornike čine vidljivima a izvornu navigaciju nevidljivom. To je savršeno za mobilne uređaje, budući da padajući izbornici zauzimaju minimalni prostor i koriste se određenim korisničkim sučeljem uređaja (kao što je iPhone klizač).

Isto tako, možete sakriti navigaciju, ali tako da prelazi u pregled kada se klikne gumb 'izbornik'. Ovaj efekt možete vidjeti u akciji s Twitterovim najnovijim Bootstrapom.

Manji zasloni skrivaju navigacijske veze i prikazuju ikonu 'popis' (što brzo postaje prihvaćeno kao značenje 'izbornik') koja otkriva navigaciju kada se klikne. Opet, mobilnim posjetiteljima se prikazuje najveći mogući broj sadržaja, no dostupne su navigacijske mogućnosti ako ih žele.

Čisto CSS Rješenje

Upotrijebiti ćemo tehniku o kojoj govori Luke, što podrazumijeva CSS i Mobile First pristup. Što mislimo kada kažemo Mobile First pristup? Pojednostavljeno, dizajnirati ćemo direktan mobilni izgled, zatim progresivno unaprijediti dizajn za veće zaslone. Korstiti ćemo medijske upite koji detektiraju stalno povećanje veličina zaslona, ​​dodajući pritom stil i značajke.

To znači da će biti učitani samo minimalni CSS i resursi prilikom pregleda našeg dizajna s mobilnim uređajem. To također znači da će starije verzije IE (koje ne prepoznaju media upite) biti prikazane s mobilnom stranicom. Pogledajte Joni Korpijev Napuštanje Starog Internet Explorera za dodatne informacije.

1. Markup

Objasniti ću ideju iza ovog rješenja tijekom rada, pa ubacimo zasada markup, počevši od praznog HTML5 dokumenta.

Napomena: Ne zaboravite Viewport Meta Tag!

Sada ćemo dodati strukturu stranice. Sve za svrhe naše demonstracije. Koristio sam filer tekst iz Monty Pythonova Svetog Grala (hvala Chris Valleskey) što je zgodan način da se nasmijete dok radite :)

2. Markup Navigacije

Sastavili smo osnovnu html stranicu, i sada je vrijeme za glavnu atrakciju; našu primarnu navigaciju..

Da, dobro ste vidjeli, dodali smo to u 68 retku, nakon posljednjeg članka. Ne zaboravite da sada dizajniramo za mobilne uređaje, kasnije ćemo pokriti stolna računala. Postavili smo navigaciju pri dnu stranice tako da je sasvim izvan puta. Sada ćemo postaviti link na vrh stranice kako bi korisnici mogli pronaći navigaciju ako žele.

3. CSS Reset

Ovisno o tome kako obično započinjete web projekte, ovaj korak bi se mogo razlikovati od vašeg uobičajenog tijeka rada. Uvijek sam smatrao da je reset Eric Meyera čvrsta osnova za rad, naročito što je u zadnje vrijeme ugodio. Dodati ćemo njegova pravila za ponovno postavljanje na stylesheet za naš css:

4. Osnovni Stilovi

Trenutno naša stranica izgleda prilično nezanimljivo..

..pa popravimo malo stvari dodajući neki jednostavan stil.

To su sve osnovne stvari (fontovi, visine redova, boje, itd.) a ono što je od krucijalne važnosti do sada je da sam stilizirao gumb "izbornik" tako da lebdi zdesna unutar <header>, gdje biste najčešće očekivali pronaći navigaciju.

Ako prijeđete preko njega kursorom, vidjeti ćete stanje mirovanja - nije nužno za uređaje osjetljive na dodir, naravno, ali ovo iskustvo biti će isporučeno i za neoperativne Internet Explorer verzije. Ono što smo definirali za korisnike mobilnih uređaja jest :focus stanje. To je isto kao i :hover stanje, no ponuditi će ključne povratne informacije za uređaje osjetljive na dodir. Naši će korisnici znati da su uspješno dodirnuli gumb izbornika.

U svakom slučaju, kliknite ga i biti ćete preusmjereni na navigaciju, super.

Stilizirajmo sada malo izbornik.

5. Stilovi Navigacije

Zapravo ćemo oblikovati našu primarnu navigaciju slično primjeru Londona & Partners koji smo ranije prikazali, osim što je ovog puta očito na dnu stranice..

Mnogo bolje. Linkove izbornika učinili smo lijepima i velikima (pročitajte više u članku Touch Target Sizes na blogu Lukea Wroblewskog) i još jednom odredili :focus stanje za povratne informacije korisnika.

Također je postalo jasno da smo uključili i 'vrh' link koji će korisnike odvesti natrag na vrh stranice ako je potrebno.

6. Povećanje

OK, bavili smo se našim jednostavnim mobilnim izgledom, stoga je sada vrijeme za neka progresivnija poboljšanja. Upotrijebiti ćemo media upite da odredimo kada naš mobilni izgled više nije prikladan.

Ali u kojem trenutku postaje neprikladan? Postoji mnogo načina za pristup media upitima, ali mi ćemo raditi od osnove da je mobilni prikaz 320px x 480px. 320px je širok kada se gleda u portret načinu, 480px je širok gledan u pejzažnom načinu, stoga bismo opravdano mogli podesiti naš prvi media upit da detektira zaslon veći od 480px.

Ipak, sljedeći korak je nedvojbeno tablet. iPad ima rezoluciju 980px x 768px, pa možemo sigurno pretpostaviti da je sve manje od 768px prikladno za naš mobilni izgled. Sve veće od 768px može premostiti navigacijske izglede više poput desktopa.

Stoga možemo početi dodavati pravila, pa podesimo sada media upit:

Ovaj media upit će pokretati sve stilove sadržane unutar njega kada je prikaz barem 768px širok. Imajte na umu uključivanje jedine ključne riječi koja osigurava da se Internet Explorer 8 ne zbuni i pokuša obraditi upit. Pogledajte moje ranije objašnjenje za pojedinosti.

Hajde da učinimo da nestane naš gumb 'izbornik':

Sa malo širim pretraživačem, gumb izbornika se više ne prikazuje.

7. Pomicanje Navigacije

Sada moramo dovesti primarnu navigaciju na vrh stranice. To ćemo učiniti uklanjajući je iz tijeka dokumenta, postavljajući ga apsolutno na vrh.

Da bi to bilo moguće, moramo najprije njegov roditelj (.wrapper) učiniti relativno pozicioniranim. To možemo učiniti ovdje u media upitu ili odrediti na početku našeg stylsheeta.

Kada se izbornik postavi apsolutno, moramo ukloniti neke od sidrenih stilova. Nema mnogo posla, ali trebamo da se stavke popisa prikazuju u retku, i moramo ukloniti granice i pretjerano ispunjavanje s sidara. Naša stanja mirovanja koja smo ranije diktirali su naravno, u redu pa ih ne trebamo mijenjati.

8. Posljednja Stvar

Ako ste obraćali pažnju primijetili ste da još uvijek imamo "vrh" link u navigaciji - to nam više i ne treba, zar ne?

Možemo ga ukloniti na nekoliko načina, ali kako bismo bili sigurni u to što se događa dodajmo prvo klasu stavki s popisa:

I zatim ga se možemo riješiti unutar media upita:

Zaključak

To je to! Postoji mnogo načina za ovu ideju (implementacija ikone popisa samo je jedna) i, naravno, možete nastaviti dodavati media upite za rastuće zaslone. Nadam se da sada imate temelje za to. Izradili smo jednostavnu, responzivnu navigaciju jednostavnu za dodir koristeći Mobile First pristup, istodobno naglašavajući sadržaj i upotrebljivost. Tko može tražiti više?!

Dodatni Resursi

Nekoliko dodatnih poveznica spomenutih u tutorialu, na jednom korisnom popisu:

Premium Opcija

Na Envato Marketu postoje mnogi mobile first dizajn predlošci koje možete odmah upotrijebiti u svojim projektima.

Na primjer, first je mobile first web aplikacija / admin dashboard tema sa flat korisničkim sučeljem koje se bazira na Boostrap 3. Lagana je, ali s mnogim komponentama koje odgovaraju vašim potrebama. Također je u potpunosti responzivna, a widgeti i komponente imaju mobile first pristup.

first - Mobile First Web App Theme
first - Mobile First Web App Tema
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.