in The Web

Responsive Design: There is More in Life than just Screen Size to Respond to

What we learn often with Responsive Web Design that it is all about the view port. However that is just one of the many contexts to respond to. Of course we need to make sure that content is fitting the window you use to view. Though there is more in life than the piece of glass you are looking through to view the web, the app or any other media you are viewing. For the sake of simplicity let’s focus on the Web in general for the rest of this article and let me provide with an overview of contexts you could be taking into account when building your solution.

Know the screen

responsive-design-heroYou should make sure your website is viewable in a proper way on devices. So don’t make people zoom in and zoom out, set appropriate break points and scale content to the appropriate site and reorder the elements on the page where necessary. Furthermore there is more than page size to worry about. With the rise of retina screens you should take into account the pixel ratio as well. Since if you don’t you might end up with graphics that give an unintended 8-bit experience.

Know the source

It is delusion to think that everybody goes to your website directly as it is their only goal. Most likely people will go elsewhere first and then find a way to your website. However “elsewhere” is an important guidance on what people want to do. If people come to your website via a career focused website most likely they are looking for a job, why not personalise you site on the fly to showcase career focused elements instead of your latest and greatest white paper.

Also do you know if the visitors is coming via one of your others channels to your website? If so, why even think to reset the user journey, continue the user journey from your other channel. Your user is not thinking about you as a collection of channels, he is seeing one logo and expects one experience.

Is this the first time your visitor is coming to you, or the second, third or twentieth time? Use this data to modify your site to your visitors needs. A good example is this plugin available for WordPress.

Know the connection

Serving retina images on a GPRS connection might not be the best use of time and bandwidth. Though your retina screen is great, if you don’t have the bandwidth to feed it, why even bother trying. First and foremost it is about serving the content request in a minimal acceptable way. Anticipate the bandwidth of the receiver is a good way to make sure people will really visit your webpage and don’t drop off after a few seconds.

8636543831_e54b299c0a_oThe special case is of course the case of no connection (it is rare though it happens still), can you give people an offline reading experience after they visited your website for the first time? Your offline experience should be better than the standard no connection available message of the browser. Please keep in mind that if your site cannot be reached, people will blame it on you, since the rest of the items on their device is still working.

Know the activity

A simple way to validate what people are doing at the moment is to check where they are coming from. Not only a geographic basis, but also on a hostname and network basis. This information will often disclose if they are at an office, a public space, at home or anywhere else. Based on this context you can give them an appropriate call to action or present content in a different way. For example somebody who is from the competition and he is visiting your careers section during work hours on its company network could be offered with a less aggressive page so he can still browse around and apply while his colleagues might be thinking he is doing competitive research.

Combining this data with time of day you should be able to determine if a prospect is doing research from his desk during work hours, or still late at night at home. The latter could give you the impression that urgency is high and therefore a conversion is more likely than normal.

Sensors

We even didn’t not touch on the topic of sensors, since it now easier than ever to ask somebody’s location and customise the display based on this information. And if you know somebody’s location you can also determine if somebody is moving or not, on what speed somebody he is moving and also have a best guess on what mode of transport he is using during his move from A to B. This is something you can use to customise the experience since if you have the best guess that somebody is on a train (based on high-speed and the current location) you might want to consider giving him a lower bandwidth version of your website to make sure it still loads, since reception and wi-fi are often pretty poor in trains.

Know your visitor

All the previous items were really passive data collection from a user perspective. The user didn’t had to take any action to get a more responsive web experience. However why remain passive. You could ask a user to login to personalise a website. Why couldn’t you be using this authorisation to go further than just the interests of a user. Imagine you could integrate with somebody’s calendar and adjust the content based on the calendar of your user. If you notice he has a steering committee the next morning on topic X and the individual is doing research on your website, why not offer him topic X prominently. Use the data that the user is willing to provide you to create a better context and respond better to his needs.

Know the device

IMG_0723If most visitors are using an iPhone to visit your website, why not give them a more native look and feel. They are used to do it in apps, so why not extend it to your website. Also validate how they are accessing your website, are they using Safari directly or are they using an in-app version of Safari? For example if you discover that your users are using the in app Safari version of the LinkedIn App, why not remove your sharing buttons on your website. The LinkedIn in app Safari browser offers sharing buttons already and having people to click on a sharing button would most likely break their flow / user journey and take them outside the eco system they would like to be part of.

Know when you can do better

There is no such thing as “the best” channel. There is the best way to do things for somebody at a certain time in a certain context. So why not offer people a better experience when you can and when you know it will be ten times better. The challenge is on how to make this channel switch a part of the user journey without breaking it and making people leave.

If you know your check out experience is better in your app than on your mobile website. Direct people to the app, explain them they can keep a credit card on file in the app and maybe lure them there with a small discount. Especially when you know that people having the app installed will buy more frequently than people using the mobile site. It is always worth paying the acquisition fee on a short notice to benefit on the long run.

You know

All the topics I touched upon in the above article are not new and not even close to rocket science. You could be starting to do this right now. All the data is available publicly for each of the topics I have listed examples. So why only respond on screen-size, respond on context, make things personal, not just from a content angle though for a complete experience point of view.