Can you see me now?
We’re living in a multi-device world
It’s not just “mobile” anymore; think everything from smartphone to tablet to an 80” widescreen Internet TV. When it comes to web usage, bring-your-own-device (BYOD) is the order of the day. Web designers must now consider the context within which our websites are being “consumed”, as I describe in “Multi-device is the new mobile”.
Priority/Focused content: Period
No matter how great your technology/functionality, redundant, outdated, trivia (ROTten), voluminous content will destroy your user experience – on any device. There are a number of techniques that can help you focus your content:
- Who are your users, and what do they need? If your content is not useful to your target users and what they want to accomplish on your website; remove it. Period. End of sentence.
- Eliminate the ROT. Think of your website redesign as moving to a new house. Do you really want to bring that old futon with you? Perhaps now is the time to invest in new furniture; or perhaps even less furniture.
- (Re)write in Plain Language. Taylor your writing style to the reading level of your audience. Write in plain, simple language whenever possible. Plain Language is a style of writing that allows users to:
- Find what they need quickly
- Understand it
- Use it
- The first time they read it
- Minimize the use of complex tables. If you must, then format complex tabular data for display on smaller screens.
- Minimize the use of large infographics. Infographics are great story tellers; but they are difficult to consume on smaller screen sizes.
- Stop relying on mega-menus (or mega anything) for navigation. Unless your website is an art gallery, users don’t care to see everything that your website offers. They typically visit for a specific purpose – and want to get there, already. Furthermore, mega-menus are a tough user experience on smaller screen sizes.
Once you have your content optimized, it’s time to reconsider your design.
Designs Must be Responsive
Nine times out of 10… The key to devising a strategy for responsive design is establishing the breakpoints – the screen widths at which your layout will rearrange to suit the users device. Most responsive designs consist of four breakpoints:
- 320px: Smartphone (portrait)
- 580px: Smartphone (landscape); small tablets (portrait)
- 768px: Large tablets (portrait)
- 1024px: Large tablets (landscape); laptops/desktops
To oversimplify a bit, if your design spanned 4 columns, your smallest breakpoint (smartphone in portrait mode) would fit a 1-column layout. Similarly, small tablets will display a 2-column design, large tablets a 3-column display; and finally desktops and larger devices display all 4 columns. Because your content can be displayed in a range of widths/columns; your images must be similarly responsive.
Responsive Image Optimization
Huge image files are a problem for mobile devices. Designers must to cater to people who use the Web from a mobile device while out and about, possibly using 3G in an area with a poor signal and/or on an expensive data plan. It is imperative, therefore, to reduce image file sizes for mobile devices.
I found several approaches to responsive image optimization:
