Responsive Web Design
With so many New Zealanders now owning a smartphone or tablet, chances are you’ve felt the frustration of trying to view a standard website on an undersized screen. The zooming and scrolling required just for basic navigation is cumbersome and can be downright annoying. However, to make one single mobile version of the site also results in problems – with so many devices available, it’s difficult to cater to every possible screen size with one sharp design. This is the problem that “Responsive Web Design” (or RWD) seeks to address. The screenshot below displays how the Avatar website resizes to a one column layout for smart phones.
How It Works
So how do you design a website when you aren’t even sure what the viewers’ screen sizes will be? The answer is to use code that detects the current screen size being used and then automatically display different versions of your site that will look good at each particular size. It requires is some flexible and fluid design practices, such as:
- A grid system that can rearrange itself depending on the height and width of the screen. Keeping elements within boxes that can shift around is the easiest way to create a responsive design.
- Automatically shrinking images. A simple code is all that’s required to make images automatically resize themselves to the maximum screen width.
- Hiding the stuff that’s not quite so important. Good mobile websites should focus on what the on-the-go user specifically requires, and less clutter makes for better designs.
Why Is It Important?
Responsive Web Design is all about creating a slick and seamless user experience for a growing consumer market – the mobile user. Mobile users are often motivated by a specific aim (such as looking up information, finding local listings, or making a purchase) which means they have the potential to directly translate into sales and revenue. Of course, these same users are also looking for a quick, simple interface that gets them to their goals quickly and uses as little data as possible. If they’re confronted with a mammoth page that fails to cater for them at all, they’re likely to take their search elsewhere. Creating a responsive site is a one-off investment that will continue to yield increasing results as we become more and more engaged with our smartphones.
Do You Need Responsive Web Design?
The first step is to check your site statistics. In Google Analytics, you can go to Technology / Browser & OS / Screen Resolution and look for the 320 x 480 size which indicates smart phone usage. If more than 5% of your browsers are using smart phones, then that’s 50 people out of every 1,000 that are currently getting a suboptimal experience. This stat is going to rise as smart phone usage increases.
Avatar can assist with your Responsive Web Design requirements and the work can be fast to complete. If you’re using WordPress, a Responsive Web Design setup usually takes just 5 to 10 hours
As an Olympic frenzy grips the globe, hopefully you still have a little time to spare for your monthly serving of Avatar News. It just might take you one step closer towards achieving a gold medal performance for your website. Our feature article this month is about a technique called “Responsive Web Design” that’s used to ensure your website looks good on both full-size desktop computers AND small smartphone screens. Then we round off with our usual accompaniment of tidbits and sites of interest.
So how do you design a website when you aren’t even sure what the viewers’ screen sizes will be? The answer is to use code that detects the current screen size being used and then automatically display different versions of your site that will look good at each particular size. It requires is some flexible and fluid design practices, such as:
