With the increasing need to browse the web from everywhere, the number of mobile users and devices is growing exponentially. Therefore, providing a consistent and high quality user experience on any device is more important than ever before. Responsive web design provides designers with solutions for the challenges that have arisen with the introduction of multiple devices.
The term “responsive web design” was introduced by Ethan Marcotte in an article in “A List Apart” published in May, 2010, where he describes his theory and practice of responsive web design – which is limited to client-side adaptation (fluid grids, flexible images and CSS3 Media Queries).
The Responsive Web Design (RWD) is a web design approach aimed at the development of websites that offer the best reading and navigation experience for the user regardless of the end device (Desktop computer, smartphones, tablets, e-reader, TV, etc). A successful “responsive” user experience involves a minimum of resizing, cropping, and multi-directional scrolling of pages.
Technically, what does RWD mean?
Since its introduction in 2010, the responsive web design has been evolving. It actually requires at a minimum the following best practices:
Fluid grid
The fluid grid uses a percentage to define the width of the elements. Specifically, the size and positioning of elements will change depending on the size of the screen on which the page is displayed.
Flexible images
This refers to any visual content that can adapt to any screen size. These are usually images placed in a flexible grid that has the max-width CSS property applied as a percentage, such as 100%. Simply put, this is a method to prevent images from spilling out from the grids in which they are placed while also maintaining their aspect ratio when they are resized.
Media Queries
These are part of the new features of CSS3 and are rules that can be applied under certain situations. The web designer’s approach could be: “If the resolution of the user’s screen is smaller than 1024 x 768, then I will apply the following CSS properties.” This allows the designer to change the site appearance ( text size, colors, and menus position) for other screen resolutions.
Mobile-first
This is the approach that mobile design being the most difficult, should be designed first. Once the mobile design is completed, it will easily translate to other devices.
Progressive enhancement
This a strategy for web design that emphasizes accessibility, semantic HTML markup, external stylesheets, and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth (“Progressive enhancement”).
Responsive design is more than a technical manipulation of the layout. It is a complete reinvention of how content is delivered. The challenge here is the development of strategies on how to deliver the right content to the right device.
Stay connected to learn more…
References:
Progressive enhancement. (n.d.). In Wikipedia. Retrieved February 6, 2016, from https://en.wikipedia.org/wiki/Progressive_enhancement.
Responsive Web 2016 
Responsive design offers the best mobile user experience. I am excited to see more advancements in responsive designs in future.
LikeLiked by 1 person
Claire, thank you for a great introduction to responsive web design. I look forward to the team’s continued contributions and those of our classmates in their responses.
LikeLiked by 1 person
I’ve experienced frustration from the perspective of a user when web applications and/or sites are difficult to use from my mobile device. The most frustrating ones are not the ones that are not responsive though. Modern mobile devices are pretty good at navigating web content. Some desktop sites cause issues but the abilities to pan and zoom through simple touches makes it easy most of the time.
The biggest grief I have is from mobile re-directs that I cannot get around when I prefer the desktop sites. Many mobile sites / applications have reduced options and capability. I also get frustrated when I want to look at something up close and the software has blocked (or is fighting) my zoom to keep the content sized to my screen.
My point is that while responsive design is critical, a half-way there approach much more damaging. Any reflexive design cannot limit content, reduce the intuitive nature of the software, or defeat any of the common functions of targeted devices. If that happens then the design fails to accomplish its intent.
LikeLiked by 1 person
You have certainly raised a point i had not even considered, although the professor had mentioned something similar in response to Katie’s post, that being the intransigent attitude toward the desktop. Personally, i prefer my desktop, it is a robust “device,” with a very large monitor, which i dearly love, and gives me great flexibility, not the least of which is to keep track of sites. On the other hand, i would not leave home without my mobile. 🙂
LikeLiked by 1 person
Responsive Web Design is the future of the Web Development. With so many screen sizes (viewports), it is impossible to design a website without CSS3 and Media Queries. Some of the frameworks like Bootstrap and Foundation provide a 12 Grid Table layout which would automatically resize the content for small, medium and large devices. These frameworks are really helpful for beginners to quickly design a responsive website. Mobile First is a great concept. It would eliminate any design time issues associated with mobile UI development. Thanks for the post!
LikeLiked by 2 people
Fluid grids along with media queries are, to me, what makes responsive web. The fluid grid allows the content to grow and shrink with the page and the media queries allow you to change styles based on screen size. These to together are the foundation of having a responsive application. The web is truly changing and responsive design is helping it get where it is going.
LikeLiked by 1 person
One of the concepts getting more attentions these days regarding RWD is User Experience (UX) , found very interesting article about 10 rules of best practice for responsive design which is talking about RWD, topics such as “Practicing Thoughtful Reduction” , “Prioritizing Content Differently”, “Scalable Navigation” and “using Input Methods” are very important to consider in order to have better responsive web design.
LikeLiked by 2 people
Looking back over the years that I have done my (basic) web design, there really has been this amazing transition from static to dynamic to immersive to truly responsive regardless of the device used to access a particular site. At the end of the day, users do want a great experience when they are on their desktop, but even more important is how the site functions when they access it via their mobile which more and more is becoming the “browser” of choice. I am incredibly impatient and I enjoy being able to use mobile sites and mobile apps that are not simply de-featured versions of the complete site. I have been recently experiment with the the power of Bootstrap and other frameworks like it to quickly generate a responsive layout that previously would have taken hours to days longer to make work.
LikeLiked by 1 person
Having just done a post on Bootstrap, Michael, i would love your feedback on your experience/comments about the framework. How it compares with WordPress, for example, i know that it has been used with WordPress, but also as a standalone framework. I found this to be a very useful post, although i had completed mine when i started reading this: http://code.tutsplus.com/tutorials/when-to-use-bootstrap-for-your-wordpress-theme-and-when-not-to–cms-23561. Rachel McCollin did confirm that Bootstrap was a responsive framework before WordPress, which i had not been able to confirm in other readings.
LikeLike