Wanneer Responsive Design fout gaat (en hoe het te verhelpen)

De meeste websites die responsief ontwerp gebruiken, gebruiken het verkeerd, wat tot problemen leidt. De algemene benadering van responsief ontwerp is lui en als je die aanpak volgt, zullen sommige van je responsieve sites absoluut perfect werken, en veel van hen zullen dat niet doen. Voor degenen die perfect werken, zal het waarschijnlijk een kwestie van geluk zijn.

Het concept van responsief ontwerp is eenvoudig, maar het is heel eenvoudig waardoor mensen zo gemakkelijk fouten maken. Ontwerpers met jarenlange ervaring zijn gewend geraakt aan het ontwerpen voor de desktop, en daarom plannen ze meestal een ontwerp op basis van een desktoplay-out.

Bureaubladlay-outs verschillen van tabletlay-outs en mobiele lay-outs omdat ze normaal gesproken uit meerdere kolommen bestaan, normaal gesproken enorme hoeveelheden witte ruimte bevatten en alles gewoon "groot" is, bij gebrek aan een beter woord. Als responsieve ontwerptechnieken worden gebruikt, zou deze lay-out met meerdere kolommen moeten worden afgebroken tot een enkele kolom.

Als dat alles is wat uw responsieve ontwerp daadwerkelijk doet wanneer het wordt bekeken op een mobiel apparaat, is er mogelijk een probleem. Hoeveel van een probleem hangt af van je houding, maar goede ontwerpers geven om goede UX. Ze geven zelfs meer om slechte UX. Als uw site slechte UX heeft en u een goede ontwerper wilt zijn, moet u deze repareren.

Dit probleem met het samenvouwen van een lay-out met meerdere kolommen in een enkele kolom is dat deze niet op een proportionele basis werkt. Als je iets horizontaal moet krimpen en je maakt geen andere wijzigingen, dan zal het duidelijk verticaal uitzetten.

Giet water uit een kort vetglas in een lange dunne, en het water neemt de vorm aan van het hoge dunne glas, terwijl het volume water hetzelfde blijft. Wat ontwerpers moeten begrijpen, is dat we met een website het volume nodig hebben om te veranderen. Het is normaal gesproken geen goed idee om de vorm te wijzigen, maar de inhoud te behouden precies hetzelfde. Er moet iets gegeven worden.

Iemand die echt de titel van ontwerper heeft verdiend, zal begrijpen dat dit een probleem is dat moet worden opgelost en wat ontwerpers feitelijk doen om oplossingen voor problemen te vinden. Daarom is het voor jou de perfecte taak om de beste manier te vinden om de kerninhoud van de site te leveren zonder de gebruikerservaring om te zetten in een frustrerend scroll-fest. Hier zijn enkele van de dingen die de moeite waard zijn om te overwegen bij het afbreken van een desktopontwerp in een mobiel ontwerp:

1. "Mobile First" is debiel

Sorry, maar dat is het. Iedereen is dit aan het napraten, maar als concept is het niet erg handig, want als je echt 'mobiel eerst' ontwerpt, dan is het nachtmerrieachtig om het terug te schalen naar een desktopontwerp, tenzij je de hele weg met een puur één kolomlay-out vasthoudt up.

De beste aanpak is om minimaal drie (en maximaal 11) verschillende lay-outs te ontwerpen. De minimale die u kunt overwegen, zijn onder meer:

  • desktop
  • Landscape Mobile
  • Portret mobiel

Als je wat grondiger wilt zijn, zou je ook moeten overwegen:

  • Landschapstablet
  • Portret Tablet

En de volledige lijst, als je absoluut compleet wilt zijn, zou zijn:

  • Enorme desktop
  • Gewone desktop
  • Grote landschapstablet
  • Grote portrettablet
  • Kleine landschapstablet
  • Kleine portrettablet
  • Groot landschap mobiel
  • Groot portret mobiel
  • Small Landscape Mobile
  • Small Portrait Mobile
  • Tiny / Wearable

Met zoveel verschillende mogelijkheden, is het duidelijk waarom een ​​luie "one-size-fits-all" aanpak zo verleidelijk is, maar het is ook duidelijk waarom er zoveel manieren zijn om het te verpesten.

2. Tem dat spervelende paginavoetteken

Het bureaubladontwerp bevat een van die enorme dikke paginavoetteksten met veel interne links? Geweldig, dat zal waarschijnlijk erg handig zijn op een desktop. Op een mobiel lijkt het belachelijk, en is meer dan alleen een tik vervelend. U kunt volledig verschillende paginavoettekst ontwerpen voor elk breekpunt van het apparaat. Maak gewoon die footer-links beschikbaar in een modaal dialoogvenster en iedereen wint.

3. Accepteer enkele kleine eigenaardigheden op obscure apparaten

Als een bepaald apparaat niet gebruikelijk is, is het niet zo erg als er een paar eigenaardigheden in het ontwerp zitten die alleen op het apparaat worden weergegeven. Hoe populairder een apparaat is, hoe meer je zult moeten werken aan het wegwerken van eventuele eigenaardigheden die erop verschijnen.

4. U kunt inhoud verbergen die niet bijdraagt ​​aan het kernboodschap

Het belangrijkste onderdeel van een site is de kernboodschap. Ja, op sommige sites is het belangrijkste gedeelte de reclame en deze bestaat alleen om die advertenties weer te geven, maar als u moet kiezen tussen het tonen van het kernbericht of het weergeven van de advertenties, kiest u het bericht. Google is meer geneigd u als te beschouwen persona non grata als je kerncontent verbergt en vervolgens een heleboel advertenties aanbiedt. Het is omdat die kerninhoud is waarop Google u heeft geïndexeerd en wanneer die inhoud niet wordt weergegeven, ziet Google dat als misleidend.

Bovendien zijn zaken als afbeeldingen die puur decoratief of esthetisch zijn, maar die niet significant bijdragen aan de kernboodschap, kandidaten voor vermindering of verbergen.

Sommige mensen hebben voorgesteld dat het verbergen van inhoud mobiele gebruikers "straft", maar dit is een beetje een absurde gedachte. De realiteit is dat je de inhoud verbergt omdat deze er is om de desktopervaring te verbeteren, maar niet voldoende bijdraagt ​​aan de kernboodschap van de site om deze nodig te hebben

5. U kunt alternatieve achtergronden gebruiken

Onlangs kreeg ik een belachelijke opdracht waarbij de site-eigenaar voor een bepaalde achtergrond had betaald en wilde dat alle inhoud werd afgestemd op die achtergrond. Punten met kogelpunten moesten een zeer exact aantal tekens bevatten, het totale aantal regels moest exact zijn, enzovoort.

Dit is absoluut een slechte oefening in webdesign, omdat dat zou moeten nooit ontwerp inhoud om in een lay-out te passen. De lay-out zou moeten altijd ontworpen om de inhoud te bevatten. Als de lay-out om de een of andere reden de inhoud niet kan bevatten, moet de lay-out opnieuw worden ontworpen, niet de inhoud. Het is best mogelijk om verschillende achtergronden voor verschillende apparaten te gebruiken. Je bent een ontwerper. Gebruik je fantasie.

Inhoud is het levensbloed van een website en het wijzigen of beperken op basis van de beperkingen van een lay-out is een duidelijk teken van amateurisme door de eigenaar van de site en een teken dat de lay-out slecht was ontworpen in de eerste plaats. Houd je aan je principes, want die klant zal problemen krijgen als je instemt.

De klant heeft altijd gelijk, behalve wanneer die klant een webontwerpclient is. Klanten weten zelden wat het beste is voor hen, en het is belangrijk om jezelf als een webdesigner te laten gelden die het juiste resultaat voor de klant weet te bereiken. Anders riskeer je om nog een andere website te maken gruwel.

6. Beheer de inklaplijn handmatig (of vermijd ruimtelijke verwijzingen binnen de inhoud)

Dit is een complex probleem. De samenvouwvolgorde van een site hangt af van de volgorde waarin de divs zijn gestapeld. Je moet je divs in de juiste volgorde stapelen, zodat ze in de juiste volgorde in elkaar klappen.

Een van de problemen die komen van WYSIWYG-website-bouwers met drag-n-drop is dat je normaal gesproken niet kunt bepalen in welke volgorde de divs worden gestapeld, en in de zeer zeldzame gevallen waarin je dat kunt doen, wordt je harde werk elke keer ongedaan gemaakt je maakt de kleinste bewerking en je moet weer teruggaan en de broncode opnieuw hacken.

Als u de samenvouwingsvolgorde niet beheert, deze afbeelding legt duidelijk uit wat er mis kan gaan. Ook zou je moeten vermijden om ruimtelijke verwijzingen te maken (zoals "in de kolom aan de linkerkant"), want op een mobiel kan wat links of rechts is geweest naar boven of naar onder verschoven zijn, plus als je de lezer denkt dat het belangrijk genoeg is om te scrollen om te zien, dan zullen ze weer terug moeten scrollen, en dat is niet cool.

7. U heeft mogelijk verschillende lettergrootten nodig voor verschillende lay-outs

Het is eenvoudig om de tekengrootte te regelen met CSS en u kunt verschillende lettergroottes en zelfs verschillende lettertypen instellen (als deze er beter uitzien) voor bepaalde weergavegroottes. U kunt de weergavegrootte vinden met CSS-mediaquery's en vervolgens de lettergrootte of het lettertype wijzigen om waarden te hebben die de inhoud maximaal weergeven op het apparaattype dat u target.

8. Het is het beste om responsieve afbeeldingen te gebruiken

Alle afbeeldingen moeten waar mogelijk reageren. Dit brengt met zich mee dat soms het detail van een afbeelding verloren kan gaan als het te veel wordt verkleind. Een oplossing voor dit probleem is om de afbeelding klikbaar te maken, zodat de gebruiker een ingezoomde versie van de afbeelding afzonderlijk van de inhoud kan bekijken. De normale manier om dit te doen is via een modaal dialoogvenster.

header afbeelding met dank aan

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.