Hoe inhoudsarrangement te plannen voor responsief ontwerp

In een recent bericht heb ik besproken hoe visuele inhoud heeft te maken met lay-outontwerp. Dit onderwerp is echter zeer gedetailleerd en splitst zich op in veel subonderwerpen, waarvan er één is visuele organisatie voor responsieve lay-outs.

In dit bericht wil ik dieper ingaan op responsieve inhoud om te kijken naar enkele praktische tips voor herschikken van inhoud voor kleinere schermen. In UI & UX ontwerp, is er geen enkel goed antwoord voor elk project, maar er zijn trends die goed werken, en van deze trends kun je je eigen ideeën bouwen.

Herschikken van rasters naar lijsten

Elke website gebruikt een bepaald type raster of het zichtbaar is of niet. Inhoud in een solide raster groepeert zich vaak horizontaal op bredere beeldschermen, maar dit is niet logisch op kleinere apparaten. De beste remedie is om deze rasters op kleinere schermen af ​​te breken, en zet de items om in lijsten.

Voorbeeld 1: Wellington City Council

Neem een ​​kijkje op de website van de Wellington City Council die een aantal gebruikt secties in gridstijl op de startpagina.

Er is een kleine diavertoning van vierkante links die reduceert als het browservenster wordt gewijzigd. Het voettekstgedeelte ook wordt kleiner, en eventueel converteert naar een verticale lijst met links.

Op zeer kleine telefoons met 320 px breedte moet u ontwerpen voor de apparaatgrootte. In het geval van een iPhone is het apparaat groter dan breder dus is het zinvol om de inhoud op die manier te ordenen.

Voorbeeld 2: Mooyah Burgers

Bekijk de startpagina van Mooyah en probeer de indeling te wijzigen. Er is een klein gedeelte met diavoorstellingen dat drie items op een bureaubladscherm bevat, maar dit krimpt om slechts één item op mobiel weer te geven (meer verborgen dia's aan de widget toevoegen).

De twee promotievakken die reclame maken voor de Mooyah-app & het menu blijven naast elkaar liggen tot het scherm klein genoeg wordt om ze verticaal te herschikken.

De “Verbind je met ons!” sectie herschikt ook inhoud, zodat elke sociale post krijgt zoveel mogelijk ruimte. Over het algemeen zijn breedbeeldmonitoren het breedst en zijn smartphoneschermen het grootst.

Voorbeeld 3: Themamarkt

Houd rekening met het ontwerp van een lay-out met een raster zowel brede als lange lay-outstijlen voordat je een enkele regel code schrijft. Op deze manier ben je erop voorbereid bouwen van breekpunten die logisch zijn.

Een pagina met een volledige rasterlay-out zou dat moeten doen verkleinen van dozen voordat je ze op een nieuwe regel breekt. Thema Market heeft bijvoorbeeld een vaste maximale breedte van 1240, en het raster bevat vier blokken per rij.

Naarmate het scherm deze blokken kleiner wordt verminderen in breedte, maar uiteindelijk afbreken naar laat drie vakken per rij achter. Bij de kleinste maat, krijg je een doos per rij, en het heeft veel ruimte om tekst en beelden te laten glanzen.

Er is altijd een balans van zoveel mogelijk informatie in beeld houden gecombineerd met de noodzaak om maak tekst leesbaar. Hoe meer u rasterlay-outs maakt, hoe eenvoudiger het zal zijn om dit te vinden balans van inhoudsarrangement.

Kolommen verbergen of verwijderen

Bredere monitors en meer browserondersteuning ontwikkelaars toestaan ​​ongelooflijk complexe lay-outs te maken. Ik zie vaak blogs met drie of zelfs vier kolommen die een groot deel van het scherm beslaan.

Kleine apparaten hebben echter een inhoudstroom nodig is verticaal zinvol. Ik heb twee opties gevonden voor omgaan met overmatige zijbalken:

1. Zet ze neer onder de hoofdinhoud
2. Verberg ze helemaal

Voorbeeld 1: Stop Druk

Neem een ​​kijkje op de website van Stop Press. Het heeft vier verticale kolommen op mijn desktopmonitor.

De linkerkolom is een verticaal nav-menu, de volgende kolom is de hoofdinhoudskolom met recente artikelen. Dan hebben we twee verschillende zijbalkkolommen vol met extra “terzijde” inhoud.

Naarmate het browservenster groter of kleiner wordt, deze kolommen langzaam kleiner worden. De eerste die je gaat is de linkernavigatie die verborgen wordt achter een hamburgermenupictogram.

Het volgende breekpunt verbergt de middelste kolom samen met de bovenste knoppen voor sociaal delen. Dan eindelijk op de kleinste schermen, verdwijnt de zijbalk helemaal links alleen de primaire middelste kolom achterlaten van inhoud.

Geen van de inhoud van het zijpaneel verschijnt onder de hoofdinhoud. Haar volledig aan het zicht onttrokken, en dit is een volkomen acceptabele keuze om verminder pagina laden en om de schuifbalkhoogte op een behoorlijke maat te houden.

Aan de andere kant, veel blogs verplaats de zijbalk onder de hoofdinhoud zoals op Concept Art Empire, dat uiteindelijk gerelateerde berichten in de zijbalk bevat onder de inhoud vallen.

Voorbeeld 2: Wishpond Blog

The Wishpond Blog ook verwijdert de zijbalk volledig van het scherm op kleinere viewports. Dit zijbalkgebied bevat meestal advertenties, aanmeldingsformulieren en gerelateerde berichtkoppelingen. Geen van deze inhoud is van vitaal belang, maar het kan waarde toevoegen aan bezoekers.

Ik vind het leuk om a te volgen hybride aanpak waarbij ik de zijbalk onder de inhoud verplaats, maar ook een paar items in de zijbalk achter een bepaald breekpunt verberg.

Als ik bijvoorbeeld drie advertentieblokken in de volledige lay-out heb, kan ik twee van die advertentieruimten op mobiel verbergen. Deze maakt de zijbalkinhoud toegankelijk maar maakt de pagina niet overzichtelijk met overmatige inhoud.

Voorbeeld 3: Madame Gautier

Ik hou ook van hoe Madame Gautier hun gebruikt “Laatste nieuws” zijbalk op de startpagina. Het uiteindelijk valt onder de inhoud, en neemt een positie in van volledig zicht op de pagina.

Bijna elke website heeft minimaal één zijbalk in het ontwerp. Of dit nu een zijbalk op de hele site is of alleen iets dat op een paginasjabloon verschijnt, de zij-aan-zij ontwerpstijl is populair omdat het past meer inhoud op het scherm.

Het is uw keuze hoe om te gaan met de inhoud. Je kunt de zijbalk lager laten vallen, helemaal verbergen of een hybride van deze twee technieken gebruiken. Maar u moet uw keuze maken gebaseerd op de relevantie van de zijbalk, en zijn noodzaak naar de pagina.

Marges aanpassen en samenpersen

Er zal altijd een punt zijn waar inhoud kan niet worden geperst verder, en een sectie moet dalen onder de andere.

Door marges aanpassen voordat u inhoud op de pagina verlaagt, geeft u lezers een ruimere hoeveelheid inhoud om uit te kiezen.

Voorbeeld 1: Eén wereld

De voettekst op One World is een geweldig voorbeeld. Het heeft sitewide footer links dreef gelijk met een e-mail aanmeldingsformulier aan de linkerzijde.

Naarmate de lay-out groter wordt, krimpen de marges en opvullingen tussen deze elementen. De linkkolommen kom dichter bij elkaar, en het aanmeldingsformulier wordt een beetje kleiner, te.

Voorbij een bepaald punt, het is gewoon logisch laat de links achter het aanmeldingsformulier vallen, en geef het voettekstje genoeg ruimte om te ademen.

Ja, het maakt de pagina langer, en ja, het kost meer moeite om naar beneden te scrollen, maar bij deze kleinere onderbrekingspunten kun je aannemen dat gebruikers op verticaal georiënteerde apparaten.

Voorbeeld 2: Golden Isles

Een ander voorbeeld waar ik van hou is de startpagina van Golden Isles met zijn unieke navigatiestijl. Wanneer u het formaat van het browservenster wijzigt, wordt de nav-koppeling gebruikt samen knijpen. Uiteindelijk zij breken van een enkele regel in twee rijen en vervolgens in kolommen met de kleinste maat.

Andere items op de pagina volg hetzelfde patroon. Dit voorbeeld demonstreert de kracht van de marges aanpassen voordat de lay-out volledig is herschikt.

Verticale stroom op kleinere schermen

Pagina-inhoud zou moeten natuurlijk stromen, en verticale uitlijning is logisch op mobiel. Dit betekent dat u inhoudblokken in de pagina moet overwegen update de inhoudstijl dienovereenkomstig. Dit omvat alinea's, headers, blockquotes, ongeordende lijsten en ook aangepaste inhoudsvakken.

Voorbeeld 1: BodyBuilding.com Single Post

Neem bijvoorbeeld deze BodyBuilding-post die maakt gebruik van kleine dozen om te pronken met verschillende glute-workouts.

Deze vakken omvatten miniaturen aan de rechterkant om de oefening aan te tonen. Op kleinere schermen, deze miniaturen op een nieuwe regel uiteenvallen, en eventueel stapel op elkaar.

Je responsieve CSS moet dit kleine detail in overweging nemen voor elke pagina van de website.

Voorbeeld 2: Vanity Fair

Voor een groter voorbeeld, kijk op de homepage van Vanity Fair welke herschikt de gekenmerkte verhaalschuif volledig. Op een schermvullend bureaublad geven de verhalen een overzicht van de krantenkoppen met een afgebeelde afbeelding die opzij wordt weergegeven. Naarmate de grootte van de browser kleiner wordt, is dit gedeelte met de topverhalen wordt een glijdende carrousel.

De interface zelf volledig verandert door puntnavigatie, pijlen en afgebeelde afbeeldingen toe te voegen voor elk verhaal in de lijst. Hun fullscreen lijst met artikelen is meer “verticaal”, maar deze lay-out is lastiger om op een mobiel scherm te bedienen, dus het veranderen van het in een glijdende carrousel is een betere optie.

Denken meer over de stroom van de gebruiker in plaats van je inhoudsstroom. Inhoud hoeft niet altijd in een verticale lay-out te worden gedwongen op een klein scherm. Denk alleen maar na over hoe je inhoud zo organiseert ondersteunt een verticale browse-ervaring.

Gedachten sluiten

Responsive design is tegenwoordig essentieel en elke webontwerper en -ontwikkelaar zou moeten begrijpen hoe het werkt. Bezoekers verwachten dat alle websites dat zijn mobiel-vriendelijke. Telkens wanneer ik een niet-reagerende website tegenkom val ik ineen bij het zien van die horizontale schuifbalk.

Volg de tips in deze post voor plannen van ontwerpstrategieën om inhoud te herschikken voor de best mogelijke gebruikerservaring op alle apparaten.