We are spoiled by 4G, unlimited data, fiber, and the latest smart devices. Most of the world does not have the same luxury as the majority of web designers. We severely limit our userbase when we consider our own lifestyles as the norm. If you want any chance of obtaining a global audience, your site must be able to deal with slow connections, data limits, small screens, and outdated browsers.
We can load the top part of the page a user will see before loading the rest of the page by pulling some of our styles into the
<head>. In doing this, we can prevent a Flash of Unstyled Content (FOUC) when the user first visits the page. There are tools to do this mentioned in the book, such as criticalcss. You can go a step further and load the rest of your CSS at the end of the event queue. Even better: only deliver that experience the first time the user visits that page, after which the browser will have cached the CSS and you can load it through the usual means.
Start with the mobile version. If you can design for a small screen with weird gesture inputs, you should be able to translate that to a tablet and desktop machine. Use
@media magic to deliver the right content.
Use HTML5 elements when possible.
<video> can be very efficient in choosing which images or videos to load from the server, preventing the client from downloading the
3x versions of your images. Don’t forget about
<svg> either for handling vector graphics.
Screen readers read everything visible. This can cause a lot of bad things to happen. Using
display: none will prevent screen readers from telling the user about your collapsed items (think of all the wasted hamburgers). Elements strategically hidden with
z-index are listed by the screen reader as a visible element, potentially misinterpreting your intent. Markup created dynamically could have a drastic effect on that user’s experience. We should be diligent with our markup to remain inclusive.
Polyfill, shims, and shivs are some common terms to refer to libraries which fake modern browser functionality into older browsers.
modernizr can be described by these words.
My Action Items
- Start Small. Although I’ve had several projects where I/we start out saying we’ll be mobile first, I don’t believe this has ever actually happened to me. Next time I start a web project I want to start with mobile and expand.
- Pay Attention to Accessibility. Accessibility hasn’t been on my mind much when throwing together web sites. If I get some time, I’d like to look into adding better screen reader attributes into a live web application like Ollert.
- Page load budgets. Jehl discusses getting strict about page load time. Keep it low and weigh load time effects heavily when deciding to add new features to a site. When I add new features to pages, I intend to keep this in mind. Look for this to affect something like Ollert if I ever get around to redesigning the dashboard.