Mobiele versies

Responsive web design

Bij "responsive webdesign" wordt er één website systeem opgezet dat de vormgeving 'aanpast' aan de afmeting van het beeldscherm.

Voordelen

• Elke bezoeker (ongeacht het apparaat dat hij gebruikt) bezoekt dezelfde website. De vormgeving (en in sommige gevallen de inhoud) past zich aan de afwijkende beeldschermen aan.
• De beheerder van de website beheert één systeem.

Nadelen

• Beperkingen
• De vomgever is 'beperkter' in het ontwerpen van een (aantrekkelijk/functioneel) layout.
• De interaction-designer is 'beperkter' in het opzetten van het 'gedrag' van het systeem.
• De frontend developer is beperkter in het gebruik van CSS.
• Er kan door de content-manager veelal geen apparaat-gerichte-inhoud samengesteld worden.
• Lange laadtijden
• Een smartphone zal altijd dezelfde inhoud (teksten, afbeeldingen en video's) inladen als die van de desktop versie, wat voor (onnodige) lange laadtijden zorgt.
• Duurder
• De ontwikkelwijze en opzet van responsive websites zijn 'nauwer' en daardoor dus ook complexer. De kosten zijn daardoor iets hoger.

Responsive web design+ (met media query's)

Bij "responsive webdesign" wordt er één website systeem opgezet dat met behulp van media querys specifieke stylesheets en javascripbestanden inlaadt en daarmee de vormgeving gericht 'aanpast' aan de afmeting van het beeldscherm.

Voordelen

• Elke bezoeker (ongeacht het apparaat dat hij gebruikt) bezoekt dezelfde website. De layout past zich aan de afwijkende beeldschermen aan.
• Indien nodig/gewenst kan m.b.v. apparaat specifieke stijl declaraties de layout nog gerichter (dan 'gewoon' responsive design) aan de afwijkende beeldschermen aangepast worden.
• Indien nodig/gewenst kan m.b.v. apparaat specifieke javascript declaraties de techniek nog gerichter (dan 'gewoon' responsive design) aan de afwijkende beeldschermen aangepast worden.
• De beheerder van de website beheert één systeem.

Nadelen

• Beperkingen
  • De programmeur dient op één wijze (de inhoud van tekstblokken, modules en pagina's) html5 pagina's te genereren.
  • De vomgever is (welliswaar minder dan bij 'normaal' responsive design) 'beperkter' in het ontwerpen van één (aantrekkelijk/functioneel) layout.
  • De interaction-designer is (welliswaar minder dan bij 'normaal' responsive design) 'beperkter' in het opzetten van het 'gedrag' van het systeem.
  • De frontend developer is beperkter in het gebruik van CSS voor de smartphones.
  • Er kan door de content-manager veelal geen apparaat-gerichte-inhoud samengesteld worden.
• Lange laadtijden
  • Een smartphone zal altijd dezelfde inhoud (teksten, afbeeldingen en video's) inladen als die van de desktop versie, wat voor (onnidige) lange laadtijden zorgt.
• Browser compatibiliteit
  • Ongeveer 22% van de browsers kunnen niet met media query's overweg.

Semi Responsive web design+ (met server detectie)

Bij "semi responsive webdesign+" wordt er één website systeem opgezet dat met behulp van server-side detectie specifieke stylesheet- en javascript bestanden inlaadt en daarmee de vormgeving én techniek gericht 'aanpast' aan de beschikbare hard- en software van het apparaat.

Het grootste verschil met de media-query-detectie is dat er hier al vóórdat de webpagina aan de bezoeker afgeleverd wordt, bekend is met welk apparaat de website van doen heeft. Daardoor kan ook de layout en techniek volledig afgestemd worden op het specifieke apparaat.

Een andere groot verschil is dat de website beheerder van de website bepaalde inhoud (specifiek voor de mobiele versie) kan opstellen, aanpassen of weglaten. Maar alleen indien hij dit (bij een specifiek onderdeel) nodig acht.

De desktop bezoeker ontvangt bijvoorbeeld een 'gewone' xhtml. De mobiele bezoeker ontvangt bijvoorbeeld een (licht gewicht) html5. Dit document is dan op de veelal zwakkere processoren van het apparaat afgestemd.

Voordelen

• Elke bezoeker (ongeacht het apparaat dat hij gebruikt) bezoekt dezelfde webpagina. De layout past zich aan de afwijkende beeldschermen en/of browserafmetingen aan.
• De programmeur kan op verschillende wijzes xhtml en/of html5 pagina's genereren.
• De interaction-designer is (binnen de desktop versie) niet beperkt in het opzetten van het 'gedrag' van het systeem.
• Er kunnen specifieke layouts beschikbaar gesteld worden.
• De vomgever is (binnen de desktop versie) niet beperkt in het ontwerpen van het layout.
• De frontend developer is (binnen de desktop versie) niet beperkt in het gebruik van CSS.
• De beheerder van de website beheert één systeem.
• De beheerder van de website kan bepaalde inhoud (specifiek voor de mobile of desktop versie) opstellen, aanpassen of weglaten.
• Een smartphone kan nu een mobiel afgestemde pagina met inhoud inladen, wat voor aanzienlijk snellere laadtijden, een betere gebruiksvriendelijkheid, toegankelijkheid en dus ook (mobiele) zoekmachine optimalisatie met zich mee brengt.

Nadelen

Er zijn geen nadelen.

Procesweergave van "Semi Responsive web design+ met server detectie"