Responsief ontwerp is het idee om uw website er geweldig uit te laten zien bij elke resolutie, niet alleen op desktop en mobiel. Met een responsieve site zijn uw desktop- en mobiele site dezelfde pagina en worden ze geschaald met de venstergrootte.
Wat is responsive design?
< p>Dankzij het responsieve ontwerp kan het formaat van uw site worden aangepast aan elk scherm. In plaats van te ontwerpen rond een specifieke lay-out of een afzonderlijke mobiele en desktopsite te ontwerpen, moet uw site worden geschaald om op elk apparaat te passen. In de echte wereld zullen mensen uw site op allerlei verschillende manieren gebruiken; er zijn kleine telefoons, grote telefoons, tablets, tablets in liggende modus, netbooks, laptops en 5K iMacs.
Bekijk de homepage van howtogeek.com. Op desktop heeft het een koptekst met een logo, hoofdcategorieën, sociale media-knoppen en tot slot een hamburgermenu met uitgebreide categorieën. De artikelvakken zijn ingedeeld in een raster dat schaalt met de schermgrootte, maar slechts ongeveer 1000 px in beslag zal nemen (omdat te veel opschalen er raar uitziet). Al met al is er veel ruimte om mee te werken, dus de site ziet er hier het beste uit.
Verklein het scherm een beetje tot tabletformaat, en er is niet zoveel ruimte. De tekst wordt anders afgebroken, de afbeeldingen worden verkleind of bijgesneden en de hoofdcategorieën verdwijnen.
De artikelvakken behouden de lay-out, maar dit gaat ten koste van extra regels tekst. Het artikel op de voorpagina is echter belangrijker en behoudt zijn beeldverhouding en wordt verkleind zonder bij te snijden.
Advertentie
En op hele kleine apparaten kun je het je echt niet veroorloven om al die knoppen in het menu te hebben, en er is niet genoeg ruimte om de artikelvakken naast elkaar te plaatsen, dus het menu is samengevouwen tot een hamburger menu en de artikelvakken zijn ingedeeld in een kolom. Deze kolom neemt altijd de volledige breedte van het apparaat in beslag (min 20px aan elke kant voor opvulling).
U kunt dit zelf testen om te zien hoe uw site schaalt. Open de ontwikkelaarstools van Chrome door ergens met de rechtermuisknop te klikken en 'Inspecteren' te selecteren. Druk op de knop voor mobiele apparaten in de rechterbovenhoek van het venster dat verschijnt en selecteer “Responsief” als het apparaattype:
U kunt de handvatten op de rand van uw site om de grootte aan te passen, of u kunt handmatige pixelwaarden invoeren. Je kunt ook een voorbeeld bekijken van hoe het eruit zal zien op populaire mobiele resoluties (hoewel je nog steeds op een echt apparaat moet testen).
Hoe werkt responsive design?
Voordat u een responsief ontwerp uitvoert, moet u een bug oplossen met mobiele pagina's en de viewport. Zonder deze metatag in de koptekst van uw HTML is uw mobiele pagina mogelijk uitgezoomd en niet correct weergegeven. Dit is misschien al ingesteld, omdat het een vrij algemeen stuk boilerplate is, maar als dat niet het geval is, voeg het dan toe:
<meta content=”width=device-width, initial -scale=1″ name=”viewport” />
De belangrijkste manier om sites responsief te maken, is met de magische weergave: flex-property, ook wel bekend als flexbox. Flexbox werkt door de grootte van items in een container aan te passen om te schalen met een veranderende venstergrootte. U begint met het maken van een container en deze in te stellen op display: flex:
.container { display: flex; }
En stel vervolgens de flex-parameter in van alle kinderen:
.child { flex: 1; } Advertentie
Hierdoor zullen de kinderen uitzetten en zoveel ruimte innemen als de container toelaat. Als u bijvoorbeeld twee kinderen had, zou elk 50% van de ruimte in beslag nemen:
Als u in plaats daarvan het tweede kind instelt op flex: 2, zou het twee keer zo veel ruimte als de andere (66% in totaal).
Als het scherm krimpt, krimpen de kinderen mee. Ze zullen echter een punt bereiken waarop ze niet kleiner kunnen krimpen dan de grootte van hun inhoud, maar je kunt ze omhullen naar een andere regel (net als tekst) met flex-wrap op de container. .container { flex-wrap: wrap; }
Nu zul je nooit meer het probleem tegenkomen dat de inhoud van je site niet op het scherm wordt weergegeven of zo gekreukt dat het onleesbaar is.
Een ander stukje CSS-technologie achter responsive design zijn mediaquery's. Mediaquery's zijn als CSS If-statements waarmee u een waarde kunt controleren voordat u CSS toepast. U kunt dit gebruiken om componenten dynamisch te stylen op basis van de breedte van de browser. Als u bijvoorbeeld een menubalk bovenaan had die u op mobiel wilde verbergen en vervangen door een hamburgermenu, zou u deze kunnen verbergen met een @media-query:
.topmenu { display: block } @media-scherm en (max. -breedte: 600px) { .topmenu { weergave: geen; } }
600px is slechts een willekeurige waarde die wordt gebruikt om de limieten van de meeste mobiele apparaten te definiëren, maar u kunt veel breekpunten hebben die de stijl veranderen. U kunt deze gebruiken in combinatie met flexbox om de flex-eigenschappen te wijzigen op basis van de apparaatgrootte; een veelvoorkomend gebruik is bijvoorbeeld om horizontale lijsten verticaal en gecentreerd weer te geven, voor een betere leesbaarheid op mobiel.
Advertentie
Responsief ontwerp is veel meer dan we hier kunnen behandelen, dus als je meer wilt weten over de CSS erachter, kun je deze geweldige handleiding voor flexbox van CSS Tricks lezen, of de W3Schools-documentatie voor mediaquery's lezen.
Hoe maak ik mijn site responsive?
Als u geen tijd wilt besteden aan het opnieuw maken van uw site met flexbox in gedachten, zijn er tal van responsieve sitesjablonen die u als basis kunt gebruiken, waaronder veel gratis. Veel sjablonen die u kunt gebruiken met beheerde hostingproviders (GoDaddy, SquareSpace, Wix, enz.) Zijn direct responsief. Underscores is een geweldige gratis starterssjabloon voor WordPress.
Als je het zelf wilt coderen, maar niet alles met de hand wilt doen, zijn er veel bibliotheken van derden om met flexbox te werken. De meest populaire hiervan is Bootstrap, dat gebruiksvriendelijke klassen toevoegt voor het werken met flexbox (samen met vele andere nuttige UI-elementen). Met Bootstrap specificeert u containers met de rijklasse en specificeert u vervolgens de kolomgrootte met klassen zoals col-md-6, en de CSS wordt voor u afgehandeld. De volgende code rangschikt bijvoorbeeld elke div in een rij van drie op desktop en voegt een mediaquery-breekpunt toe om er een kolom over de volledige breedte van te maken op mobiel:
<div class=”row”> <div class=”col-md-4 col-sm-12″> //inhoud </div> <div class=”col-md-4 col-sm-12″> //inhoud </div> <div class=”col-md-4 col-sm-12″> //inhoud </div> </div>
Formaten worden gemeten op 12, dus col-md-4 stelt de div in op 33% breedte op middelgrote ('md') en col-sm-12 stelt deze in op 100% breedte op kleine apparaten (' sm”).
Bootstrap heeft ook een heleboel thema's en sjablonen om mee te beginnen. Het is ontworpen om je heel snel van de grond te krijgen en om de tijd die je kwijt bent aan het knoeien met standaard HTML en CSS (vandaar de naam) kwijt te raken.