8 sätt att optimera din webbplats för mobil
När världen flyttade från stationära datorer till mobila enheter blev designare ännu mer fokuserade på UX. Även om användargränssnittet spelar en viktig roll för att skapa mobilvänliga mönster, har användarupplevelsen nu blivit lika viktig, särskilt eftersom vi nu har fler enheter att fokusera på och användarupplevelse skiljer sig från typen av enhet.
UX är något som sträcker sig bortom gränserna för grafik och estetik. Precis som Rahul Varshney, medskapare av foster.fm , säger:
En UI utan UX är som en målare som slår på färg på duk utan att tänka.
Rahul hade rätt på med denna analogi. Du kan ha den mest tilltalande, användarvänliga, unika och funktionella stationära versionen av din webbplats, men om du inte tar hänsyn till den mobila upplevelsen, så mäster du bara utan tanke.
Så, vad skiljer en bra mobilupplevelse från en dålig? Det är inte så svårt att skilja de viktigaste komponenterna som utgör en mycket effektiv, optimerad och användarfokuserad design. Men här är några bra metoder som bör vägleda dig längs vägen:
1) Avvisa inte mobilen först
Om din webbplats riktar sig till mobil UX kanske du vill bryta traditionen genom att följa "mobil först" -strategin. Det finns ingen skada i att omfatta denna teknik när du är positiv att de flesta av dina användare kommer åt din webbplats via en mobil enhet. Precis som codemyviews föreslår att mobilwebdesign inte är en nisch, det finns faktiskt "1,2 miljarder mobila webanvändare över hela världen" och numret verkar inte vara kort tid (det kommer troligen att öka inom en snar framtid). Detta kan vara lite utmanande först; men om du är villig att sätta din användare först är det värt ett skott.
Bara för att du har inriktat dig på att designa en enkel, ren eller mobil-fokuserad webbplats betyder inte att det inte borde vara sofistikerat. Karimrashid.com är ett perfekt exempel på hur enkelhet och sofistikering kan blandas till att skapa en ren och lyhörd, men ändå stilren design.
2) Skapa flytande layouter
Det finns helt enkelt alltför många möjliga skärmstorlekar där ute för att välja och välja vilka du ska designa för. Du måste skapa en layout som anpassas så smidigt som möjligt till dem alla. Lyckligtvis är vätskeformat här för att spara dagen!
Baserat på procentsatser snarare än bestämda mått som pixlar har vätskeformat blivit standard bland webbprofessorer. De kan vara knepiga, men att se till att så många människor som möjligt faktiskt kan använda din webbplats är väl värt ansträngningen.
3) Syfte för funktionalitet
Vad är funktionalitet? Det är vad du erbjuder dina besökare för att få saker gjort och gjort snabbt. Baserat på syftet med din webbplats bör alla verktyg som närmaste affärsplatser, produktsökning, produktrecensioner eller valutaomvandlare hjälpa användare att utföra avsedda "funktioner" och uppnå mål mycket snabbare.
Purina , en sällskapsdjurleverantör, är ett perfekt exempel på hur man gör "funktioner" enklare på en webbsida. Hemsidan har en sökruta där du kan söka efter det du letar efter. Nedan finns två separata kolumner för den typ av djurmat som de specialiserar sig på. Hela webbplatsen är lätt att navigera med kolumn, knappar, verktyg och designelement som gör beslut om den bästa sällskapsdjurmat - och då köper man en bris.
4) Identifiera dina användare
Försök inte bli en jack i alla affärer, eftersom det kan kosta dig en typisk användare, och ingen vill ha det. Ta reda på vem dina användare är. Ta reda på deras typiska webbläsningsbeteende. När det är avsett, ta reda på vad som gör att de kryssar. Moderna användare har två huvudtyper: de som surfar utan ett mål i åtanke, och de som vill utföra en uppgift. Var och en av dessa grupper skulle kräva olika "funktioner" baserat på deras behov.
Det är inte svårt att gissa demografiken hos The Body Shop-webbplatsens användare eftersom det lämnar tips över hela sidan. Eftersom Body Shop är mycket fokuserad på "naturliga ingredienser" och social aktivism, är de monokromatiska gröna variationerna, en glidare av naturliga ingredienser, "grönt" val av bilder, rapporter om rättvisa affärer, löften och andra sociala händelser ett förståeligt välutvecklat designkoncept.
5) Se alltid upp utvecklarens bibliotek och riktlinjer
Baserat på plattformen som du ska använda är det viktigt att ge användargränssnittet en noggrann titt. Vissa plattformar tillåter mer flexibilitet än andra. Oavsett fallet bör vissa nyckelkomponenter av varumärke eller "signaturer" förbli.
En Apple App Developer bör titta på IOS Human Interface Guidelines och följa Apple-standarder när det gäller att utforma grunder, designstrategier, användargränssnitt, ikon / bilddesign etc. Android-utvecklaren ska å andra sidan lära sig allt om komponenter, stil, användbarhet och layout av typiska Android-applikationer med hjälp av Android utvecklare guide .
6) Gör allt innehåll tillgängligt för alla användare
Vissa designers, istället för att göra allt innehåll, fungerar i vätskeformat, väljer helt enkelt att dölja lite av det från mobila användare. Ibland beror det på att layouten är knepig, eller de känner att det bara är för mycket innehåll för en mobil layout. Detta är fel inställning.
Att ge användarna en "strippad" -version av din webbplats eller app är inte bara orättvist för mobilanvändare, men kan allvarligt komma tillbaka och förlora dig kunder. Du kanske måste förenkla layouten till det yttersta, flytta lite innehåll till andra skärmar för att minska störningen, eller försök att ordna allt bättre. men det måste vara där .
Jämför skrivbordsversionen av BBC-webbplatsen till mobilversionen. Medan det är enklare än det brukade, lägger det fortfarande all slags information över hela skärmen. Den mobila versionen släpper däremot några av bilderna (som fortfarande finns i artiklarna själva), men håller alla rubriker, vilket dramatiskt förenklar upplevelsen på en skärm i telefonstorlek.
7) Design för beröring
Det är också användbart att komma ihåg det faktum att en mobilanvändare kommer att använda fingrar istället för precisionsvänliga muspekare. Din design ska vara lätt att navigera med fingrar i alla storlekar och former, med tanke på att alla mobila enheter är nu pekskärm. En användare borde inte behöva klämma för mycket eller zooma in för att knacka på något eller fylla i ett formulär eller tryck på en knapp. Felaktiga kranar är också mycket vanliga på små enheter som bör redovisas i konstruktionen med tillräckligt stora beröringsingångar eller gester för att få jobbet gjort.
Här är en pekskiva av Peter-Paul Koch som kan hjälpa till. Lägg märke till hur rörelsehändelser (och andra åtgärder) kan variera beroende på webbläsarkompatibilitet och enhet.
8) Använd komprimeringsverktyg
Mängden verktyg som finns tillgängliga idag för att göra en designers arbete mindre belastande är oföränderlig. Du hittar skriptkompressorer som HTML-kompressor eller gzip komprimering som automatiskt tar bort onödiga kommentarer, vitt utrymme eller kod. CSS minifier och CSS kompressor och några fler verktyg som gör att du kan sammanfoga CSS-koden och förbättra prestanda. Bildkomprimering är också lika viktig; några som kommer att minska storleken på dina .jpeg och .png-filer medan du fortfarande håller kvaliteten intakt inkluderar EWWW Image Optimizer , smush.it , optipng , och jpegtran .
Här är ett exempel på en mycket lyhörd portföljdesign av RyJohnson . Webbplatsen är full av spektakulära bilder som inte skiljer sig från skrivbordsversionen. Hemligheten att snabbt ladda här är utan tvekan bildoptimering.
