Programming for the modern web is a fickle practice. With so many differing devices, browsers, display sizes, and resolutions out there developing experiences that display quickly and consistently can involve many hours of testing and debugging. I remember what we web developers refer to as the “dark ages” of the web. Fixed width, HTML table-based layouts. Styling code inline with the HTML. Hundreds, sometimes thousands of individual HTML pages to be managed separately. Wasteful redundancy in our code. My how things have changed in such a short time.
In Scott’s book Responsible Responsive Design we are taken down a path of best practices for responsive web design.
With today’s “modern” internet and the increasingly standardized feature support across modern browsers, creating feature-packed websites and cloud-based applications has never been easier. But with this power comes increased responsibility to ensure your content is available for consumption on as many different devices and formats as possible. As the web has matured, development practices such as “responsive web design” have emerged to help us target as many users and devices as we can.
In Scott’s book Responsible Responsive Design we are taken down a path of best practices for responsive web design. He begins with the core tenets of responsive website development such as establishment of media queries and progressive enhancement and walks us all the way through best practices for optimizing websites and online applications for speed.
As a website developer, I have been trained to adhere to best practices for performance and accessibility as best I can throughout the coding process. Keeping the code base as small as is practical, loading resources in a manner optimized to speed up the browser’s rendering process. But there is more I can do. Let’s explore some of the key suggestions outlined in the book.
Scott first outlines a best practice that I find quite logical: design and build for your small screens first. This helps to identify the “core” feature set, and reduce the amount of code needed for your page when it is viewed by a phone or tablet. Inherently this should lead to a smaller, more optimized code base for your full-featured desktop browsers.
Mobile browsers are generally interacted with differently than desktop browsers, most notably being the lack of a physical cursor. Many desktop-first websites have layouts and components dependant on mouse hover input or clicks. Neither of these input methods are available on touch devices, and subsequently result in a broken layout or poor user experience. Scott leads us through methods for creating a great mobile user experience such as increasing UI element sizing for buttons and controls, making them easier to use via touch.
With mobile device usage now above 50%, many people’s primary internet device is a phone or tablet. These users can’t be ignored on today’s web.
Long gone are the days of using browser detection code to identify when a visitor is using Internet Explorer. Best practices today dictate the use of detection software such as modernizr.js to identify what features a browser supports, and utilize those features to augment your design rather than serve a broken layout if a feature isn’t supported.
The third concept in the book, and one I relate to most, is performance. The internet today has a weight problem. Now that many features and capabilities are supported across the majority of browsers, it seems we as a development community have become complacent in the performance category. This leads to slow loading pages and a poor user experience. It is our responsibility and duty to keep or pages as slim as possible, and through this produce content for a better web.