RWD niet alleen over design - WordPress kan helpen

Als webontwikkelaars verwacht bijna elke klant met wie we werken dat hun site een mobiele versie van zijn of haar website heeft. En met het toenemende aantal variaties in schermafmetingen en -resoluties, zal het onmogelijk of op zijn minst onpraktisch zijn om een ​​website te maken voor elk apparaat en een schermresolutie die bestaat.

In dit bericht beginnen we met op een basisniveau door eerst te definiëren wat responsief webontwerp is, waarom het belangrijk is en enkele korte overwegingen die men moet trekken bij het brainstormen over een responsieve WordPress-website.

Wat is responsief webontwerp?

Wikipedia definieert RWD als:

Ontwerp van een webontwerp gericht op het maken van sites om een ​​optimale kijkervaring te bieden - eenvoudig lezen en navigeren met een minimum aan formaataanpassing, pannen en scrollen - op een breed scala aan apparaten (van mobiele telefoons tot desktopcomputermonitoren).

Responsief webontwerp omvat de toepassing van CSS-mediaquery's met een mix van flexibele rasters en lay-outs. Ik weet zeker dat je hebt gehoord van CSS-frameworks zoals Bootstrap, Foundation, enzovoort. Ze gebruiken allemaal mediaquery's met een mix van lay-outs om een ​​pagina weer te geven op basis van de schermgrootte, het platform en de richting.

Als u bijvoorbeeld Bootstrap gebruikt, kunt u eenvoudig uw project inschakelen om responsief te zijn door de volgende regel code in te voegen op de label

 

In Bootstrap maken mediaquery's aangepaste CSS mogelijk op basis van een aantal voorwaarden: verhoudingen, breedten, weergavetype maar meestal rond min-width en Maximale wijdte naar

  • formaat van kop en tekst aanpassen om meer geschikt te zijn voor apparaten
  • stapel elementen in plaats van te zweven waar nodig
  • wijzig de breedte van het raster

Kijk uit voor een hele praktische serie gewijd aan het lesgeven over het bouwen van een responsief webontwerp met behulp van dit specifieke kader

Waarom is RWD belangrijk?

Tot nu toe hebben we in onze discussie vastgesteld dat een belangrijk aspect van een responsieve website het vermogen van de site is om zich aan te passen aan elke schermgrootte of richting wanneer een gebruiker de website bekijkt. Afgezien daarvan zijn er nog andere belangrijke redenen waarom je zou moeten overschakelen naar een responsieve website

Toename mobiel gebruik

Tegenwoordig heeft een aanzienlijk aantal mensen toegang tot mobiele telefoons. Dit vertaalt zich naar een aantal van deze mensen die internetten via telefoons. Statistieken tonen aan dat tegenwoordig bijna 20% van de Google-zoekopdrachten afkomstig is van mobiele telefoons - dit zou u moeten vertellen hoe belangrijk het is dat gebruikers toegang hebben tot uw website en er gemakkelijk mee kunnen werken. 

Aangezien het gebruik van mobiel internet de statistieken voor desktopgebruik overtreft, moeten we ervoor zorgen dat gebruikers zich kunnen identificeren met onze websites, ongeacht welke apparaten ze gebruiken zonder het gevoel te hebben dat ze toegang hebben tot een andere of een beperkte versie van de hoofdsite..

Sterk stijgingspercentage verhogen 

Conversieratio is een term die vooral wordt gebruikt op eCommerce-sites, het verwijst naar waar u een gewone webbezoeker naar een betalende klant kunt veranderen. Denk in een typisch geval van een eCommerce-oplossing na over hoeveel mensen winkelen op hun mobiele telefoon.

Als een gewone internetgebruiker gedwongen wordt om een ​​desktopversie van uw site te gebruiken om eenvoudig te betalen, is de kans groot dat deze er zeker voor kiezen om andere middelen te gebruiken om hetzelfde product te kopen. Met een goed ontworpen responsieve site, moeten gebruikers het verschil niet merken bij het afhandelen van uw site, afgezien van het feit dat ze een kleiner scherm gebruiken.

Verbeterde ranking in zoekmachines

Een zoekmachine als Google pleit openlijk voor responsief webontwerp om een ​​aantal redenen:

  1. Het is veel gemakkelijker om een ​​responsieve website te crawlen, te indexeren en de inhoud van de site eenvoudiger te ordenen. Dit wordt mogelijk gemaakt door het feit dat een responsieve website slechts één URL op alle platforms gebruikt, in tegenstelling tot in een scenario waarin er verschillende versies van dezelfde site over verschillende URL's zijn.
  2. Gebruikerservaringen kunnen eenvoudig worden beoordeeld aan de hand van het bouncepercentage van een site. Een site met een laag bouncepercentage betekent dat gebruikers er een bepaalde tijd op blijven wachten en dus een hogere positie in de zoekresultaten.

Kostenefficient

Het uitvoeren van meerdere sites voor dezelfde inhoud kan duur zijn, u moet de bronnen verdubbelen om de twee sites te kunnen onderhouden. Het hebben van een responsieve website is veel gemakkelijker omdat u alle middelen en tijd kunt besteden aan het geven van gebruikers wat ze echt verwachten.

Overwegingen voor een responsieve WordPress-site

Er zijn een aantal redenen om stil te staan ​​bij het maken van een responsief webontwerp in WordPress. Het feit is dat WordPress nu wordt gebruikt om blogs, sites en even applicaties te bouwen die waarschijnlijk een responsieve implementatie nodig hebben.

In de volgende post zullen we een implementatiestrategie bekijken om dit te bereiken in de ontwikkeling van WordPress. Concreet zullen we behandelen

  1. Prestatie
  2. Context
  3. Progressieve verbeteringen

Op zoek naar deze drie kritische factoren vereist een grondige analyse om te laten zien waarom responsief ontwerp niet alleen gaat over het ontwerp en waar precies WordPress in de vergelijking komt.

Samenvatting

In dit artikel hebben we kort het concept van responsief webontwerp geïntroduceerd, gedefinieerd wat het is, waarom het belangrijk is en waarom we het in onze toekomstige projecten moeten beschouwen..

Laat gerust vragen of opmerkingen achter!