Hebt u zich afgevraagd: "Wat is responsief webontwerp?" Responsief webontwerp is een benadering waarbij een ontwerper een webpagina maakt die "reageert" of zichzelf aanpast, afhankelijk van het type apparaat dat wordt gezien. Dat kan een extra grote desktopcomputer, een laptop of apparaten met kleine schermen zoals smartphones en tablets zijn.
Responsive Web design is een essentiële tool geworden voor iedereen met een digitale aanwezigheid. Met de groei van smartphones, tablets en andere mobiele computerapparaten gebruiken steeds meer mensen kleinere schermen om webpagina's te bekijken.
$config[code] not foundDeze websites moeten ook rekening houden met de mobiel-eerste index die zojuist door Google is aangekondigd in april 2018. Naarmate meer kleine bedrijven hun mobiele aanwezigheid vergroten, moeten hun website, eCommerce, Google Business-pagina, pagina's van sociale media en andere activa gemakkelijk toegankelijk zijn in alle apparaten.
Wat is Responsive Web Design?
Het doel van responsive design is om één site te hebben, maar met verschillende elementen die anders reageren wanneer ze op apparaten van verschillende grootten worden bekeken.
Laten we een traditionele "vaste" website nemen. Bij weergave op een desktopcomputer kan de website bijvoorbeeld drie kolommen bevatten. Maar wanneer u dezelfde lay-out op een kleinere tablet bekijkt, kan dit u dwingen horizontaal te scrollen, iets wat gebruikers niet leuk vinden. Of elementen kunnen aan het zicht worden onttrokken of zien er vervormd uit. De impact wordt ook bemoeilijkt door het feit dat veel tablets in staande of zijwaartse richting kunnen worden bekeken voor landschapsopnamen.
Op een klein scherm van een smartphone kunnen websites nog uitdagender zijn om te zien. Grote afbeeldingen kunnen de lay-out "breken". Sites kunnen traag worden geladen op smartphones als deze zwaar zijn.
Als een site echter een responsief ontwerp gebruikt, wordt de tabletversie mogelijk automatisch aangepast om slechts twee kolommen weer te geven. Op die manier is de inhoud leesbaar en gemakkelijk te navigeren. Op een smartphone kan de inhoud worden weergegeven als een enkele kolom, misschien verticaal gestapeld. Of misschien heeft de gebruiker de mogelijkheid om over te vegen om andere kolommen te bekijken. Afbeeldingen worden verkleind in plaats van de layout te vervormen of afgesneden te worden.
Het punt is: met een responsief ontwerp past de website automatisch aan op basis van het apparaat dat de kijker ziet.
Hoe werkt responsief webontwerp?
Responsieve sites gebruiken vloeibare roosters.Alle pagina-elementen zijn gerangschikt volgens verhoudingen in plaats van pixels. Dus als je drie kolommen hebt, zou je niet precies zeggen hoe breed elke kolom zou moeten zijn, maar eerder hoe breed ze zouden moeten zijn in relatie tot de andere kolommen. Kolom 1 moet de helft van de pagina in beslag nemen, kolom 2 moet 30% bedragen en kolom 3 bijvoorbeeld 20%.
Media zoals afbeeldingen worden ook relatief verkleind. Op die manier kan een afbeelding binnen zijn kolom of relatieve ontwerpelement blijven.
Gerelateerde problemen
Muis v. Aanraken: Ontwerpen voor mobiele apparaten roept ook het probleem van muis versus aanraking op. Op desktopcomputers heeft de gebruiker normaal gesproken een muis om te navigeren en items te selecteren. Op een smartphone of tablet gebruikt de gebruiker meestal vingers en raakt het scherm aan. Wat met een muis gemakkelijk te selecteren lijkt, is misschien moeilijk te selecteren met een vinger op een klein plekje op een scherm. De webontwerper moet "aanraken" in aanmerking nemen.
Afbeeldingen en downloadsnelheid: Ook is er het probleem van afbeeldingen, advertenties en downloadsnelheid. Op mobiele apparaten is het misschien verstandig om minder afbeeldingen weer te geven dan voor bureaubladweergaven, zodat een site niet eeuwig duurt om op een smartphone te laden. Grotere advertentieformaten moeten mogelijk worden ingewisseld voor kleinere advertenties.
Apps en 'mobiele versies': In het verleden dacht u misschien aan het maken van een app voor uw website, bijvoorbeeld een iPad-app of een Android-app. Of u zou een mobiele versie specifiek voor BlackBerry hebben.
Maar met zoveel verschillende apparaten vandaag, wordt het steeds moeilijker om apps en verschillende versies voor elk apparaat en elk besturingssysteem te maken.
Waarom kleine bedrijven moeten overschakelen op responsief webontwerp
Meer mensen gebruiken mobiele apparaten. Een recente Pew-studie 77% van de Amerikanen bezit nu een eigen smartphone in 2018, wat oploopt tot slechts 35% in het eerste smartphone-eigendomsonderzoek van Pew Research Center dat in 2011 werd uitgevoerd.
Controleer uw verkeer en misschien bent u geschokt door het aantal bezoekers dat uw mobiele website bezoekt. (Selecteer in Google Analytics 'Doelgroep' aan de linkerkant en vervolgens 'Mobiel' om te zien welk deel van het verkeer afkomstig is van mobiele apparaten. U kunt zelfs doorzoeken om te zien op welke apparaten het verkeer wordt verzonden.)
Responsieve ontwerpsjablonen zijn nu overal verkrijgbaar, voor aankoop. Als u bijvoorbeeld een WordPress-site hebt, kunt u een gerenommeerde sjabloongalerij bezoeken, zoals ThemeForest, en zoeken naar 'responsieve WordPress-thema's'. Koop er een voor minder dan $ 50. Uw webontwikkelaar kan het vervolgens aanpassen aan uw logo en merk.
Noot van de redactie: hier bij Small Business Trends werken we aan een nieuw responsief ontwerp. Zou jij niet?
Foto via Shutterstock
Meer in: Contentmarketing, Wat is 95 Reacties ▼
