Responsive Headers & Logos - Tips og faldgruber

Konceptet med lydhurtigt webdesign har gennemsyret nettet, og bliver en hæfteklamme til frontend-udviklere. Der er ingen benægtelse af værdien af ​​lydhør design i den moderne verden, men der er nogle vanskeligheder, der fuldt ud forstår, hvordan man konstruerer responsive layout korrekt..

Emnet kunne fortsætte, fordi der er så mange unikke områder på et websted, men at fokusere på individuelle elementer kan hjælpe dig med bedre at forstå målene for en bruger, og hvordan disse mål kan opnås med lydhør design.

Jeg vil gerne dække design tips til overskrifter, logoer, og navigationsmenuer, som de vedrører lydhør design. Tag disse forslag, som de gælder for dit eget arbejde, og sørg for at designe dine grænseflader med brugeradfærd i tankerne.

Tyndere Navbars

På store skærmbilleder er det normalt at have store overskrifter, måske endda oversized headers med multi-level link tiers. Men mindre skærme har ikke samme plads og bør begrænses efter behov.

Da indbyggede mobilapps typisk har faste overskrifter, Dette er også almindelig praksis i responsivt design. Et fast overskrift Skal også falde ned når på mindre enheder: dette giver mere plads til indhold, men giver stadig læsere direkte adgang til overskriften og navigationen.

Tag for eksempel Cartoon Brew-layoutet på en skærm i fuld størrelse og på en mobil enhed.

Ved 600px brydepunktet krymper navigationen til næsten halvdelen af ​​dens højde på siden. Dette gør både logoet og den klikbare nav menu mindre, men de er meget mere proportional til det relative skærmrum.

Overvej også at Cartoon Brew har en dropdown boks som lydhør menu på mobil skærmen. Det betyder det overlejringer indhold på siden, når den åbnes, så det er vigtigt at efterlade masser af plads til dette.

Et lignende eksempel findes på Jacksonville Art Walk-webstedet. Den øverste navbar forbliver fast, mens du ruller men krymper ned på mindre enheder. Dette er bedre for lydhørt design, fordi den tyndere navbar giver mere plads til indhold på en mindre mobil skærm.

Hvert link i navbjælken har et tilknyttet ikon knyttet til tekstlinket. Dette ser godt ud på en widescreen-skærm, men den er for detaljeret til mindre skærme.

Art Walk navigationen ændres til en dropdown menu med faste links omkring 770px breakpoint. Ikonerne er skjult i dropdown-menuen, fordi de ville være for små og for trange på mindre enheder.

Når du designer en responsiv overskrift, skal du altid overveje samlet skærmrum mens styling navbjælken. Hvis du ikke vil have overskriften til at blive fast, er det helt fint, men du vil stadig gerne krymp det lidt for at gemme plads øverst på siden.

Iconify Logo

De fleste logoer indeholder nogle tekst og et ikon eller grafik til at repræsentere mærket. Det betyder at du altid kan minimeringsknappen (ja det er et rigtigt ord) denne slags logoer ned til et symbol af sin fulde version.

Dette er en kraftfuld teknik til lydhøre, fordi der ikke altid er plads nok til et fuldt logo. Du mister noget af glitter og glamour i et logo i fuld størrelse, men det er den pris, du måtte betale for et rent responsivt layout.

Tjek logoet til Web Designer News og se, hvordan det ændrer sig, når du ændrer størrelsen på browseren.

Måske ikke alle vil genkende det ikon, når de først besøger webstedet, men takket være mønster genkendelse dette er ikke et stort problem.

Folk har været længe nok på internettet for at vide, at det øverste venstre hjørne af siden typisk er forbeholdt et logo. Denne lille pink ikon bruges også i favicon, så det er nemt at lave nogle konklusioner uden at grave for langt ind på siden.

Du behøver ikke altid at stole på grafik for denne kondenserede logo teknik. Overskriften til Young And Hungry bruger lysegrøn tekst til logoet, som til sidst kondenserer til teksten "Y & H".

Tildelt dette kan ikke virke for hvert websted, hvis branding ikke er let at genkende som enkelt bogstaver. Men det går for at vise de logoer kan gøres enklere ind i både grafik og tekst og begge varianter optage mindre plads på mindre skærme.

Håndtering af fuldskærms baggrunde

Mange destinationssider bruger fuld skærm baggrunde til at gøre mere opmærksomhed. Dette er en kraftfuld teknik, men fungerer ofte bedst på store skærme.

Så hvordan håndterer du dette på en mindre skærm? Generelt designere heller fjern baggrundsbilledet forbi et bestemt brydpunkt, eller selve billedet bliver ændret at passe ind i vinduet.

Cap Radio Raffle bruger denne teknik på deres hjemmeside. Baggrundsbilledet holder fokuspunktet i sikte til enhver tid, uanset hvor meget skærmen er ændret.

Denne slags løsning typisk kræver nogle CSS positionering men det er virkelig simpelt, når du får fat i det. Lige Hold fokuspunktet i sikte til enhver tid og Ændre størrelsen på billedbeholderen at passe i forhold til enheden.

Ud over store baggrunde af æstetiske grunde kan du også bruge store billeder til sideindhold. Mashables hjemmeside bruger en fremhævet billedbakgrund til den øverste historie, der spænder over hele layoutet.

Deres responsive layout komprimerer billedet mens holde et centralt fokuspunkt. Det er svært at gøre dette, fordi det viste billede ændres, når historien ændres, så fotos skal kurateres omhyggeligt. Mashables løsning er stadig en god metode til håndtering af fuldskærmbilleder til blogs og magasinlayouter, når de er designet korrekt.

Forenkle navigationen

Ved genopbygning til mindre skærme, Hold så mange links som muligt i navigationen og gør det let tilgængeligt. Det betyder, at du måske skal grøfte nogle få links, hvis du har multi-tiered dropdown-menuer.

Selv om du har den rigtige strategi, er det stadig muligt at holde alle dropdowns in-tact. For eksempel bruger Kidscreen a flyout menu med små pil ikoner der angiver underlinks i den responsive menu.

Mange mennesker argumenterer mod hamburgermenuen, men jeg er kommet for at acceptere det som et nødvendigt emne til lange navmenuer. Det virker simpelthen, og er blevet bredt forstået af de fleste smartphone-brugere som "menu-knappen".

Faktisk ville du være hårdt presset for at finde et lydhurt websted, der ikke stole på tre-bar hamburger menuen. CyberChimps er et godt eksempel på det bruger en lodret dropdown snarere end en dias-in.

Navigationsstrukturen for CyberChimps bliver omarrangeret til at glide ned øverst på siden. Menuen falder ovenfra med store blokelementer til links.

Med mere område at klikke på og større linktekst, processen med at navigere sider bliver meget enklere. Formålet med at følge denne filosofi med hele din responsive overskrift, og dine designs vil forbedre drastisk.

Byg din egen

Med disse tips til din rådighed bør det ikke være nogen problemer med at opbygge brugbare lydhøre. Mens der er masser af værktøjer til at hjælpe dig ud, er den eneste måde at virkelig forstå, gennem praksis.

Så tag disse teknikker med dig og begynde at bygge hjemmesider! Jeg har også nævnt en håndfuld yderligere ressourcer til responsive overskrifter, som du kan tjekke nedenfor.

• Opret en Basic Mobile CSS Responsive Navigation Menu (Teamtreehouse.com)
• Bedste praksis for Responsive Website Header (Ux.stackexchange.com)
• Hvordan kan jeg gøre mit overskriftsbillede korrekt reageret? (Stackoverflow.com)