Nødvendige tips til konvertering af en desktop-side, til mobil
Da mobile enheder nu har overhalet skrivebordet i popularitet, er det nødvendigt, at designere design med mobil i tankerne. Mobil-først er populær som en teknik, fordi det er lettere at skalere mobil op, end skala skrivebordet ned.
Men sommetider er valget taget ud af dine hænder. Fælles designere finder sig selv at tilpasse eksisterende desktop designs til mobil. Og fordi nogle elementer ikke oversætter godt, er det afgørende designere, der forstår, hvilke specifikke tilpasninger der skal foretages, når de designes til den lille skærm. Her er hvordan ...
Omfavn minimalisme
Minimalisme har været populær i webdesign i mange år, simpelthen fordi det ofte hjælper anvendelighed og ser også godt ud. Når det kommer til mobil, er minimalisme dog mindre et æstetisk valg, da det kun er baseret på brugbarhed.
Ifølge Nielsen Norman Group, skærefunktioner er en nødvendighed i mobil design. Så hvad betyder dette for designere, da de forsøger at opbygge et mobilt websted fra en allerede etableret desktop-ene?
Det betyder at gøre væk med det, der ikke er afgørende for den mobile brugeroplevelse. Hvis du for eksempel overfører en e-handelsbutik fra skrivebord til mobil, skal du holde det samme antal produkter, der vises på mobilwebstedet. Det giver kun mening, fordi kunderne vil kunne finde alt, hvad en online butik har at byde på, ligesom onlinebutikken ønsker at vise alt, hvad den skal sælge til sine besøgende. En stor annoncekarrusel til de seneste tilbud kan dog med rimelighed være afbalanceret lidt.
Skjul navigation
Et af de mest almindelige funktioner på mobile skærme er hamburgermenuen, der næsten næsten allestedsnærværende lille ikon med tre vandrette linjestykker stablet oven på hinanden. Dette er et andet perfekt tilfælde, hvor mobilens mindre skærmstørrelse tvinger designere til at skifte rundt elementer, der forventes at se en bestemt måde på desktops.
På trods af den opdelte mening om hamburgermenuens tilstedeværelse er det stort set allestedsnærværende på mobilskærme, simpelthen fordi dette er den bedste løsning, som designere har fundet for at nedskalere navigationsmenuen fra desktops til mobile enheder.
Tjek den berømte kokken Bobby Flays hjemmeside for hans kæde spisested kaldet Bobby's Burger Palace. Som forventet er navigationsmenuen placeret horisontalt over toppen af hjemmesiden, men når du går på webstedets mobile version, er den vandrette menu væk. På sin plads er den pæne og ryddelige hamburger-menu, lige på samme sted på skærmen, hvor den længere horisontale menu ville være på desktop-versionen.
Walmart benytter også hamburger-menuen i sin desktop-til-mobile designovergang.
På sit skrivebordsside viser Walmart rullemenuen "Alle afdelinger", der åbner et andet lag af navigationsvalg på samme side. På den mobile side er den funktion imidlertid ikke mulig på grund af den lille skærmstørrelse, så en udskiftning er udformet: Det andet lag af navigationsvalg er i hamburgermenuen, og disse åbner flere og flere navigationsvalg med hvert valg -Meget som at bladre siderne i en bog fra venstre til højre.
Skift til en enkelt kolonne
I overensstemmelse med det faktum, at enklere er lige bedre, når det kommer til mobildesign, gør du det godt for dine kunder, hvis du husker, at et enkelt-kolonne layout er renere og lettere for deres brugere at operere på en mindre skærm. Den store fordel ved et enkeltkolonne layout er, at du gør væk med vandret rullning, som om du havde meget tekst på en side og ønskede dine læsere at skubbe skærmen fra venstre mod højre for at læse.
Når du introducerer et enkeltkolonne layout, effektiviserer du brugeroplevelsen og opfordrer brugerne til blot at rulle ned for at læse videre eller klikke på et link, de ønsker at se på en ny side. Dette beats tvinger dem til at trække til venstre mod højre, hvilket er sværere at gøre end blot at rulle ned, især når du overvejer din brugers tommelfingerposition i forhold til hvordan de holder en mobilenhed.
Skrivebordets hjemmeside for The New York Times-avis indeholder flere kolonner. Det er nemt at bruge på et skrivebord, når dine klients brugere blot kan flytte markøren fra venstre mod højre uden problemer på en trackpad eller mus.
Selvfølgelig forstår The New York Times mobilwebsite, hvordan tingene skal ændres på mindre skærme, så det introducerer et rent og effektivt enkeltkolonne-design, som øger brugeroplevelsen, da læsere lige uden problemer kan rulle ned for mere indhold med deres tommelfingre .
Mobile overvejelser
På grund af mobilens indflydelse på brugere i dag, skal designere altid designe til mobil. Det er ikke godt nok til blot at designe et mobilt websted sammen med skrivebordets websted og ringe til det, der designe til mobil!
Designing for mobile betyder faktisk at være opmærksom på de specifikke tilpasninger, du skal lave for din kundes websted, når du designer til den lille skærm. Dette omfatter alt, hvad vi talte om ovenfor, fra minimalisme i design til at gemme navigationslinjen for at flytte til et enkeltkolonne layout.
Ved at vedtage disse bedste praksis i din skillset, vil du oprette websteder, der passer perfekt til mobilen.