Reagovat záhlaví a loga - tipy a nástrahy

Pojem citlivý web design pronikl na web a stal se základem vývojářů frontendu. V moderním světě není odepření hodnoty responzivního designu, ale je zde obtížné plně pochopit, jak správně navrhovat citlivé rozvržení.

Téma by mohlo jít dál, protože existuje tolik jedinečných oblastí webové stránky, ale zaměření na jednotlivé prvky vám může pomoci lépe porozumět cílům uživatele a jak lze tyto cíle dosáhnout s citlivým designem.

Chtěl bych to zakrýt design tipy pro záhlaví, loga, a navigačních menu, protože se týkají citlivého designu. Vezměte si tyto návrhy, protože se vztahují na vaši vlastní práci a nezapomeňte navrhnout rozhraní s ohledem na chování uživatelů.

Tenčí Navbarové

Na velkých obrazovkách je normální mít velké záhlaví, možná i nadměrné záhlaví s víceúrovňovými linkami. Menší obrazovky však nemají stejný prostor a měly by být podle potřeby omezeny.

Protože nativní mobilní aplikace mají obvykle pevné záhlaví, toto je běžná praxe také v responzivním designu. Pevná záhlaví by se také měla zmenšit v menších zařízeních: to ponechává větší prostor pro obsah, ale stále dává čtenářům přímý přístup k hlavičce a navigaci.

Vezměte si například rozložení Cartoon Brew na monitoru plné velikosti a na mobilním zařízení.

Při zarážce 600px se navigace zmenší na téměř polovinu své výšky na stránce. Tím se zmenší logo i klikatelná navigační nabídka, ale jsou to mnohem proporcionálnější relativní prostor obrazovky.

Také si uvědomte, že Cartoon Brew má rozbalovací nabídku jako citlivé menu na mobilní obrazovce. To znamená překrývá obsah na stránce, když je otevřen, takže je důležité ponechat na to dostatek místa.

Podobný příklad lze nalézt na webových stránkách Jacksonville Art Walk. Horní navigační lišta zůstane při posouvání pevná, ale zmenšuje na menších zařízeních. To je lepší pro citlivý design, protože tenčí navbar ponechává větší prostor pro obsah na menší mobilní obrazovce.

Každý odkaz na navigační liště má k textovému odkazu připojenou ikonu. To vypadá skvěle na širokoúhlém monitoru, ale je to příliš podrobné pro menší obrazovky.

Navigace Art Walk se změní na rozevírací nabídku s pevnými odkazy kolem bodu zlomu 770px. Ikony jsou v rozevírací nabídce skryté, protože na menších zařízeních by byly příliš malé a příliš stísněné.

Při návrhu citlivé hlavičky vždy zvážit celkový prostor na obrazovce zatímco styling navbar. Pokud nechcete, aby záhlaví zůstalo pevné, to je naprosto v pořádku, ale stále budete chtít trochu to zmenšit Chcete-li ušetřit místo v horní části stránky.

Ikonify Logo

Většina log obsahuje nějaký text a ikonu nebo grafiku, která představuje značku. To znamená, že můžete vždy ikony (ano, je to skutečné slovo) tento druh log dolů na symbol jeho plné verze.

To je mocná technika pro citlivé záhlaví, protože tam není vždy dost místa pro plné logo. Ztratíte některý z glitz a glamour loga plné velikosti, ale to je cena, kterou budete muset zaplatit za čisté rozvržení.

Podívejte se na logo pro Web Designer News a uvidíte, jak se mění při změně velikosti prohlížeče.

Možná ne každý pozná tuto ikonu při první návštěvě webu, ale díky rozpoznávání vzorů to není obrovský problém.

Lidé byli na internetu dostatečně dlouho, aby věděli, že levý horní roh stránky je obvykle vyhrazen pro logo. Tato malá růžová ikona je také používána ve favicon, takže je snadné udělat nějaké závěry, aniž byste se museli kopat příliš daleko.

Pro tuto techniku ​​zhuštěného loga se nemusíte vždy spoléhat na grafiku. Záhlaví Young And Hungry používá pro loga jasně zelený text, který nakonec kondenzuje na text "Y&H".

Udělené to nemusí fungovat pro všechny stránky, pokud branding není snadné rozpoznat jako jednotlivé dopisy. Ale ukazuje to loga být jednodušší do grafiky i textu a do obou variant zabírají méně místa na menších obrazovkách.

Manipulace na pozadí celé obrazovky

Mnoho vstupních stránek používá pozadí celé obrazovky k tomu, aby přitáhlo více pozornosti. Jedná se o výkonnou techniku, ale často funguje nejlépe na velkých monitorech.

Jak to tedy zvládnete na menší obrazovce? Obecně platí, že návrháři buď obrázek na pozadí za určitý bod zlomu nebo samotný obrázek dostane přesměrován se vejdou do okna.

Cap Radio Raffle používá tuto techniku ​​na své domovské stránce. Obrázek na pozadí udržuje kontaktní místo po celou dobu, bez ohledu na velikost obrazovky.

Tento typ řešení typicky vyžaduje určité umístění CSS ale je to opravdu jednoduché, když se na to dostanete. Prostě udržet ohnisko po celou dobu a velikost obrazového kontejneru přizpůsobit se zařízení.

Kromě velkých pozadí z estetických důvodů můžete také použít velké obrázky pro obsah stránky. Domovská stránka společnosti Mashable používá na pozadí nejlepší příběh, který pokrývá celé rozvržení.

Jejich citlivé rozvržení komprimuje obraz zatímco vedení centrálního kontaktního místa. Je to obtížné, protože to se změnilo, když se příběh mění, takže fotografie musí být pečlivě kurátovány. Řešení společnosti Mashable je stále skvělou metodou zpracování fotografií na celé obrazovce pro blogy a rozvržení časopisů, pokud jsou správně navrženy.

Zjednodušte navigaci

Při přepracování pro menší obrazovky, udržet co nejvíce odkazů v navigaci a snadno přístupné. To znamená, že pokud budete mít víceúrovňové rozbalovací nabídky, budete možná muset přejít na několik odkazů.

I když máte správnou strategii, je stále možné udržet všechny výpadky v kontaktu. Například Kidscreen používá a flyout menu s malými šipkami ikon indikaci sublinků v citlivé nabídce.

Mnoho lidí argumentuje proti hamburger menu, ale já jsem přišel přijmout to jako nezbytnou položku pro dlouhé menu. Je to prostě funguje a většina uživatelů smartphonů je široce chápána jako "tlačítko menu".

Ve skutečnosti by bylo těžké najít citlivé stránky, které nespoléhají na tříbarevné menu hamburger. CyberChimps je skvělým příkladem používá vertikální rozevírací seznam místo zasouvání.

Navigační struktura pro CyberChimps se přeskupí tak, aby se posunula dolů v horní části stránky. Menu klesá shora velké blokové prvky pro spoje.

S klikněte na více oblastí a větší text odkazu, proces navigace stránek je mnohem jednodušší. Snažte se tuto filosofii sledovat s celou citlivou hlavičkou a vaše návrhy se výrazně zlepší.

Postav si svůj

S těmito tipy k dispozici, že by neměl být žádný problém budování použitelné citlivé záhlaví. I když existuje spousta nástrojů, které vám pomohou ven, jediný způsob, jak opravdu pochopit, je skrze praxi.

Takže si tyto techniky s sebou a začít budovat webové stránky! Také jsem uvedl několik dalších zdrojů pro citlivé záhlaví, které si můžete prohlédnout níže.

• Vytvořte základní menu pro mobilní navigaci CSS (teamtreehouse.com)
• Nejlepší praxe pro citlivé webové stránky záhlaví (ux.stackexchange.com)
• Jak mohu nastavit, aby byl obraz záhlaví správně reagující? (stackoverflow.com)