Mobiel websiteontwerp is gecompliceerd, omdat één mobiele versie van een site mogelijk niet compatibel is met elk apparaat. De ontwerpers moeten zich bewust zijn van de beste ontwerppraktijken om uw mobiele aanwezigheid zinvol en de moeite waard te maken.
Er is een continu debat tussen webontwikkelaars over de manier waarop een mobiel-geoptimaliseerde website de beste is. Er zijn drie toonaangevende methoden voor het ontwikkelen van een mobiele website.
Dit zijn:
- Responsief webontwerp.
- Toegewijde mobiele websites.
- RESS: Server-side programmering geeft CSS en HTML, afhankelijk van het type apparaat.
Elke methode heeft zijn voor- en nadelen. Een webontwikkelaar moet zich bewust zijn van elke techniek om de beste te implementeren voor de situatie.
3 manieren om een mobiele website te ontwerpen
Responsive Web Design (RWD)
RWD vertrouwt op CSS3-mediaquery's om de lay-out van een webpagina af te stemmen op de grootte van het weergavegebied van een apparaat. Dezelfde HTML-code wordt gebruikt om verschillende webpagina-indelingen weer te geven voor tablets, mobiele apparaten, desktops en andere gadgets.
Voordelen:
- Uw website heeft vergelijkbare inhoud en HTML-markeringen, zodat mobiele bezoekers dezelfde ervaring hebben, ongeacht het soort apparaat dat ze gebruiken.
- Een enkele URL maakt het eenvoudiger voor gebruikers om naar inhoud te linken en deze te delen. (Als de webpagina beschikbaar is onder meer dan één URL-adres, kunnen gebruikers in de war raken.)
nadelen:
Het is niet mogelijk om mobiele inhoud afzonderlijk te optimaliseren. Daarom kan een ontwerper die RWD gebruikt de inhoud niet afzonderlijk aanpassen voor mobiele gebruikers.
Volgens gegevens van januari 2013 uit een HTTP-archief is een gemiddelde webpagina ongeveer 1,3 MB groot. De meeste RWD-sites zijn echter relatief groter. Deze grotere omvang vermindert de prestaties van mobiele sites, waardoor ze langzamer worden.
Mobiele gebruikers zijn meer afgestemd op mobielspecifieke ontwerppatronen voor gebruikersinterfaces. Bovendien zijn mobiele gebruikers gewend aan multi-tasking. Tenzij de navigatiestructuur is aangepast voor specifieke apparaten, kunnen gebruikers problemen ondervinden bij het gelijktijdig uitvoeren van verschillende taken.
Toegewijde mobiele sites
Deze methode verbetert de ervaring van mobiele gebruikers door een volledig afzonderlijke website te maken.
Voordelen:
- Eenvoud van beheer: afzonderlijke wijzigingen zijn vereist voor mobiele en desktopsites. De gemaakte wijzigingen zijn beperkt tot elke versie. Dit betekent dat wijzigingen die zijn bedoeld voor het mobiele platform niet toegankelijk zijn vanaf desktop.
- Terwijl u een website ontwikkelt die specifiek is voor uw mobiele netwerk, wordt het gemakkelijker om deze speciaal voor die doelgroep te stroomlijnen en te optimaliseren.
- Inhouds- en navigatiestructuur kunnen worden aangepast voor mobiele gebruikers.
nadelen:
Het delen van een webpagina via sociale media wordt moeilijker, omdat met speciale mobiele sites er meerdere URL's voor pagina's zijn. Wanneer desktopgebruikers op mobiele URL's klikken die worden gedeeld op socialemediaplatforms, kunnen ze onbedoeld de mobiele versie van de site ontvangen in plaats van de desktopversie.
Om dubbele inhoudsproblemen te voorkomen, moet de webontwikkelaar rel = "alternative" en rel = "canonieke" metatags gebruiken. Als een mobiele gebruiker op Google zoekt en op een desktop-URL klikt, bekijkt de gebruiker de desktopversie of wordt hij omgeleid naar de mobiele versie van de webpagina. Als de mobiele versie niet bestaat, ontvangt de gebruiker een foutmelding.
Het creëren van een totaal andere website voor mobiele gebruikers betekent dat de site specifiek zal worden afgestemd op mobiele gebruikers. Om dat doel te bereiken, moeten webontwikkelaars functionaliteit en inhoud verwijderen, wat voor hen een nachtmerrie blijkt te zijn.
Responsive Web Design+ Server Side Components (RESS)
Deze methode is afhankelijk van de serverprogrammering om aangepaste HTML en CSS voor verschillende apparaten te bieden. De code voor mobiele gebruikers zal verschillen van die van desktopgebruikers.
Het belangrijkste doel van deze implementatie is het verbeteren van de prestaties van de website. Deze methode werkt goed in combinatie met responsief webontwerp. Daarom kan deze implementatie worden aangeduid als Responsive Web Design + server side components (RESS).
Voordelen:
- De navigatiestructuur kan worden aangepast voor verschillende taken die worden uitgevoerd door desktop- en mobiele gebruikers.
- Ontwikkelaars kunnen pagina-elementen verwijderen uit HTML en CSS om de gewenste weergave te bereiken.
- Het is mogelijk om onnodig JavaScript uit HTML te verwijderen, waardoor de CPU-bronnen, het geheugen en de cache van mobiele apparaten worden vrijgegeven.
nadelen:
- Dynamische HTML verhoogt de belasting van de server.
- Er kan niet op apparaatdetectie worden vertrouwd.
- HTML en CSS zijn geoptimaliseerd voor mobiele prestaties. Desktopversie gebruikt meer HTTP-aanvragen en Java Scripts.
Welke methode kiezen?
De beslissing om een voor mobiel geoptimaliseerde site te ontwerpen, hangt af van de producten die u verkoopt, uw doelgroep, de vereiste investering, uw concurrentie, conversiepercentages, etc. De ontwerpmethode die het beste werkt, hangt grotendeels af van schermindelingen, besturingssystemen, browsers en resoluties.
De meeste responsieve webontwerpsites worden niet optimaal geïmplementeerd en als gevolg hiervan nemen deze sites meer tijd in beslag om te laden. Aangezien de concurrentie hevig is, kunt u klanten kwijtraken als uw site langzamer presteert. Een gebruiker zal eenvoudig overschakelen naar een andere website die minder tijd nodig heeft om te openen. Hoewel het mogelijk is om websites te maken met kortere laadtijden met speciale mobiele sites, zijn er ook verschillende nadelen verbonden aan deze implementatie.
RESS biedt voordelen van RWD die zijn twee belangrijkste nadelen overwinnen. Het grootste nadeel van RESS is dat apparaatdetectie onbetrouwbaar is. Je moet vaak testen op nieuwe apparaten om ervoor te zorgen dat het proces goed blijft werken.
Er zijn services zoals DeviceAtlas, WURFL en anderen die nieuwe apparaten kunnen detecteren. Het zal een grote hulp zijn om nieuwe apparaten in uw database bij te werken.
Mobile Web design is alleen succesvol als een website correct wordt weergegeven op een mobiel apparaat. Hoewel het een enorme opgave is voor ontwerpers om alle essentiële onderdelen van een desktopsite in een klein, mobiel venster weer te geven, duiken er elke dag nieuwe technieken op om mobiele websites beter, sneller en vollediger te maken.
Mobiele website foto via Shutterstock
15 Opmerkingen ▼
