Een paar jaar geleden was het relatief eenvoudig om websites te ontwerpen en te bouwen. Websites waren eenvoudiger en werden op desktops en laptops bekeken met weinig variatie in schermformaten. Vandaag, met mobiele apparaten die de browsertijd van kijkers overnemen, kan een website worden bekeken op een 4,8 "smartphonescherm, een 5" phablet, een 7 "tablet of een andere grootte daar tussenin.
Dus hoe zorgt u ervoor dat uw website correct wordt weergegeven voor verschillende apparaattypen en schermformaten?
De oplossing werd voor het eerst voorgesteld door Ethan Marcotte, toen hij manieren verkend om websiteontwerpen responsief te maken, dwz ze te laten veranderen op basis van de schermgrootte. Een responsief websiteontwerp is een ontwerp dat slim gebruik maakt van CSS om ervoor te zorgen dat webpagina's goed worden weergegeven in een breed scala aan schermformaten - zonder gebruik te maken van URL-omleiding of het dynamisch bedienen van verschillende HTML- en CSS-codes, afhankelijk van de UserAgent. Het is niet echt een technologie of een standaard, maar eerder een reeks ontwerpprincipes die helpen het resultaat te bereiken.
In de afgelopen paar jaar zijn veel responsieve sjablonen, CSS-frameworks en WordPress-thema's ontstaan. Het is bijvoorbeeld mogelijk om een responsieve website in WordPress te maken zonder een enkele regel code te schrijven.
Maar een echte webontwerper is niet tevreden met het gebruik van de sjablonen. Ze zal de moeite doen om de elementen van responsief webontwerp te begrijpen, om ze effectief te kunnen gebruiken.
Dus vandaag gaan we kijken naar de 3 fundamentele technieken die je moet beheersen, je bent een effectieve responsieve ontwerper.
Met mediaquery's kunt u verschillende lay-outs ontwerpen voor verschillende mediatypen zoals scherm, afdrukken, tv, draagbare apparaten enz. Afhankelijk van het mediatype, kunt u de stijl, het lettertype en andere elementen van de pagina configureren.
Mediaqueries, geïntroduceerd in CSS3, laten een ontwerper de presentatie van de inhoud aanpassen aan een specifiek bereik van uitvoerapparaattypen. Ze bestaan uit een mediatype-declaratie en een of meer media-functie-expressies die evalueren naar waar of onwaar.
Het bereik van mediatypen omvat handheld, scherm, tv, print en projectie. Mediafuncties omvatten, maar zijn niet beperkt tot apparaathoogte, breedte, beeldverhouding, resolutie, kleurindex en hoogte, breedte van het browservenster.
Laten we een eenvoudig voorbeeld nemen; stel je voor dat je tekstformaat kleiner wordt op kleinere apparaten, zoals telefoons. De vraag daarnaar zou er ongeveer zo uitzien:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}De lettergrootte van uw alinea's wordt nu ingesteld op 1em, tenzij de breedte van de browser kleiner is dan 400px, in welk geval deze krimpt tot 0,8em.
In mijn ervaring is de beste manier om een responsieve lay-out te ontwerpen, om eerst een standaard hoofdstijlblad met de belangrijkste structurele elementen te maken. Vervolgens kunt u mediaquery's toevoegen om elementen aan te passen op basis van de lay-out of andere apparaatelementen. Als het meer dan een handvol regels is, is het misschien beter om ze naar een apart kinderblad te verplaatsen - dat u later selectief kunt laden. Hier is hoe dat zou werken:
Dit codefragment controleert of het apparaat een rekenmachine is in de liggende modus met een apparaatbreedte van minder dan 720px en laadt zo het stylesheet van tablet_layout.css .
Merk op dat de kenmerken breedte, hoogte, min / max-breedte, min / max-hoogte allemaal verwijzen naar de breedte en hoogte van het browservenster. De apparaatbreedte en -hoogte worden bepaald door de apparaatbreedte, apparaathoogte, min / max-apparaatbreedte, min / max- apparaathoogte . Als je omhoog wilt kijken meer voorbeelden met behulp van mediaquery's MDN heeft een goede afronding.
"Vloeiend rooster" is een term die wordt gebruikt om een lay-out te beschrijven die is gecodeerd in relatieve verhoudingen van de verschillende elementen, in plaats van met vaste pixelwaarden.
Traditionele CSS-lay-outs gebruiken vaste breedtegrids om de elementen te positioneren. De benadering met vaste breedte werkt niet meer vandaag nu we apparaatschermen hebben van 3 inch tot enkele voeten. In een ontwerp met een vloeistofraster is alles gecodeerd in termen van zijn relatieve verhouding tot het basiselement, dwz in plaats van de hoogte en breedte van elk element te specificeren; het krijgt een percentage of relatieve grootte.
Stel je voor dat je vier kolommen hebt. Om dit vloeibaar te maken, in plaats van elk 200 pixels breed te specificeren, zou je ze 0,2083% moeten specificeren (dwz als 200/960). Tenminste, dat is het principe. Het creëren van een volledig vloeibaar raster vereist veel zorg. Het is een van die zeldzame gevallen dat ik liever gebruik maak van aangepaste hulpmiddelen. Tiny Fluid Grid , Variabel rastersysteem en Fluid Baseline Grid zijn enkele geweldige alternatieven voor het schrijven van uw eigen vloeibare rooster vanaf nul.
Afbeeldingen worden als flexibel beschouwd wanneer de afbeelding in native formaat wordt gerenderd, zolang de HTML-container dit ondersteunt, maar wanneer het browservenster inkrimpt, wordt de afbeelding geschaald zodat deze past.
Zelfs als de rest van het ontwerp vloeiend en responsief is, zal het niet goed werken, als alle componenten niet schalen. Dit kan lastig worden met afbeeldingen en video's. Een 700 pixel breed beeld ziet er geweldig uit op een desktop, maar wordt afgekapt wanneer het op een 320 pixel tablet wordt bekeken. De meeste moderne responsieve ontwerpen gebruiken de CSS max-width- eigenschap om afbeeldingen te schalen. (Deze methode was voor het eerst voorgesteld door Richard Butler .)
img {max-width: 100%;}Deze paar regels zorgen ervoor dat het beeld niet wordt weggehakt door de maximale afbeeldingsbreedte in te stellen op 100% van de container. Als het browservenster of scherm kleiner wordt, verkleint dit stukje CSS-code het beeld proportioneel. De hoogte wordt automatisch aangepast, terwijl de beeldverhouding vergrendeld blijft.
U kunt in plaats daarvan de afbeelding vergrendelen om een bepaald verticaal schermaandeel op deze manier te bezetten
img {max-height: 75%;}(Zorg ervoor dat u de eigenschappen max. Hoogte en max. Breedte niet tegelijk gebruikt.)
Het afbeeldingsformaat kan ook worden gekoppeld aan de tekstgrootte in plaats van het bovenliggende element met behulp van em , zoals dit:
img {width: 30em;}Als de afbeelding tekst bevat, wilt u mogelijk de minimum- / maximumgrootte beperken om ervoor te zorgen dat de tekst leesbaar is. U kunt het zo specificeren:
img {width: 30em;max-width: 500px;min-width: 100px;}Dezelfde technieken kunnen worden gebruikt om video's te schalen, bijvoorbeeld:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Responsief ontwerp is de toekomst van onze sector, maar met zoveel verschillende technieken die rondvliegen, is het vaak moeilijk om bij te houden. Beheers deze 3 eenvoudige technieken en je bent 90% van de manier om een ontvankelijke ontwerper te zijn.
Uitgelichte afbeelding / thumbnail, elastisch beeld via Shutterstock.