Een uitgebreide gids voor het repareren Responsive Ontwerpproblemen in 2023

Als u zich abonneert op een dienst via een link op deze pagina, kan Reeves and Sons Limited een commissie verdienen. Zie onze ethische uitspraak.

De meeste websites gebruiken responsive ontwerp gebruikt het verkeerd, wat tot problemen leidt. De algemene benadering van responsive ontwerp is lui, en als je die aanpak volgt, zijn sommige van je responsive sites zullen absoluut feilloos 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 responsive ontwerp is eenvoudig, maar juist door de eenvoud maken mensen zo gemakkelijk fouten. Ontwerpers met jarenlange ervaring zijn gewend geraakt aan het ontwerpen voor de desktop, en daarom plannen ze meestal een ontwerp op basis van a desktop lay-out.

Desktop lay-outs verschillen van tabletlay-outs en mobiele lay-outs omdat ze normaal gesproken uit meerdere kolommen bestaan, normaal gesproken enorme hoeveelheden witruimte bevatten en alles gewoon "groot" is, bij gebrek aan een beter woord. Als responsive ontwerptechnieken worden gebruikt, wordt verondersteld dat deze lay-out met meerdere kolommen uiteenvalt in een enkele kolom.

Als dat alles van jou is responsive ontwerp daadwerkelijk doet wanneer het op een mobiel apparaat wordt bekeken, heb je mogelijk een probleem. Hoeveel een probleem is, hangt af van je houding, maar goede ontwerpers geven om goede UX. Ze geven nog meer om slechte UX. Als je site een slechte UX heeft en je wilt een goede ontwerper zijn, dan moet je dit oplossen.

Het probleem met het samenvouwen van een lay-out met meerdere kolommen in een enkele kolom is dat het niet proportioneel werkt. Als je iets horizontaal moet verkleinen en verder geen wijzigingen aanbrengt, zal het natuurlijk verticaal uitzetten.

Giet water uit een kort dik glas in een hoog dun glas en het water neemt de vorm aan van het hoge dunne glas, terwijl het watervolume precies 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 veranderen, maar de inhoud te behouden precies hetzelfde. Er moet iets geven.

Iemand die echt de titel ontwerper heeft verdiend, zal begrijpen dat dit een probleem is dat moet worden opgelost, en wat ontwerpers eigenlijk doen, is oplossingen voor problemen vinden. Daarom is het de perfecte taak voor jou om de beste manier te vinden om de kerninhoud van de site te leveren zonder de gebruikerservaring te veranderen in een frustrerend scrollfeest. Hier zijn een paar dingen die het overwegen waard zijn bij het afbreken van een desktop ontwerp naar een mobiel ontwerp:

1. "Mobile First" is debiel

Het spijt me, maar het is zo. Iedereen praat dit na, maar als concept is het niet erg nuttig, want als je echt "mobile first" ontwerpt, zal het een nachtmerrie zijn om het terug te schalen naar een desktop ontwerp, tenzij u vasthoudt aan een puur enkele kolomlay-out helemaal naar boven.

De beste aanpak is om fysiek ten minste drie (en maximaal 11) verschillende lay-outs te ontwerpen. De minimumaantallen 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:

  • Reusachtig Desktop
  • Nationaal 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"-benadering zo verleidelijk is, maar het is ook duidelijk waarom er zoveel manieren zijn om het te verpesten.

2. Tem dat spervelende paginavoetteken

De desktop ontwerp een van die enorme dikke paginavoetteksten met heel veel interne links bevat? Geweldig, dat zal waarschijnlijk erg handig zijn op een desktop. Op een mobiel ziet het er belachelijk uit en is het meer dan alleen een beetje vervelend. U kunt voor elk breekpunt van een apparaat compleet verschillende paginavoetteksten ontwerpen. Maak die voettekstlinks gewoon beschikbaar in een modaal dialoogvenster en iedereen wint.

3. Accepteer enkele kleine eigenaardigheden op obscure apparaten

Als een bepaald apparaat niet gebruikelijk is, dan is het niet zo erg als er een paar eigenaardigheden in het ontwerp zitten die alleen verschijnen bij het bekijken op dat apparaat. Hoe populairder een apparaat is, hoe meer je zult moeten werken om eventuele eigenaardigheden die erop verschijnen weg te werken.

4. Je kunt content verbergen die niet bijdraagt ​​aan de kernboodschap

Het belangrijkste onderdeel van een site is de kernboodschap. Ja, op sommige sites is het belangrijkste deel de reclame en ze bestaan ​​alleen om die reclame te leveren, maar als je moet kiezen tussen het tonen van de kernboodschap of het tonen van de reclame, kies dan de boodschap. Google zal u eerder beschouwen als persona non grata als u kerninhoud verbergt en vervolgens een aantal advertenties weergeeft. Het is omdat die kerninhoud is waarop Google u heeft geïndexeerd, en wanneer die inhoud niet wordt weergegeven, beschouwt 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 helemaal verbergen.

Sommige mensen hebben voorgesteld dat het verbergen van inhoud mobiele gebruikers "straft", maar dit is een beetje een absurd idee. De realiteit is dat je de inhoud verbergt omdat deze er is om de desktop beleving, maar draagt ​​onvoldoende bij aan de kernboodschap van de site om noodzakelijk te zijn

5. U kunt alternatieve achtergronden gebruiken

Onlangs kreeg ik een belachelijke opdracht waarbij de site-eigenaar had betaald voor een bepaalde achtergrond en wilde dat alle inhoud werd aangepast aan die achtergrond. Opsommingsitems moesten een heel exact aantal tekens zijn, 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 altijd ontworpen zijn om de inhoud vast te houden. 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 heel goed 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 ervan op basis van de beperkingen van een lay-out is een duidelijk teken van amateurisme van de kant van de site-eigenaar, en een teken dat de lay-out in de eerste plaats slecht was ontworpen. plaats. Blijf bij uw principes, want die cliënt zal problemen opleveren als u instemt.

De klant heeft altijd gelijk, behalve wanneer die klant een webdesign-klant is. Klanten weten zelden wat het beste voor hen is, en het is belangrijk om jezelf te laten gelden als een webdesigner die weet hoe hij het juiste resultaat voor de klant moet leveren. Anderwise je riskeert 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 div's zijn gestapeld. Je moet je divs in de juiste volgorde stapelen, zodat ze in de juiste volgorde samenvouwen.

Een van de problemen van drag-n-drop WYSIWYG-websitebouwers is dat je normaal gesproken niet kunt dicteren in welke volgorde de div's 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 naar binnen gaan en de broncode opnieuw hacken.

Als u de samenvouwvolgorde niet beheert, deze afbeelding legt duidelijk uit wat er mis kan gaan. Vermijd ook het maken van ruimtelijke verwijzingen (zoals "in de kolom aan de linkerkant"), want op een mobiel kan alles wat zich links of rechts bevond naar boven of beneden worden verschoven, plus als je de lezer laat denken 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 lettergrootte te regelen met CSS en u kunt verschillende lettergroottes en zelfs verschillende lettertypen instellen (als ze er beter uitzien) voor bepaalde weergaveformaten. U kunt de weergavegrootte vinden met CSS-mediaquery's en vervolgens past u de lettergrootte of het lettertype aan zodat de inhoud optimaal wordt weergegeven op het apparaattype waarop u zich richt.

8. Het is het beste om te gebruiken responsive afbeeldingen

Alle afbeeldingen moeten zijn responsive wanneer mogelijk. Dit brengt met zich mee dat soms het detail van een afbeelding verloren kan gaan als deze 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 los 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.

Heb je vragen? Stel ze hier. Response 1

  1. Mp zegt:

    Mobile first betekent alleen dat in de codebase de "standaard" css voor mobiel is en dat u wijzigingen aanbrengt voor bredere formats vanaf daar. Ik begrijp je eerste punt echt niet

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Rating *

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.