News - Article: Mobiele versies

News article "Mobiele versies" from the blog from SignWare. Make a nice cup of coffee. Pour the coffee into a cup. Go and sit comfortably. Then put your reading glasses on and read the article "Mobiele versies".

 

Mobiele versies

Posted on April 3, 2015

Een 'traditionele' desktop website zal veelal (zonder extra aanpassingen) niet optimaal te gebruiken zijn op apparaten met kleinere beeldschermen zoals bijvoorbeeld een smartphone. Een mobiele website kan (hoofdzakelijk) op drie verschillende wijzes opgebouwd worden.

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 layout 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 één (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 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.
  • 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 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. Een server-side detectie systeem dient hiervoor aanwezig te zijn.

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- sen 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 mobile 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 website. De layout past zich aan de afwijkende beeldschermen aan.
  • De programmeur kan op verschillende wijzes xhtml en/of html5 pagina's genereren.
  • De interaction-designer is (binnen de desktop versie) niet meer 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 meer beperkt in het ontwerpen van layout(s).
  • De frontend developer is (binnen de desktop versie) niet meer 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 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 zelfs (mobiele) zoekmachine optimalisatie met zich mee brengt.

Mobiele versies

Verwante rubrieken: Knowledge base

Leave a message
We look forward to meeting you - Call or email us for (scheduling) an intake. In this meeting you mostly will receive also a concise plan and an indication of the cost. You will then receive a detailed offer by mail. After your approval we start building your project. We also remain actively in monitoring and expanding your project. We have never disappointed anyone in 11 years.

SignWare
Kruisherengang 18b
6211 NW Maastricht
Tel: +31 (0)43 - 326 51 18
Email: ln.erawngis|a|ofni
KVK 14094047 0000

  • More than 11 years experienced
  • A complete and expert team
  • Excellent service & support
  • Call us: +31 43 326 5118
  • Nederlands
  • Englisch