Responsive Web Design: Spot the Difference
Responsive Web Design (RWD) involves designing websites which can adapt to every device.
Once upon a time all websites were designed for desktop users; today we’re looking to RWD to help us ensure that our designs are helpful for every site visitor, whether they’re using a desktop, smartphone, tablet or even TV.
RWD is an extremely helpful framework which enables web designers to build flexible, adaptive websites. Below are some of the ways in which which responsive web design helps us to achieve this across a range of different devices.
Written By
Dan Partridge
Accessibility
RWD ensures that site visitors get the best possible user experience out of your web design, whatever device they’re using. If you default towards desktop website design then you’re going to inadvertently alienate a huge proportion of your site visitors. In 2013 it’s not unusual for 40%+ of traffic to come from smartphones, and this percentage is only increasing. It’s important to realise that if your website is geared towards desktop users then you will alienate mobile visitors. Their user experience won’t simply be neutral; it will be negative.
Speed
There is something of a dynamic equilibrium between speed and resolution. If you’re using a mobile device then speed is of the essence and you’re probably less worried about resolution. If you’re using a desktop then speed shouldn’t be a problem, and high-resolution images and content will be very impressive. Responsive Web Design allows us to walk both paths.
RWD enables us to optimize images so that mobile devices receive lower-resolution content and HD/retina devices receive high-resolution content. This helps us avoid the common pitfalls of a heavy, clunky website design and impress site visitors from all devices.
Functionality/Navigation
A website which is designed for desktop users will typically feature a horizontal menu across the top of the page, lots of content and images arranged across multiple columns, social media integration, footers and sidebars. However, mobile browsers have considerably less pixels, and access the website in a completely different way: touchscreen.
RWD enables us to simplify navigation with drop-down menus and simple search boxes. It also helps us to focus on the needs of mobile users, with large buttons and simplified navigation.
Content
Designing for mobile users helps us to think more effectively about content. Instead of multiple columns, we’re looking for one column of clear, easy-to-read text in a nice large font. It’s also crucial that users can still find your call-to-action buttons.
This is one of the huge benefits of Responsive Web Design which is felt across all devices. Working harder on your content, stripping away unnecessary baggage and ensuring that your website design has a sense of narrative/journey to it will be appreciated by every user, whatever their device.
If you’re still not sure about Responsive Web Design or want to chat about how you might integrate RWD into your next website design project why not get in touch and see how we can help.