Performance Starts With Education

The new Facebook’s Instant Articles has shaken up the web community on performance. Broadband are getting better and yet sites are getting slower. Sites are slow to the point that Facebook could even use performance as its marketing strategy. While the tools can cause websites to load slowly, we, as web designers, are responsible for implementing those tools; therefore, to increase performance we have to start with education.

I had an opportunity to teach web design and usability to advanced undergraduate and graduate students in the Fall of 2014. For the final project, in which the students had to design and code their own portfolio, I kept reminding them the concept of progressive enhancement because they were so early to create slick-looking websites. Out of 19 students, I had three that didn’t take my advice. One student who had some front-end skills decided to create a one-page portfolio with all the bells and whistles. She ended up using multiple CSS files and JavaScript libraries. When I tested her page on the iPhone, it could barely scroll. Another student had to start over from scratch because he couldn’t get jQuery to behave the way he wanted it to. On the last night before the due date, another student asked me why his site was not working properly. I looked at his code, which has jQuery and a handful of JavaScripts, and didn’t know how or where to begin. I told him to just do the best he could.

I was not at all against using JavaScript. In fact, I encouraged students to explore it, but they had to build the solid foundation first before they could layer all the cool interactions on top. That has always been my approach as well in my own work. For example, when I created the website for Professional Web Typography, I set out my priority. I could tuck all items in the table contents under the hamburger, but readers have to click on the icon every time they want to access the TOC. Furthermore, adding a hamburger requires JavaScript. So I decided to have the TOC always accessible at the bottom of every page so that readers can get to it at whatever page they are on. With the fancy drop cap, I could have used Adobe’s dropcap.js for consistency across the browsers, but then I could do it with just a few lines of CSS. Even though the drop cap would be a little bit off in various browsers, but I can live with that. It’s just an enhancement future.

I urge you to think the same when you approach a project to make the web a faster experience for everyone.