Responsieve headers en logo's - Tips en valkuilen

Het concept van responsief webontwerp is doorgedrongen tot het web en wordt een nietje voor ontwikkelaars van frontends. De waarde van responsief ontwerpen in de moderne wereld valt niet te ontkennen, maar er is enige moeilijkheid om volledig te begrijpen hoe je responsieve lay-outs op de juiste manier ontwerpt.

Het onderwerp kan langdurig doorgaan omdat er zoveel unieke delen van een website zijn, maar de focus op individuele elementen kan u helpen de doelstellingen van een gebruiker beter te begrijpen en hoe die doelen bereikt kunnen worden met responsief ontwerp.

Ik wil het graag bedekken ontwerptips voor headers, logo's, en navigatiemenu's, aangezien ze betrekking hebben op responsief ontwerp. Neem deze suggesties zoals deze van toepassing zijn op uw eigen werk en zorg ervoor dat u uw interfaces ontwerpt met het oog op gebruikersgedrag.

Dunnere Navbars

Op grote schermen is het normaal om grote headers te hebben, misschien zelfs te grote headers met multi-level link-tiers. Maar kleinere schermen hebben niet dezelfde ruimte en moeten waar nodig worden beperkt.

Omdat native mobiele apps meestal hebben vaste headers, dit is ook gebruikelijk in responsief ontwerp. Een vaste header zou ook moeten krimpen op kleinere apparaten: dit laat meer ruimte voor inhoud, maar geeft lezers nog steeds rechtstreeks toegang tot de koptekst en navigatie.

Neem bijvoorbeeld de lay-out Cartoon Brew op een monitor op volledige grootte en op een mobiel apparaat.

Bij het onderbrekingspunt van 600px krimpt de navigatie tot bijna de helft van de hoogte op de pagina. Dit maakt zowel het logo als het klikbare nav-menu kleiner, maar dat zijn ze wel veel meer proportioneel naar de relatieve schermruimte.

Bedenk ook dat Cartoon Brew een vervolgkeuzelijst heeft als responsief menu op mobiel scherm. Dit betekent het overlays inhoud op de pagina wanneer deze wordt geopend, dus het is belangrijk om hier voldoende ruimte voor over te houden.

Een vergelijkbaar voorbeeld is te vinden op de Jacksonville Art Walk-website. De bovenste navigatiebalk blijft vast tijdens het scrollen maar krimpt op kleinere apparaten. Dit is beter voor responsief ontwerp, omdat de dunnere navbar laat meer ruimte voor inhoud op een kleiner mobiel scherm.

Elke koppeling in de navigatiebalk heeft een gerelateerd pictogram dat is gekoppeld aan de tekstlink. Dit ziet er geweldig uit op een breedbeeldmonitor, maar het is te gedetailleerd voor kleinere schermen.

De Art Walk-navigatie verandert in een vervolgkeuzemenu met vaste koppelingen rond het onderbrekende punt van 770 px. De pictogrammen zijn verborgen in het vervolgkeuzemenu omdat ze te klein en te krap zijn op kleinere apparaten.

Houd altijd rekening met het ontwerp van een responsieve koptekst algemene schermruimte tijdens het stylen van de navigatiebalk. Als je niet wilt dat de header blijft staan, is dat helemaal in orde, maar je wilt het misschien nog steeds krimp het een beetje om ruimte boven aan de pagina te besparen.

Iconify Het logo

De meeste logo's bevatten tekst en een pictogram of afbeelding om het merk te vertegenwoordigen. Dit betekent dat je altijd kunt een icoontje (ja het is een echt woord) dit soort logo's tot een symbool van de volledige versie.

Dit is een krachtige techniek voor responsieve headers omdat er niet altijd genoeg ruimte is voor een volledig logo. Je verliest wel een deel van de glitter en glamour van een full-size logo, maar dat is de prijs die je zou moeten betalen voor een schone responsieve lay-out.

Bekijk het logo voor Web Designer News en zie hoe het verandert als u de grootte van de browser wijzigt.

Misschien herkent niet iedereen dit pictogram wanneer hij de site voor het eerst bezoekt, maar dankzij patroonherkenning dit is geen enorm probleem.

Mensen zijn lang genoeg op internet geweest om te weten dat de linkerbovenhoek van de pagina meestal is gereserveerd voor een logo. Dit kleine roze pictogram wordt ook gebruikt in de favicon, dus het is gemakkelijk om een ​​aantal conclusies te trekken zonder al te diep in de site te graven.

Voor deze gecondenseerde logo-techniek hoeft u niet altijd op afbeeldingen te vertrouwen. De kop van Young And Hungry gebruikt felgroene tekst voor het logo dat uiteindelijk condenseert naar de tekst "Y & H".

Toegegeven, dit werkt mogelijk niet voor elke site als de branding niet gemakkelijk te herkennen is als losse letters. Maar het gaat om te laten zien dat logo's kan eenvoudiger worden gemaakt in zowel afbeeldingen & tekst, en beide varianten minder ruimte innemen op kleinere schermen.

Omgaan met achtergronden op volledig scherm

Veel bestemmingspagina's gebruiken achtergronden op volledig scherm om meer aandacht te trekken. Dit is een krachtige techniek, maar werkt vaak het best op grote monitoren.

Dus hoe pak je dit aan op een kleiner scherm? Over het algemeen ontwerpers ook verwijder de achtergrondafbeelding voorbij een bepaald breekpunt, of het beeld zelf wordt opnieuw uitgelijnd om in het venster te passen.

Cap Radio Raffle gebruikt deze techniek op hun startpagina. De achtergrondafbeelding houdt het brandpunt in zicht te allen tijde, ongeacht het formaat van het scherm.

Dit soort oplossing meestal vereist enige CSS-positionering maar het is heel eenvoudig als je het onder de knie hebt. Net houd het brandpunt in zicht te allen tijde, en formaat van de afbeeldingcontainer in verhouding te passen met het apparaat.

Naast grote achtergronden om esthetische redenen, kunt u ook grote afbeeldingen gebruiken voor pagina-inhoud. De startpagina van Mashable gebruikt een uitgelichte afbeeldingsachtergrond voor het topverhaal dat de volledige lay-out beslaat.

Hun responsieve lay-out comprimeert de afbeelding terwijl een centraal brandpunt behouden. Het is moeilijk om dit te doen omdat de afbeelding wordt gewijzigd wanneer het verhaal verandert, dus foto's moeten zorgvuldig worden samengesteld. De oplossing van Mashable is nog steeds een geweldige methode om schermvullende foto's te verwerken voor blogs en tijdschriftopmaken wanneer deze op de juiste manier zijn ontworpen.

Vereenvoudig de navigatie

Bij het vernieuwen van kleinere schermen, bewaar zoveel mogelijk links in de navigatie, en maak het gemakkelijk toegankelijk. Dit betekent dat je een aantal links moet verwijderen als je meerdere vervolgkeuzemenu's hebt.

Hoewel als je de juiste strategie hebt, het nog steeds mogelijk is om alle dropdowns in tact te houden. Kidscreen gebruikt bijvoorbeeld een uitvouwmenu met kleine pijlpictogrammen met vermelding van sublinks in het responsieve menu.

Veel mensen debatteren tegen het hamburger-menu, maar ik ben het gaan accepteren als een noodzakelijk item voor lange nav-menu's. Het werkt gewoon en wordt door de meeste smartphonegebruikers algemeen begrepen als "de menuknop".

In feite zou het moeilijk zijn om een ​​responsieve site te vinden die niet afhankelijk is van het driestangen-hamburgermenu. CyberChimps is daar een goed voorbeeld van gebruikt een verticale vervolgkeuzelijst in plaats van een slide-in.

De navigatiestructuur voor CyberChimps wordt opnieuw gerangschikt om naar de bovenkant van de pagina te gaan. Het menu valt van boven met grote blokelementen voor links.

Met meer gebied om te klikken en grotere linktekst, het navigeren door pagina's wordt veel eenvoudiger. Streef ernaar om deze filosofie te volgen met uw volledige responsieve header en uw ontwerpen zullen drastisch verbeteren.

Bouw je eigen

Met deze tips tot uw beschikking zou het geen probleem moeten zijn om bruikbare responsieve headers te bouwen. Hoewel er veel hulpmiddelen zijn om je te helpen, is de enige manier om echt te begrijpen, door te oefenen.

Dus neem deze technieken met u en begin met het bouwen van websites! Ik heb ook een handvol andere bronnen vermeld voor responsieve headers die u hieronder kunt bekijken.

• Maak een Basic Mobile CSS Responsive Navigation Menu (Teamtreehouse.com)
• Beste praktijk voor responsieve websitekopbal (Ux.stackexchange.com)
• Hoe kan ik mijn header-image goed reageren?? (Stackoverflow.com)