hur man bygger en mobil webbplats (i 4 enkla steg)
i oktober 2016, antalet mobila och tablet Internet-användare överträffade antalet stationära datoranvändare för första gången någonsin. Detta paradigmskifte fungerade som en uppmaning till handling för utvecklare att börja ompröva hela sin bransch. Sedan dess har mobilanvändningen fortsatt att växa och bli ännu vanligare och det finns många eleganta webbplatsutvecklingslösningar som används idag för att betjäna dessa användare.
dessa lösningar kan ge användarna en liknande upplevelse som de skulle få på ett skrivbord utan att kompromissa med innehållet eller funktionen på din webbplats. Att bygga en webbplats som kan skapa denna upplevelse kan verka skrämmande, det är mycket lättare än du tror.
det är så enkelt, faktiskt, att vi har sammanställt en lätt att följa 4 steg Guide till att skapa en mobil webbplats för att komma igång.
Välj din webbdesign strategi
det finns flera lösningar du kan använda för att skapa en mobilvänlig webbplats. Medan varje webbdesign strategi har sina egna anhängare som kommer att säga att det är bäst, bör du bestämma vilken som passar dina behov baserat på din egen hänsyn till informationen.
responsiv webbdesign
responsiv webbdesign (RWD) använder anpassningsbara layouter som möjliggörs genom användning av proportionsbaserade media, tillägg och backend-nät. Detta innebär att om ett webbläsarfönster utökas eller kontrakteras kommer innehållet att följa det och anpassa sig efter behov. Resultatet är en webbplats som liknar både skrivbord och mobil.
detta användargränssnitt i plast jämförs ofta med vatten. Du kan hälla en kopp vatten i ett glas, en kruka eller en kanna och vattenvolymen kommer att förbli densamma, trots byte av kärl.
adaptiv webbdesign
till skillnad från RWD, adaptiv webbdesign (AWD) inte förlita sig på en enda föränderlig layout. Istället använder den olika layouter för olika enheter och skärmstorlekar. Det betyder att när du loggar in på en webbplats får du den sida som bäst uppfyller behoven hos den enhet du använder för närvarande.
som ett exempel kan vissa välja att skapa tre webbplatser: en för smartphones, en för surfplattor och en för Stationära datorer. Detta skulle kräva tre olika mönster, som skulle förbli ”i vänteläge” tills varje besökare uppmanas. I stället för en one-size-fits-all webbplats fungerar en AWD som en anpassad gateway för alla användare.
tillvägagångssättet du väljer för att skapa din mobilwebbplats är bara början på designprocessen.
använd en webbplatsbyggare eller ett CMS
när du har bestämt hur du vill att din webbplats ska fungera på olika enheter är du redo att börja bygga den! Plattformen där du skapar din webbplats är avgörande för att använda din mobila designplan. För grundläggande användare finns det två alternativ att överväga.
webbplatsbyggare
webbplatsbyggare tar alla gissningar ur webbdesign och låter dig skapa en helt anpassningsbar och funktionsrik webbplats på bara några minuter. De uppnår detta så att användarna kan välja ett tema eller mall och helt enkelt dra-och-släpp-funktioner som de gillar på sina webbsidor och enkelt ta bort de som de inte gör.
de flesta webbplatsbyggare, inklusive gold standard Wix, tillåter användare att helt enkelt bestämma hur deras webbplatser kommer att reagera på mobilen. Wix-plattformen förlitar sig mest på adaptiva webbplatser, medan andra tjänster som Weebly mest förlitar sig på responsiv design. Beroende på vilken typ av tillvägagångssätt du föreställde dig för din webbplats kan du välja att gå med en webbplatsbyggare som kan tillgodose dina behov.
innehållshanteringssystem
ett innehållshanteringssystem (CMS) är ditt bästa alternativ till en dedikerad webbplatsbyggare. CMS som WordPress förlitar sig på lite mer Dator-och Internetkunskap, men de kan ge fler funktioner än webbplatsbyggare. Dessutom erbjuder ett CMS både RWD-och AWD-mönster.
i likhet med webbplatsbyggare kan ett CMS dra nytta av antingen mobil designmetod genom att integrera dem i de många teman som är tillgängliga för användarna. Dessa teman kan bara vara rika som de som finns på webbplatsbyggare, men de tjänar bättre de som inte har något emot att få händerna lite smutsiga och lära sig lite om webbdesign.
om du väljer att använda ett CMS kan du helt enkelt ladda ner ett mobilklart tema, antingen gratis eller mot avgift, och använda det för att skapa din webbplats. De flesta av dessa teman har fullt stöd och regelbundna uppdateringar, så du behöver inte oroa dig för att underhålla och hantera din webbplats.
designa en mobilwebbplats
när du bestämmer vilken plattform du ska bygga din webbplats på är du redo att designa och skapa din webbplats. Oavsett om du skapar en blogg, En portfölj, en företagswebbplats eller till och med en e-handelsbutik, kan du göra det med hjälp av de standardprinciper som är nödvändiga för någon webbplatsdesign. När du har slutfört din design måste du antingen helt enkelt testa din webbplats för att se om den svarar ordentligt (RWD) eller skapa en annan design för Mobil (AWD).
att designa en mobilwebbplats är nästan lika enkelt som att designa en stationär webbplats, men det finns några saker du kanske vill tänka på.
a. mobila användare har i allmänhet begränsad bandbredd
du bör alltid komma ihåg att de flesta mobila besökare använder mobilnät som begränsar deras bandbredd. Som ett resultat är det viktigt att hålla din mobila webbplats lätt och fri från för mycket innehåll som kan äta bort vid de avgörande byte.
b. Mobilanvändare vill ha Relevant Information snabbt
ofta besöker mobilanvändare en webbplats för att få relevant information om de platser de besöker, till exempel öppettider eller telefonnummer. Om denna relevanta information inte är tillgänglig snabbt och tydligt kan det leda till förlust av en kund. Se till att din mobilwebbplats har snabblänkar till kontaktinformation och annan relevant information.
c. mobila enheter är mindre kraftfulla
stationära och bärbara datorer är byggda med grafikkort och processorer som kan hantera en tung belastning. Medan mobila enheter är extremt kraftfulla är de inte byggda på samma sätt. Istället förlorar de funktionen för form och som ett resultat kan de inte hantera processortungt innehåll på samma sätt som en dator kan.
om din skrivbordssida kräver denna typ av resursengagemang, kanske du vill tänka två gånger om att betjäna en mobil publik samma typ av webbplats.
organisera innehåll
när du skapar en mobil webbplats är det viktigt att se till att dina användare har tillgång till allt på skrivbordet webbplats samtidigt behålla förmågan att arbeta på en mindre skärm. Det finns flera överväganden du bör tänka på när du organiserar ditt innehåll.
a. Mobile First
Mobile First är en av de nyaste rörelserna i designvärlden. Det föreskriver att du först måste designa din mobila webbplats innan du expanderar till sidor för Stationära datorer och surfplattor. Innehållet du skapar för din mobila webbplats kan också laddas på skrivbordsversionen.
detta tillvägagångssätt är därför användbart för dynamiskt serverade och lyhörda webbplatser där innehållet i din mobilversion är identiskt med det på din stationära webbplats.
b. Mobile Second
om du redan har en stationär webbplats kan det vara lite svårare att organisera innehållet, men inte helt omöjligt. Först, ta reda på elementen på din skrivbordssida som du behöver visa på mobilversionen.
samla in användardata genom de vanliga analysverktygen du använder och ta reda på:
- det innehåll som är viktigast för dina besökare.Vilka mobila användare tenderar att ignorera.Den väg dina besökare brukar ta.
använd de insikter du samlar för att veta vad som ska och vad som inte ska gå på mobilsidan. Detta hjälper dig att rensa din skrivbordssida. Kartlägg sedan den innehållsväg som dina besökare kommer att ta.
när du har en bra uppfattning om det visuella flödet på din webbplats kan du enkelt lägga ut den ursprungliga designen för mobila skärmar och gå direkt in i mobilwebbplatsutvecklingen.
C. navigering
mobiltelefonskärmar är små. Detta innebär att du bör minimera alternativen för mobilnavigering. Överväg att använda ett förstoringsglas eller menyn tre rader (hamburgare) navicon. När du är klar, testa din webbplats på de populära enheter som används av upp till 90% av dina mobila besökare.
d. Design för beröring
eftersom det är omöjligt att högerklicka eller sväva med fingrarna på en mobil enhet måste du placera länkar på din mobilwebbplats för att säkerställa att dina användare inte av misstag klickar på fel länkar. Gör detta genom att:
- ge feedback när skärmen berörs.Använda knappar för att definiera var användare kan och inte kan klicka.Omforma dina rullgardinsmenyer.Minimera textinmatning.
och där har du det! Använd denna information nästa gång du behöver för att helt omforma din stationära webbplats för visning på mobila enheter, eller när du skapar en ny mobil webbplats från grunden.