De gedistilleerde praktijk voor het bouwen van een mobielvriendelijke website

01.06.2020
Artikelen & meer ... 'De gedistilleerde praktijk voor het bouwen van een mobielvriendelijke website
0 8 мин.

het bouwen van een mobielvriendelijke website


In 2015 bracht Google het algoritme ‘Mobilegeddon’ uit, een soort van gestrafte websites die niet mobielvriendelijk waren. Volgens dit algoritme zou de rangschikking van de websites die niet mobielvriendelijk waren, afnemen.

Zoals u kunt zien, heeft mobiel desktops en laptops ingehaald en is het het meest gebruikte apparaat voor surfen op internet. Google heeft bedrijven aangemoedigd om eerst na te denken over mobiel.

wereldwijde groei van mobiel dataverkeer

Dit betekent dat grafisch ontwerpers en marketeers hun visie moeten uitbreiden naar desktops en laptops terwijl ze aan een website werken.

Wat is een mobielvriendelijke website?

wat is mobielvriendelijke website

Zoals de naam al doet vermoeden, een mobielvriendelijke website is een site die zo is ontworpen, ontwikkeld en geoptimaliseerd dat de website soepel zal verlopen op mobiele telefoons – het is ingewikkelder en noodzakelijker dan het lijkt. Op het meest basale niveau: gebruikers willen inhoud die gemakkelijk te bekijken is op mobiele apparaten.

Als uw tekst te klein is of als de afbeeldingen niet worden geladen, raken de gebruikers geïrriteerd en vertrekken ze. Daarom is het van cruciaal belang dat de inhoud de juiste grootte heeft. Helaas is het lastig te implementeren omdat smartphones, tablets er in verschillende maten en resoluties zijn; daarom is er geen vast formaat om de inhoud perfect weer te geven op ‘elk’ apparaat.

Hier zijn enkele tips om u te helpen uw website voor mobiel te optimaliseren.

Maak geen aparte mobielvriendelijke website:

vermijd het maken van een aparte mobielvriendelijke website

Om de implementatie eenvoudig te maken, besluiten de ontwerpers soms, terwijl ze een website voor mobiel ontwerpen, inhoud te schrappen om te ‘passen’ en welke delen niet op de mobiel moeten worden weergegeven. We kunnen echter niet bepalen welk type inhoud de gebruikers willen zien en het is ook niet mogelijk om een ​​aparte ruimte voor mobiel te creëren, afgezien van een desktop.

Google zal je straffen als blijkt dat je identieke inhoud hebt voor twee dezelfde websites: de ene is een desktop- en / of laptopversie en de andere een mobiele versie omdat er maar één Google is. Denk er dus niet eens aan om een ​​aparte website voor mobiel te maken.

Maak gebruik van responsieve ontwerpen:

gebruik responsieve ontwerpsjablonen

Met responsief ontwerp kunnen website-ontwikkelaars een website maken die gemakkelijk kan worden bekeken op verschillende formaten apparaten. Dit vermindert de hoeveelheid extra inspanning die ontwikkelaars moeten leveren om een ​​website compatibel te maken met verschillende apparaatgroottes.

Het responsieve ontwerp maakt gebruik van flexibele afbeeldingen, flexibele lay-outs en stijgende mediaquery’s over stylesheets. Wanneer dit responsieve ontwerp wordt gebruikt op een website, kan de webpagina de schermgrootte en positionering van de gebruiker detecteren en vervolgens de lay-out van de webpagina dienovereenkomstig aanpassen.

Maak gebruik van mediaquery’s:

Met mediaquery’s kunt u een apparaat vragen naar de grootte ervan en vervolgens de browser erop wijzen om dingen weer te geven volgens de set CSS die u in de code hebt ingesteld:

bijvoorbeeld media screen queries

Mediaquery’s zijn het belangrijkste onderdeel van de meest mobielvriendelijke websites, maar daarvoor moet u ervoor zorgen dat het systeem correct is geconfigureerd voor alle apparaten die momenteel in gebruik zijn – niet alleen voor twee of drie populairste mobiele apparaten. Houd een lijst bij van de apparaten of u kunt een abonnement nemen om deze informatie te krijgen.

Maak gebruik van frameworks zoals Bootstrap:

Voor de frontend kun je gebruik maken van de gratis beschikbare frameworks zoals Stichting 3, Skelet etc. Het beste gratis framework is Bootstrap van Twitter.

gebruik bootstrap framework

Bootstrap is een front-end framework dat is ontworpen om de webpagina van uw website snel en onvermijdelijk naar elk apparaat te schalen. Een kant-en-klaar systeem aan het werk zetten is veel eenvoudiger dan zelf een nieuwe code te maken voor elke mogelijke combinatie (en zelfs te testen) – en het is veel minder down-and-out.

Maar voordat u een raamwerk gaat gebruiken, moet u bestuderen of het raamwerk volledig compatibel is met uw website en doelen. Hoe meer aangepaste codes en functies op uw website, hoe moeilijker het zal zijn om ervoor te zorgen dat alles soepel werkt op een mobiel apparaat; neem hulp van een deskundige als u problemen ondervindt.

Maak altijd gebruik van een virtuele metatag:

De viewport is een virtueel gebied dat door de browserinterpretatie-engine wordt gebruikt om te bepalen hoe de inhoud wordt geschaald en op maat gemaakt. Dat gezegd hebbende, het is een cruciale code bij het bouwen van een ervaring met meerdere apparaten. Zonder deze code werkt uw website niet goed op een mobiel apparaat.

Een viewport-tag vertelt uw browser dat de pagina in het scherm moet passen. Er zijn veel andere configuraties die u aan uw viewport kunt laten controleren. Hieronder wordt het aanbevolen om aan het begin van het document te gebruiken:

Richt u op een eenvoudiger ontwerp:

gebruik een eenvoudig responsief ontwerp

Het grote verschil tussen desktop- en mobiele websites is dat mensen de voorkeur geven aan een eenvoudig websiteontwerp terwijl ze op een mobiel kijken. Dit is een realistisch spul zoals al het andere – dingen die groot en gecompliceerd zijn, worden traag op een mobiel apparaat en een van de belangrijkste eisen van gebruikers is om de website-inhoud direct beschikbaar te hebben.

Door de ontwerpen eenvoudig te houden, kunt u ook eenvoudig de aandacht van de kijkers vestigen op de inhoud die u wilt dat ze zien – mobiele gebruikers hebben een erg korte aandachtsspanne en het is in uw belang om het ontwerp eenvoudig te houden in plaats van te investeren in een complex thema.

Negeer nooit de lettergrootte en knopgrootte:

De lettergrootte en knopgrootte op uw webpagina zijn erg belangrijk voor mobiele apparaten. De lettergrootte moet minimaal 14 px zijn. Dit ziet er misschien groot uit, maar is beter dan de gebruiker te laten inzoomen om uw inhoud te lezen; maak het hen eenvoudig door het lettertype aan te passen aan maximale helderheid. De enige keer dat u een kleiner lettertype zou moeten gebruiken (tot een minimum van 12 px) is op label of formulieren.

negeer de lettergrootte niet

Nu we naar de knoppen gaan, hoe groter de knop, hoe beter – dit verkleint de kans dat gebruikers een verkeerde knop raken of de knop missen. Zoals de richtlijnen van Apple aanbevelen, moet een knopgrootte minimaal 44 bij 44 pixels zijn. Met behulp van deze richtlijnen verbetert u uw gebruikerservaring en verhoogt u de conversieratio voor e-commerce.

Vergroot de afbeeldingsgrootte:

Bij mobiele apparaten is het doel om de kleinste bestandsgrootte voor afbeeldingen te hebben, terwijl je er toch scherp en rijk uitziet op welk scherm dan ook. De reden is dat de bandbreedte van een mobiel apparaat veel minder is in vergelijking met een desktop of laptop en dus een langere laadtijd veroorzaakt.

Dus als u uw kijkers een bestand van 1 MB laat downloaden om een ​​miniatuurafbeelding te bekijken, zullen ze geïrriteerd raken en de website verlaten.

Mobielvriendelijkheid gaat niet alleen over het hebben van een leuke site, maar ook over het verbeteren van de gebruikerservaring en de laadtijd. Het verkleinen van de afbeeldingsgrootte gebruikt minder gegevens (het opslaan van gegevens van beperkte dataplannen), helpt de pagina sneller te laden en laat een positieve indruk van uw website achter.

Verwijder de standaard zoom:

Auto-zoom kan de layout-elementen in de war brengen, speciaal voor afbeeldingen en navigatie. Het kan klein of te groot lijken in uw lay-out. Om dit probleem op te lossen, gebruikt u de viewport-metatag om aangepaste variabelen in de inhoud in te stellen. Zorg ervoor dat u de tag in uw HTML toevoegt:

Probeer de standaardlettertypen te gebruiken:

Met aangepaste, creatieve lettertypen ziet uw website er mooi uit, maar in het geval van mobiele apparaten willen gebruikers niet graag dat ze een lettertype downloaden om een ​​webpagina te bekijken. De kans is groot dat ze het lettertype niet downloaden en in plaats daarvan naar een andere website gaan.

Hoewel de meeste lettertypen op het mobiele apparaat zijn geïnstalleerd, kunt u deze dus gebruiken in het ontwerp van uw website. Er is echter nog iets dat u moet onthouden: sommige lettertypen zijn gemakkelijker of moeilijker in verschillende groottes aan te passen, dus zorg ervoor dat u de leesbaarheid van het lettertype controleert voordat u het in uw ontwerp gebruikt.

Houd rekening met de routebeschrijving:

Een gemiddelde desktop of laptop is horizontaal, we scrollen natuurlijk op en neer maar hij is breed. Smartphones daarentegen zijn meestal slank en lasterlijker, daarom kan de breedte van inhoud variëren en moet daarom rekening worden gehouden. Wanneer u video’s, afbeeldingen en vervolgkeuzes maakt, onthoud dan de richting die mensen zullen gebruiken tijdens het bekijken van de inhoud.

Wees niet bang om op een professional te vertrouwen om uw website te repareren en hem vriendelijk te maken als er iets niet werkt. Dit kan enige investering vergen, maar met de steeds groter wordende mobiele gebruikers en het geüpdatete algoritme van Google, kan deze investering een berekende blijken te zijn.

Afhaal:

Met de mobilisatie van de wereld is het erg belangrijk om uw website mobielvriendelijk te houden en in feite, iets boven verwachting, alleen dan kunt u gebruikers naar uw website trekken. Zorg ervoor dat u de richtlijnen voor mobielvriendelijkheid leest en advies van experts inneemt voordat u aan het werk van uw website begint. Ik hoop dat deze tips je zullen helpen om je website mobielvriendelijk te maken. Uw website is niet het enige dat mobielvriendelijk moet zijn, zorg ervoor dat uw sociaal beheer ook mobielvriendelijk is.

Earleen Brown werkt samen met een gerenommeerd SEO Services-bedrijf, een toonaangevend SEO-bedrijf in India. Het bedrijf is in feite een IT-bedrijf dat voorziet SEO Services India en heeft haar veel geholpen bij het verbeteren van haar schrijfvaardigheid.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector