Responsive design is a hot topic these days, with many a debate surrounding it. What is responsive design? In it’s simplest form, picture this scenario. When you are at a restaurant with friends and you are all arguing over the name of the band who performed the obscure 80’s song playing overhead, it’s nice to be able to haul out your smartphone and open a site to find whatever you need to find to prove your point. If the site is easy to see and use, then it was probably designed to respond to the environment it is in, whether that is your smartphone or a 24-inch monitor. The site may possibly figure out the screen dimensions it is in and point you to a version of the site that fits your screen. Or perhaps it was built with automatically adjusting elements, like CSS “auto” widths for the page content. Or again perhaps it was designed to switch things up depending on your screen size – show a small logo here, remove non-essential text there, etc. More than likely, it’s a combination of all three! This is responsive design.
The debate comes into play in different respects. How far should you go to respond to the many upon many screen dimensions and resolutions out there? What browsers should you support? Should you have different sites or try to make the code more adaptable to the situation it is in? Should you be changing the content when scaling sites down and if you are, then is that content really that important in the first place? How much functionality should you try to squeeze into your smaller sites? Do we really have to try to accomplish everything on our small devices, or can we still depend on larger-scale devices and other methods of communication to accomplish our needs?
There are tons of great articles on the web about responsive design. For example I have been completing badges on teamtreehouse.com and they have some excellent videos about the subject. I also enjoyed these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
The Best Browser is the One You Have with You
My conclusion on the whole subject from my experience so far is that you should try to make your site as reasonably “elastic” as you can – keep your content organized and simple, use dynamic code like the CSS “auto” attribute and similar where you can, and use CSS media queries to switch elements in and out as you need, even if that means whole stylesheets. Pick a set of devices and browsers (and operating systems, players, etc. depending on your target environments) you want to support, whether for a certain client’s requirements or the more common ones for your audience, and test test test as best you can with simulators and in the actual environments.
Responsive design is something we all need to consider. After all, we all want to prove our point in the restaurant sometimes, yes? As well as access social media sites, complete banking tasks, and the list goes on, on the devices within our reach at the time.
In upcoming articles, I will take you through the various phases in designing and building a responsive site. It will be an adventure, and will most likely change route from time to time, but I’m really looking forward to learning as I go. I hope you will enjoy learning with me. Ideally I can then use this site as a basis to try out tutorials, new functionality, frameworks, etc. but for now, we’ll just take it one article at a time!