You can't read an article on mobile without being hit over the head with the mention of responsive design. Whether you are a designer, a marketer or a brand manager, mobile is impossible to ignore regardless of the industry you are in. But responsive design only gets you so far. Simply looking at breakpoints and resizing or stacking content is no longer enough to check the box for 'mobile-ready'. There's plenty more to consider.
'Context first' or 'context-driven design' means letting the content and experience be dictated based on the user. Things that should inspire the context include the following...
01. Intent
I mention this first because it is seldom discussed and highly important as we move towards an always connected, real-time world powered by big data and the cloud.
A user's intent is often the hardest to predict and if you guess wrong can be even more damaging than not trying at all. There are context clues we can look for to help improve the experience. Search behavior, entry pages, past collected data via user activity and cookies can dictate embellishing an experience.
Below I will outline various aspects of a user's context in an effort to spark the conversation on things we must focus on to deliver a user- first experience rather than a static, uninformed one that may be passed over or irrelevant to the user.
02. Bandwidth
We all know page and interface speed is now a fundamental part of the user experience. Even Google is out to enforce that penalizing those from an SEO perspective lowers rankings based on page performance.
The less your experience has to download by using smart file compression, caching and local storage, the faster you can deliver your content to the user. The demanding, impatient society we live in means users won't wait for you especially when your competitors offer a sleeker, faster alternative.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Are there aspects of your experience that can be omitted to offer a faster experience? Telling a user their connection speed is slow or dictating them seeing non-HD content is better than a spinning loading bar. As always, don't force this but rather give the user the option defaulting the input to enable where it makes sense. Bandwidth is getting expensive for consumers so make it inexpensive to view or purchase from you.
03. Device and input support
User agent detection or responsive breakpoints to determine if they are on a tablet, handheld or laptop is just the first place to start. Users today are like snowflakes. While no user is the same, a great experience appeals to any user. Screen resolution, dimensions, input support and device capability should also be considered to aid in shaping and delivering a progressively enhanced experience. Multi-touch support needs to be factored into our designs and content.
As we move past the mouse and tap we must think about all the other interactions that will be used and expected by our user. The slide, flick and pinch are behaviors that are often expected and when they are present create a surprise and delight factor that only further pulls in and retains the user.
Facebook showed us this with its slide out menu and chat bubbles. Google's addition to home screen dialog for convenience is an example of how a user's behavior and intent is answered with new user interface paradigms and patterns.
04. Battery Level
Draining batteries is a real issue, and charging stations and cases aren't solving all our juice problems.
Be the one who knows the user is low on battery and offer to adjust their experience by reducing colour depth or file download to help increase their surf time and win their attention.
The extension of device APIs with HTML5 give us a whole new layer to what we can tap into via the browser. Encode your images and video in formats that take advantage of hardware acceleration or reduce file size. SVG, webp, and mp4 mean less downloading, reducing dreaded battery drain.
05. Location
Understanding a user's location and in many cases proximity should dictate your message and interface.
- Is your user walking distance from your store location? Offer walking directions to give them an incentive or reason to visit you.
- Is it about to rain? Offer them a branded umbrella rental for just stopping by.
- Did you user come in from a specific keyword? Change the primary content or lead in headline specific to their search phrase.
I can't tell you the number of restaurants or apparel brands that would have won my business simply by having a small section offering me an answer to my question based on what keyword I came in from. Fear not, solutions to these frustrating edge cases are available and should be embraced as ways to disrupt, surprise and delight your viewer:
- Bandwidth detection libraries like Netbiscuits or something like iRules from your load balancer
- Browser capability - modernizer and caniuse
- Location detection - HTML5 Geolocation
- Responsive images - Gumby responsive images
- Responsive design framework - Gumby, Bootstrap, Skeleton
- Battery levels - Battery Status API
- Screen Brightness - Luminosity API
What examples in practice have you seen or been positively surprised by while surfing or purchasing lately?
Words and illustrations: Pete Sena
Pete Sena is the founder of Digital Surgeons, a digital marketing agency in New Haven, CT. A hybrid designer/developer who lives to create unique and powerful experiences for brands, if Pete ever takes a break he's probably reading, teaching himself something, attacking Crossfit or snowboarding.
Liked this? Read these!
- Get started with responsive web design today
- How to build an app: try these great tutorials
- Free graphic design software available to you right now!
- Brilliant Wordpress tutorial selection
What do you think about context-driven design? Share your views in the comments.
