Wat is responsief ontwerp? (Uitlegvideo en infographic)

responsieve web design

Het heeft een decennium geduurd responsieve web design (RWD) om sindsdien mainstream te worden Cameron Adams introduceerde voor het eerst het concept. Het idee was ingenieus: waarom kunnen we geen sites ontwerpen die zich aanpassen aan de viewport van het apparaat waarop het wordt bekeken?

Wat is responsive design?

Responsive webdesign (RWD) is een webontwerpbenadering gericht op het maken van sites om een ​​optimale kijkervaring te bieden - gemakkelijk lezen en navigeren met een minimum aan formaatwijziging, pannen en scrollen - op een breed scala aan apparaten (van mobiele telefoons tot desktopcomputers monitoren). Een site die is ontworpen met RWD past de lay-out aan de kijkomgeving aan door gebruik te maken van vloeiende, proportionele rasters, flexibele afbeeldingen en CSS3-mediaquery's, een uitbreiding van de @media-regel.

Wikipedia

Met andere woorden, elementen zoals afbeeldingen kunnen worden aangepast, evenals de lay-out van die elementen. Hier is een video waarin wordt uitgelegd wat responsive design is en waarom uw bedrijf het zou moeten implementeren. We hebben onlangs het Highbridge site om responsief te zijn en werken nu aan Martech Zone hetzelfde doen!

De methodologie voor het bouwen van een responsieve site is een beetje vervelend, omdat je een hiërarchie voor je stijlen nodig hebt die is georganiseerd op basis van de grootte van de viewport.

Browsers zijn zich bewust van hun grootte, dus laden ze de stylesheet van boven naar beneden, waarbij ze de toepasselijke stijlen voor de grootte van het scherm opvragen. Dit betekent niet dat je voor elk schermformaat verschillende stylesheets moet ontwerpen, je hoeft alleen de benodigde elementen te verschuiven.

Werken met een mobile-first-mentaliteit is tegenwoordig de basisnorm. Best-in-class-merken denken niet alleen na of hun site mobielvriendelijk is, maar ook over de volledige klantervaring.

Lucinda Duncalfe, CEO van Monetate

Hier is een infographic van Monetate die de mogelijke voordelen illustreert van het maken van één responsief ontwerp voor meerdere apparaten:

Responsieve webdesign infographic

Als u een responsieve site in actie wilt zien, wijs dan uw Google Chrome browser (ik geloof dat Firefox dezelfde functie heeft) naar Highbridge. Selecteer nu Bekijk> Developer> Developer Tools uit het menu. Dit laadt een aantal tools onderaan de browser. Klik op het kleine mobiele pictogram helemaal links in de menubalk van Developer Tools.

responsive-testing-chrome

U kunt de navigatie-opties bovenaan gebruiken om de weergave van liggend naar staand te wijzigen, of zelfs een aantal voorgeprogrammeerde viewport-formaten selecteren. Mogelijk moet u de pagina opnieuw laden, maar het is de coolste tool ter wereld om uw responsieve instellingen te verifiëren en ervoor te zorgen dat uw site er op alle apparaten fantastisch uitziet!

3 reacties

  1. 1
  2. 2

    Heel erg bedankt Douglas voor dit goed uitgelegde artikel. Daar moet ik het inhoudelijk wel mee eens zijn. Voor de meeste sites die we maken is een responsive layout niet voldoende. We hebben responsieve inhoud nodig. Maar voor de meer basale websites zullen we zeker je goed gedocumenteerde artikel over hoe hiermee om te gaan gebruiken!

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.