A Primer for Progressive Web Design
PROGRESSIVE VERSUS RESPONSIVE
Progressive Web Design is not the same thing as Responsive Web Design.
It is a core fundamental of web development that the design must be elastic and be appealing at all viewport aspect ratios. However, it’s not an either or decision between Progressive and Responsive. Both standards should be used together to ensure an optimal experience for all users.
Responsive Web Design uses design elements that respond to changes in the size of the viewport – desktop, tablet or mobile phone. This is done by rearranging the components of the page, changing the top nav into a “hamburger menu,” and other techniques. The motto of Responsive Web Design is “mobile-first”, meaning that if a site works on mobile, it will work on desktop but not vice-versa.
Progressive Web Design takes this same elastic approach toward browser functionality and context. However, the Progressive Web Design workflow is based on the idea of layering. At first pass, a page is designed for the least common denominator, i.e., a small screen with no CSS, no JavaScript and HTML4. Then, the enhanced features are layered on. Consequently, this also enhances the SEO performance of the website since the underlying content is easier to crawl by search engines.
WHY IS THIS IMPORTANT FOR DESIGNING WEBSITES?
From the beginning, the Web was designed to be platform-agnostic, which is a fancy way to say that a page will work on any computer and in any browser that implements the HTML standard. Progressive Web Design embraces this goal of accessibility by ensuring that a page is functional in any context.
Modern web browsers provide powerful styling and scripting abilities for web designers and developers using HTML5, CSS and JavaScript. However, only a certain percentage of users interact with a design with all these features enabled.
Some common contexts in which a user may be interacting with a site are:
The Whole Enchilada – Using the latest desktop version of Chrome, Edge or Safari with all features enabled.
The Smart Phone – Using a touch interface on a modern smartphone with the latest version of a major browser and fully enabled.
The Old Browser – There are still a sizable number of users who use outdated browsers like Internet Explorer that do not implement the newest features of CSS and JavaScript. This often happens in large corporations or organizations with strict IT policies.
The Snail – A user is in a rural setting where broadband is not available.
Reader Mode – There are a number of applications in which a user may read a version of a page that has all CSS and JavaScript stripped away such as when subscribing via RSS, using sites like InstaPaper and Pocket, or reading a page in offline mode.
Speech Mode – Screen readers for the visually-impaired and voice-interactive devices like Alexa, Google Home, etc.
WHAT DESIGN FEATURES ARE ACTUALLY USED?
Current analysis shows that the following features are available for the percentage of audience shown. This is only a small portion of features listed as an example. A full reference for the use of features can be found at https://CanIUse.com.
CSS
- Grid Layout: 91.54%
- Sticky (prefixed) – Header stays at top: 90.36%
- Sticky (not-prefixed): 76.74%
- Shapes: 89.23%
- Filter Effects: 93.19%
- Scroll Positioning: 86.73%
- CSS Calc: 95.83%
- Rounded Corners: 96.48%
HTML5
- Audio: 96.46%
- Canvas Blend Modes: 92.86%
- Custom Tags: 86.59%
- Dialog Element: 72.22%
- HTML Imports: 72.17%
- PNG Favicons: 85.07%
JavaScript
- Accelerometer: 62.22%
- Promises: 92.74%
- Push API: 78.06%
- ECMAScript6 Classes: 90.83%
Other
- WAI-ARIA Accessibility: 94.20%
- WebP Image Format: 78.13%
- Ogg Audio Format: 79.79%
- FLAC Audio Format: 89.97%
- WebAssembly (wasm): 84.62%
- Animated PNG: 84.42%
- theme-color Meta Tag: 36.42%
BASIC TECHNIQUES
Know your user. Site audiences will skew toward more or less feature availability depending on the site’s user base. A site made for techies will likely have The Whole Enchilada, whereas less technical users who tend to live in rural areas will have less functionality.
Check usage. Each property should be checked for usage. Many firms elect to consider 98% and above as global and ignore those users who don’t have the feature. Although that seems to cover most or all of the bases, it could very well leave out important segments of your customer base.
CSS overrides. This is a simple technique of writing CSS code that is geared toward all browsers and then adding on code for more sophisticated browsers to the end of the CSS. This method replaces the previously declared code if the browser supports the new feature. Otherwise, it’s ignored.
CSS feature queries. This is a tool in CSS to check to see if a feature is available and only parse the designated code if it is.
Fail gracefully. Manage feature failures proactively.
Write for tests. Design code with functionality to easily test the site in less-advanced contexts.
Test by touch and by click. Interaction on touchscreens may be very different for the user than by clicking with a mouse. Be sure the page works easily for both contexts.
Think about content-only. Knowing that your page may be read by a screen-reader or in reader mode, layout the code with the intention of feeding content to these readers in a logical order and omitting elements that do not apply in that context.
Test without JavaScript. Make sure nothing breaks when JavaScript is turned off. For example, employ post-back methods for when AJAX is not available.
Ready to take your business to the next level? Contact us. We’re here to help.