Odgovarajući zaglavlja i logotipi - Savjeti i zamke

Koncept prilagodljivog web dizajna prožimao je web i postao glavno sredstvo za razvojne programere. Ne može se poreći vrijednost prilagodljivog dizajna u suvremenom svijetu, ali postoje neke poteškoće u razumijevanju kako pravilno dizajnirati odgovarajući raspored.

Tema može trajati dugotrajno jer postoji toliko mnogo jedinstvenih područja web-lokacije, ali fokusiranje na pojedine elemente može vam pomoći da bolje razumijete ciljeve korisnika i kako se ti ciljevi mogu postići uz odgovarajući dizajn.

Htio bih pokriti savjeti za dizajn za zaglavlja, logotipe, i navigacijski izbornici, kao što se odnose na odgovarajući dizajn. Uzmite ove prijedloge dok se primjenjuju na vlastiti rad i budite sigurni da dizajnirate sučelja s obzirom na ponašanje korisnika.

Razrjeđivač Navbara

Na velikim ekranima normalno je imati velika zaglavlja, možda čak i prevelike zaglavlja s višeslojnim razinama veza. No, manji ekrani nemaju isti prostor i trebaju biti ograničeni prema potrebi.

Budući da uobičajene mobilne aplikacije obično imaju fiksna zaglavlja, to je uobičajena praksa u odgovornom dizajnu. Fiksno zaglavlje također treba smanjiti kada je na manjim uređajima: to ostavlja više prostora za sadržaj, ali i dalje daje čitateljima izravan pristup zaglavlju i navigaciji.

Uzmite primjerice raspored Cartoon Brew na monitoru pune veličine i na mobilnom uređaju.

Na točci prekida od 600 piksela navigacija se smanjuje na gotovo polovicu svoje visine na stranici. To čini i logotip i navigacijski izbornik manjim, ali oni su mnogo više proporcionalno na relativni prostor zaslona.

Također razmislite da Cartoon Brew ima padajući okvir kao odgovarajući izbornik na mobilnom zaslonu. To znači sadržaj slojeva na stranici kada je otvorena, pa je važno ostaviti dovoljno mjesta za to.

Sličan primjer možete pronaći na web-mjestu Jackson Walk Art Walk. Gornja navigacijska traka ostaje fiksna tijekom pomicanja, ali smanjuje se na manje uređaje. Ovo je bolje za odgovarajući dizajn jer je tanji navbar ostavlja više prostora za sadržaj na manjem zaslonu za mobilne uređaje.

Svaka veza u navigacijskoj traci ima povezanu ikonu povezanu s tekstualnom vezom. Ovo izgleda sjajno na monitoru sa širokim zaslonom, ali je previše detaljno za manje zaslone.

Navigacija Art Walk mijenja se u padajući izbornik s fiksnim vezama oko 770 piksela. Ikone su skrivene u padajućem izborniku jer bi bile premale i previše skučene na manjim uređajima.

Kada dizajnirate odgovarajući zaglavlje uvijek razmislite ukupni prostor zaslona dok styling navbar. Ako ne želite da zaglavlje ostane nepromijenjeno, to je sasvim u redu, ali ipak želite smanjiti ga malo da biste uštedjeli sobu na vrhu stranice.

Iconify Logo

Većina logotipa sadrži neki tekst i ikonu ili grafiku za predstavljanje marke. To znači da uvijek možete ikonizirati (da, to je prava riječ) ovu vrstu logotipa do simbola njegove pune verzije.

Ovo je snažna tehnika za reagiranje zaglavlja jer nema dovoljno mjesta za potpuni logotip. Izgubili ste dio glamura logotipa u punoj veličini, ali to je cijena koju ćete možda morati platiti za čisti odgovarajući izgled.

Pogledajte logo za Web Designer News i pogledajte kako se mijenja dok mijenjate veličinu preglednika.

Možda neće svi prepoznati tu ikonu kada prvi put posjete stranicu, ali zahvaljujući prepoznavanje uzorka ovo nije veliki problem.

Ljudi su bili na internetu dovoljno dugo da znaju da je gornji lijevi kut stranice obično rezerviran za logotip. Ova mala ružičasta ikona također se koristi u faviconu, tako da je lako napraviti neke zaključke bez kopanja predaleko u stranicu.

Ne morate uvijek računati na grafiku za ovu kondenziranu logotipnu tehniku. Zaglavlje Young and Hungry koristi svijetli zeleni tekst za logotip koji se konačno svodi na tekst "Y&H"..

Odobreno ovo možda neće raditi za svaku web-lokaciju ako brandiranje nije lako prepoznati kao pojedinačna slova. Ali to pokazuje da je to logotip može biti jednostavnije u obje grafike i tekst i obje varijante zauzimaju manje prostora na manjim zaslonima.

Rukovanje pozadinama na cijelom zaslonu

Mnoge odredišne ​​stranice koriste pozadinu cijelog zaslona kako bi privukle više pozornosti. To je moćna tehnika, ali često najbolje radi na velikim monitorima.

Kako se nositi s tim na manjem zaslonu? Općenito, dizajneri uklonite pozadinsku sliku prošli određenu točku prekida ili samu sliku dobiva prepravljen da stane u prozor.

Cap Radio Raffle koristi ovu tehniku ​​na svojoj početnoj stranici. Pozadinska slika zadržava žarišnu točku u vidu u svakom trenutku, bez obzira na veličinu zaslona.

Ova vrsta rješenja tipično zahtijeva određeno CSS pozicioniranje ali to je stvarno jednostavno kada se to obuzda. Samo zadržati žarišnu točku u vidu u svakom trenutku, i promijenite veličinu spremnika za slike kako bi odgovarao uređaju.

Izvan velikih pozadina iz estetskih razloga, možete koristiti i velike slike za sadržaj stranice. Mashableova početna stranica koristi istaknutu pozadinsku sliku za gornju priču koja obuhvaća cijeli izgled.

Njihov odgovarajući raspored komprimira sliku dok zadržati središnju točku. To je teško učiniti jer se prikazana slika mijenja kad se priča promijeni pa fotografije moraju biti pažljivo kurirane. Mashable rješenje je još uvijek odličan način rukovanja fotografijama preko cijelog zaslona za blogove i izglede časopisa kada je pravilno dizajniran.

Pojednostavite navigaciju

Prilikom obnavljanja za manje zaslone, zadržite što je moguće više veza u navigaciji i lako pristupačan. To znači da ćete možda morati odbaciti nekoliko veza ako imate padajuće izbornike s više razina.

Iako, ako imate pravu strategiju, još uvijek je moguće zadržati sve padove u taktovima. Na primjer, Kidscreen koristi a izbornik s malim ikonama strelica koji ukazuje na sublinkove u odgovarajućem izborniku.

Mnogi se prepiru protiv menija hamburgera, ali sam ga došao prihvatiti kao potrebnu stavku za dugačke navigacijske izbornike. Jednostavno radi i većina korisnika pametnih telefona postala je široko prihvaćena kao "gumb izbornika".

Zapravo, teško ćete pronaći odgovarajući site koji se ne oslanja na izbornik s hamburgerima s tri trake. CyberChimps je izvrstan primjer toga koristi okomiti padajući izbornik umjesto slajdova.

Struktura za navigaciju za CyberChimps se preraspodjeljuje kako bi se spustila na vrh stranice. Izbornik pada s gornje strane veliki blokovi za veze.

S više područja za klik i veći link teksta, proces kretanja stranicama postaje mnogo jednostavniji. Nastojte slijediti ovu filozofiju s cijelim odgovornim zaglavljem, a vaš će se dizajn drastično poboljšati.

Izgradite svoje

S ovim savjetima na raspolaganju vam ne bi trebalo biti problema pri izgradnji korisnih odgovarajućih zaglavlja. Iako postoji mnogo alata koji će vam pomoći da izađete, jedini način da doista shvatite je kroz praksu.

Zato uzmite ove tehnike sa sobom i počnite graditi web stranice! Također sam naveo nekoliko dodatnih resursa za odgovorne zaglavlja koje možete pogledati u nastavku.

• Stvorite osnovni mobilni CSS odgovarajući navigacijski izbornik (Teamtreehouse.com)
• Najbolja praksa za odgovorno zaglavlje web-mjesta (Ux.stackexchange.com)
• Kako mogu ispravno odgovoriti na sliku zaglavlja? (Stackoverflow.com)