Responsive Website Design refers to building a website in a way that it will automatically adjust according to the viewing device and includes adding code to adjust views when needed. Today – viewing devices include desktop computers, laptops, tablets and of course – mobile phones.
Website Design History
Back when I started writing code and building websites (in the 90’s) – there was no such thing… Everything was coded to be one size – for a desktop computer, since this was the only ‘device’ that people had to connect to the Internet. We had to use heavy (slowly loading) data tables – hard coded in size – to display content (text / images) in a very rigid format. They were not pretty – but they got the job done. Hey, we had to use the tools that were available.
Now – websites are viewed from a number of different devices and they need to be accessible from them all. This is achieved via clever media queries in CSS code, fluid / flexible HTML elements and jQuery code. No more data tables!
Naturally, different devices have different browser sizes. It is all about the browser resolution – the view port. A large, 24 inch monitor browser size can be 1,920 x 925 pixels, a tablet (held in tall, portrait mode) is typically 768 x 1,024 px and a large mobile phone (landscape mode) is about 736 x 414 px.
Responsive Design & SEO
Google has also recently started ranking responsive websites higher than their non-responsive counterparts. This means that if your website is not responsive (mobile friendly) – your SEO (Search Engine Optimization) will suffer. This is due to Google’s user-centric approach. They understand that a large majority of browsers are mobile based and they want to stay current.