The Blog.

What is a Responsive website?

Author:
Dave Meier
Category:
Web Design
Date:
May 8, 2012

Responsive adapts to the screen

A Responsive website is a site that adapts (or responds) to the device and screen it is being viewed on to give the user the most suitable layout and content for them.

In the past there was a website and then possibly a mobile version of the site. This was usually a separate site located in a sub domain such as m.yoursite.com. Generally the use m or mobile as the sub domain was the standard.

There was a big problem having 2 websites for people.

  • You had to create, edit and amend content twice.
  • If a user on a mobile device liked the site and emailed a link to a friend, the friend might view the site on a desktop and end up viewing the mobile version or vice versa.
  • What about tablet devices. Would you then need to create another dedicated website for those?

Benefits of a responsive layout

  • One website making content updating easier.
  • The ability to tweak the website design to suit future devices such as tablets.
  • Adapt to screen size rather than just mobile or not. This means if the user is viewing the site on a small laptop screen, they can have a different looking site to someone viewing the website on a very large monitor or TV.
  • More cost effective in the long term.

The future of web design is responsive.

People are beginning to use the Internet on everything from a laptop, phone, iPad, TV, xBox, etc. Televisions are becoming Smart TVs with Internet browsers. TVs are also becoming bigger and bigger. The average width of a website is 960px (pixels). A normal LCD TV has a width of 1920px. An iPhone has a width of 320px. Responsive design will allow you to adapt your website to these devices differently and can enlarge & shrink the layout and also hide and display different areas of the site depending on screen size or device type.

Yes our site is responsive 🙂

The Hidden Depth website is fully responsive. If you are viewing the site in Firefox, Google Chrome, Safari or Internet Explorer (version 9) you can resize the window you are viewing this site in to see how responsive works. Drag from the bottom right corner and make the window smaller then larger and you will see the website adapt to give you the best view.