What is Responsive Design and why is it the new favourite?

What is Responsive Web Design?

There are 3 types of website designs:
1. Websites built for desktops & laptops - with wide screens. These are the 'traditional' websites.
2. Websites built for mobile devices - with narrow, tall screens. These reflect the increasing prevalence of mobile usage, typically around 50% of visitors.
3. Responsive websites - the website 'responds' to the size of the screen and displays perfectly regardless of the screen size.

When mobiles first started being used to access the internet web designers used clever, usually javascript, code to detect mobile users and to redirect to a 'mobile' version of the website.

This would have been a separate website, requiring independent maintenance, and frequently only supporting parts of a large website as there was a lot of work to do to recreate the whole website.

The modern way is a 'responsive', or 'mobile first' website. This uses a few clever layout tricks so that the same page fits regardless of the size of the screen. Although a single page, it might present a navigation bar to a large screen and a burger button with a dropdown of the same menu to a small screen.

The huge advantage of responsive builds is that there's a single website to maintain, which looks great and works perfectly no matter what the size of the screen.

Unless there are reasons not to do so - for example framing of other websites - all of Janric's new builds and rebuilds are fully responsive.

Next... How to design a responsive website.