You’ve probably heard the term – Responsive Website Design. This is NOT just another technology buzzword. This is an extremely important technique used by seasoned website developers. So… What is it exactly?
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.