Responsive web design – a term related to the concept of creating a website in a way that helps the design respond to different devices that access it, changing with the users screen resolution.
Put simply – the layout of a website changes according to the size of the screen it’s being viewed on.

Think fluid, content being automatically adjusted.

So, rather than designing multiple sites for different-sized devices, the design is desktop-compatible but is also optimized for Smartphones and tablets. The reason for using this web design technique is to make sure that it works with the different screen resolutions while still looking crisp and clear – It designs one site but specifies how it should appear on varied devices.

The importance of this technique is emerging fast – The future of the Internet will rely, primarily, on mobile devices (tablets, Smartphones, portable consoles) rather than basic desktops and laptops.

The Basics:

There are three essential elements involved in this method – flexible grid, HTML structure and media queries. The main element, flexible grid, is supposed to get you to stop thinking in “fixed” pixels. Now, screen resolutions need to have a liquid layout for the best solution, compared to the old fixed width style.

Having a liquid layout means that the elements of the page are resized and somewhat rearrange. What flexible grid does for this is make the elements of the site proportioned in relation to one another when either stretched or contracted.

Next is the HTML structure, which is basically how you’re design is set up and if it’s done in a logical manner.

Last is the trick for responsive design – media queries. This element supports all the same media but has many new media feature including max-width, device-width, orientation and color. You also specify media type – screen, for example.

There are three aspects to consider using this method of web design.

1. Regardless of the screen size, you need to always make sure that the key information remains visible.
2. The text must be easy to read whether you have one column or three.
3. Other than the resize, the site must have thoughtful organization and is easy to navigate.

Is this the best option for you?

Three things to consider when deciding: context, content and your current situation.

If your website is responsive, it will display the same content to both small and large screens, the only thing that will change is the formatting. So, consider what your goal is for mobile users and whether or not to show different content to them.

A big consideration when developing mobile websites is speed. Mobile users are often using slow or weak Internet signals compared to desktops, and are a little slower in general. So, it’s necessary to avoid using any unnecessary content and stick to including just the key content.

The last thing to consider is your current situation. For example, ask yourself how satisfied you are with your current website, how’s your budget and how valuable your mobile visitors are. Re-designing an existing website will be much more expensive than creating one from scratch.

So now it’s time to ask yourself: “To go responsive, or not?”

Our web design is pretty stinkin’ impressive. Head over to our Website & App Development page to see what else we offer.