Responsive Web Design: A Quick Overview
What is Responsive Web Design?
The term, “Responsive” and “Adaptive” have been thrown around quite a bit this past year as it has become that “catch phrase” everyone uses, but very few seem to understand. I am writing this in hopes that everyone here at BWA once and for all understand what responsive sites are, and why they are the new “Standard” in HTML web development.
“You can create a flexible website that fits beautifully on any device, rather than having to create and maintain separate versions for each device.”
Within the field of Web Design/Development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices being offered by new consumer electronics products. When in the past as web developers we were only responsible for developing for 1 form factor. That being the desktop. As time went on with the release of mobile browsers the requests for a “mobile ready” website became the standard. During the first generation of devices, back when we were only dealing with 2-3 different mobile devices it made sense to just design a completely different site and style sheet for the mobile phone. But over time more devices came to market, the resolutions became more varied and more complex. Standards are set by device adaption rates. So it took time before new standards in resolutions and display qualities to be set by the market. Eventually with a saturation of new devices, the old way of doing a mobile site became unrealistic because you would essentially be a designing and building 5 separate sites which wouldn’t necessarily guarantee that your site would render correctly on future devices released.
in order to counter the lack of control we have with handset manufactures and standards bodies themselves it was in the best interest of the industry to develop a new way of developing mobile ready websites. “Responsive” frameworks such as Twitter’s Bootstrap were released to the public for developers to utilize in future web development.
The Concept of Responsive Web Design
"Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.” - http://alistapart.com/article/responsive-web-design
Websites that “Bend, Flex, and expand as crowds approach them”
Unlike in the past where we created Pixel Perfect representations of a website from a photoshop compilation the new way of doing things is to keep things “Fluid”. Rigid constraints in your designs are not advised. We have seen this influence cascade over a lot of the new websites out there. Sites today need to be creatively designed to bend and flex to unforeseen future devices that have yet to be released to the market, but will obviously be used in the future to render sites on. Today in web development and design we not only have to contend with the limitations of the desktop browser, but also ensure that the site will render in a readable manner for devices that range from Television browser, mini-tablets, full-size tablets, E-Readers, Phablets, and Mobile phones.
Responsiveness Starts at the Design Stage, not the Development Stage
It’s unfair to require developers to try and adapt non-responsive designs into a responsive website. Therefore its very important that companies start to introduce “Developer Driven Design” into their creative work flows. A designer can no longer just get by with design, they have to understand the technology building their designs in order to correctly design for that technology. For example, it would be unfair to ask a designer to mock up an iPhone app, and then expect a developer to turn it into a working Android app that looks the same. This just is impossible to do if doing the process backwards. Designers need to understand how Responsive sites work, and why they are the way they are. That way expectations aren’t set that are unrealistic for responsive website development.
It is important that these new “Responsive Concepts” are thought of from the beginning of the creative process and carried through to the development stage. Developers like myself expect to receive “Responsive designs” from creative. Sure we can work our magic at times to adapt certain non-responsive designs into a responsive format, but we are limited by the capabilities of all the moving parts! The CMS down the version of jQuery being used can regretfully have very strict requirements that prohibit the seamless adaption of non-responsive designs into responsive designs. It is vitally important that everyone come to the same conclusions when asked to define what “Responsive” actually means, and is. Otherwise, miscommunication will continue to plague us as we move forward.
Responsive versus Native WebApp, and Native App
Native Apps are defined as being mobile applications built in either Android Java or Apple’s Objective C. These applications execute faster on mobile devices because their is a layer of abstraction taken out of the equation.
We can Mash it Up!
There have been 200+ page books solely devoted to the concept of “Responsive Web Design” so its really impossible for me to cover every aspect of this in one email. However, the only way to really learn this is to read, and learn it. So I have included a couple links below that give very detailed and also not-so detailed summaries of what Responsive is.
Resources to be read and understood by all!
Smashing Magazine’s Guidelines for Responsive Web Design - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
A List Apart’s Write up on Responsive Web Design
Why 2013 Is The Year of Responsive Web Design
Beginner’s Guide to Responsive Web Design
Why User Responsive Web Design? - Video