< Back to Front-end notes

Responsible Responsive Design

Keeping responsive front-end that's usable and sustainable for users

Resources:


Intro

Design

Detection

Small note: position: fixed has limited support on some mobile browsers. Fixed-Fixed is one tool that can help detect this.

Polyfill: Process of emulating features on unsupported browsers. A more hacky, less involved version of this would be a shim. Recommended polyfills are:

Testing sites on actual different devices is ideal, but using emulators like BrowserStack or some browser dev tools works too.

Performance

Building websites with new media, without thought for slower networks, and for different sizes and browsers tends to inflate the code base.

Perceived Load Time is how long it takes for a usable version of the page to load without necessarily loading all files

Performance Budget: a set of size metrics to abide by for files to stop performance from slowing too much. These can include max files sizes, HTTP requests

Use a tool to automate as many of the above steps as possible, such as Grunt or Gulp.

Delivery

Serving HTML: Try to only load critical content first, and load “nice to have” content after with JavaScript if the user wants it.

Serving CSS: CSS should be served via the Head element to avoid the Flash of Unstyled Content (FOUC). There’s several approaches:

Serving Images: Images always load asynchronously so they don’t block page rendering, but often have the most weight on a page.

Icon Fonts: Great since they provide lots of different media that’s easily referenced with only one HTTP request.

Fonts: The FOUT for web fonts can be avoided by converting font CSS into a single data URI CSS file, and using LoadCSS to quickly load it.

Javascript: Javascript is another heavy asset, and it blocks page rendering while it’s being downloaded.

The author created Enhance.js to put all the above notes for delivery together for progressive enhancement in loading assets.