Responsive Headers & Logos - Tips och fallgropar

Konceptet med lyhörd webbdesign har genomträngt nätet och blir en häftklammer för frontendutvecklare. Det är inte att neka värdet av lyhörd design i den moderna världen, men det finns vissa svårigheter att förstå hur man utformar responsiva layouter ordentligt.

Ämnet kan fortsätta på längden eftersom det finns så många unika områden på en webbplats, men att fokusera på enskilda element kan hjälpa dig att bättre förstå målen för en användare och hur dessa mål kan uppnås med responsiv design.

Jag skulle vilja täcka designtips för rubriker, logotyper, och navigeringsmenyer, som de avser responsiv design. Ta dessa förslag som de gäller för ditt eget arbete och var noga med att utforma dina gränssnitt med användarbeteendet i åtanke.

Tunna Navbars

På stora skärmar är det normalt att ha stora rubriker, kanske till och med överdimensionerade rubriker med flera nivåer. Men mindre skärmar har inte samma utrymme och bör begränsas efter behov.

Eftersom inhemska mobilappar har typiskt fasta rubriker, det här är vanligt i responsiv design också. En fast rubrik bör också krympa ner när det gäller mindre enheter: det ger mer utrymme för innehåll, men ger fortfarande läsare direkt tillgång till rubriken och navigering.

Ta till exempel Cartoon Brew-layouten på en fullskärmsskärm och på en mobilenhet.

Vid 600px brytpunkten krymper navigeringen till nästan hälften av höjden på sidan. Detta gör både logotypen och den klickbara navmenyn mindre, men de är mycket mer proportionell till det relativa skärmutrymmet.

Tänk också på att Cartoon Brew har en rullgardinsmeny som mottaglig meny på mobil skärm. Det betyder det överlagringsinnehåll på sidan när den öppnas, så det är viktigt att lämna gott om plats för detta.

Ett liknande exempel finns på Jacksonville Art Walk-webbplatsen. Den högsta navbarmen håller sig fast medan du bläddrar men krymper ner på mindre enheter. Detta är bättre för lyhörd design eftersom den tunnare navbaren lämnar mer utrymme för innehåll på en mindre mobil skärm.

Varje länk i nav nav har en relaterad ikon kopplad till textlänken. Det här ser bra ut på en widescreen-skärm men den är för detaljerad för mindre skärmar.

Art Walk-navigeringen ändras till en rullgardinsmeny med fasta länkar runt 770px-brytpunkten. Ikonerna är gömda i rullgardinsmenyn eftersom de skulle vara för små och för trånga på mindre enheter.

När du utformar en lyhörd huvud ska du alltid överväga övergripande skärmutrymme medan navigeringen stylas. Om du inte vill att rubriken ska vara fast är det helt bra, men du kanske fortfarande vill krympa det lite för att spara utrymme högst upp på sidan.

Iconify logotypen

De flesta logotyper innehåller lite text och en ikon eller grafik som representerar varumärket. Det betyder att du alltid kan ikonifiera (ja det är ett riktigt ord) den här typen av logotyper ner till en symbol av sin fulla version.

Detta är en kraftfull teknik för lyhörda rubriker eftersom det inte alltid finns tillräckligt med utrymme för en fullständig logotyp. Du förlorar lite glans och glamour i en fullstorlogotyp, men det är det pris du kan behöva betala för en ren, responsiv layout.

Kolla in logotypen för Web Designer News och se hur det ändras när du ändrar webbläsaren.

Kanske inte alla kommer att känna igen den ikonen när de besöker webbplatsen, men tack vare mönsterigenkänning detta är inte ett stort problem.

Människor har varit tillräckligt länge på Internet för att veta att sidans övre vänstra hörn är vanligtvis reserverad för en logotyp. Den här lilla rosa ikonen används också i favicon, så det är lätt att göra några slutsatser utan att gräva för långt in på webbplatsen.

Du behöver inte alltid lita på grafik för denna kondenserade logoteknik. Rubriken Young och Hungry använder ljusgrön text för logotypen som slutligen kondenserar till texten "Y & H".

Beviljas detta kanske inte fungerar för varje webbplats om varumärket inte är lätt att känna igen som enstaka bokstäver. Men det går att visa att logotyperna kan göras enklare in i både grafik och text och båda varianterna ta upp mindre utrymme på mindre skärmar.

Hantering av fullskärmsbakgrund

Många målsidor använder fullskärmsbakgrund för att uppmärksamma mer. Detta är en kraftfull teknik men fungerar ofta bäst på stora skärmar.

Så hur hanterar du detta på en mindre skärm? Generellt sett designers heller ta bort bakgrundsbilden förbi en viss brytpunkt, eller själva bilden får justeras att passa i fönstret.

Cap Radio Raffle använder den här tekniken på deras hemsida. Bakgrundsbilden håller fokuspunkten i sikte hela tiden, oavsett hur mycket skärmen ändras.

Denna typ av lösning vanligtvis kräver lite CSS-positionering men det är väldigt enkelt när du hänger på det. Bara behåll kontaktpunkten i sikte hela tiden, och ändra storlek på bildbehållaren att passa i proportion med enheten.

Utöver stora bakgrunder av estetiska skäl kan du också använda stora bilder för sidinnehåll. Mashables hemsida använder en utmärkad bildbakgrund för den bästa historien som spänner över hela layouten.

Deras responsiva layout komprimerar bilden medan hålla en central kontaktpunkt. Det är svårt att göra detta eftersom den presenterade bilden ändras när historien ändras, så bilderna måste kurateras noggrant. Mashables lösning är fortfarande en utmärkt metod för hantering av helskärmsfoton för bloggar och tidskriftslayouter när de utformas ordentligt.

Förenkla navigationen

Vid ombyggnad för mindre skärmar, behåll så många länkar som möjligt i navigeringen och gör det lättillgängligt. Det innebär att du kan behöva dike några länkar om du har flera menyns rullgardinsmenyer.

Även om du har rätt strategi är det fortfarande möjligt att hålla alla dropdowns in-tact. Till exempel använder Kidscreen a flyout-menyn med små pilikoner vilket indikerar underlänkar i den responsiva menyn.

Många argumenterar mot hamburgermenyn men jag har kommit för att acceptera det som ett nödvändigt föremål för långa navmenyer. Det fungerar helt enkelt och har blivit mycket uppfattat av de flesta smartphone-användare som "menyknappen".

Faktum är att du skulle vara hårt pressad för att hitta en mottaglig webbplats som inte är beroende av trebarbar hamburgare menyn. CyberChimps är ett bra exempel på det använder en vertikal nedrullning snarare än en inskjutning.

Navigationsstrukturen för CyberChimps blir omplacerad för att glida ner ovanpå sidan. Menyn faller från ovan med stora blockelement för länkar.

Med mer område att klicka på och större länktext, processen med att navigera sidor blir mycket enklare. Syfta att följa den här filosofin med hela din responsiva rubrik, och dina mönster kommer att förbättras drastiskt.

Bygg ditt eget

Med dessa tips till ditt förfogande borde det inte vara något problem att bygga användbara svarsfulla rubriker. Medan det finns många verktyg för att hjälpa dig, är det enda sättet att verkligen förstå genom övning.

Så ta dessa tekniker med dig och börja bygga webbplatser! Jag har också listat en handfull ytterligare resurser för lyhörda rubriker som du kan kolla nedan.

• Skapa en Basic Mobile CSS Responsive Navigation Meny (Teamtreehouse.com)
• Bästa praxis för Responsive Website Header (Ux.stackexchange.com)
• Hur kan jag göra mitt huvudrubrik korrekt mottagande? (Stackoverflow.com)