Na een opfrissertje over de verschillende stappen in het ideale responsive design proces stelt Steve Fisher, panelvoorzitter en Director of User Experience bij Yellow Pencil de zaal een vraag: Wie heeft er wel eens een responsive website ontwikkeld? Net zoals ik steekt iedereen zijn hand op. Kijk, een publiek met niveau. Dit wordt leuk!

De volgende vraag komt er direct overheen: wie vindt responsive design saai? In een impuls steek ik mijn hand op. Ik kijk om me heen. 399 handen blijven omlaag.

Ik sta vol in de schijnwerpers. The odd one out. De man die the next big thing in webdesign niet op waarde kan schatten. Ook Steve kijkt verbaasd. Dit had hij niet verwacht. Snel laat ik mijn arm zakken en duik wat in elkaar. Het gaat vast wel voorbij.

Steve twijfelt wat hij zal doen. Hij pakt zijn verhaallijn weer op, maar vraagt dan ineens: “Could the gentleman that said he thinks responsive design is boring come to the microphone in the front and tell us why he thinks responsive design is boring?”

Ik besluit om me niet te laten kennen. Terwijl ik naar de microfoon loop probeer ik koortsachtig mijn gedachten op orde te brengen.

Waarom vind ik responsive design saai?

Bij responsive webdesign pas je content en menu’s aan voor desktops, mobiele telefoons en tablets. Zodat je als gebruiker de informatie van de website optimaal kunt bekijken. Daarnaast heeft het grote voordelen voor je SEO en contentmanagement. Al je content staat op één url en je hoeft geen dubbele content te creëren. Geen speld tussen te krijgen.

Maar het gaat te vaak fout in de uitvoering. Klanten denken dat responsive hun bestaande website tegen lage kosten gebruiksvriendelijk kan maken voor alle devices. Bureaus gaan daarin mee, strooien met wat javascript klatergoud, verschuiven wat paginaonderdelen en voilà, de website is responsive.

Daarmee sla je echter een paar heel belangrijke stappen over die bij ‘gewoon’ app- en websiteontwerp essentieel zijn. Informatie-architectuur en User Experience design. De iPhone is mede groot geworden doordat elke developer zich conformeert aan de iPhone-navigatiepatronen. Want daar zijn gebruikers aan gewend. Ook voor websites bestaan beproefde patronen die werken. User Experience designers kennen deze patronen en steken al hun tijd in het optimaliseren van de content en de interface voor verschillende devices. Als je zonder onderzoek je websiteonderdelen herschikt voor mobiele telefoons en tablets wek je al snel frustratie bij je publiek op. Je bezoekers willen consistentie zien. Dat is niet eenvoudig te realiseren.

Er zijn ook mensen die vinden dat websites helemaal niet per device moeten verschillen. Het merendeel van smartphone bezitters gebruiken hun telefoon thuis of op het werk om dezelfde informatie te bekijken als achter de lap- of desktop. Dit herken ik wel. Ik word soms gek van al die responsive websites met die rare mobiele pagina’s. Geef mij dan maar de gewone website en dan zoom ik wel in.

Kortom, je moet voor alle devices een duidelijke strategie ontwikkelen. Wat zijn je doelen per device? Wie is je publiek? Wanneer willen ze wat zien? Welke gevoelens komen daarbij kijken? En hoe kun je daar zo goed mogelijk een positieve bijdrage aan leveren?

Beproefde stappen. Mensenwerk. Geen magic bullets. In dat licht vind ik de meeste responsive websites niet gebruiksvriendelijk en dus nogal saai.

Inmiddels ben ik bij de microfoon aangekomen. Ik pak hem uit zijn statief en kijk naar het panel en de zaal. Mijn mond gaat open en ineens voel ik dat het helemaal niet goed komt. Mijn keel is dichtgeknepen, ik adem heel oppervlakkig en in mijn hoofd is het leeg. In een waas hoor ik mezelf in steenkolenengels zeggen: “I think it is boring because often they just reorder the page elements from desktop on mobiles.“ Ik word met onbegrip aangekeken. Paniek.

“Responsive design is no different than normal web design“, probeer ik. Het klinkt niet zoals ik het bedoel. Stilte. Een laatste poging: “All devices are unique and need special attention”. Geen enkele reactie.

Ik draai me om en loop terug naar mijn plek. Ik krijg een applausje voor getoonde moed. Op mijn plek aangekomen schieten me duizend mooie, snedige en kristalheldere zinnen te binnen. Te laat.

Dan opeens krijg ik bijval van een dame uit het publiek. Ze heet Molly en werkt al twintig jaar in het vak. Ze heeft voor grote klanten als de BBC gewerkt. Ze vertelt de zaal dat ze moe is geworden van alle hypes en dus ook van deze. Dat er niets nieuws onder de zon is en er geen shortcuts naar succes zijn. Dat we onze klanten en verkoopmedewerkers beter moeten informeren over het proces dat naar een succesvolle web presence leidt. Met een goede discovery en designfase. Voor elk device.

Daar zijn Steve en de andere panelleden het helemaal mee eens. Aaron Gustafson, schrijver van het boek Adaptive Webdesign, zegt dat de kosten van het van gedachten veranderen tijdens het ontwikkelproces exponentieel groeien.

Samantha Warren, designer bij Twitter, vind dat responsive webdesign niet minder werk met zich meebrengt dan het ontwerpen voor elk afzonderlijk device.

Yesenia Perez-Cruz, designer bij Happy Cog, praat over haar artikel One size fits none waarin ze uitlegt dat elke website een eigen aanpak nodig heeft.

Na de presentatie voel ik de noodzaak om de panelleden nog even te vertellen wat ik nou precies bedoelde. Ze denken er precies zo over. Maar dat doet het niet lekker in een grote presentatie op SxSW

Maar wat is nou een retinadisplay?

We zijn allemaal bekend met de beruchte pixel. Het bouwsteentje waarmee alle afbeeldingen op de beeldschermen van onze tv’s, pc’s, laptops, mobiles en tablets worden vertoond. De hoeveelheid pixels in je beeldscherm bepaalt de scherpte van de afbeeldingen. Maar ook die van de user interfaces van programma’s en websites.

Een retinadisplay heeft zoveel pixels per inch dat je ze van een afstand van 30 centimeter niet meer kunt onderscheiden. En dat zorgt voor superscherpe afbeeldingen. Het verschil is voor iedereen te zien en vooral te voelen. Alles voelt scherper en dus lekkerder aan.

Wat betekent retina voor designers en ontwikkelaars?

Retina is duidelijk de way to go. Maar het vergt wel een nieuwe aanpak door website designers en front-end developers. Zeker als het om de productie van logo’s en afbeeldingen gaat.

Het zit namelijk zo: alle native gerenderde onderdelen van een website, zoals fonts en CSS3-opmaak elementen (shadows, gradients, border-radius etc) worden al automatisch geoptimaliseerd voor een retinadisplay. Afbeeldingen echter niet…

Bij foto’s valt het minder op, maar logo’s en pictogrammen zijn duidelijk onscherp vergeleken met de native site-elementen. De simpele reden hiervoor is dat een standaard afbeelding te weinig pixels bevat voor de resolutie van een device met retinadisplay. Die resolutie wordt wél benut door native gerenderde elementen.

Het is gelukkig goed mogelijk om ook afbeeldingen, logo’s en pictogrammen er haarscherp uit te laten zien. Je maakt gewoon afbeeldingen die twee keer zo groot zijn. Maar zoals altijd heeft deze oplossing ook zijn nadelen. De prijs voor de scherpere afbeeldingen is dat de bestanden groter worden. En dus meer tijd kosten om te laden. Sterker nog: vaak wordt eerst de normale afbeelding geladen en daarna nog eens de grote versie.

Niet alleen de pixeldesigner moet met retina rekening houden. Ook de contentmanager van de website moet de afbeeldingen in twee formaten in het CMS plaatsen. Door automatische schaling van de afbeeldingen in te bouwen kan dit geestdodende werkje voorkomen worden.

Retina is dus een aandachtspunt. Het kost extra tijd van designers, ontwikkelaars en contentmanagers. En de gebruikers moeten extra (grote) afbeeldingen inladen. Toen alleen de iPhone’s nog retinaschermen hadden, was het extra werk nog te overzien. Maar met de komst van retinatablets en -laptops zal elke website retina-optimalisatie nodig hebben.

Tools als deze JavaScript-bibliotheek Retina.js kunnen helpen om je site retinaproof te maken.

Prioriteiten stellen

Wanneer je aan de slag gaat met retina-optimalisatie moeten inhoudelijk een aantal keuzes worden gemaakt. Wat ga ik wel en niet optimaliseren? Het logo is meestal het eerste wat men te zien krijgt, en aangezien het hier om een enkel, niet veranderlijk element gaat, is dit een goede quick-win.

Waar meer ontwikkeltijd voor nodig is, zijn de icoontjes, pictogrammen en pijltjes. Deze zijn vaak opgebouwd uit lijntjes en neigen hierdoor onscherp te worden. Bovendien zijn deze onderdelen meestal in grote getale op websites aanwezig. Design kan hier bij het opzetten van de styleguide al rekening mee houden door alle assets ook in hogere kwaliteit beschikbaar te maken. Bij Redhotminute werken wij met Adobe Fireworks voor al onze sitedesigns. Het aanmaken van masters, pages en de uitgebreide webexport-mogelijkheden maken het tot dé designtool voor onze pixeldesigners.

Tot slot is er nog het fotomateriaal. Hiervoor geldt dat kwaliteitsverschil minder zal opvallen dan bij de eerder genoemde grafische onderdelen. Ook hier ligt echter een kans om de bezoeker te voorzien van een betere weergave. Omdat fotomateriaal vaak dynamische content betreft die via het CMS wordt ingeladen, is het van belang dat foto’s altijd in hoge resolutie worden aangeleverd. Vervolgens wordt het materiaal aan serverzijde uitgeserveerd met de juiste dimensies en juiste compressiefactor. Voor retina images (jpg) geldt dat volstaan kan worden met een lagere compressiefactor zonder kwaliteitsverlies.

Ja, ik wil scherper!

De introductie van tablets en notebooks met retinascherm maakt het ondersteunen van hoge resolutie afbeeldingen zoals gezegd steeds wenselijker. Als webdeveloper of -designer is het raadzaam om hier snel mee aan de slag te gaan en goed te bepalen hoe ver je hierin wilt gaan. Een logische eerste stap is het retinaproof maken van het bedrijfslogo. Dit vormt het visitekaartje en staat over het algemeen bovenin de pagina en is dus altijd zichtbaar zodra een pagina opent. Vervolgens kunnen illustratieve afbeeldingen onder handen worden genomen. Zeker wanneer illustratieve afbeeldingen in een css-sprite zijn opgenomen, kunnen deze snel en eenvoudig met enkele handelingen worden omgezet voor retina-ondersteuning. Wil je all-the-wayretina? Overweeg dan om alle of specifiekfotomateriaal ook in hoge resolutie te ontsluiten. Houd er in dit geval wel rekening mee dat de bestandsgrootte van media-items hierbij onwenselijk groot kan worden.

Nieuwe technieken kunnen wellicht snel uitkomst gaan bieden: bijvoorbeeld de mogelijkheid om afbeeldingen op te bouwen via SVG, een vector gebaseerde HTML5-standaard. Ook browsers zullen hier mogelijk een rol in gaan spelen om dit op een eenvoudiger manier te voorzien. Welke keuzes je als designer of developer op dit moment ook maakt, scherpte is wat van ons gevraagd wordt!

Let’s say you are the online marketing manager of a car brand. At a motor show, you have screens set up that show car characteristics including a QR code. Interested visitors could scan the QR code using their phones, which directs them to the car configurator on your website. Your prospect can play around with all kinds of options and features to create the custom and personalized car of his dreams. After he finished configuring the car, the engaged prospect can select a nearby dealership online to book a test drive. The dealership sends your prospect an invitation email, based on the address information in your CRM.

Nurturing with a personal touch

The next time your hot lead visits one of your touch points you can use the preferences from the car configurator and the CRM to show him personalized web content to increase his desire to buy the car. This content can be hero shots of the desired car model on the homepage or interesting cross- and upsells related to the car or residential area of the prospect.

A Customer Experience Platform enables you to do all of the above, whereas a classic CMS would stick only to the copy and assets. A CXP like Sitecore is the nervous system of your online marketing- and content efforts. It can empower your websites, mobile (web)apps, social channels, emails, blogs and campaigns with personalized content. It also makes it possible to harvest user data and share it with your CRM and analytics tools. It can even orchestrate your customer life cycle management. A very powerful concept.

Every oak starts as an acorn

As intoxicating as this concept may feel, it also imposes some serious challenges on you and your marketing department.

It implies that you comprehend your user groups and their customer journeys. That you create customized content for different channels for all of the steps in the customer journeys. And that you know what content you serve to what user at what exact time. This calls for a serious investment in time and budget.

This, off course, will not happen overnight. Nor should it. Implementing and maintaining a CXP is a process where you take small steps while keeping the big picture in mind. You cannot go the whole nine yards from the start.

Understanding customer journeys

You need to understand your audiences’ interests in the different stages of their decision making process. What information do they expect in their orientation, validation, buying and after sales phases? To create rich and personalized content you need to dive even deeper into your customers’ heads. What do they do within the phases of their customer journey? What do they need and feel when they make a test drive appointment or use a car configurator? And what added value can you give them to improve their experience?

These little stories about your visitors are called user scenarios and give you great insights for creating compelling personalized content. The more personal you get the better and more relevant the content will be that you can provide them. At Redhotminute, this is the domain of our User Experience designers. They help our clients to get personal with their prospects and clients.

Mapping touch points to customer journeys

After you discovered the customer journeys and user scenarios you can start connecting all of your touch points to the customer journeys and the user scenarios within. What device or channel helps best in the different phases of the customer journeys?

Most likely, searching functionality will be important in the orientation phase, as will campaigning be. The personal account environment of your website will certainly be important in the after sales phase.

By mapping all of the present and future touch points to your customer journeys you’ll get a very detailed overview of the framework that you need to build to orchestrate all of your content and marketing activities. It’s based on your customers’ needs and not on technical considerations though. This is what is called user centered design. And it is the future of the web.

Designing the framework

Having this holistic concept makes you ready to start thinking about the CXP itself. The work that you have done will be the guiding light while talking to management, stakeholders, team members, technologists and creatives. They can all relate to your customers’ needs. And by visualizing the customer journeys they become great starting points for high level decision making on planning, technology, staffing and roadmapping.

What content goes where?

One very fundamental choice you will have to make is in what part of the platform you store your content.

Do you store your product data in the CMS or in a separate product database? In the case of our client Kia Motors Europe, all the hard data is stored in a master product database. This involves for instance product codes, engine types, specs, color variations and product images. “Soft” marketing data like video’s, campaigns, promotional photography and web copy is stored in the Sitecore CXP.

By using a simple selection of a model in Sitecore, a connection is established between the web CXP and the master data. This gives editors and marketers the focus on their marketing activities, while product managers can be very keen on the product information.

Can your content evolve?

Times have changed. The majority of your users have a (smart)phone. Use social media to get to know your brand. No longer could you concentrate solely on your desktop website: your content needs to be flexible. Optimized for a responsive or native mobile design. Capable of displaying page copy properly on Facebook through Social Graph. From there it keeps evolving: it might be used in campaigns, apps or reused by blogs through RSS feeds.

What if you are organizing a music festival and you’d like to create a Spotify app for brand exposure. As you have a corporate website, it seems only logical to combine that content with the content of Spotify. Would your content be ready for that transition? Would your CMS allow a different app to easily retrieve that content and reuse it?

Should you start tailoring or buy a best of breed solution?

Representing a brand, you need to be unique and provide your customers added value that cannot be found anywhere else. There is where your focus should be. That is what your core business is.

It is a misconception that doing things different would always require tailor made software development. When you build a new platform fully from scratch, you’ll need to build much basic, but very important functionality. Scalability through multiple websites and languages, user management and security to name a few.

There are best of breed systems out there that do that for you. The time you will spend on product- and software development is otherwise going to be substantial. And an online marketing specialist has better things to do.

In my opinion you should collaborate closely with your online agency. Let them inform you on possible products and choose a CXP that covers your needs, based on the requirements mentioned earlier. This will give you a good foundation for practicing your online activities.

To create your added value – to do things differently – thát would require something custom made. Have a CXP that can deliver content to multiple channels, add the Spotify API to the mix and let your agency create the magic that ties them together.

Flexibility is key in a CXP

A CXP like Sitecore offers out of the box software packages that give you the content and marketing tools mentioned in this post. Most importantly, it has an open technical architecture so that you can create unique features right on top of all the standard features that this CXP has to offer.

The open architecture allows us to use that native functionality and combine that with for instance e-mail marketing software. As the CXP keeps track of user click path on the website itself, it can send a person’s interests to the e-mail marketing software. This will allow it – possibly combined with other personalization factors – to send e-mails with subjects that are fully based on that person’s interests.

So does it?

How does your current platform fit for you? Is it facilitating your ideas or is merely a subject for your coworkers to complain about at the coffee corner?

Because there is not a software platform out there that you will install and will instantly do wonders for you, you need to really consider it all. Using this post could help you map your requirements and be more prepared at the start of creating a website or even a web platform.