Search
Search Menu

What is responsive design?

What is responsive design?

Responsive design is a term used to describe how websites are built so that they can be easily viewed on different devices, such as a desktop computer, a tablet or mobile phone.

Websites were first built with fixed pixel-widths and only needed to suit viewing on the screen of a desktop computer. These websites would sometimes be difficult to navigate through on a smaller screen, for instance when surfing on an iphone, because the interface called for excessive scrolling, zooming and was not optimized for touch.

Because of the increasing number of users surfing the internet on their mobile devices, adaptive design attempts were made to suit the formats of the most frequent types of mobile devices, such as iPhone and iPad, by using media queries. This allows changing layouts to be displayed according to screen resolution with CSS3 (Cascading Style Sheets).

How the same content will be displayed on different devices.

You are now looking at an example of responsive design, try resizing your browser window by pulling a corner in and out!

Since over 1 billion people now own a smartphone, and future technologies will enhance surfing the internet on such gadgets, you can be sure businesses want to make it as easy as possible to get their content across.

Fluid design takes it a step further with responsive design. Rather than adapting to existing device formats, it aims to fit perfectly on any of the hundreds screen of dimensions on the market. Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allows scaling up and down fluidly.

Check out another impressive example of a responsive website at unitedpixelworkers, another one is foodsense.

Components of the content, such as the logo, the navigation, images and text can be rescaled, stacked or left out.

Is your website responsive?
What does it look like on an iphone, Samsung Galaxy or Kindle?
You can get an idea of how your site displays at www.responsinator.com.

Leave a Comment

Required fields are marked *.