Responsive Webdesign

Home Responsive Webdesign

iPhone App, mobiele website of responsive design?

Tablets en smartphones zijn bezig aan een onstuitbare opmars. En het groeit alleen maar door, met intussen meer verkochte smartphones dan computers in Nederland en de komst van de smart TV. De meeste sites zijn echter niet ontworpen voor kleinere, draaibare schermen en bediening met vingers in plaats van een muis. Wat te doen?

Responsive webdesign is een efficiënte en doeltreffende aanpak om websites toegankelijk te maken voor zowel tablets, smartphones, laptops als de klassieke pc. Topshelf Media pioniert hier al mee sinds 2010. Door opkomst van de iPhone, iPad, Android en Windows Phone en de acceptatie van HTML5 is er een breed scala aan responsive designs gerealiseerd. Waarom moet je over responsive design nadenken? Welke redenen zijn er? Welke alternatieven? Wat betekent het en wat levert het op?

Grofweg zijn er drie opties om mobiele bezoekers te bedienen:

1 | Native applicaties

Native mobiele applicaties zijn snel en gebruiksvriendelijk en kunnen features gebruiken zoals camera, adressenboek en alerts. Tegenover deze voordelen staat dat je voor ieder platform (iOS, Android, Blackberry, Windows Phone) apart moet ontwikkelen, in steeds een andere programmeertaal. Bovendien is de inhoud van een app niet vindbaar: iemand heeft pas iets eraan als hij het geïnstalleerd heeft. Niet iedereen wil dat. Een app ontwikkelen is dan ook alleen zinvol als je veel gebruikers hebt per platform en hen iets biedt dat mensen regelmatig gebruiken.

Topshelf Media maakt mobiele applicaties die snel en gebruiksvriendelijk zijn en alle features van een telefoon kunnen gebruiken. Tegenover deze voordelen staat dat je voor iOS (iPhone, iPad) en Android in een andere programmeertaal moet ontwikkelen.

Idem voor Blackberry en Windows Phone. Bovendien is de inhoud van een app niet vindbaar: iemand heeft pas iets eraan als hij het geïnstalleerd heeft. Niet iedereen wil dat. De ervaring leert dat mensen vooral app’s installeren van merken en praktische zaken die ze regelmatig gebruiken.

2 | Apparaatspecifieke websites

Een mobiele site voor de smartphone en een tablet site voor de iPad naast de klassieke ‘desktop’ website is minder werk dan apps ontwikkelen. Per soort apparaat volstaat één website. Bovendien is HTML makkelijker aanpasbaar dan custom code. Wel moet je nog steeds meerdere sites maken en naast elkaar onderhouden.

De sites kunnen ook inhoudelijk specifiek worden, met bijvoorbeeld op de tablet versie meer inspiratie met een magazine en op de smartphone de vijf meestgebruikte functies snel en supersimpel. Al kan een bezoeker dan via Google op de iPhone op een pagina komen die alleen geoptimaliseerd is voor iPad. Leesbaarheid en user experience zijn dan niet ideaal.

Apparaatspecifieke websites maken is daarmee vooral nuttig als je snel een mobiele site wilt zonder je reguliere site aan te passen of als bezoekers op een smartphone of ipad maar een deel van je diensten vragen.

3 | Responsive design

Bij responsive webdesign – ook wel adaptive webdesign, schaalbare of fluid websites genoemd – maken we één website die zich aanpast aan het apparaat en het gedrag van de gebruiker. De bezoeker krijgt dus altijd dezelfde content, alleen de presentatie en bediening kan verschillen.

Check eens een aantal websites op je desktop en daarna op je smartphone of tablet. Dan zie je wat responsive design is, zie de pagina portfolio.

Sinds alle recente browsers de nieuwe technische standaarden (voor de kenners: HTML5 en CSS3) ondersteunen, is responsive design een stuk beter te behappen. En een stuk minder werk dan het programmeren van allemaal losse apparaatspecifieke websites, laat staan van native mobiele applicaties. Bovendien heb je daarna slechts één site te onderhouden. Een voordeel tenslotte is dat op welke pagina een bezoeker je ook vindt via Google, deze altijd optimaal getoond wordt.

Deze voordelen zijn de redenen waarom we responsive design tot standaard hebben verheven bij een aantal klanten.

It’s not just size that matters

Door middel van responsive design houden we natuurlijk rekening met grootte en oriëntatie van het scherm van een apparaat. Dat doen we bijvoorbeeld door:

– Kolommen te versmallen of onder elkaar te zetten op een staande iPad of smartphone.

– Op een smartphone een brede menubalk te vervangen door een compacte uitklapper.

Maar er zijn meer verschillen tussen apparaten dan alleen het formaat.

– Touchscreens bedien je met vingers. Die zijn groter en minder precies dan een cursor, dus maken we links en buttons groter en zorgen we voor meer ruimte eromheen. Met vingers kan je wel weer lekker slepen.

– iPad en iPhone ondersteunen geen flash. Daarom maken we animaties (denk aan homepage carrousels en grafieken) met HTML5. Ook voor online video passen we een HTML5-videoplayer toe of openen we de video in de YouTube app op de iPhone.

– Mobiele apparaten hebben vaak tragere verbindingen, dus laten we grote achtergrondafbeeldingen weg en tonen kleinere afbeeldingen in de inhoud.

– Altijd gedoe, typen op een klein scherm. Dat maken we makkelijker door op smartphones het juiste toetsenbord op te roepen voor e-mailadressen en telefoonnummers.

Wil je weten wat responsive design jou oplevert en wat het je bespaart? Kom dan eens bij ons langs of neem contact met ons op.