Accentsconagua
Albastru. Nu, vă rog…
Taci! Vrei să taci ?! Dar ești îmbrăcată ca una… Camelot! Nu votați pentru regi.
Share
Vom construi o navigare simplă și receptivă a site-ului Web. Soluția noastră ne va ajuta să punem accentul pe conţinut a paginii noastre, fără îndoială că este prioritatea cea mai importantă atunci când proiectăm pentru mobil. Nu va fi implicat nici un JavaScript și vom aborda acest lucru dintr-o abordare Mobile First.
Dacă aveți nevoie de ajutor suplimentar, încercați să contactați unul dintre designeri și dezvoltatori pe Envato Studio. Ei pot repara bug-uri și probleme pentru dvs. sau chiar să creeze un design receptiv de la zero.
De exemplu, puteți avea un design fix al site-ului web transformat într-un design complet receptiv pentru doar 350 $, iar întreaga activitate va fi finalizată în termen de șapte zile.
Dacă ați citit mai întâi Mobilul lui Luke Wroblewski, veți fi familiarizați cu afirmația sa:
Ca regulă generală, conținutul are prioritate față de navigația pe mobil.
Ceea ce înseamnă prin aceasta este că utilizatorii de telefonie mobilă caută adesea răspunsuri imediate; aceștia doresc conținutul pe care îl căutau, nu mai multe opțiuni de navigare.
Multe site-uri, chiar și cele receptive, respectă convenția că navigația aparține în partea de sus a oricărei pagini. Această abordare poate provoca probleme de utilizare a dispozitivelor mobile, deoarece utilizatorii de telefonie mobilă sunt adesea lipsiți de două lucruri: spațiu și timp de ecran. Dacă navigația primară este plasată în partea de sus a unei pagini, există o șansă bună ca aceasta să obscure un întreg ecran mobil. Această problemă este exacerbată în continuare de legăturile de meniu prietenoase la atingere, forțând utilizatorii să navigheze dincolo de navigație pentru a ajunge la orice conținut valoros.
Luați acest exemplu de la London & Partners:
Un design decent decent, dar la dimensiunile standard ale portului mobil (320px x 480px) tot ce vedeți este un meniu de navigare. Desigur, după ce am ajuns la pagina de pornire, vreau să văd altceva decât asta? Nu numai London & Partners demonstrează acest lucru - este o practică văzută în multe modele receptive pe web.
Am văzut câteva modalități de a face acest lucru, adesea sprijinindu-se pe jQuery pentru a ne sorta lucrurile. Luați în considerare explicația lui Chris Coyier cu privire la meniul drop-down receptiv în cinci pași simpli.
Folosind jQuery, un duplicat al meniului este creat sub forma a dropdown, inițial ascuns de vedere folosind CSS. Atunci când interogările media detectează un ecran mai mic, acestea fac vizibilă meniul vertical și navigația originală invizibilă. Acest lucru este perfect pentru dispozitivele mobile, deoarece dropdown-urile ocupă proprietăți imobiliare minime și utilizează interfața specială a dispozitivului (cum ar fi scroll-ul iPhone-ului).
În mod alternativ, puteți să vă ascundeți navigația, dar să aveți o trecere în vizualizare atunci când faceți clic pe un buton "meniu". Puteți vedea acest efect în acțiune cu cea mai recentă versiune Bootstrap a lui Twitter.
Ecranele mai mici ascund legăturile de navigare și afișează o pictogramă "listă" (rapid acceptată în sensul "meniu") care dezvăluie navigația când ați făcut clic. Din nou, vizitatorii de pe mobil sunt prezentați cu cât mai mult conținut posibil, dar au opțiuni de navigare disponibile dacă le doresc.
Vom folosi o tehnică discutată de Luke, care utilizează CSS și o abordare Mobile First. Ce înțelegem prin abordarea Mobile First? Puneți pur și simplu, vom proiecta un layout mobil direct, apoi să îmbunătățească progresiv designul pentru ecrane mai mari. Vom utiliza interogări media care detectează în mod constant dimensiuni ale ecranului, adăugând stil și caracteristici pe măsură ce mergem.
Acest lucru înseamnă că numai minimul de suport CSS și resurse vor fi încărcate atunci când designul nostru este vizualizat cu un dispozitiv mobil. De asemenea, înseamnă că versiunile mai vechi ale IE (care nu recunosc interogările media) vor fi prezentate împreună cu site-ul mobil. Consultați Joni Korpi care a părăsit vechiul Internet Explorer În spatele pentru mai multe informații despre acest lucru.
Voi explica ideile din spatele acestei soluții pe măsură ce mergem, așa că, pentru moment, hai să aruncăm împreună unele marcări, pornind de la un document HTML HTML blanco.
Navigare mobilă în primul rând mobil
Notă: Nu uitați Meta Tag-ul de vizualizare!
După ce am făcut acest lucru, vom adăuga o structură a unei pagini. Chestii directe și toate în scopul demonstrației noastre. Am folosit textul de umplere din Sfântul Graal al lui Monty Python (datorită lui Chris Valleskey), care este un mod plăcut de a vă zâmbi pe față în timp ce lucrați :)
Nav
Albastru. Nu, vă rog…
Taci! Vrei să taci ?! Dar ești îmbrăcată ca una… Camelot! Nu votați pentru regi.
Vrem un tufiș!!
Uite, logodnicul meu! Taci! Dar ești îmbrăcată ca una…
- Nasul?
- Shh! Cavaleri, vă invit să vă urez bun venit la noua dvs. casă. Să mergem la Camelot!
- Uite, logodnicul meu!
Ajutor, ajutor, sunt reprimat!
De ce? Asculta. Femeile ciudate situate în iazuri care distribuie săbii nu reprezintă o bază pentru un sistem de guvernare. Puterea executivă supremă provine dintr-un mandat din partea masei, nu de la o ceremonie acvatică farcicală. Liniște! Un nout?
Am tras împreună o pagină html de bază, deci acum este timpul pentru atracția principală; navigarea principală ...
Da, ați văzut-o corect, am adăugat asta la linia 68, după ultimul articol. Nu uitați că proiectăm acum pentru dispozitive mobile, vom acoperi ulterior desktop-ul. Am plasat navigația în partea de jos a paginii noastre, astfel încât aceasta este pe deplin departe de drum. Acum vom plasa un link în partea de sus a paginii noastre, astfel încât utilizatorii să poată găsi navigația dacă doresc.
Nav
Meniul
În funcție de modul în care începeți în mod normal proiectele web, acest pas diferă de fluxul de lucru obișnuit. Întotdeauna am găsit că reinițializarea lui Eric Meyer este o bază solidă de lucru, mai ales după ce a făcut-o recent. Vom adăuga regulile sale de resetare la o foaie de stil pentru a ne lovi css-ul:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0b1 201101 NOTĂ: Muncă în desfășurare Utilizați cu atenție și test cu ABANDON * / html, corp, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , acronim, adresa, mare, cite, cod, del, dfn, em, im, kbd, s, samp, small, greve, strong, sub, supt, var, b, u, i , dl, dt, dd, ol, ul, li, câmpul, forma, eticheta, legenda, tabel, caption, tbody, tfoot, thead, tr, th, td, articol, deoparte, panza, detaliu, figcaption, figura, subsol , header, hgroup, meniu, nav, secțiune, rezumat, timp, marcă, audio, video margine: 0; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; font: inherit; aliniere verticală: linia de bază; / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: "; content: none; / * : linie-prin; tabel colaps de frontieră: colaps; spațiere frontieră: 0;
În momentul în care pagina noastră este destul de neinspirată ...
... așa că haideți să îmbunătățim lucrurile adăugând un stil simplu.
/ * începe stilurile noastre * / body font: 16px / 1.4em 'PT Sans', sans-serif ;; culoare: # 1c1c1c; p, ul marja: 0 0 1,5; ul list-style: disc; umplutura: 0 0 0 20px; a culoare: # 1D745A; h1 h2 font-family: "PT Serif", serif; font-size: 32px; linie înălțime: 1,4; marja: 0 0. font-weight: bold; / * layout * / .wrapper articol border-bottom: 1px solid # d8d8d8; umplutura: 10px 20px 0 20px; margine: 10px 0; / * header * / header fundal: # 1c1c1c; padding: 15px 20px; / * clarfix mai scurt http://nicolasgallagher.com/micro-clearfix-hack/*/ header: înainte, header: după content: ""; afișare: tabel; header: după clear: both; / * Pentru IE 6/7 (declanșator hasLayout) * / header zoom: 1; h1.logo a culoare: # d8d8d8; text-decoration: nici unul; font-weight: bold; text-transform: majuscule; font-size: 20px; linia-înălțime: 22px; plutește la stânga; împărțirea literelor: 0,2; a.to_nav float: right; culoare: #fff; fundal: # 4e4e4e; text-decoration: nici unul; umplutură: 0 10px; font-size: 12px; font-weight: bold; linia-înălțime: 22px; înălțime: 22px; text-transform: majuscule; împărțirea literelor: 0,1; -webkit-border-radius: 2px; -moz-border-radius: 2px; raza de graniță: 2px; a.to_nav: mutați, a.to_nav: focalizați color: # 1c1c1c; fundal: #ccc;
Acestea sunt toate lucrurile de bază (fonturi, înălțimi de linie, culori etc.), ceea ce este crucial până acum este că am desenat butonul "meniu" pentru a pluti în dreapta în , unde ați aștepta deseori că navigația va fi găsită.
Dacă treceți deasupra acestuia, veți vedea starea de hover - nu este necesar pentru dispozitivele cu ecran tactil, desigur, dar această experiență va fi, de asemenea, livrată în versiunile Internet Explorer necooperante. Ce noi avea definite în beneficiul utilizatorilor de telefonie mobilă este : focus stat. Este la fel ca și :planare dar va oferi feedback crucial pentru dispozitivele touch screen. Utilizatorii noștri vor ști au reușit să atingă butonul de meniu.
Oricum, faceți clic pe el și veți fi dus la navigație, super.
Acum hai să stilisem meniul un pic.
De fapt, o să stilisticăm navigarea principală, asemănătoare exemplului London & Partners prezentat mai sus, cu excepția faptului că este evident în partea de jos a paginii ...
/ * navigație * / #primary_nav ul style-style: none; fundal: # 1c1c1c; padding: 5px 0; #primary_nav li a afișare: bloc; padding: 0 20px; culoare: #fff; text-decoration: nici unul; font-weight: bold; text-transform: majuscule; împărțirea literelor: 0,1; împărțirea literelor: 0,1; linia-înălțime: 2em; înălțime: 2m; frontieră-fund: 1px solid # 383838; #primary_nav li: ultimul-copil a border-bottom: nici unul; #primary_nav li a: hover, #primary_nav li a: focalizare culoare: # 1c1c1c; fundal: #ccc; / * footer * / subsol font-family: 'PT Serif', serif; font-style: italic; text-align: centru; font-size: 14px;
Mult mai bine. Am făcut legăturile de meniu frumoase și mari (citiți mai multe despre dimensiunile țintă atingute pe propriul blog al lui Luke Wroblewski) și ați stabilit încă o dată : focus pentru feedback-ul utilizatorului.
De asemenea, este clar că am inclus o legătură "de sus" care va duce utilizatorii înapoi în partea de sus a paginii, dacă este necesar.
OK, ne-am ocupat de aspectul nostru simplu de telefonie mobilă, deci acum este timpul pentru o îmbunătățire progresivă. Vom folosi interogările media pentru a determina momentul în care aspectul nostru mobil nu mai este potrivit.
Dar în ce moment devine inadecvat? Există numeroase moduri de a aborda interogările media, dar vom lucra pe baza faptului că un port de vizualizare mobil este de 320 x 480 pixeli. Are lățimea de 320 de pixeli atunci când este văzută în portret, lățimea de 480 de pixeli atunci când este vizualizată în peisaj, astfel încât am putea stabili în mod justificat prima noastră interogare media pentru a detecta orice ecran mai mare de 480 px.
Cu toate acestea, următorul pas în sus este probabil tableta. IPad-ul are o rezoluție de 980px x 768px, deci putem presupune în siguranță că orice aspect mai mic decât 768px este potrivit pentru aspectul nostru mobil. Orice mai mare decât 768 pixeli poate gestiona mai multe layout-uri de navigare asemănătoare desktop-ului.
Prin urmare, putem începe să adăugăm reguli, deci să formăm o interogare media:
/ * interogări media * / numai în ecranul @media și (min-width: 768px)
Această interogare media va rula toate stilurile conținute în el atunci când portul de vizualizare are o lățime de cel puțin 768 de pixeli. Rețineți includerea numai , care asigură că Internet Explorer 8 nu se confundă cu toate și încearcă să proceseze interogarea. Vedeți explicația mea anterioară pentru detalii.
Să eliminăm lucrurile făcând clic pe butonul "meniu" dispărut:
numai ecranul @media și (min-width: 768px) a.to_nav display: none;
Cu ajutorul browserului ușor mai larg, butonul de meniu nu mai este afișat.
Acum trebuie să aducem navigarea primară în partea de sus a paginii. Vom face asta prin eliminarea din fluxul de documente, poziționându-l absolut în partea de sus.
numai ecranul @media și (min-width: 768px) a.to_nav display: none; .wrapper poziție: relativă; lățime: 768px; marja: auto; #primary_nav position: absolute; top: 5px; dreapta: 10px; fundal: nici unul; #primary_nav li afișare: inline; #primary_nav li a float: stânga; frontieră: nici una; umplutură: 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; raza de graniță: 2px;
Pentru ca acest lucru să fie posibil, trebuie să facem în primul rând părintele (.învelitoare) relativ poziționat. Putem face asta aici în interogarea mass-media sau vom determina asta la începutul foii de stil.
Odată ce meniul este poziționat absolut, trebuie să eliminăm o parte din stilul de ancorare. Nu este prea mult de făcut, dar avem nevoie de elementele din listă pentru a fi afișate în linie și trebuie să scoatem marginile și căptușelile exagerate de la ancore. Stările de hover pe care le-am dictat mai devreme sunt desigur bine, deci nu trebuie să le schimbăm.
Dacă ați fost atenți, ați observat că avem încă un link "de sus" în navigație - nu avem nevoie de asta?
Putem elimina acest lucru în mai multe moduri, dar suntem siguri de ceea ce se întâmplă să adăugăm mai întâi o clasă la articolul din listă:
Și apoi putem să scăpăm de ea în cadrul interogării noastre media:
#primary_nav li.top display: none;
Asta e! Există o mulțime de modalități de a construi această idee (punerea în aplicare a pictogramei de listă fiind una singură) și, bineînțeles, puteți continua să adăugați interogări media pentru a răspunde la ecrane în creștere. Sperăm că aveți acum temelia de a face acest lucru. Am creat o navigație simplă, receptivă, touch-friendly, de la o primă abordare mobilă, punând accentul pe conținut și pe utilizare. Cine poate cere mai mult?!
Câteva linkuri utile menționate în tutorial, toate incluse într-o listă utilă:
Există o mulțime de șabloane de proiectare mobile disponibile pe Envato Market pentru utilizare imediată în proiectele dvs..
De exemplu, mai întâi este o temă de bază pentru aplicații / administrații de web pentru mobil, cu un interfață utilă pe platformă Bootstrap 3. Este ușor, dar cu multe componente potrivite nevoilor dvs. De asemenea, este pe deplin receptiv, iar widget-urile și componentele sunt mobile în primul rând.
prima - Tema aplicației Mobile First Web
