Responsive web design tools

If you believe the hype, 2013 is the year of responsive website design. Look at the current environment and it is easy to see why people might come to this conclusion.

The sale of desktop computers has started to slowly decline, taken over by mobile devices. This means visitors are coming to ecommerce sites from an increasingly disparate devices, each with a different resolution.

In order to make sure websites appear properly on each of these devices, you don’t have to design a sit for each potential one, responsive website design in the answer. The design of your site can respond to the environment on which it is being accessed.

It’s a method which uses flexible grids, layouts and images, along with CSS media queries (a cascading style sheet module which allows content rendering to adapt to different conditions).

There are a number of tools out there which you can use to create your responsive website – otherwise you can hire a developer to do it for you.

Here’s a list of tools which can help:

Research

If you’re starting out from scratch, it would be a good idea to look at what others are doing for inspiration. There are a number of responsive web design “galleries” where you can go and browse other people’s work.

Mediaqueri.es is a site which displays a collection of ‘best practice’ designs from all kinds of industries.

Tool kit

There are plenty of sites you can go to to find the individual tools you need to build a responsive website. One place you can go to and find almost everything you need is Bootstrap. This is a free collection of tools for creating websites and website applications, created by two Twitter employees.

Originally created to make internal development easier and more consistent, it was released as open-source in 2011.

Fluid Grids

Grid have long been the basis of much design work and fluid grids allow a website to mould itself to different resolutions.

Tiny Fluid Grid is a free to use website which simplifies the task of creating these fluid grids. You specify the perimeters of your grid, click the preview button and if you’re happy with what you’ve got, you can download the CSS code of the grid.

Images

Images that are designed for desktops will be slow to load on mobile devices due to the size on them. Adaptive Images will detect the visitor’s screen size and create, cache and deliver device appropriate re-scaled images to ensure there’s no UI lag.

Videos and Text

If you’re using videos on your website you need to make sure the videos resize for various devices also. Fitvids is a plug in which allows you create fluid videos which look good on any resolution. It’s as easy as adding a line to your code. The same people also created FitText which makes your font sizes flexible.

Test your site

Once you’ve created a site you need to test it and make sure it truly is responsive. There are a number of websites which will help you to do so. Responsinator is an extremely simple tool, you just but your website URL in and it shows you how it renders an a wide range of devices.