Viktiga tips för att konvertera en stationär webbplats till mobilen
Eftersom mobila enheter nu har tagit över skrivbordet i popularitet är det nödvändigt att designers design med mobil i åtanke. Mobil först är populär som en teknik eftersom det är lättare att skala upp mobilen än att skala ned skrivbordet.
Ibland tas valet ur dina händer. Vanligt formgivare befinner sig själva att anpassa befintliga skrivbordsmönster till mobilen. Och eftersom vissa element inte översätter bra, är det väsentliga designers förstå vilka specifika justeringar som ska göras när du utformar för den lilla skärmen. Här är hur…
Omfamna minimalism
Minimalism har varit populär i webbdesign i flera år, helt enkelt för att det ofta hjälper användbarheten och ser bra ut också. När det gäller mobil, är minimalism mindre av ett estetiskt val, eftersom det är enbart baserat på användbarhet.
Enligt Nielsen Norman Group, skärande egenskaper är en nödvändighet i mobil design. Så vad betyder detta för designers eftersom de försöker bygga en mobil webbplats från en redan etablerad stationär en?
Det innebär att göra bort med det som inte är nödvändigt för den mobila användarupplevelsen. Om du till exempel övergår en e-handelsbutik från skrivbord till mobil, behåll samma mängd produkter som visas på mobilplatsen. Det är bara meningsfullt, eftersom shoppare vill kunna hitta allt som en onlinebutik har att erbjuda, precis som onlinebutiken vill visa allt som den har att sälja till sina besökare. En stor annonskarusell för de senaste erbjudandenen, kan dock rimligen vara avvägd lite.
Dölj navigeringen
En av de vanligaste funktionerna på mobilskärmar är hamburgermenyn, den nästan allestädes närvarande lilla ikonen med tre horisontella linjesegment staplade ovanpå varandra. Detta är ett annat perfekt fall där mobilens mindre skärmstorlek tvingar konstruktörer att byta runt element som förväntas se på ett visst sätt på skrivbord.
Trots den uppdelade åsikten om hamburgermenyns närvaro är den ganska allestädes närvarande på mobila skärmar, helt enkelt för att det här är den bästa lösningen som designers har funnit för att nedskalning navigationsmenyn från stationära datorer till mobila enheter.
Kolla in känd Bobby Flays hemsida för hans kedjeämne som heter Bobby's Burger Palace. Som förväntat ligger navigeringsmenyn horisontellt över toppen av hemsidan, men när du går på webbplatsens mobila version är den horisontella menyn borta. I sin plats är den snygga och städa hamburgermenyn, precis i samma plats på skärmen där den längre horisontella menyn skulle vara på skrivbordet.
Walmart använder sig också av hamburgermenyn i sin överflyttning från skrivbord till mobil.
På skrivbordssidan visar Walmart rullgardinsmenyn "Alla avdelningar" som öppnar ett andra lager av navigationsval på samma sida. På mobilplatsen är dock den funktionen inte möjlig på grund av den lilla skärmstorleken, så en ersättare har utformats: det andra lagret av navigeringsval är i hamburgarens meny och dessa öppnar upp fler och fler navigeringsval med varje urval -Likst som att bläddra i sidorna i en bok från vänster till höger.
Byt till en enda kolumn
I överensstämmelse med det faktum att det enklare är bara bättre när det gäller mobil design gör du det bra för dina kunder om du kommer ihåg att en enkelspaltlayout är renare och lättare för användarna att använda på en mindre skärm. Den stora fördelen med en enkelspaltlayout är att du gör bort med horisontell rullning, som om du hade mycket text på en sida och ville att dina läsare skulle svepa skärmen från vänster till höger för att läsa vidare.
När du introducerar en enkelspaltlayout, effektiviserar du användarupplevelsen, uppmuntrar användare att helt enkelt rulla ner för att läsa på eller klicka på en länk som de vill se på en ny sida. Detta slår på att tvinga dem att dra åt vänster mot höger, vilket är svårare att göra än att bara bläddra ner, speciellt när man överväger användarens tumörposition i förhållande till hur de håller en mobilenhet.
Skrivbordswebbplatsen för The New York Times-tidningen har flera kolumner. Det är lätt att använda på ett skrivbord, när dina klienters användare enkelt kan flytta markören från vänster till höger utan några problem på en styrplatta eller mus.
Självklart förstår New York Times mobila webbplats hur saker måste byta på mindre skärmar, så det introducerar en ren och effektiv enkelspaltdesign som ökar användarupplevelsen, eftersom läsarna enkelt kan ropa ner för mer innehåll med tummen .
Mobila överväganden
På grund av mobilens inflytande på användarna idag måste designers alltid designa för mobil. Det är inte tillräckligt att du bara utformar en mobil webbplats tillsammans med skrivbordssidan och kallar det som designar för mobil!
Att designa för mobil betyder faktiskt att ta hänsyn till de specifika justeringar som du måste göra för din kunds webbplats när du designar för den lilla skärmen. Detta inkluderar allt vi pratat om ovanifrån, från minimalism i design för att gömma navigeringsfältet för att flytta till en enkelspaltens layout.
Genom att anta dessa bästa metoder i din kompetens skapar du webbplatser som passar perfekt för mobilen.