As techniques and effects on desktop websites get more and more complex, the mobile responsive versions of those same websites re- main pretty streamlined.
And that’s a good thing.
While many responsive sites have focused on a singular experience, more designers are creating websites that look like the same brand but offer different, more device-relevant experiences.
When it comes to usability and function, simplicity is a key consider- ation with mobile devices. Some of the more flashy desktop design elements – video, complex animations and even hover states – just don’t translate to smaller screens.
But that doesn’t mean you can’t have the best of both, which is why more designers working with complex desktop designs are imple- menting a simplified mobile responsive version.
It’s better for users because the simplified mobile option often is smaller and loads faster, and doesn’t rely on high-speed internet connections (which aren’t always available) to work properly. The less complicated interface is also easier to use when the canvas is limited because you aren’t trying to cram too many elements onto the small screen at once.
Take a look at roanoke.org (above) on a desktop computer: There’s a nifty text animation in the hero header. It’s large and bold and attention-grabbing. The mobile experience is equally striking with a great image, but without the text animation. It would be too small to render (and read) in the smaller, more vertical format and the animation could bog down the design and not work at all on mobile devices. This simple change is exactly why designers prefer unique and streamlined mobile experiences even if the desktop design is more complex.
It can be frustrating to realize that the perfect design element just won’t work on a mobile device due to visual constraints or perfor- mance issues.
Luckily, there are plenty of alternatives for mobile responsive web- sites that will work with your desktop website design, sans complex interaction.
Don’t just design a desktop design and let the mobile site “care for itself.” This happens way too often and is the reason this design trend exists. A significant number of users – for most websites that’s often upward of 50 percent – will access the design on a mobile device.
Think about each of these limitations in the design process and de- velop a simple solution that’s optimized for mobile:
Screen size and readability: Design one thought per mobile “screen.”
Connectivity: Heavy websites with long load times will not be used on mobile devices. Attention spans are short and if the site doesn’t load immediately, users will find something else to do with their time.
Touch: Every element should be optimized for touch. And remem- ber to change that microcopy so buttons don’t say “click here.” Use gestures and touch wisely and avoid functions that only work on a handful of devices (such as 3D touch).
Distractions: Mobile users are notoriously distracted. Provide content in small, digestible blocks that are easy to read at a glance. Give users key information – contact, address, etc. – right away.
Pull It All Together
The trick to a successful responsive website design is tweaking it for different contexts. You can include great video clips or complex animations on a desktop site; but you need something else when planning for mobile.
Don’t forget to add simple touches for mobile that users love: Noti- fications, location-based tools, touch ID and wearable connectivity are just a few of the interface elements you can actually add to mo- bile sites to increase interaction and engagement. Users know and almost expect many of these interactions (particularly location) and they should feel like a seamless part of the design that you don’t even really see or have to think about.
The Weather Channel has a robust desktop website, but it does some- thing great when you access it on a mobile device. The current local weather conditions appear in a bigger, bolder box right at the top of the screen. That design gives users exactly the right content in the right form at the right time – a decision that represents the heart of mobile design.