Posted 2nd July 2012 | By ExtraMile

You may have heard all the hype about responsive design in websites; we’ve certainly talked about it a good deal over the past few months.

However, we’ve not only been talking – we’ve also been doing, through a long period of research and development. Ultimately, we released our first responsive site – our own – and the next ones are already in the pipeline.

You know all about the theory and how to it makes your website compatible with every device, but what are the first steps to take before even thinking about putting a site together?

The truth is, any site could be made responsive – the web works in such a way that elements that are presented in blocks can be recoded to be scalable and fit any device. However, having responsive in mind before starting to design the site will help a great deal – that way you can really envisage how it would look, not only on a desktop or laptop computer, but on tablets, phones and other devices such as netbooks.

Here are some handy tips and tricks to add to your design in the initial stages:

1.    Design the site in a vector based program like Adobe Illustrator or Fireworks. Your web items are going to feel the wrath of being stretched and resized – why not make it easier for them by designing them as a vector? That way, you’ll see less in the way of frayed edges and pixelating of images.
2.    Think ‘iconic’. Responsive design invites the use of icons and grids that resize and transform into different column structures – why not highlight your services with a set of icons to complement the text?
3.    Play ‘Web Jenga’. Think of using blocky elements. Divide your text and images into bite-sized pieces using columns and rows to your advantage. If you think about what happens when you shrink the page, the columns and rows will topple underneath your primary items at the top left.
4.    Menus. Will your menu shrink in text size when appearing on a mobile phone? Think of a different layout to really make your navigational nuggets stand out at the smallest display possible.
5.    Landscape to portrait. At some point your landscape images are going to be squashed to the point of being barely visible – try a crop of the image in portrait, it will reduce users having to squint their eyes and zoom in on mobile devices.

If you’re happy with the way you’ve laid out your design, why not head over to Anita’s blog to discover what technical issues you can encounter when building your responsive site?

By moving to responsive you can ensure that the ever-growing number of people browsing the web on mobile devices and tablets will see your website at its fullest potential, without having to zoom or adjust their screens. Find out what ExtraMile can do for you by contacting us here.

Matt from ExtraMile Communications Ltd in Eccleshall, Staffordshire.
Need content? You may use this article on your website, or in your newsletter. The only requirement is inclusion of the following sentence and link: Article by Matt Preston of ExtraMile Communications Ltd - Extreme eMarketing


About ExtraMile

A digital marketing agency with international capabilities