Jakob Lierman Webapplicaties I
Hoofdstuk 5
Wat te verstaan onder Responsive Webdesign
Twee mogelijke benaderingen:
- Separate Mobile Site: verschillende websites (html-css)
- Eén website met verschillende layouts
Separate Mobile Sites
Dedicated sites (mdot strategie)
Pro:
- Design gemakkelijker te onderhouden want specifiek voor mobile
- Subdomein = korter te typen
- Auto redirection
Contra:
- Dubbel onderhoud: content en design
- Mobi target voor domain squatters: is site.mobi al ingenomen?
Nodig: device-detection scripts
Design for one web
Responsive webdesign
Doel: webpagina’s leesbaar maken op verschillende apparaten (met verschillende schermgroottes).
Een pagina met meerdere kolommen is gemakkelijk te lezen op een groot scherm, maar niet op een
klein scherm.
Responsive Web Design maakt gebruik van HTML en CSS om de pagina’s geschikt te maken voor alle
soorten schermen. Sommige schermen worden verborgen of getoond naargelang de schermgrootte.
Buttons, menu’s, etc. worden anders weergegeven.
Pro:
- SEO: alle content op dezelfde site, links verwijzen naar dezelfde site
- Aanpasbaarheid: aantal nieuwe apparaten blijft toenemen
- Minder onderhoud
- Lay-out past zich aan aan de schermgrootte
Contra:
- Bandbreedte/snelheid: een dedicated site bevat minder inhoud en aangepaste beelden,
tenzij een responsive site daarop kan voorzien
- Bestandsgrootte: beelden, libraries
- Aantal HTTP requests: stylesheets, javascripts, media
Veranderingen:
- Aantal kolommen: bijvoorbeeld drie op desktop en één op mobiel
1
Hoofdstuk 5
Wat te verstaan onder Responsive Webdesign
Twee mogelijke benaderingen:
- Separate Mobile Site: verschillende websites (html-css)
- Eén website met verschillende layouts
Separate Mobile Sites
Dedicated sites (mdot strategie)
Pro:
- Design gemakkelijker te onderhouden want specifiek voor mobile
- Subdomein = korter te typen
- Auto redirection
Contra:
- Dubbel onderhoud: content en design
- Mobi target voor domain squatters: is site.mobi al ingenomen?
Nodig: device-detection scripts
Design for one web
Responsive webdesign
Doel: webpagina’s leesbaar maken op verschillende apparaten (met verschillende schermgroottes).
Een pagina met meerdere kolommen is gemakkelijk te lezen op een groot scherm, maar niet op een
klein scherm.
Responsive Web Design maakt gebruik van HTML en CSS om de pagina’s geschikt te maken voor alle
soorten schermen. Sommige schermen worden verborgen of getoond naargelang de schermgrootte.
Buttons, menu’s, etc. worden anders weergegeven.
Pro:
- SEO: alle content op dezelfde site, links verwijzen naar dezelfde site
- Aanpasbaarheid: aantal nieuwe apparaten blijft toenemen
- Minder onderhoud
- Lay-out past zich aan aan de schermgrootte
Contra:
- Bandbreedte/snelheid: een dedicated site bevat minder inhoud en aangepaste beelden,
tenzij een responsive site daarop kan voorzien
- Bestandsgrootte: beelden, libraries
- Aantal HTTP requests: stylesheets, javascripts, media
Veranderingen:
- Aantal kolommen: bijvoorbeeld drie op desktop en één op mobiel
1
