Responsive web design came from humble beginnings. Today, it is the standard of high-end, future-proof web design and development.
We often talk about how important responsive web design is for your business, but this three-part series will attempt to give a more in-depth view of responsive and why you can’t afford to miss out on the opportunities it presents.
And then, there was Responsive!
Believe it or not, responsive web design has been around since 2004! Well, that’s if you count Cameron Adams’ demonstration of a site layout adapting to the browser viewport. And by 2008, there were multiple ideas on making a site layout that was flexible, fluid, liquid, etc.
There were many buzzwords for this new design theory but it had yet to be perfected.
By late 2009, new tools like CSS3 media queries were beginning to take center stage. These tools gave web developers the opportunity to design for the web like never before.
However, “responsive” was not a thing until a very special article was posted by Ethan Marcotte, a web designer/developer, in May 2010. Marcotte’s article, titled simply “Responsive Web Design”, coined the term as well as sparked the movement towards thinking “mobile first” when designing for the web.
Mobile-First Movement
Before responsive, you only had to think about what screen resolutions your site visitors were using here and there. It was not a priority but occasionally could be a concern. With mobile computing on tablets and smartphones becoming more standardized, developers have to react and offer design methods that fit their clients’ needs.
Enter: responsive design. This technology now allows developers to create and build websites that automatically adjust and scale to any size, regardless of what new devices are invented. From big desktop monitors to tiny smartphone screens and each device in between, sites can adapt their content and design to fit and provide optimal user experience.
Responsive websites should be designed with these ideas in mind:
- Never design your CSS3 media query breakpoints to be device-specific. Focusing on devices creates a pitfall of overhead work to maintain over time. Future-proof your design by focusing on content.
- When designing, start by visualizing the smallest mobile version of the site and then scale up to the desktop version.
- Reduce resource file sizes and compress where you can! Responsive sites came into being because of the need of a more permanent solution for mobile than “m.” sites that came before it. However, always remember that your site visitors could be using a mobile connection when viewing your site. Having the least to download per page load is best.
Coming Up…
Where does responsive design stand today? What’s next in technology?
Over the course of this three-part series we’ll dive deeper into responsive web design to uncover everything you need to understand, including even asking what the future of responsive design holds.
