Build Your Site Right For Any Device: Eight usability lessons to remember for site builds
Last week a few fellow Attacats and I headed along to monthly product management meetup ProductTank to hear developer Orde Saunders talk about building products for the device agnostic web. If you’re thinking “er, what now?”, this basically refers to the process of developing a “one size fits all” web product whose basic functionality will work across any of the many devices we now use to access information online today.
The talk was probably aimed more at developers than marketers like myself, but there were lots of really useful points that even non-technical members of a site build team could takeaway.
Without further ado, here are my distilled notes from Orde’s excellent presentation:
What exactly is the device agnostic web?
The device agnostic web means we don’t know what device a visitor is going to use to interact with our website (agnostic means “not knowing”). The obvious alternative to the standard desktop or laptop is a mobile, but it could also be a tablet, a smart TV, a screen reader, or a games console. These don’t have the same capabilities, and since we can’t control which device your particular website visitors will use to access your site, you need to build one that will work with them all.
Why should I bother?
As business owners, aside from of course wanting to deliver the best possible experience to your customers, you’ll be blocking swathes of potential customers by only servicing ones that use a certain device. The number of people browsing the internet from something other than a computer is already huge and is only going to get bigger, so you’ll also be helping to futureproof your site. Plus, many of the points Orde outlined stack up against SEO best practice, so you’ll be giving those pesky search engine spiders a wee helping hand too.
So here are some golden rules…
(1) Begin with clean, semantic HTML
Rule number one is pretty simple: build a solid foundation with HTML code that’s squeaky clean and by the book. When you’re building a site to successfully function across the exotic plethora of devices listed above, clean HTML means that a browser can better parse the data received (parsing is the process of breaking down data into small nuggets of information and identifying and understanding these parts). Cutting corners in your HTML, by contrast, can cause problems: a browser may struggle to parse the HTML, which means it may not be able to deliver your site properly.
HTML should also be semantic – that is, it should describe the meaning of the content (for example, an image is clearly marked up as an image
<img>). This means your HTML needs to include headings, paragraphs, lists and anchors – all elements that have been around since HTML’s babyhood and will be recognisable by even old browsers. Orde also advised against reliance on newer HTML5 elements (such as
<article>) for core functionality, as again older browsers might have issues understanding these.
Better yet, clean, semantic HTML also gets two big SEO thumbs up, as it’s easier search engine crawlers to read and interpret – for more detail see my colleague Charlie’s recent blogpost.
(2) Easy does it with the CSS
When it comes to CSS, as with the HTML, you’re looking to get a solid baseline in place before looking to do anything fancier. Concentrate on getting the basic style elements of your site right first (colours, typography, background and borders are the the basics Orde stipulates) – it might not be an oil painting, but any browser will be able to handle it. Once you’ve got this licked, you can then start to layer up more advanced presentation features. This is known as “progressive enhancement” and applies to the whole device agnostic development process – begin with simple, top-notch building blocks and then enhance, stage-by-stage.
(3) Ask the question: “can users actually interact with my site”?
Ever been on a tablet and had that infuriating experience of not being able to open up a simple menu? Fumbled with an app because all the navigation buttons are too close together? That’s because the site only allows you to navigate if you’re able to physically interact with it in a certain way – for example, on a desktop computer you can pop open a dropdown by hovering over it, easy as pie, but you can’t on a touchscreen where hovers won’t work. It’s essential that you consider all the ways a user might interact with your site and make sure you accommodate these different possibilities when designing your navigational functionality. Orde once again advises have a one size fits all standard in place – navigation using your keyboard (or remote control or game controller) arrows and buttons.
(5) Make sure your site is readable
A beautiful design is beautiful…but only if users can actually see it. You need to factor readability in into your presentation considerations – for example, you can’t put grey on a slightly less grey background – it won’t stand out and. Think about the various real-life situations and conditions that people will be viewing your site in, rather than the optimal ones that are used when designing. Can a user read your site on a small screen, on a monochrome screen (like a Kindle), on a screen viewed at an angle, or in sunlight? Your design needs to accommodate this. Apparently the minimum accessible contrast ratio between foreground and background is 4.5:1 – one for designers to remember.
(6) Don’t sacrifice speed for the sake of unneccessary add-ons
Site speed has a huge impact on user experience, and is increasingly being factored into Google’s ranking algorithm, so it’s an essential consideration in site development from both a usability and an SEO standpoint. There’s always going to be a trade-off between speed and functionality, but if a new feature causes your site to slow down, it’s important to reevaluate how essential that feature really is, or whether you can jettison something else to help bring your site’s speed-to-functionality ratio back up to scratch. Bells and whistles might be nice, but if your site is too slow users will give up and go elsewhere.
(7) Test far and wide (but also keep it focused).
Testing is utterly essential but it can be pretty hard-going. It’s time-consuming and, in reality, you can’t test everything across every possible device. So prioritise and focus your testing – work out the areas where you’re most likely to have problems and focus on testing these. Don’t rely on emulators (there’s no subsitute for testing on real devices) and make sure you’re testing on a good cross-section of devices – if your site works on a cheapy tablet from Tesco, it’ll almost certainly work on the latest and lightest offering from Samsung. If you’re Edinburgh-based you’re lucky to have a dedicated device-testing facility in the form of the excellent Device Lab on your doorstep – why not make use of it?
(8) And finally…give up control
Like the many and varied facets of site builds and product development, it’s a lot harder to go in and try to “retrofit” a site with the basics you need for optimal cross-device compatibility (much as it is for SEO). Do these first, rather than tacking them on at the end, and you’re golden. As Orde puts it very nicely:
“Once you accept that you don’t have control over how your users interact with your site it’s actually very liberating – you’ve got no choice but to get the fundamentals right and, once they’re right, you have a lot more freedom with how you build up from there.”
For anyone looking to get into the extra detail and technical nitty gritty of the points above, you can see Orde’s notes over at his website. And of course thanks to Orde for a fantastic and very useful presentation!