Știri și logouri responsabile - Sfaturi și capcane

Conceptul de web design receptiv a pătruns pe web și a devenit o bază pentru dezvoltatorii frontend. Nu există nici o denigrare a valorii designului receptiv în lumea modernă, dar există unele dificultăți în înțelegerea pe deplin a modului în care să se elaboreze planurile receptive.

Subiectul ar putea merge mai departe, deoarece există atât de multe domenii unice ale unui site web, dar concentrarea asupra elementelor individuale vă poate ajuta să înțelegeți mai bine obiectivele unui utilizator și cum pot fi realizate aceste obiective cu un design receptiv.

Aș vrea să mă acopăr sfaturi de design pentru anteturi, logo-uri, și meniuri de navigare, deoarece acestea aparțin unui design receptiv. Luați aceste sugestii pe măsură ce se aplică lucrului dvs. și asigurați-vă că vă proiectați interfețele cu comportamentul utilizatorilor în minte.

Thinner Navbars

Pe ecrane mari, este normal să aveți antete mari, poate chiar și antete supradimensionate, cu niveluri de legătură pe mai multe niveluri. Ecranele mai mici însă nu au același spațiu și ar trebui restricționate după cum este necesar.

De obicei, există aplicații mobile native anteturile fixe, aceasta este o practică obișnuită în designul receptiv. Un antet fix ar trebui, de asemenea, să se micșoreze atunci când pe dispozitive mai mici: acest lucru lasă mai mult spațiu pentru conținut, dar le oferă cititorilor acces direct la antet și navigație.

Luați, de exemplu, aspectul Cartoon Brew pe un monitor de dimensiuni mari și pe un dispozitiv mobil.

La punctul de întrerupere de 600px, navigația se micșorează la aproape jumătate din înălțimea paginii. Acest lucru face atât logo-ul, cât și meniul clic clic pe nav mai mici, dar ele sunt mult mai proporționale la spațiul relativ al ecranului.

De asemenea, considera ca Cartoon Brew are o cutie drop-down ca meniu receptiv pe ecranul mobil. Asta înseamnă asta suprapune conținutul pe pagina când este deschisă, deci este important să lăsați mult spațiu pentru asta.

Un exemplu similar poate fi găsit pe site-ul Jacksonville Art Walk. Navbar-ul de top rămâne fixat în timp ce derulează, dar se scade pe dispozitive mai mici. Acest lucru este mai bine pentru un design sensibil, deoarece subbarul mai subțire lasă mai mult spațiu pentru conținut pe un ecran mobil mai mic.

Fiecare link din navbar are o pictogramă asociată atașată la link-ul de text. Acest lucru arată grozav pe un monitor cu ecran lat, dar este prea detaliat pentru ecrane mai mici.

Navigarea Art Walk se schimbă într-un meniu derulant cu legături fixe în jurul punctului de întrerupere de 770px. Pictogramele sunt ascunse în meniul drop-down, deoarece ar fi prea mici și prea înghesuite pe dispozitivele mai mici.

Atunci când proiectați un antet receptiv, ia în considerare întotdeauna spațiul total de pe ecran în timp ce styling-ul navbar. Dacă nu doriți ca antetul să rămână fix, care este absolut perfect, dar totuși doriți să faceți asta micșorați-l puțin pentru a salva camera în partea de sus a paginii.

Iconifici Logo-ul

Cele mai multe logo-uri încorporează un text și o pictogramă sau grafică pentru a reprezenta marca. Asta înseamnă că poți oricând iconify (da, este un cuvânt real) astfel de logouri până la un simbol a versiunii complete.

Aceasta este o tehnică puternică pentru anteturile receptive deoarece nu există întotdeauna suficient spațiu pentru un logo complet. Veți pierde o parte din strălucirea și strălucirea unui logo de dimensiune completă, dar acesta este prețul pe care ar trebui să-l plătiți pentru un aspect curat receptiv.

Verificați logo-ul Web Designer News și vedeți cum se schimbă în timp ce redimensionați browserul.

Poate că nu toată lumea va recunoaște acea pictogramă la prima vizită la site, dar datorită recunoasterea formelor aceasta nu este o problemă enormă.

Oamenii au fost pe internet suficient de lungi pentru a ști că colțul din stânga sus al paginii este de obicei rezervat unui logo. Această pictogramă roz roz este de asemenea folosită în favicon, astfel încât este ușor să faceți niște concluzii fără a sapa prea mult pe site.

Nu trebuie întotdeauna să vă bazați pe grafica pentru această tehnică a logo-ului condensat. Antetul lui Young and Hungry folosește un logo verde strălucitor pentru logo-ul care în cele din urmă se condensează la textul "Y & H".

Cu toate acestea, este posibil ca acest lucru să nu funcționeze pentru fiecare site dacă marcajele nu sunt ușor de recunoscut ca litere singulare. Dar merge pentru a arăta acele logouri poate fi simplificată în ambele grafică și text, și ambele variante ocupă mai puțin spațiu pe ecrane mai mici.

Manipularea fundalurilor pe întreg ecranul

Multe pagini de destinație utilizează fundal pe ecran complet pentru a atrage mai multă atenție. Aceasta este o tehnică puternică, dar adesea funcționează cel mai bine pe monitoarele mari.

Deci cum te descurci cu asta pe un ecran mai mic? În general, și designeri eliminați imaginea de fundal după o anumită pauză sau imaginea în sine se aliniază pentru a se potrivi în fereastră.

Cap Radio Raffle folosește această tehnică pe pagina lor de pornire. Imaginea de fundal păstrează punctul focal în vedere în orice moment, indiferent cât de mult este redimensionat ecranul.

Acest tip de soluție de obicei necesită o anumită poziționare CSS dar este foarte simplu atunci când te obișnuiești. Doar păstrați punctul focal în vedere în orice moment și redimensionați containerul imaginii pentru a se potrivi proporțional cu dispozitivul.

Dincolo de fundaluri mari din motive estetice, puteți utiliza și imagini mari pentru conținutul paginii. Pagina de pornire a lui Mashable folosește un fundal de imagine prezentat pentru povestea de sus care acoperă întregul aspect.

Aspectul lor receptiv comprimă imaginea in timp ce păstrând un punct focal central. Este dificil să faceți acest lucru deoarece imaginea prezentată se schimbă atunci când povestea se schimbă, astfel încât fotografiile trebuie să fie curate cu atenție. Soluția lui Mashable este încă o metodă excelentă de a gestiona fotografii pe ecran complet pentru bloguri și machete de reviste atunci când sunt proiectate corespunzător.

Simplificați navigația

Când revizuiți ecranele mai mici, păstrați cât mai multe legături posibil în navigare și face ușor accesibil. Aceasta înseamnă că este posibil să aveți nevoie să ștergeți câteva linkuri dacă aveți meniuri derulante pe mai multe niveluri.

Deși, dacă aveți strategia potrivită, este posibil să păstrați în timp real toate dropdown-urile. De exemplu, Kidscreen utilizează a meniul derulant cu săgeți mici indicând sublinierea din meniul receptiv.

Mulți oameni se opun meniului hamburger, dar am ajuns să-l accept ca un element necesar pentru meniurile de lungă durată. Funcționează pur și simplu, și a devenit pe larg înțeleasă de majoritatea utilizatorilor de smartphone-uri ca "butonul de meniu".

De fapt, ați fi greu să găsiți un site receptiv care să nu se bazeze pe meniul de hamburger de trei baruri. CyberChimps este un exemplu excelent utilizează un dropdown vertical mai degrabă decât un slide-in.

Structura de navigare pentru CyberChimps este rearanjată pentru a aluneca în partea de sus a paginii. Meniul scade de sus cu elemente de bloc mari pentru legături.

Cu mai multă zonă pentru a face clic și text de legătură mai mare, procesul de navigare a paginilor devine mult mai simplu. Urmăriți această filozofie cu întregul antet receptiv, iar proiectele dvs. se vor îmbunătăți drastic.

Construiește-ți propriul

Cu aceste sfaturi la dispoziția dumneavoastră nu ar trebui să fie nici o problemă construirea de anteturi sensibile utilizabile. Deși există o mulțime de instrumente pentru a vă ajuta, singura modalitate de a înțelege cu adevărat este prin practică.

Deci, luați aceste tehnici împreună cu dvs. și începeți să construiți site-uri web! Am enumerat, de asemenea, o mână de resurse suplimentare pentru anteturile receptive pe care le puteți verifica mai jos.

• Creați un meniu de navigare cu răspuns mobil CSS de bază (Teamtreehouse.com)
• Cele mai bune practici pentru site-ul Responsive Header (Ux.stackexchange.com)
• Cum pot face ca imaginea antetului să răspundă în mod corespunzător? (Stackoverflow.com)