Mobile First Design: waarom het geweldig is en waarom het zuigt

Historisch gezien hebben de meeste webontwerpers en hun klanten eerst de desktopkant van elk project benaderd, terwijl ze het mobiele deel als een secundair doel hebben achtergelaten dat later wordt bereikt. Zelfs met de opkomst van responsive design, beginnen velen van ons met de 'full size' site en werken naar beneden.

Er is echter een groeiende trend in de branche om deze workflow op zijn kop te zetten en eigenlijk te beginnen met mobiele overwegingen en vervolgens door te werken naar een grotere desktopversie.

Waarom zou je ooit een project op deze manier benaderen? Wat zijn enkele voor- en nadelen van deze strategie? Lees verder om erachter te komen!

Mobiel webdesign is geen niche

Als je nog steeds in je hoofd hebt dat mobiel webdesign en applicatie-ontwikkeling een niche-industrie is, moet je je manier van denken veranderen. Mobiel is geen trend en ook niet de toekomst, het is het heden. Geloof je me niet? Hier zijn enkele gekke statistieken van Mobithinking:

• Er zijn wereldwijd meer dan 1, 2 miljard mobiele internetgebruikers
• In de VS is 25% van de mobiele webgebruikers alleen mobiel (ze gebruiken zelden een desktop om toegang te krijgen tot internet)
• Mobiele apps zijn 10, 9 miljard keer gedownload
• De verkoop van mobiele apparaten neemt over de hele linie toe met meer dan 85 procent van de nieuwe handsets die toegang hebben tot mobiel internet

Een van de meest krachtige feiten hier is het tweede item, dat aan het licht brengt dat veel gebruikers waarschijnlijk alleen de mobiele versie van uw site zullen zien. Dat is een verbazingwekkende openbaring, nietwaar?

Meer dan ooit tevoren is internet iets dat we in onze zakken dragen, niet iets dat alleen maar bij ons bureau of zelfs bij ons thuis hangt. Dit is een wereldwijde trend die de komende jaren alleen maar zal blijven groeien. Ben je hier klaar voor? Omvat uw professionele vaardigheden webontwikkeling voor alle belangrijke platforms of alleen de desktoparena?

Waarom Mobile First?

De kans is groot dat geen van de mensen die dit lezen tot nu toe niets nieuws heeft geleerd. De $ 500 + telefoons in de zakken van iedereen die je kent, zijn allemaal een indicatie dat het web uit zijn computervormige doos is gebroken.

Het feit dat mobiele internettoegang populair is, overtuigt mij echter bijna niet dat ik een strategie moet volgen waarbij mobiel voorop staat. De keerzijde van 25% van de mobiele gebruikers die alleen mobiel zijn, is dat 75% dat niet is! De desktop is nog steeds een belangrijk medium, niet te vergeten of nog niet op de lange baan geschoven. Dus waarom overwegen we zelfs om de mobile-first route te nemen?

Een van de belangrijkste katalysatoren voor de opkomst van mobile-first webdesign was de aankondiging van Eric Schmidt in 2010 dat Google deze aanpak vanaf nu zou volgen, en ging zelfs zo ver dat hij zei: "Ik denk dat het nu het gezamenlijke project is van wij allemaal om van mobiel het antwoord te maken op vrijwel alles ”(bron). Waarom deze drastische aanpakwijziging?

Graceful Degradation vs. Progressive Enhancement

Dit zijn enkele belangrijke buzz-woorden van een paar jaar geleden die nog steeds veel inzicht kunnen geven in het idee van mobile-first webdesign en waarom het een belangrijk concept is om te overwegen.

Gracieuze achteruitgang kwam voort uit de behoefte om een ​​ontwerpfunctie op zoveel mogelijk browsers en platforms te hebben. Ontwerpers en ontwikkelaars wilden profiteren van nieuwe technologie zonder gebruikers uit te sluiten met instellingen die geen ondersteuning hadden. De algemene conclusie was om de best mogelijke ervaring te creëren en op te dienen, en vervolgens rekening te houden met elke mogelijke verslechtering en ervoor te zorgen dat de site ondanks eventuele tekortkomingen functioneel zou blijven.

In termen van mobiel webdesign betekende dit dat een volledige, standaard website zou terugschalen en geleidelijk inhoud en functies zou verwijderen naarmate de viewport kleiner werd en het systeem eenvoudiger (geen Flash-ondersteuning, enz.).

Uit deze trend ontstond een krachtig nieuw idee: progressieve verbetering. In deze versie van het verhaal zet je je beste beentje voor op het mobiele platform, waardoor de gebruikers minimale schermruimte, verwerkingskracht en plug-ins van derden een geweldige ervaring krijgen die er zowel geweldig uitziet als perfect functioneert. Als de behoefte zich voordoet, kan de site geleidelijk worden 'verbeterd' en zelfs volledig opnieuw worden bekeken voor grotere platforms met minder beperkingen.

Waarom Progressive Enhancement Wins

In één oogopslag lijken deze twee methodologieën ongeveer gelijk. Wat maakt het uit waar je met het ontwerpproces begint, zolang het maar wordt gedaan, toch?

De realiteit van de situatie is echter iets complexer. Wanneer u begint met het desktopplatform, wilt u profiteren van alles wat het platform te bieden heeft. Je bouwt een geweldig product dat veel geweldige technologie gebruikt, alleen om te beseffen dat niets ervan goed terugschaalt naar mobiel. Dit kan en leidt tot sterk verwaterde mobiele producten die meer als een bijzaak aanvoelen dan een gepolijst, afgewerkt product. Gebeurt dit bij elk project? Misschien niet, maar het verhaal komt waarschijnlijk veel vaker voor dan je zou willen geloven.

Als we de progressieve verbeteringsworkflow onderzoeken, is het resultaat meestal een ander verhaal. Hier beginnen we met een project dat zowel superlean als behoorlijk indrukwekkend is. Je hebt al die start-energie genomen en er een product van gemaakt dat er goed uitziet en goed functioneert, ondanks de vele beperkingen waarmee je te maken kreeg.

Wat nog belangrijker is, je hebt het probleem van het inkorten van de inhoud tot de meest essentiële elementen al doorlopen. Wanneer het nu tijd is om dit ontwerp naar de desktop te brengen, in plaats van de beslissing te nemen over wat u moet knippen en hoe u uw product moet afzwakken, kunt u in plaats daarvan beslissen hoe u het nog robuuster kunt maken!

Webinhoud: het beste selectief weergegeven

Het bovenstaande argument komt uit puur filosofisch oogpunt met als uiteindelijke conclusie dat het resultaat meestal beter is als een mobile-first benadering wordt gevolgd. Als je een argument wilt met een iets meer waarneembare inhoud erachter, zoek dan niet verder dan hoe je je inhoud serveert.

Als we het gracieuze standpunt van degradatie innemen, wordt alle inhoud (tekst, afbeeldingen, video, audio, enz.) Tegelijkertijd aangeboden aan wat wordt verondersteld het grootste platform te zijn. Vanaf hier worden mobiele versies verantwoord die eenvoudigweg veel van deze inhoud van de pagina negeren of verwijderen. Het probleem is echter dat het al was geladen, ongeacht of het gegeven platform het nodig had of niet. We merken dat we meer inhoud aanbieden dan nodig is op het platform dat vaak wordt geassocieerd met de langzaamste downloadsnelheden. Zie je daar iets mis mee?

Met een mobiel-eerste gezichtspunt beginnen we met het laden van de absolute basisbenodigdheden op de kleinere platforms. Dit leidt tot een vlottere ervaring die onnodige vertraging voorkomt. De aanvullende bronnen worden strikt naar behoefte geladen op platforms die ze goed aankunnen.

Hoe zit het met responsief ontwerp?

Hoe past dit allemaal in responsive design, de andere trend die het web overneemt? Het goede nieuws is dat deze twee strategieën niet concurrerend zijn. Je zou kunnen zeggen dat ze voor elkaar gemaakt zijn.

Responsive design is gebouwd rond het concept van mediaquery's die gericht zijn op specifieke apparaten en viewport-formaten. Met dit in gedachten, kunt u uw initiële CSS coderen vanuit een mobiel perspectief en vervolgens mediaquery's gebruiken om selectief extra styling te bieden naarmate de viewport groter wordt.

Dit is waarschijnlijk het tegenovergestelde van de methode die u gewoonlijk gebruikt bij responsief ontwerp: begin groot en verminder vervolgens. Gezien de bovenstaande argumenten, is er veel logica achter het structureren van uw mediaquery's van klein tot groot.

The Big Fat Downside

Hoera voor mobiel-eerste webdesign. Het is het leukste om op internet te komen sinds The Oatmeal. Dus waarom ben ik er niet enthousiast over? Waarom heb ik, hoewel ik over responsive design heen gut, vaak ronduit het onderwerp mobile-first webdesign vermeden?

Ik heb meteen te maken met een kleiner scherm, minder bronnen en nog veel meer hoofdpijn.

Het antwoord is hier simpel: het is niet leuk en ook niet gemakkelijk. Natuurlijk is een responsief ontwerp lastig, maar het stelt me ​​in staat om mijn lay-outspieren te buigen en veel ingebouwde browserfunctionaliteit te gebruiken om een ​​aantal coole prestaties te leveren. Een responsief ontwerp maakt mijn speelgoeddoos groter, niet kleiner.

Met mobiel-eerste ontwerp ben ik echter over het hoofd geraakt met beperkingen bij stap één. Dat is helemaal niet leuk! Ik heb meteen te maken met een kleiner scherm, minder bronnen en nog veel meer hoofdpijn. Verder is het gewoon niet het comfortabele terrein. Ik heb het grootste deel van mijn carrière in webdesign doorgebracht in de desktopruimte, waarbij ik ervaringen heb opgebouwd met muisbewegingen en klikken, niet met vingertoppen. Ik heb veel mobiel werk gedaan, maar ik zou het niet mijn sterkste punt willen noemen.

Het belangrijkste is dat ik vanuit een strikt ontwerpperspectief het erg moeilijk vind om in een ontwerp te duiken als ik met mobiel begin en naar boven werk. Ik noemde dit in een recent artikel voor veel "huzzahs" in de commentaren en heb zelfs vooraanstaande professionals uit de industrie een vergelijkbaar deuntje horen zingen.

Rising To The Challenge

Laten we even kijken naar mijn argumenten voor en tegen een mobiel-eerste ontwerpbenadering. In de categorie "voor" hebben we duidelijke en logische argumenten die moeilijk te bagatelliseren zijn. In de categorie "tegen" heb ik veel gezeur en persoonlijke aarzeling. Welke kant wint volgens jou deze strijd?

Ik moet een beetje comfort opgeven in de naam dat ik een betere ontwerper ben.

Misschien heb je een aantal betere anti-mobiel-eerste argumenten dan ik, maar als ik dit vanuit een objectief oogpunt bekijk, is het duidelijk dat de mobiel-eerste benadering de sterkere kanshebber is.

Dit betekent dat ik waarschijnlijk mezelf moet overwinnen en de uitdaging aan moet om projecten te starten met een mobiel standpunt. Als ik het niet prettig vind om eerst mobiel te ontwerpen, dan betekent dat dat ik ruimte heb om te groeien en technieken om te leren.

Uiteindelijk, als mijn redenen om een ​​mobile-first benadering te gebruiken gebruikersgericht zijn en mijn redenen daartegen persoonlijk zijn, dan moet ik een beetje comfort opgeven in naam van een betere ontwerper te zijn.

Wat houdt je tegen?

U weet nu alles over hoe geweldig mobile-first webdesign is voor uw gebruikers. U weet dat grote bedrijven zoals Google deze aanpak volgen en u kunt de voordelen zien van een mobiel-eerste workflow. Dus wat houdt je tegen?

Deel je mijn mening dat mobiel-eerst een moeilijke strategie is om te implementeren en ben je het ermee eens dat je gewoon de sprong moet wagen? Of houdt iets wezenlijks u tegen?