Essentiële tips voor het converteren van een desktopsite naar mobiel
Omdat mobiele apparaten de desktop nu in populariteit hebben ingehaald, is het noodzakelijk dat ontwerpers ontwerpen met mobiel in gedachten. Mobiel-eerst is populair als een techniek, omdat het gemakkelijker is om mobiel naar boven te schalen, dan om het bureaublad naar beneden te schalen.
Soms wordt de keuze echter uit handen genomen. Vaak vinden ontwerpers dat ze bestaande desktopontwerpen aanpassen aan mobiel. En omdat sommige elementen niet goed vertalen, zijn het essentiële ontwerpers die begrijpen welke specifieke aanpassingen moeten worden aangebracht bij het ontwerpen voor het kleine scherm. Hier is hoe…
Omhels minimalisme
Minimalisme is al jaren populair in webdesign, simpelweg omdat het vaak bruikbaar is en er ook leuk uitziet. Als het om mobiel gaat, is minimalisme echter minder een esthetische keuze, omdat het alleen op bruikbaarheid is gebaseerd.
Volgens de Nielsen Norman Group, het snijden van functies is een noodzaak in mobiel ontwerp. Wat betekent dit voor ontwerpers wanneer ze een mobiele site proberen te bouwen van een reeds bestaande desktopsite?
Het betekent het afschaffen van wat niet essentieel is voor de mobiele gebruikerservaring. Als u bijvoorbeeld een e-commerce store overzet van desktop naar mobiel, moet u dezelfde hoeveelheid producten behouden die op de mobiele site wordt weergegeven; het is alleen maar logisch, want klanten willen alles kunnen vinden wat een online winkel te bieden heeft, net zoals de online winkel alles wil laten zien wat het te bieden heeft aan zijn bezoekers. Een grote advertentiecarrousel voor de nieuwste deals kan echter redelijkerwijs een beetje worden teruggebracht.
Navigatie verbergen
Een van de meest voorkomende functies op mobiele schermen is het hamburgermenu, dat bijna alomtegenwoordige kleine pictogram met drie horizontale lijnsegmenten op elkaar gestapeld. Dit is een ander perfect geval waarbij de kleinere schermgrootte van mobiel ontwerpers dwingt om elementen te veranderen waarvan wordt verwacht dat ze er op een bepaalde manier uitzien op desktops.
Ondanks de verdeelde mening over de aanwezigheid van het hamburgermenu, is het vrijwel overal aanwezig op mobiele schermen, simpelweg omdat dit de beste oplossing is die ontwerpers hebben gevonden voor het verkleinen van het navigatiemenu van desktops naar mobiele apparaten.
Bekijk de website van de beroemde chef-kok Bobby Flay voor zijn ketenrestaurant Bobby's Burger Palace. Zoals verwacht, wordt het navigatiemenu horizontaal over de bovenkant van de startpagina gelegd, maar wanneer u de mobiele versie van de site gebruikt, is het horizontale menu verdwenen. In plaats daarvan is het nette en opgeruimde hamburgermenu precies op dezelfde plek op het scherm waar het langere horizontale menu op de desktopversie zou staan.
Walmart maakt ook gebruik van het hamburgermenu in zijn overstap van desktop naar mobiel.
Op zijn desktopsite geeft Walmart de vervolgkeuzelijst "Alle afdelingen" weer die een tweede laag navigatiekeuzes opent die allemaal op dezelfde pagina staan. Op de mobiele site is die functie echter niet mogelijk vanwege de kleine schermgrootte, dus er is een vervanging ontworpen: de tweede laag met navigatiekeuzes bevindt zich in het hamburgermenu en deze openen bij elke selectie steeds meer navigatiemogelijkheden - bijna zoals het bladeren van een boek van links naar rechts.
Schakel over naar een enkele kolom
In overeenstemming met het feit dat eenvoudiger gewoonweg beter is als het gaat om mobiel ontwerp, doet u het goed voor uw klanten als u bedenkt dat een lay-out met één kolom schoner en gemakkelijker is voor hun gebruikers om op een kleiner scherm te werken. Het grote voordeel van een lay-out met één kolom is dat je horizontaal scrollen verwijdert, alsof je veel tekst op een pagina hebt en je lezers wilt dat het scherm van links naar rechts wordt gelezen om verder te lezen.
Wanneer u een lay-out met één kolom invoert, stroomlijnt u de gebruikerservaring, moedigt u gebruikers aan om gewoon naar beneden te bladeren om te lezen of op een link te klikken die ze op een nieuwe pagina willen zien. Dit betekent dat ze gedwongen worden om van links naar rechts te vegen, wat moeilijker is om te doen dan simpelweg naar beneden scrollen, vooral als je de duimpositie van je gebruiker bekijkt in verhouding tot hoe ze een mobiel apparaat bevatten.
De desktopwebsite van de krant The New York Times bevat meerdere kolommen. Dat is eenvoudig te gebruiken op een desktop, wanneer de gebruikers van uw klant de cursor eenvoudig van links naar rechts kunnen verplaatsen zonder problemen op een trackpad of muis.
Natuurlijk begrijpt de mobiele site van The New York Times hoe dingen moeten veranderen op kleinere schermen, dus introduceert het een schoon en efficiënt ontwerp met één kolom dat de gebruikerservaring verbetert, omdat lezers moeiteloos naar beneden kunnen scrollen voor meer inhoud met hun duimen .
Mobiele overwegingen
Vanwege de invloed van mobiele apparaten op gebruikers van vandaag, moeten ontwerpers altijd ontwerpen voor mobiel. Het is niet goed genoeg om een mobiele site samen met de desktopsite te ontwerpen en dat ontwerpen voor mobiel te bellen!
Ontwerpen voor mobiel betekent feitelijk rekening houden met de specifieke aanpassingen die u moet maken voor de site van uw klant wanneer u ontwerpt voor het kleine scherm. Dit omvat alles wat we hierboven hebben besproken, van minimalisme in ontwerp tot het verbergen van de navigatiebalk tot het verplaatsen naar een lay-out met één kolom.
Door deze praktische tips in uw vaardigheden te gebruiken, maakt u sites die perfect geschikt zijn voor mobiele apparaten.