What is responsive design?
by: Ashley Sheinwald | February 15, 2012
OK, OK not a another post on responsive design (if you’re a coder you’ve no doubt read up lots on this recently), but this is a pinnacle subject at the moment and is very exciting for website owners. It maybe hip right now as all the “cool kids are doing it” and for good reason. This is not a coding blog post, this is for those of you who simply want or need to know what’s out there and what your options are.
Responsive design is the solution for device agnostic websites. We’ll be discussing (in another post) the preference between when to just respond or when to build an app. But for now what is responsive design? Why is it important? And what are these media queries people are talking about?
Well firstly you may or may not know ‘What is a media query’? So lets start there.
These are the foundation to the presentation layer (done with styling code) on how to make your website display appropriately on different devices, that have different screen resolutions, possible orientation and pointing devices verses fingers etc. No more needing to pinch and zoom on iPhones, text that is readable, structured to the available screen real-estate and presenting or hiding content as appropriate.
Actually media queries have been around for forever, as web developers we’ve been using them for the website (screen), projectors, to create print styles (print) and for assistive technologies when required for a long time.
A Media Query consists of a media type and one or more expressions to limit the scope of style sheets.
More recently though Media queries have had a bit of a steroid injection. Now we can specify the width or hight of a screen, viewport (the actual web browsers dimensions), the orientation of a device and set boundaries for execution (these are the elements used in the coded queries). This essentially means we can now start to deliver a user experience based on the device that is viewing/interacting with our content. Being able to restructure our content for the best experience, provide usable navigating systems and images based on the device is invaluable.
This is where the web has been going for a long time, it’s just taken it’s time to be realised. Thankfully, though we still see it and it makes us cringe, the days of ‘this site is best viewed in Internet Explorer at 800 x 600 resolution’ are gone. They should have been gone along time ago and for some of us they were, but now we have a way to actually deliver responsive sites that organically adjust, scale and present themselves at their best, a bit like we should when we’re meeting that special someone.
Responsive design on recent projects
Enough of depicting – now it is time to build.
The web is starting to adjust to the hardware technology users are using to view their content on. The statistics for devices used to view the web are changing rapidly and are actually quite astounding. The increase in mobile web as we’ve mentioned before but also tablet usage, netbooks etc.
Some of our more recent web projects that have been developed to be responsive include the Spring Break Film Course microsite which scales to deliver the content which is pertinent to the user dependant on the device they are viewing it on. Rescaling images as well as restructuring the presentation of the navigation to make best use of the technologies and users screen size. Why take up the available screen with the navigation when the user should be reading the content, just let them get the navigation when they want to move on, and that’s just for starters.
View the Spring Break Film Course microsite
The Home Farm Life website also uses responsive techniques to deliver mobile and tablet versions. Designed and developed in a day as a special charity commission; this was still able to be incorporated because it’s important that the user can read the content with ease, and we hope it helps them get their community sponsorship and Lottery Funding.
View the Home Farm Life website
Simply put no website should be built without these considerations taking place, but is it really the ultimate solution?
There is more to the web than the desktop computer. Bandwidth is an ever increasing issue especially with the increasing trend to the mobile web. With responsive design we have a foundation for growth and development of scalable solutions.
But what about other aspects I hear you cry. Well I don’t “hear you” but here goes, images… yup images are the fulcrum of the mobile issue. We have scripts and styles which should all be reviewed, collated and compressed and where possible gzipped; because this simply increases the speed regardless of where the site is viewed. But images! why deliver an image that is produced for the desktop (in terms of size and weight) to the mobile device? Well we don’t have to anymore, a new solution has come about (well not so new but it is maturing nicely) which enables developers to deliver a re-scaled and compressed image dependant on the resolution of the device viewing the site. Adaptive images are the the way to go, this could be a post in itself but for now check out this great open source project.
Phew, that was a bit of a mouthfull… anyway, we look forward to more solutions like this in the coming months and say “Yay, to responsive design” and the rise of device agnostic content presentation.
If you’re interested in a new site, a revamp of your current site or any of our services we’d love to hear from you, so come say hello.