As more and more web visitors access via their mobile devices, responsive web design (RWD) is getting increasingly known as a preferred method to have a ubiquitous experience for web visitors. In the latest report by StatCounter, mobile phones account for 17%of Global Web Usage. More importantly, Asia leads the global mobile usage, with 26.6% of web usage in Asia coming from mobile devices.
In this blog, we interview our Creative Director, Jonathan Easton on what users should know about RWD.
Damon: Jon, can you briefly tell our users, what really is RWD?
Jon: Very simply put, RWD is the approach that advocates that your website should be built in such a way that it responds to the user’s device, platform, and orientation. It follows the principle that there’s only:
- 1 URL
- 1 Content
- 1 Code
- For many devices
Damon: Sounds simple enough. What are the key features of RWD?
Jon: The key features of RWD are
- A flexible grid that flows and adapts to the user’s viewing environment and screen size
- Fluid images that resize proportionately.
- CSS3 media queries which allow you to have conditional stylesheets based on width, height, orientation, color, and many more conditions.
Damon: So what is the biggest design challenge that you face in RWD?
Jon: I think one of the main challenges in today’s web design landscape is in fitting the content to the medium, which is exactly what RWD is about. We are living in a very conflicting time, where resolutions are getting higher, screens are getting wider, technology is getting better and faster, but where at the same time, simplicity, user-friendliness and “leanness” are being expected. With all these improvements in technology, with information flooding in, and with the client wanting to put every little thing that their company provides onto their website, it’s very easy for your design to become a mess, both visually and conceptually. That’s where you have to strive to always keep an eye on your objective and to guide and advise the client as to what they should have on the site, what they can have, and what they should not have.
On a related note, we also always make it a point to understand the user requirements before we start the design phase. For example, if it is a restaurant whose primary purpose is to use the website to drive awareness and reservations, it would make sense that the mobile grid caters for a Call-To-Action (CTA) button that links their phone number to your phone dialer.
Jon: Well, I would advise Marketers and Web Designers to take the following into consideration:
- Always try to keep your layout as simple as possible.
- As mentioned above, use media queries to detect resolutions and other conditions.
- Define the major breakpoints at which you want “adaptations” to happen.
- Make your images fluid, so that they respond to the flexible grid.
- Catering for different resolutions is fine, but don’t forget to have a maximum and minimum width as well, especially when text is concerned.
- When going into mobile view, simplify everything into a 1-column linear view.
- Don’t hesitate to get rid of (or to hide) unessential content in mobile view.
- On the other hand, think about adding in mobile-relevant content/items in mobile/tablet view.
Damon: Thanks Jon for offering our readers these tips. It definitely helps our readers to have an initial understanding of what to look for when designing their first responsive website.
For those who are keen to see how RWD works, take a look on your mobile devices at these sample works of RWD by Jon: