Websites met stijl
24. De website responsive maken
In dit hoofdstuk
In dit hoofdstuk wordt de website Terschelling responsive gemaakt. We gebruiken de kennis uit hoofdsuk 23.
De belangrijkste stijlregels
Een responsive website is een website die er op grote én kleine schermen goed uitziet en goed te gebruiken is.
In het vorige hoofdstuk hebben we gezien dat de website er behoorlijk uit blijft zien voor schermbreedten groter dan 600 à 700 pixels.
Om de website ook voor kleine schermen (kleiner dan zeg 640px) toonbaar en bruikbaar te maken moeten we onder meer het volgende doen:
- De letters wat groter maken - anders zijn ze slecht leesbaar op een mobieltje.
- De h1-kop juist wat kleiner maken - anders is de kop op een mobieltje haast groter dan de schermbreedte
- De afbeelding in de kop niet tonen - die wordt anders te klein
- De menubalk niet meer vast zetten - dat neemt op een klein scherm teveel ruimte in.
- De menu-items onder elkaar zetten en groter maken. Je moet ze met de vinger kunnen selecteren.
- Aside moet niet meer naast main, maar eronder. Dat doen we door de width van beiden op 100% te zetten.
- De margins en paddings moeten 0 of heel klein. Witte ruimten om de tekst moeten minimaal zijn - anders kost het teveel ruimte
Dat alles wordt bereikt met de stijlregels van figuur 1.
- Tik de regels 180 t/m 259 in je stijlblad in.
Je kunt de commentaren gerust weglaten - alleen het commentaar van regel 180 zou ik laten staan. Dan zie je meteen waar het gewone stijlblad eindigt en de media queries beginnen.
figuur 1: stijlregels om de website responsive te maken
170 /* einde css voor brede schermen --------------------------------------------------------- */
171
/* de regels 171 - 179 komen verderop in dit hoofdstuk aan de orde */
179
180/* voor kleine schermen tot 640px */
181
182@media screen and (max-width: 640px) {
183
184body {
185font-size: 140%;/* lettergrootte 140% ipv 110% */
186padding: 0 5px; /* linker en rechter padding van 5px (smalle marge) */
187}
188
189h1 {font-size: 100%;}/* h1 100% ipv 110% */
190
191header {margin: 0;}
192
193header img {display: none;}/* afbeelding in de header niet tonen*/
194
195header h1 {
196font-size: 200%; }/* h1 in header 200% ipv 250% */
197position: initial;}/* h1 niet meer absoluut gepositioneerd, maar 'gewoon' (static)*/
198background-color: hsl(0,0%,50%);
199padding: 0 0 5px 10px;
200}
201
202nav {
203position: initial;/* navigatiebalk niet meer fixed, maar standaard (static) */
204margin: 0;
205padding: 0;
206background-color: white; /* navigatiebalk wit ipv geel */
207}
208
209nav a {/* navigatie items block, volle breedte, met blauwe achtergrond en ronde hoeken */
210font-size: 1.2em;
211display: block;
212width: 100%;
213color: hsl(0, 0%, 40%);
214background-color: hsl(210, 80%, 70%);
215border: 1px solid black;
216border-radius: 20px;
217margin: 7px 0;
218padding: 0;
219}
220
221nav a:hover {background-color: hsl(210, 100%, 80%);}
222
223nav a[href=""] {
224color: hsl(0, 0%, 40%);
225background-color: hsl(52, 100%, 70%)/* lege link krijgt gele achtergrond */
226}
227
228main {
/* main vult de hele regel */
229width: 100%;
230padding: 0;
231margin: 0;
232}
233
234main article {
235padding: 0;
236margin: 0;
237}
238
239aside {
/* aside vult de hele regel */
240width: 100%;
241margin: 0;
242padding: 0;
243}
244
245aside p {margin: 0;}
246
247video{
/* tekst loopt niet meer om video heen, maar video vult de hele regel */
248float: none;
249display: block;
250width: 100%;
251}
252
253figure {
/* figure heeft geen brede rand meer en geen afgeronde hoeken */
254margin: 0 0 10px 0;
255padding: 0;
256border-radius: 0;
257}
258
259}
Toelichting
Het meeste zal je duidelijk zijn met de commentaren in het stijlblad. Een paar opmerkingen:
- Denk niet dat ik de bovenstaande code zo meteen heb opgeschreven. Ik ben begonnen met het 100% breed maken van de nav a, main en aside. Daarna het verbergen van de kopfoto.
Vervolgens heb ik één voor één marges en paddings kleiner - meestal 0 - gemaakt en dan gekeken wat het effect was op een klein scherm - net zo lang tot ik tevreden was.
- De menu items (nav a) en de elementen main en aside zijn in het eerste deel van het stijlblad gedefinierd als inline-blok elementen. Daarvan mogen er verschillende naast elkaar staan.
In de regels 211 en 212 heb ik van de menu items blok-elementen gemaakt en ze 100% breed gemaakt. Daardoor komen de menu items onder elkaar en vullen ze de hele breedte van het scherm.
Nog wat stijlregels voor de perfectionisten
Als je de website nog eens goed bekijkt terwijl je het scherm (venster) steeds smaller maakt, dan zie je dat die er prima uitziet bij grote schermen en bij kleine schermen.
Maar als het scherm zo breed is dat de afbeeldingen rechts nog net naast de tekst blijven staan, dan zijn die afbeeldingen wel wat klein. Niet zo mooi!
Dat kunnen we oplossen door voor schermen smaller dan 800px de aside wat breder te maken, en de main wat smaller.
In figuur 2 heb ik main 55% breed gemaakt, en aside 44%.
(maak ze samen net geen 100%, anders loop je kans dat door afronding de totale breedte op meer dan 100% uitkomt en dan komt de aside onder main.
Verder heb ik de linker- en rechter margin van de figure en de alinea's in de aside nog wat aangepast.
figuur 2: de puntjes op de i
173/* voor middelkleine schermen tot 800px*/
174@media screen and (max-width: 800px) {
175main {width: 55%;}
176aside {width: 44%;}
177figure, aside p {margin-left: 10px; margin-right: 0; }
178}
179
Verder
Hiermee is de website helemaal klaar!
Wat kan je nu verder doen?