Nederland | België | Contact opnemen

Snel contact?

Q

Ja, bel mij op...

    Heb je nood aan een doordachte online aanpak? Vul dan onderstaande gegevens in en wij bellen jou.

    BLOG

    Responsive websites, van desktop naar mobiel

    responsive_website_desktop_mobiel

    In de technische wereld van de webontwikkeling is de trend al een tijdje geleden ingezet, maar nu zien we ook steeds vaker dat de vraag rechtstreeks door ontwerpers en onze klanten gesteld wordt: een responsive site. Waar een website voorheen ontwikkeld werd voor een minimale schermresolutie van 1024 pixels breed (meestal uitgaande van een grid van 960 pixels breed, zodat er voldoende ruimte overblijft voor de randen en scrollbalken van de browser), is het tegenwoordig steeds vaker gewenst om sites ook voor kleinere schermen geschikt te maken. De belangrijkste reden hiervoor is dat het besef groeit dat websites ook op smart phones en tablets goed getoond moeten worden. Een groot deel van de surfers zit immers niet meer per definitie achter zijn of haar computer. Men verwacht zelfs dat het aantal sites dat via mobiele apparaten bezocht wordt op niet al te lange termijn de desktop-bezoeken zal passeren.

    Een responsive website is device en resolutie onafhankelijk. In de praktijk betekent dit dat de website zich automatisch aanpast aan het formaat van de browser waarmee de site bekeken wordt, zonder af te doen aan de gebruikerservaring. In tegenstelling tot een ‘puur’ mobiele site, is een responsive site breder inzetbaar (omdat de opzet flexibeler is).

    Een technische uitdaging

    Mobiele apparaten zoals telefoons en tablets stellen de ontwikkelaar voor een aantal uitdagingen. Behalve de kleinere schermen, ontbreekt vaak een fysiek toetsenbord en vrijwel altijd een muis(pointer). Wat betreft de bediening van een website, verdwijnen daardoor een aantal mogelijkheden. Zo heeft het bijvoorbeeld weinig zin om functionaliteit in te bouwen die reageert op de positie van de muispointer (denk daarbij aan menu’s die openklappen als je er met de muis overheen beweegt) of op de TAB-toets (vaak gebruikt voor het wisselen tussen velden in een invulformulier).

    Mobiele browsers missen daarnaast vaak de desktop plug-ins zoals bijvoorbeeld Adobe Flash (Adobe heeft al aangekondigd om Flash niet verder door te ontwikkelen voor mobiele apparaten). Dit beperkt natuurlijk ook de mogelijkheden, hoewel het op zichzelf geen nadeel hoeft te zijn, aangezien er inmiddels standaard technologie beschikbaar is om de gaten in te vullen (met HTML5 en CSS3 in de ‘lead’).

    Tenslotte worden mobiele apparaten vaak op het (mobiele) 3G netwerk gebruikt. Dit zorgt voor een tragere verbinding en mogelijke extra kosten voor dataverkeer (aan de kant van de eindgebruiker). Als ontwikkelaar moet je dus rekening houden met de hoeveelheid data die de site in het kleinere formaat doorstuurt.

    Ontwerp: mobile first of desktop first?

    Als we kijken naar de extra complexiteit die het ontwerpen en ontwikkelen van een responsive website met zich meebrengt, hebben we inmiddels geleerd dat het extra werk aardig kan oplopen. Alleen met een goede planning vooraf en een degelijke design-strategie, zijn de kosten voor de klant in de hand te houden. Het is namelijk relatief ingewikkeld om een site die gebouwd is op een grid van 960 pixels breed (responsive) om te zetten naar een kleiner formaat, tenzij er vooraf rekening gehouden wordt met deze voorwaarde.

    Vaak adviseert men als design-aanpak ‘mobile first’. Dit houdt in dat de site eerst in het kleinere formaat wordt ontworpen (bijvoorbeeld op 320 pixels breed voor de iPhone) en vervolgens wordt omgebouwd naar het grotere formaat. Ik ben er niet van overtuigd dat dit perse noodzakelijk is. Mits een aantal randvoorwaarden worden opgesteld voor het ontwerp, is het prima mogelijk om eerst de ‘grote’ versie te ontwikkelen en daarna terug te schalen. Wij hebben dit met een aantal sites probleemloos op deze wijze gerealiseerd. Wel moet er goed gekeken worden naar de mogelijkheden die een site moet bieden in beide formaten. Voor de mobiele versie geldt dat lang niet alle functionaliteit beschikbaar hoeft te zijn, zolang de kernfunctionaliteit van de site en de look-and-feel (belangrijk vanuit marketingoogpunt) niet verloren gaat.

    Maar, doe het dan ook direct goed…

    Overigens is het simpelweg uitschakelen of herschalen van elementen dmv. media queries in de CSS files (stylesheets) niet de volledige oplossing. Dit gebeurt nog te vaak, waarschijnlijk door gebrek aan kennis (of de juiste faciliteiten) bij de ontwikkelaar. Zowel elementen die uitgeschakeld zijn als elementen die een nieuwe afmeting meekrijgen (in de stylesheet), worden namelijk toch volledig geladen door de browser (maar slechts visueel anders weergegeven). Dat is zoiets als je aanhanger volladen en vervolgens net doen alsof hij niet achter je auto hangt zolang de inhoud afgedekt is met een zeiltje. De ballast is wel degelijk aanwezig in de site. Hierdoor belast de mobiele site de browser op dezelfde wijze als de desktopversie, hetgeen zorgt voor veel dataverkeer en een trage site (het eerder genoemde probleem). Dit is op te lossen door de juiste technologie in te zetten aan de serverkant, bijvoorbeeld scripts die afbeeldingen automatisch terugschalen zodat ze afgeleverd worden in een kleiner formaat.

    Conclusie

    Samengevat kunnen we concluderen dat eigenlijk niemand meer om een responsive (of mobiele) site heen kan. Een bestaande site ombouwen naar een responsive versie kan nogal wat werk met zich meebrengen, het zou dan aantrekkelijker kunnen zijn om een aparte mobiele versie te maken (gebaseerd op een tweede, mobiele, template).

    Bij het ontwikkelen van een nieuwe site is het per definitie aan te raden om vanaf het begin rekening te houden met een kleinere variant. De extra kosten tijdens de ontwerpfase wegen dan vrijwel zeker op tegen het toekomstige voordeel: optimale bediening van je potentiële en bestaande klanten.

    Wilt u meer weten over hoe u uw bezoekers met uw website de perfecte gebruikservaring kunt geven, of ze nu een PC, tablet of smartphone gebruiken? Neem dan contact met ons op!

    Recente projecten

    - Even uitpakken -

    Unique Self Institute

    Eco Diamond

    Bremen Bouwadviseurs

    Kinderleven

    Testimonials

    - Wat onze klanten ervan vinden -

    Als marktleider in de beveiligingsbranche kiest ABUS resoluut voor toppers in de markt. Diamedia Minds is één van de beste en dit moet men verdienen, elke dag weer. Zij bewijzen het! Voor ons is deze jonge ploeg een betrouwbare partner, die correct en snel op de bal speelt. Ze ondersteunen ons met verschillende marketingtoepassingen, waarvoor ze alles onder één dak bieden, mét internationale mogelijkheden. Voor ABUS als multinational een must en een echte meerwaarde.
    Jo Kenens
    Abus
    Als marktleider in de beveiligingsbranche kiest ABUS resoluut voor toppers in de markt. Diamedia Minds is één van de beste en dit moet men verdienen, elke dag weer. Zij bewijzen het! Voor ons is deze jonge ploeg een betrouwbare partner, die correct en snel op de bal speelt. Ze ondersteunen ons met verschillende marketingtoepassingen, waarvoor ze alles onder één dak bieden, mét internationale mogelijkheden. Voor ABUS als multinational een must en een echte meerwaarde.
    Jo Kenens
    Abus
    Om te groeien, heb je nieuwe klanten nodig. Daar helpt Diamedia Minds ons mee. Ze helpen om ons merk goed in de markt te zetten. Online zorgen ze ervoor dat we 'gevonden worden'. Daarnaast zorgen ze voor de nodige 'call to action', zodat prospects onze website niet alleen bekijken, maar ook met ons contact opnemen. Het resultaat? Nieuwe klanten!
    Paul Schmidt
    MAG Groep
    Om te groeien, heb je nieuwe klanten nodig. Daar helpt Diamedia Minds ons mee. Ze helpen om ons merk goed in de markt te zetten. Online zorgen ze ervoor dat we 'gevonden worden'. Daarnaast zorgen ze voor de nodige 'call to action', zodat prospects onze website niet alleen bekijken, maar ook met ons contact opnemen. Het resultaat? Nieuwe klanten!
    Paul Schmidt
    MAG Groep
    Diamedia Minds is persoonlijk en professioneel en zij resoneren met mij als persoon. Ze kijken met mij mee door mijn bril. Een duidelijk plan, met prioriteiten en acties, hun continue bereikbaarheid en bijsturing waar nodig, brachten ons allesomvattend website-project tot een eindresultaat dat er tot in de puntjes mag zijn. Ik kijk ernaar uit om de komende tijd nieuwe stappen met hen te nemen om Yogaplace verder neer te zetten in haar eigenheid en kracht.
    Manon Simonis
    Yogaplace
    Diamedia Minds is persoonlijk en professioneel en zij resoneren met mij als persoon. Ze kijken met mij mee door mijn bril. Een duidelijk plan, met prioriteiten en acties, hun continue bereikbaarheid en bijsturing waar nodig, brachten ons allesomvattend website-project tot een eindresultaat dat er tot in de puntjes mag zijn. Ik kijk ernaar uit om de komende tijd nieuwe stappen met hen te nemen om Yogaplace verder neer te zetten in haar eigenheid en kracht.
    Manon Simonis
    Yogaplace
    Diamedia Minds heeft aan één woord genoeg om te snappen wat ik bedoel. En dan komen ze vervolgens met een product dat mijn stoutste verwachtingen overtreft! De samenwerking heb ik als zeer prettig ervaren. Informeel doch zakelijk, mensen van het woord, snelle reactietijd. Dat zie je zelden meer.
    Maaike Stooker
    Hogeschool Zuyd
    Diamedia Minds heeft aan één woord genoeg om te snappen wat ik bedoel. En dan komen ze vervolgens met een product dat mijn stoutste verwachtingen overtreft! De samenwerking heb ik als zeer prettig ervaren. Informeel doch zakelijk, mensen van het woord, snelle reactietijd. Dat zie je zelden meer.
    Maaike Stooker
    Hogeschool Zuyd
    Ik kijk terug op een fijne samenwerking met Daphne en Jasper. Ze zijn heel betrokken en hebben echt de tijd genomen om mij en mijn organisatie beter te leren kennen en om te luisteren naar mijn wensen. De communicatie was prettig: duidelijke uitleg, snelle reactietijd en geen vraag was teveel. Het resultaat is een website die helemaal bij mij past, met een frisse en creatieve uitstraling en pakkende teksten.
    Anita Suijkerbuijk
    ASCATI
    Ik kijk terug op een fijne samenwerking met Daphne en Jasper. Ze zijn heel betrokken en hebben echt de tijd genomen om mij en mijn organisatie beter te leren kennen en om te luisteren naar mijn wensen. De communicatie was prettig: duidelijke uitleg, snelle reactietijd en geen vraag was teveel. Het resultaat is een website die helemaal bij mij past, met een frisse en creatieve uitstraling en pakkende teksten.
    Anita Suijkerbuijk
    ASCATI
    Hun expertise is overduidelijk en hun oprechte betrokkenheid maakt dat ze een echt team met ons vormen. Ze zijn een aanvullende en belangrijke meerwaarde voor ons werk.
    Ronald Jan Heijn en Harry Beckers
    Staya Erusa en Hello Aquarius
    Hun expertise is overduidelijk en hun oprechte betrokkenheid maakt dat ze een echt team met ons vormen. Ze zijn een aanvullende en belangrijke meerwaarde voor ons werk.
    Ronald Jan Heijn en Harry Beckers
    Staya Erusa en Hello Aquarius
    Werken met Diamedia Minds is altijd een prettige ervaring. Ze denken met je mee en hebben goede tips om een jaarverslag - online en op papier - jaar na jaar steeds verder te verbeteren.
    Lidwien Hollanders
    Maastricht University
    Werken met Diamedia Minds is altijd een prettige ervaring. Ze denken met je mee en hebben goede tips om een jaarverslag - online en op papier - jaar na jaar steeds verder te verbeteren.
    Lidwien Hollanders
    Maastricht University
    Diamedia Minds denkt constructief met ons mee, is origineel in de oplossingen die zij ons voorstellen en snel in de uitvoering en het zien van marketingkansen. In plaats van 'mee te praten', beziet Diamedia Minds ook het totaalplaatje en bespreken zij ook de nadelen van sommige marketingoplossingen, om vervolgens met een passend alternatief te komen. Een fijne en betrouwbare partner!
    Julienne Erckens
    Maastricht University
    Diamedia Minds denkt constructief met ons mee, is origineel in de oplossingen die zij ons voorstellen en snel in de uitvoering en het zien van marketingkansen. In plaats van 'mee te praten', beziet Diamedia Minds ook het totaalplaatje en bespreken zij ook de nadelen van sommige marketingoplossingen, om vervolgens met een passend alternatief te komen. Een fijne en betrouwbare partner!
    Julienne Erckens
    Maastricht University
    De kennis en kunde van webdesign en –ontwikkeling straalt ervan af bij Diamedia Minds. Diamedia Minds heeft onze website zeer professioneel (en binnen tijd en budget) ontwikkeld. Daarnaast was het bovendien een erg plezierige samenwerking. Vooral de zeer snelle en duidelijke reacties op onze vragen hebben we bijzonder gewaardeerd. Diamedia Minds is flexibel en denkt echt met je mee!
    Laurens Wormer
    Mateum
    De kennis en kunde van webdesign en –ontwikkeling straalt ervan af bij Diamedia Minds. Diamedia Minds heeft onze website zeer professioneel (en binnen tijd en budget) ontwikkeld. Daarnaast was het bovendien een erg plezierige samenwerking. Vooral de zeer snelle en duidelijke reacties op onze vragen hebben we bijzonder gewaardeerd. Diamedia Minds is flexibel en denkt echt met je mee!
    Laurens Wormer
    Mateum
    Sinds 2010 werken we samen met Diamedia Minds. Gestart met een meer dan geslaagde herpositionering, is ons contact ook vandaag nog steeds uitermate intensief en goed. Diamedia Minds verzorgt onze (online) marketing op meer dan professionele wijze. Bovendien is het een groot goed om te kunnen werken met deze super aangename mensen!
    Ab van Deemter
    Kalimba NV
    Sinds 2010 werken we samen met Diamedia Minds. Gestart met een meer dan geslaagde herpositionering, is ons contact ook vandaag nog steeds uitermate intensief en goed. Diamedia Minds verzorgt onze (online) marketing op meer dan professionele wijze. Bovendien is het een groot goed om te kunnen werken met deze super aangename mensen!
    Ab van Deemter
    Kalimba NV