De ultieme gids voor mobiele website in 2018

In de afgelopen jaren is mobiel internetgebruik aanzienlijk toegenomen tot het punt dat web ontwikkelaars en ontwerpers het zich niet langer kunnen veroorloven om het te negeren. In rijke landen wordt de verschuiving gevoed door snellere mobiele breedbandverbindingen en goedkopere datadiensten. Er is echter ook een grote toename te zien in ontwikkelingslanden waar mensen pc’s hebben overgeslagen en meteen naar mobiel zijn gegaan.

Jammer genoeg introduceert de mobiele arena een laag van complexiteit die ontwikkelaars moeilijk aankunnen. Mobiele ontwikkeling is meer dan cross-browser, het moet platform overschrijdend zijn. Het grote aantal mobiele apparaten maakt grondig testen praktisch onmogelijk en laat ontwikkelaars nostalgisch over de tijd dat ze alleen oudere browsers moesten ondersteunen.

Naast ondersteuning voor verschillende platforms, kan elk apparaat een willekeurig aantal mobiele webbrowsers gebruiken. Een Android-gebruiker kan bijvoorbeeld toegang krijgen tot uw site via de eigen Android-browser of Opera Mini of Firefox Mobile. Het is prima zolang de smartphone een progressieve webbrowser gebruikt (en het is veilig om te zeggen dat de meeste browsers tegenwoordig progressief zijn), maar dat hoeft niet.

Hoe Mobile Stylesheets Link te implementeren

De eerste stap naar het toevoegen van mobiele ondersteuning aan een website is inclusief een speciale stylesheet om de CSS voor mobiele apparaten aan te passen:

Servermethoden & De UA String

Een benadering voor het opnemen van mobiele stylesheets omvat het detecteren van de user-agentstring met een server-side taal zoals PHP. Met deze techniek detecteert de site mobiele apparaten en wordt een geschikte stylesheet weergegeven of wordt de gebruiker omgeleid naar een mobiel subdomein, bijvoorbeeld m.facebook.com. Deze server-side benadering heeft verschillende voordelen: het garandeert de hoogste mate van compatibiliteit en maakt het ook mogelijk voor de website om speciale mark-up/ content aan mobiele gebruikers te geven.

Hoewel deze techniek perfect is voor websites op ondernemingsniveau, zijn er praktische zorgen die het op de meeste websites moeilijk maken om te implementeren. Nieuwe user-agentstrings komen bijna dagelijks uit, dus het is bijna onmogelijk om de UA-lijst actueel te houden. Bovendien is deze benadering afhankelijk van het apparaat dat de echte user-agent doorgeeft. Hoewel browsers hun UA-reeks hebben vervalst om dit type detectie in het verleden te omzeilen. De meeste UA-reeksen beginnen bijvoorbeeld nog steeds met “Mozilla” om de Netscape-controles te vinden die in de jaren 90 werden gebruikt en gedurende een aantal jaren deed Opera zich voor als IE. Zoals Peter-Paul Koch schrijft:

 

LIENSZIJDE METHODEN & MEDIA-VRAGEN

Als alternatief is de eenvoudigste benadering het detecteren van het mobiele apparaat aan de kant van de klant. Een van de vroegste technieken voor het opnemen van mobiele stylesheets omvat het profiteren van het mediatype van de stylesheet, bijvoorbeeld:


<link rel = "stylesheet" href = "mobile.css" media = "handheld" />
<link rel = "stylesheet" href = "site.css" media = "scherm" />

Hier hebben we twee stylesheets opgenomen, de eerste site.css voor desktops en laptops met het schermmediatype, terwijl de tweede mobile.css gericht is op mobiele apparaten die handheld gebruiken. Hoewel dit anders een uitstekende aanpak zou zijn, is apparaatondersteuning een ander probleem. Oudere mobiele apparaten hebben de neiging om het handheld-mediatype te ondersteunen, maar ze variëren in de implementatie: sommige schakelen de schermstijlbladen uit en laden alleen in de handheld, terwijl andere beide laden.

 

Bovendien hebben de meeste nieuwere apparaten het handheld-onderscheid helemaal weggedaan, om hun gebruikers volledig uitgeruste webpagina’s te kunnen bieden, in tegenstelling tot saaie mobiele lay-outs. Om nieuwere apparaten te ondersteunen, moeten we mediaquery’s gebruiken, waarmee we stijlen kunnen targeten op de apparaatbreedte (u kunt een andere praktische aanpassing van mediaquery’s zien in Ethan Marcotte’s artikel Responsive Web Design). Omdat mobiele apparaten meestal kleinere schermen hebben, kunnen we apparaten in de hand richten door schermen te detecteren die 480 px en kleiner zijn:
<link rel = "stylesheet" href = "mobile.css" media = "alleen scherm en (max-device width: 480px)" />

Hoewel dit op de meeste nieuwere apparaten is gericht, ondersteunen veel oudere apparaten geen mediaquery’s, dus we hebben een hybride aanpak nodig om de grootste marktpenetratie te krijgen.

Definieer eerst twee stylesheets: screen.css met alles voor normale browsers en antiscreen.css om alle stijlen te overschrijven die je niet op mobiele apparaten wilt. Bind deze twee stylesheets samen in een ander stylesheet core.css:


@import url ("screen.css");

@import url (“antiscreen.css”) handheld;

@import url (“antiscreen.css”) alleen scherm en

(Max device width: 480px);

 

Definieer tenslotte nog een stylesheet handheld.css met extra styling voor mobiele browsers en koppel ze op de pagina:

 

GEBRUIKERSGEGEVENS METHODE

Gezien de problemen met mobiele UA-detectie en de valkuilen van mediaquery’s, hebben sommige bedrijven zoals IKEA ervoor gekozen om de gebruiker eenvoudigweg te laten beslissen of ze de mobiele versie van hun website willen bekijken. Hoewel dit het duidelijke nadeel heeft dat er meer gebruikersinteractie vereist is, is dit misschien wel de meest fool-proof methode en ook het eenvoudigst om te bereiken.

De site bevat een link met de tekst ‘Bezoek onze mobiele site’ die de gebruiker naar een mobiel subdomein vervoert. Deze benadering heeft enkele nadelen. Natuurlijk kunnen sommige mobiele gebruikers de link missen, en andere niet-mobiele bezoekers kunnen erop klikken, omdat deze zichtbaar is, ongeacht welk apparaat wordt gebruikt. Hoewel deze techniek het voordeel heeft dat de gebruiker de mobiele beslissing kan nemen. Sommige gebruikers geven de voorkeur aan een compacte lay-out die is geoptimaliseerd voor hun apparaat, terwijl andere gebruikers de voorkeur geven aan toegang tot de hele website, zonder de beperkingen van een beperkte mobiele lay-out.


Wat te veranderen met mobiele stylesheets

Link Nu we mobiele stylesheets hebben geïmplementeerd, is het tijd om uit de klauwen te halen welke stijlen we eigenlijk willen veranderen.

 

VERHOOG & ALTER SCREEN ONROERENDE GOEDEREN

Het primaire doel van mobiele stylesheets is om de layout te wijzigen voor een kleiner scherm. Eerst en vooral betekent dit het verminderen van multi-kolomlay-outs naar enkele kolommen. De meeste mobiele schermen zijn verticaal, dus horizontale ruimte wordt zelfs “duurder” en mobiele lay-outs kunnen zich zelden meer dan één kolom met inhoud veroorloven. Verlaag vervolgens de rommel over de hele pagina door weergave in te stellen: geen; op minder belangrijke elementen. Sla tot slot extra pixels op door de marges en opvulling te verminderen om een ​​strakkere lay-out te maken.

VERMINDER BANDBREEDTE

Een ander doel van mobiele stylesheets is om de bandbreedte voor tragere mobiele netwerken te verminderen. Zorg er eerst voor dat u grote achtergrondafbeeldingen verwijdert of vervangt, vooral als u een achtergrondafbeelding voor de hele site gebruikt. Extra setweergave: geen op onnodige inhoudafbeeldingen.

Als uw site afbeeldingen gebruikt voor knoppen of navigatie, overweeg dan om deze te vervangen door platte tekst / CSS-tegenhangers. Als u de browser de alternatieve tekst voor al uw afbeeldingen wilt laten gebruiken, tenslotte, gebruikt u dit fragment (en gebruikt u JavaScript om de als-tekstklasse voor img toe te voegen en ervoor te zorgen dat alt-attributen correct zijn gedefinieerd in uw markeringen. ):

img.as-text {content: attr (alt); }

ANDERE WIJZIGINGEN

Naast het aanpakken van de omvang van het scherm en de zorgen over de bandbreedte, zijn er nog enkele andere wijzigingen die moeten worden doorgevoerd in elk mobiel stylesheet. Ten eerste kunt u de leesbaarheid verbeteren door de lettergrootte van kleine of middelgrote tekst te vergroten. Vervolgens is klikken over het algemeen minder nauwkeurig op mobiele apparaten, dus zorg ervoor dat de klikbare gebieden van belangrijke knoppen of koppelingen worden vergroot door display: block in te stellen en padding toe te voegen aan de aanklikbare elementen.

Bovendien kunnen drijvende elementen problemen veroorzaken voor mobiele lay-outs, dus overweeg eventuele dobbers te verwijderen die niet absoluut noodzakelijk zijn. Houd er rekening mee dat horizontaal onroerend goed vooral duur is op mobiele apparaten, dus u moet er altijd voor kiezen om verticaal scrollen toe te voegen in plaats van horizontaal.

Ten slotte werken muisoverstanden niet met de meeste mobiele apparaten, dus zorg ervoor dat je de juiste definities hebt van: actieve toestanden. Ook kan het soms handig zijn om definities van de reeds gedefinieerde: hover-states toe te passen op de: active states. Deze pseudo-klasse wordt weergegeven wanneer de gebruiker op een item klikt en daarom op mobiele apparaten werkt. Dit verbetert echter alleen de gebruikerservaring en er moet niet op vertrouwd worden voor belangrijkere elementen, zoals drop-down navigatie. In dergelijke gevallen is het het beste om de koppelingen te allen tijde op mobiele apparaten weer te geven.

SPECIALE INGANGSSOORTEN

De iPhone geeft speciale HTML5-invoertypen weer

Als het gaat om mobiel browsen, is een andere zorg de moeilijkheidsgraad van typen vergeleken met een standaard full-sized toetsenbord. Maar we kunnen het onze gebruikers gemakkelijker maken door gebruik te maken van een aantal speciale HTML5-invoertypen:


<input type = "tel" />

<input type = “email” />

Met deze invoertypen kunnen apparaten zoals de iPhone een contextueel toetsenbord weergeven dat gerelateerd is aan het invoertype. In het bovenstaande voorbeeld activeert type = “tel” een numeriek toetsenbord dat ideaal is om telefoonnummers in te voeren, en type = “email” activeert een toetsenbord met @ en. toetsen.

HTML5-invoertypen bieden ook validatie in de browser en speciale invoermenu’s die handig zijn in zowel mobiel als niet-mobiel browsen. Aangezien niet-ondersteunende browsers natuurlijk worden afgebroken om deze speciale invoertypen weer te geven als <input type = “text” />, is er geen verlies aan het gebruik van HTML5-invoertypen op uw websites vandaag.

Bekijk een volledige lijst met HTML5-invoertypen. U kunt informatie vinden over de huidige browserondersteuning van HTML5-invoerattributen in de bericht HTML5 Input Attributes & Browser-ondersteuning door Estelle Weyl.

Speciale zorgen voor iPhone / iPad Link

Iphone 4

Met een marktaandeel van 28% en schattingen van maar liefst 50% van mobiel browsen via de iPhone is het logisch dat ontwikkelaars speciale accommodaties maken voor de mobiele gigant.

GEEN FLASH

Ongeacht de ethiek van Apple is de realiteit dat iPhones Flash niet spelen tenzij ze gejailbreakt zijn. Gelukkig zijn er alternatieven voor Flash, en iPhone-problemen met deze technologie zijn vaak gemakkelijk te omzeilen. Het belangrijkste gebruik voor Flash in moderne websites is Flash-video, die eenvoudig kan worden omzeild met HTML5-video. Omdat oudere browsers HTML5 echter niet ondersteunen, moet u een Flash-back-up voor niet-ondersteunende browsers toevoegen (daarom is het hele debat over Flash vs. HTML5 een beetje zinloos, omdat u zowel aan uw gebruikers als aan de het apparaat van de gebruiker pikt het apparaat op dat het automatisch kan renderen).

Naast video is het meestal het beste om JavaScript te gebruiken voor eenvoudige functionaliteit. JavaScript-bibliotheken zoals jQuery maken het eenvoudig om rijke interactieve applicaties te bouwen zonder Flash. Ongeacht uw wens om de iPhone te ondersteunen, hebben deze JavaScript-apps meestal een aantal extra voordelen ten opzichte van Flash-alternatieven.

Ten slotte zijn bepaalde applicaties gewoon te moeilijk om opnieuw te creëren met HTML5 en Javascript. Hiervoor moeten iPhone-gebruikers worden weggelaten, maar zorg ervoor dat u geschikte alternatieve inhoud opneemt.

Apple houdt van Adobe

Een parodie van Adobe’s “We Love Apple” -campagne, waarbij het hart wordt vervangen door het kapotte plug-insymbool.

 

SPECIALE IPHONE / IPAD VERBETERINGEN

Ondanks de verschillende tekortkomingen van de iPhone, biedt het apparaat een heerlijk rijke gebruikerservaring die ontwikkelaars kunnen gebruiken op manieren die niet mogelijk zijn met oudere mobiele apparaten.

Ten eerste zijn er verschillende JavaScript-bibliotheken die kunnen worden gebruikt om toegang te krijgen tot enkele van de meer geavanceerde functies die beschikbaar zijn op de iPhone. Kijk eens naar Sencha Touch, jQTouch en iui. Met deze drie bibliotheken kunt u beter communiceren met de iPhone en ook werken op vergelijkbare apparaten zoals Android. Houd bovendien de langverwachte jQuery Mobile in de gaten die net in alpha is vrijgegeven.

Vervolgens is de App Store niet de enige manier om een ​​pictogram op de iPhones van uw gebruikers te krijgen: u kunt ze eenvoudig een bladwijzer voor uw pagina maken. Helaas is het standaardbladwijzerpictogram een ​​verkorte schermopname van de pagina, die er meestal niet erg goed uitziet, dus laten we een speciaal iPhone-pictogram maken. Bekijk ook de Icon Reference Chart van Jon Hicks voor meer informatie.

Begin met het opslaan van een 57 x 57 pixel PNG ergens op uw website en voeg dit fragment toe aan uw <head> -tag:
<link rel = "apple-touch-icon" href = "/ customIcon.png" />

Maak je geen zorgen over afgeronde hoeken of een glanzend effect, iPhone zal deze standaard toevoegen.

 

Conclusie

Naarmate de wereldwijde verschuiving naar mobiel doorgaat, zal de ondersteuning van draagbare apparaten steeds belangrijker worden. Hopelijk heeft dit artikel u zowel de wens als de toolset nagelaten die nodig is om mobiele ondersteuning op uw websites te realiseren.

Hoewel mobiel een belangrijk deel van het wereldwijde surfen op het web in beslag neemt, staat de technologie nog steeds erg in de kinderschoenen. Net zoals er normen zijn ontstaan ​​voor browsen op het bureaublad, zijn er nieuwe standaarden ontstaan ​​om mobiele browsers te verenigen. Dit betekent dat de technieken die in dit artikel worden beschreven slechts tijdelijk zijn en dat het uw verantwoordelijkheid is om op de hoogte te blijven van deze steeds veranderende technologie.

Sterker nog, het enige in webontwikkeling dat constant blijft, is de eeuwige behoefte om te blijven leren!

Een mobiele website laten maken

Een website laten maken bij een webdesign bureau waarvan je weet dat er over alle aspecten van een mobiele website nagedacht wordt?