Responsive Web Design: What you need to know – Part 1

Published May 16, 2014
Last Updated February 12, 2019
Jask Creative

If we were estate agents then we would coin Responsive Web Design Milton Keynes as the newest and hottest property in town at the moment. Everybody wants it, it’s new, it’s cutting edge, it’s the bee’s knees. Most importantly it will lift your status up to “woah, they’ve made it, they really know what they’re doing”.

That’s why we want to sell it too, make no mistake about it, we want you to have it.

But of course, as the buyer you’ll want to know why it’s new, why it’s sexy and why it’s the bee’s knees. So here’s my short guide to what you need to know (here comes the real estate agent spiel). Also, I’m not just aiming at the cool factor of this approach, it truly is the way forward and what you knew as web design will change from here on now.

First and foremost, who we must thank

Ethan Marcotte is whom we must all pay homage to here. The concept of Responsive Web Design originates from his article Responsive Web Design in A List Apart. You can see the original article here, which will also give a handy start to how the black magic (coding) happens behind the scenes as well as a neat example in action too.

To give you the long and short of it, the basic idea is to build one website that responds to it’s surroundings. Now by surroundings I don’t mean you take it to a jungle and your website turns into Bear Grylls, but surroundings of the media type, i.e. smartphones, tablets, desktop PCs, console browsers etc.

How it all comes together

Whether you need to find a Web design company in Miami, want to build your own site for your home business, or are looking to improve your current website, knowing the core factors of responsive website design is essential. So, responsive web design is dependent upon 3 things:

  1. Media Queries – Media queries are, in essence, test values that are coded in to “test” screen types to confirm what media type it is being viewed on. Rather than mobile subdomains, which are coded to set pixel resolutions, media queries work on percentages to determine the screen size.
  2. Fluid Grids – After the media query, the web page will restructure itself to the screen size it’s being viewed on. The grid based design will then cascade the information accordingly. This is where all the sex appeal comes in. No more unsexy, non-rendered web pages too big to fit in the dress it’s been given, oh no, we have slim line designs that mould themselves perfectly to the size they’ve been given, and look great all the time. I could liken them to the human version of Jessica Alba. (I’m banking on my better half not reading this, if not goodbye world, we’ve had fun).
  3. Flexible Images – By flexible we mean they have to be media queried and thus they too can resize to the resolution set. After all, there is little point in having a brilliantly set out page that doesn’t have the images to match and perhaps most importantly of all, you don’t have to download high res images for a desktop site to a mobile browser – saving your mobile data bills!

Mashable’s Pete Cashmore believes “it’s inevitable that 2013 will be the year that responsive design takes off”. We believe so too, and you’d better believe it as well.

In my next post, I’ll give you some ideas of uses of Responsive Web Design and show you some in action.

Watch this space!

As always, any questions, feedback or comments let us know by tweeting us, messaging us on Facebook or contact us directly.