Siden mobile enheter nå har tatt over skrivebordet i popularitet, er det nødvendig at designere designer med mobil i tankene. Mobil-først er populær som en teknikk fordi det er lettere å skalere mobil opp, enn å skala ned skrivebordet.

Men noen ganger er valget tatt ut av hendene dine. Vanlige designere finner seg selv å tilpasse eksisterende desktop design til mobil. Og fordi enkelte elementer ikke oversetter bra, er det avgjørende designere å forstå hvilke spesifikke tilpasninger som skal gjøres når du designer for den lille skjermen. Dette er hvordan…

Embrace minimalisme

Minimalisme har vært populær i webdesign i mange år, ganske enkelt fordi det ofte bidrar til brukervennlighet og ser bra ut også. Når det gjelder mobil, er minimalisme imidlertid mindre et estetisk valg, da det er en basert utelukkende på brukbarhet.

Ifølge Nielsen Norman Group, kuttefunksjoner er en nødvendighet i mobil design. Så hva betyr dette for designere som de prøver å bygge et mobilnettsted fra en allerede etablert desktop-en?

Det betyr å gjøre unna med det som ikke er avgjørende for mobilbrukeropplevelsen. Hvis du for eksempel overfører en e-handelsbutikk fra skrivebord til mobil, må du beholde samme mengde produkter som vises på mobilnettstedet. Det er bare fornuftig fordi kundene vil kunne finne alt en nettbutikk har å tilby, akkurat som nettbutikken ønsker å vise alt den har å selge til sine besøkende. En stor annonsekarusell for de nyeste tilbudene, kan imidlertid med rimelighet bli lurt ned litt.

Skjul navigasjon

En av de vanligste funksjonene på mobilskjermer er hamburgermenyen, som nesten allestedsnærværende lite ikon med tre horisontale linjesegmenter stablet oppå hverandre. Dette er et annet perfekt tilfelle der den mindre skjermstørrelsen på mobilen krever at designere skal bytte rundt elementer som forventes å se en bestemt måte på skrivebord.

Til tross for den splittede oppfatningen om hamburgermenyens tilstedeværelse, er det ganske mye allestedsnærværende på mobilskjermene, bare fordi dette er den beste løsningen som designere har funnet for nedskalering av navigasjonsmenyen fra skrivebord til mobilenheter.

Ta en titt på den berømte kokken Bobby Flays nettsted for hans kjede spisested kalt Bobby's Burger Palace. Som forventet er navigasjonsmenyen lagt ut over toppen av hjemmesiden, men når du går på mobilversjonen, er den horisontale menyen borte. I stedet er den ryddige og ryddige hamburger-menyen, rett på samme sted på skjermen hvor den lengre horisontale menyen vil være på skrivebordet.

Bobbys-Burger-Palace-Desktop-Skjermbilde
Bobbys-Burger-Palace-Mobile-Skjermbilde

Walmart bruker også hamburger-menyen i sin desktop-til-mobile designovergang.

På skrivebordssiden viser Walmart rullegardinnavigasjonen "Alle avdelinger" som åpner et andre lag med navigasjonsvalg alt på samme side. På mobilnettstedet er denne funksjonen imidlertid ikke mulig på grunn av den lille skjermstørrelsen, så en erstatning har blitt designet: det andre laget av navigasjonsvalg er i hamburger-menyen, og disse åpner flere og flere navigasjonsvalg med hvert valg -Likst som å bla sidene i en bok fra venstre til høyre.

Walmart-Navigasjon-Layers-Desktop-Skjermbilde
Walmart-Mobile-Navigasjon-Skjermbilde

Bytt til en enkelt kolonne

I tråd med det faktum at det enklere er bare bedre når det gjelder mobildesign, vil du gjøre det bra for kundene dine hvis du husker at et enkeltkolonnement er renere og lettere for brukerne å operere på en mindre skjerm. Den store fordelen med en enkelkolonnegruppe er at du gjør bort med horisontal rulling, som om du hadde mye tekst på en side og ønsket at leserne skulle sveipe skjermen fra venstre til høyre for å lese videre.

Når du introduserer et enkeltkolonnement, strømlinjeformiserer du brukeropplevelsen, oppfordrer brukerne til å bare bla ned for å lese videre eller klikke på en lenke de vil se på en ny side. Dette slår å tvinge dem til å sveipe til venstre mot høyre, noe som er vanskeligere å gjøre enn å bare bla ned, spesielt når du vurderer brukerens tommelposisjon i forhold til hvordan de holder en mobilenhet.

Den stasjonære nettsiden til The New York Times-avisen har flere kolonner. Det er enkelt å bruke på skrivebordet, når kundens brukere bare kan flytte markøren fra venstre til høyre uten problemer på styreflate eller mus.

NYT

Selvfølgelig forstår The New York Times mobilside hvordan ting må byttes på mindre skjermer, så det introduserer en ren og effektiv enkeltkolonneknikk som øker brukeropplevelsen, da leserne bare kan enkelt rulle ned for mer innhold med tommelen sine .

nyt_mobile

Mobil overveielser

På grunn av mobilens innflytelse på brukere i dag, må designere alltid designe for mobil. Det er ikke godt nok å bare utforme et mobilnettsted sammen med skrivebordssiden og ringe det som designes for mobil, skjønt!

Design for mobil betyr faktisk å være hensynsfull til de spesifikke tilpasningene du må gjøre for kundens nettsted når du designer for den lille skjermen. Dette inkluderer alt vi snakket om ovenfor, fra minimalisme i design for å gjemme navigasjonslinjen for å flytte til en enkeltkolonn layout.

Ved å vedta disse beste praksisene i ferdigheter, vil du opprette nettsteder som passer perfekt til mobilen.