Mobile First Design Varför det är bra och varför det suger

Historiskt sett har de flesta webbdesigners och deras kunder kontaktat skrivbordssidan av något projekt först, samtidigt som de lämnar mobildelen som ett sekundärt mål som uppnås senare. Även med uppkomsten av lyhörd design börjar många av oss med fullstorleken? plats och jobba ner.

Det finns en växande trend i branschen, men att flipa detta arbetsflöde på huvudet och faktiskt börja med mobila överväganden och sedan arbeta upp till en större stationär version. Varför skulle du någonsin närma dig ett projekt på detta sätt? Vad är några av fördelarna med och nackdelarna med denna strategi? Läs vidare för att ta reda på det!

Den här artikeln är en del av vår serie på? Utöver skrivbordsdesign?, Som kom med dig i samarbete med Heart Internet VPS.

Mobil webbdesign är inte en nisch

Om du fortfarande har det i ditt huvud, att mobil webbdesign och applikationsutveckling är en nischindustri, måste du ändra din tankesätt. Mobil är inte en trend, det är inte heller framtiden, det är nutiden. Tro mig inte? Här är några galen statistik att överväga från Mobithinking från förra månaden.

  • Det är över 1,2 miljarder mobila webanvändare över hela världen
  • I USA är 25% av mobilanvändarna mobila enda (de använder sällan ett skrivbord för att komma åt webben)
  • Mobila appar har laddats ner 10,9 miljarder gånger
  • Försäljningen av mobila enheter ökar över hela linjen med över 85 procent av de nya telefonerna som kan komma åt mobilen

En av de mest kraftfulla fakta här är det andra objektet, vilket visar att många användare sannolikt bara kommer att se mobilversionen av din webbplats. Det är en förbluffande uppenbarelse är det inte?

Mer än någonsin är webben något vi bär i våra fickor, inte något som bara hänger nära vårt skrivbord eller ens i våra hem. Det här är en global trend som bara fortsätter att se tillväxten under de närmaste åren. Är du redo för detta? Har din professionella färdighetsuppsättning webbutveckling för alla viktiga plattformar eller bara skrivbordsarenan?

Varför mobil först?

Odds är ingen av de som läser detta har lärt sig något nytt fram till denna punkt. $ 200 + telefonerna i fickorna till alla du känner till är all den indikation du behöver för att webben har brutit ut ur sin datorformade låda.

Det faktum att mobilwebåtkomst är populär gör nästan ingenting för att övertyga mig om att jag behöver driva en strategi som faktiskt sätter mobilen först. Den bakre sidan av 25% av mobilanvändarna är endast mobilt, att 75% av dem inte är! Självklart är skrivbordet fortfarande ett viktigt medium, inte att glömmas eller drivas till bakbrännaren ganska än. Så varför överväger vi även att ta den mobila första rutten?

En av de viktigaste katalysatorerna för uppkomsten av mobil första webbdesign var meddelandet från Eric Schmidt 2010 att Google skulle ta detta tillvägagångssätt från och med nu, går så långt som att säga? Jag tycker att det nu är det gemensamma projektet för alla av oss att göra mobil svaret på stort sett allting? (källa). Varför denna drastiska förändring i tillvägagångssätt?

Graciös Nedbrytning kontra Progressiv Förbättring

Det här är några stora buzzord från några år sedan som fortfarande kan ge en hel del inblick i begreppet mobil första webbdesign och varför det är ett viktigt koncept att överväga.

Graciös nedbrytning uppstod ur behovet av att ha en designfunktion på så många webbläsare och plattformar som möjligt. Designers och utvecklare ville utnyttja ny teknik utan att utesluta användare med inställningar som inte hade stöd. Den allmänna slutsatsen var att skapa och tjäna upp den bästa möjliga upplevelsen, och sedan redogöra för varje eventuell försämring och se till att trots eventuella brister skulle webbplatsen förbli funktionell.

När det gäller mobil webbdesign, innebar det att en fullständig standardwebbplats skulle skala tillbaka och gradvis ta bort innehåll och funktioner som visningsporten blev mindre och systemet enklare (ingen Flash support etc.).

Utan denna trend uppstod en kraftfull ny idé: progressiv förbättring. I den här versionen av berättelsen lägger du din bästa fot framåt på mobilplattformen, vilket ger användarna minimala skärmfastigheter, processorkraft och plugin från tredje part en fantastisk upplevelse som både ser bra ut och fungerar perfekt. När behovet uppstår kan webbplatsen successivt förbättras? och till och med helt omprövas för större plattformar med färre begränsningar.

Varför Progressiv Förbättring Vinster

I ett ögonblick verkar dessa två metoder vara ungefär likvärdiga. Vem bryr sig var du börjar designprocessen så länge det blir gjort, eller hur?

Situationen är dock lite mer komplex men. När du börjar med skrivbordsplattformen tenderar du att utnyttja allt som plattformen har att erbjuda. Du bygger en fantastisk produkt som utnyttjar mycket bra teknik, bara för att inse att ingen av det vågar ner till mobilen. Detta kan och leder till kraftigt uppvattna mobila produkter som känns mer som en eftertanke än en polerad, färdig produkt. Händer detta med varje projekt? Kanske inte, men historien är sannolikt mycket vanligare än vad du skulle vilja tro.

Om vi ​​undersöker det progressiva förbättringsarbetet, har resultatet en tendens till att vara en annan historia. Här börjar vi med ett projekt som är både supertrevligt och ganska imponerande. Du har tagit all den startkraften och lägger den på att skapa en produkt som ser ut och fungerar bra trots de många begränsningar som du ställde inför.

Ännu viktigare, du har redan gått igenom problemet med att trimma ner innehållet till dess viktigaste element. Nu när det är dags att ta med den här designen till skrivbordet, istället för att möta beslutet om vad som ska klippas och hur man vattnar ner din produkt, får du istället att bestämma hur man gör det ännu mer robust!

Webinnehåll: Bäst serveras selektivt

Ovanstående argument kommer på din från en rent filosofisk synvinkel med den ultimata slutsatsen att slutresultatet är tenderar att vara bättre om ett mobilt första tillvägagångssätt tas. Om du vill ha ett argument med lite mer observerbart ämne bakom det, se inte längre än hur du tjänar upp ditt innehåll.

Om vi ​​tar det graciösa nedbrytningssynpunktet serveras allt innehåll (text, bilder, video, ljud etc.) samtidigt som det antas vara den största plattformen. Härifrån redovisas mobila versioner som helt enkelt ignorerar eller tar bort mycket av innehållet från sidan. Problemet är dock att det redan var laddat om den givna plattformen behövde det eller inte. Vi befinner oss i att tjäna mer innehåll än vad som behövs på plattformen som ofta är förknippad med de långsammaste nedladdningshastigheterna. Se något fel med det?

Med en mobil första synpunkt börjar vi genom att ladda de absoluta nödvändiga nödvändigheterna på de mindre plattformarna. Detta leder till en snyggare upplevelse som undviker onödig fördröjning. De extra resurserna laddas strikt på en så kallad plattform som kan hantera dem bra.

Vad om responsiv design?

Hur passar allt detta in med lyhörd design, den andra trenden som tar över webben? Den goda nyheten är att dessa två strategier inte är konkurrenskraftiga. Faktum är att du kan säga att de gjordes för varandra.

Responsiv design bygger på begreppet mediafrågor som riktar sig mot specifika enheter och visningsstorlekar. Med detta i åtanke kan du koda upp din första CSS i ett mobilt perspektiv och använd sedan mediefrågor för att selektivt tjäna ytterligare styling, eftersom visningsportstorleken ökar.

Detta är sannolikt motsatsen till den metod som du normalt tar med responsiv design: starta stor och minska sedan. Med tanke på ovanstående argument finns det uppenbarligen en hel del logik bakom att strukturera dina mediefrågor från små till stora.

Den stora feta nackdelen

Hooray för mobil första webbdesign. Det är uppenbarligen det bästa att slå på nätet sedan Havregryn. Så varför är jag inte glad över det? Varför, trots att jag grumar över lyhörd design, har jag ofta helt enkelt undvikit ämnet mobila första webbdesign?

Svaret här är enkelt: det är inte roligt eller enkelt. En säker responsiv design är knepig, men det gör det möjligt för mig att verkligen böja mina layoutmuskler och utnyttja en hel del inbyggd webbläsarfunktion för att utföra några coola funktioner. Responsiv design gör min leksakslåda större, inte mindre.

Med mobil första design men jag slår över huvudet med begränsningar på steg ett. Det är inte roligt alls! Omedelbart står jag inför en mindre skärm, färre resurser och en massa mer huvudvärk. Vidare är det bara inte bekvämt territorium. Jag har tillbringat det mesta av min karriär på webbdesign i skrivbordet, byggt upp erfarenheter kring mushöjningar och klick, inte fingertoppar. Jag har gjort mycket mobilt arbete men jag skulle inte kalla det min starka kostym.

Viktigast, från ett strikt designperspektiv tycker jag att det är väldigt svårt att verkligen dyka in i en design om jag börjar med mobilen och jobbar min väg upp. Jag nämnde detta i en ny artikel till massor av? Huzzahs? i kommentarerna och har även hört ledande branschpersonal sjunger en liknande melodi.

Stigande till utmaningen

Låt oss leta efter en sekund i mina argument för och mot en mobil första designmetod. I? För? kategori, vi har raka och logiska argument som är svåra att nedspela. I? Mot? kategori Jag har mycket whining och personlig tvekan. Vilken sida tror du vinner den här striden?

Kanske har du några bättre anti-mobila första argument än jag gör, men om jag tittar på detta ur ett objektivt perspektiv är det uppenbart att mobilens första tillvägagångssätt är den starkare konkurrenten.

Det betyder att jag förmodligen måste komma över mig själv och stiga till utmaningen att starta projekt med mobil synvinkel. Om jag inte är bekväm att designa för mobil först, bra, det betyder att jag har utrymme att växa och tekniker för att lära mig.

I slutändan, om mina skäl för att anta ett mobilt första tillvägagångssätt är användarcentrerade och mina skäl till det är personliga, måste jag ge upp lite komfort i namnet på att vara en bättre designer.

Vad håller du tillbaka?

Nu vet du allt om hur bra mobil första webbdesign är för dina användare. Du vet att stora företag som Google tar detta tillvägagångssätt och du kan tydligt se fördelarna med ett mobilt första arbetsflöde. Så vad håller du tillbaka?

Delar du mitt personliga perspektiv att mobilen först är en svår strategi för att genomföra och hålla med om att du bara behöver mana upp (eller kvinnan om du föredrar) och ta språket? Eller är det något mer väsentligt att hålla dig tillbaka? Lämna en kommentar nedan och låt oss veta!

Bilder via BigStock: Reno Martin, Yellowj och PixelsAway.