www.avatar.co.nz
Avatar News : Internet Marketing from a Kiwi Perspective

Avatar News : July 2012

Written By: Mark Rocket & Katie O’Neill

Published by: Avatar Ltd

Greetings Sports Fans!

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.

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

http://avatar.co.nzSo 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

Tidbits

Avatar Blog: A Guide To Google Webmaster Tools. A useful overview on why to keep a regular eye on these useful stats.

Keyword research: If you’re thinking of revisiting how well your keywords are working for you, here’s a refresher on the process of keyword research.

Ministry of Awesome: A neat non-profit initiative that “exists to water the seeds of awesome in Christchurch”.

The Way Back Machine: A vast internet archive that has documented 150 billion browsable pages since it began in 1996.

Sites Of Interest

Outerspace Landscapes
An award-winning company offering landscape design, consultation and construction services in Christchurch.

Outerspace Landscapes

 

Go Wild Productions
Ellis Emmett is an adventurer, photographer and TV presenter. We recently completed some site updates.

Go Wild Productions

 

Army Museum Hassett Gallery
A peak at the peculiar, strange stuff from the backroom. Create a label for an item and go in the monthly prize draw.

National Army Museum Hassett Gallery

 

Army Museum Tank Game
Drive a tank through checkpoints on a training course. Shoot enemies and avoid mines, to get the fastest time.

Army Museum Tank Game


 

 

Have you enjoyed this newsletter and want to send some happy vibes Avatar’s way? Why not login to your Google account then click the icon in Avatar’s homepage footer and/or rate us on Google Places. You may also want to Like us with your Facebook account. Many thanks if you do, that’s jolly nice of you!


 

Get A Quick Quote

Click for a free web design or web marketing quote.