Now with Responsive!

When I launched this version of my site, lots of people and organizations had already realized the value of responsive web design. Today, that number is exponentially greater. As someone lucky enough to get flown around the world to talk about and teach it, it’s pretty embarrassing that my own site wasn’t responsive. Until today.

Two years after launching this version, it’s finally responsive.

When I thought about making this change, there was a lot that came along with it. I wanted to do things right—or righter—which meant there was a lot more things to take into consideration. Not only did I have to refactor the code (at least CSS and a bit of HTML), but I wanted to start using SVG where possible, ditch image replacement entirely, GZIP files, move over to a CDN, and many more acronyms. I also wanted a more intricate understanding of how these things affected performance.

Here’s what I found.

Pre-Optimization

I inventoried the major sections of my site before making any changes. I opened Firefox, fired up Firebug, and hopped over to the “Net” tab. I refreshed a few times and averaged the results. (I’m sure there’s a better way to do this, but I’m just a noob.)

Statistics for DanielMall.com before responsive optimization
Page HTTP Requests Page Weight Load Time
Home 50 871.5KB 2.29s
Work 103 698.7KB 2.62s
Speaking 67 1.8MB 2.6s
Publications 46 770.4KB 1.79s
Articles 42 529KB 1.64s
About 49 766.1KB 2s
Contact 44 546KB 1.61s

Not a bad starting point. Last I saw, the average page weight was about 1MB, so I consider starting under that threshold pretty good.

CSS to Sass

The first thing I did was convert all my CSS to Sass (specifically SCSS). I’ve been working a lot with preprocessors lately, mostly for variables, some light rule nesting, and nested media queries. I could have used something like css2sass, but I really wanted to do it manually so that I could better understand what’s happening.

Here’s what happened when I did the conversion.

Statistics for DanielMall.com after moving from CSS to Sass
Page HTTP Requests Page Weight Load Time
Home 48 (2) 854.1KB (17.4KB) 1.39s (0.9s)
Work 101 (2) 726.8KB (28.1KB) 2.04s (0.58s)
Speaking 65 (2) 1.8MB (no change) 1.55s (1.05s)
Publications 44 (2) 754.9KB (15.5KB) 1.1s (0.69s)
Articles 40 (4) 518.7KB (10.3KB) 1.22s (0.42s)
About 46 (3) 743.9KB (22.2KB) 1.64s (0.36s)
Contact 42 (2) 527.4KB (18.6KB) 0.975s (0.635s)

(I wish I could explain some of these numbers, but I just don’t get the inspector well enough. If anyone can point me in the right direction, I’d be oh so grateful.)

J(S)unk in the trunk

Next, I moved all of the JavaScript I could out of the <head> and into the bottom the page. Google’s Head Perfomance Engineer Steve Souders suggests it, so who am I to argue? I also took the opportunity to consolidate a few extraneous scripts hanging around (old versions of jQuery, etc).

Statistics for DanielMall.com after moving JavaScript to the bottom of the page
Page HTTP Requests Page Weight Load Time
Home 45 (3) 848.1KB (6KB) 1.29s (0.11s)
Work 101 (no change) 726.3KB (0.5KB) 1.84s (0.2s)
Speaking 65 (no change) 1.8MB (no change) 1.55s (no change)
Publications 44 (no change) 754.4KB (0.5KB) 1.06s (.04s)
Articles 39 (1) 518.3KB (0.4KB) 1.28s (0.36s)
About 47 (1) 743.5KB (0.4KB) 1.24s (0.4s)
Contact 42 (no change) 524.5KB (2.9KB) 0.917s (0.58s)

(I wish I could explain some of these numbers, but I just don’t get the inspector well enough. If anyone can point me in the right direction, I’d be oh so grateful.)

Converting wholly to webfonts

One of my favorite things about this site is the opportunity to use the beautiful typeface Stag from one of my favorite foundries, Commercial Type. When I launched this version of the site, Stag wasn’t available as a webfont, but earlier this year, they announced that a lot of their collection was ready for use on the web.

I was whatever about it.

Here’s what happened when I ditched image replacement almost entirely and converted wholly to webfonts.

Statistics for DanielMall.com after converting wholly to webfonts
Page HTTP Requests Page Weight Load Time
Home 36 (9) 834.1KB (14KB) 1.49s (0.20s)
Work 85 (16) 704.8KB (21.5KB) 1.48s (0.36s)
Speaking 54 (11) 1.8MB (no change) 1.22s (0.33s)
Publications 35 (9) 735.6KB (18.8KB) 0.921s (0.139s)
Articles 32 (7) 515.4KB (2.9KB) 1.05s (0.23s)
About 40 (7) 577.9KB (165.6KB) 1.07s (0.2s)
Contact 32 (10) 504KB (20.5KB) 0.895s (0.022s)

Interesting! Here’s where I’m starting to make some big gains. I’m saving an average of 10 HTTP requests per page. In the case of the About page, I was able to splice out a pretty large image of my photo that included a headline, which saved me 165KB.

However, there’s a pretty noticeable 0.2s addition to load time on the first page, which I’m assuming is the first time the webfonts are downloaded. That said, I’m also averaging a 0.2s savings on load time across the other pages, so I think it’s still worth it to use webfonts

I also wanted to move towards resolution independent graphics, so I replaced the logo with an SVG version.

Statistics for DanielMall.com after converting wholly to webfonts
Page HTTP Requests Page Weight Load Time
Home 36 (no change) 833.2KB (0.9KB) 1.48s (0.01s)
Work 85 (no change) 715.5KB (10.7KB) 1.54s (0.66s)
Speaking 54 (no change) 1.8MB (no change) 1.32s (0.1s)
Publications 35 (no change) 746.3KB (10.7KB) 0.925s (0.004s)
Articles 32 (no change) 515.4KB (10.7KB) 1.04s (0.04s)
About 40 (no change) 597.9KB (20KB) 1.07s (0.18s)
Contact 32 (no change) 519.3KB (15.3KB) 0.895s (0.032s)

Another interesting discovery: while the amount of requests stays the same—which makes sense since I’m swapping one PNG for one SVG—just about every page saw a small increase in page weight and load time.

I guess that’s the price of resolution independence.

Mobile first, responsive web design

“That’s the thing about responsive web design: you can’t just think of it as a sprinkle of pixie dust that can be applied to any site. It requires the right mindset. It requires that sites be built on solid foundations of best practice.”

—Jeremy Keith, A Responsive Mind

It’s worth pointing out that everything I’ve done so far isn’t part of that literal definition of a responsive site: fluid grids, flexible images, and media queries. Those are the foundations Jeremy is talking about. However, getting all those previous things in place—Sass, non-blocking JavaScript, webfonts, SVG—do well to augment the pillars of responsive sites.

With that, I’m ready to actually start making my site responsive.

  1. The easiest part is flexible images. I drop a img { max-width: 100%; } into my stylesheet. Done.
  2. Fluid grids. For years, I’ve been building sites with percentage-based grids with fixed-width containers. That future-proofing came in super handy. With a few tweaks to containers—namely doing something like .container { width: 95%; margin: 0 auto; max-width: 800px; }—does the trick pretty easily.
  3. Media queries were the tough one for me. I originally planned to drop a few max-width queries on top of the existing stylesheet, it felt wrong not to follow the mobile-first approach I’ve been building clients’s sites with for the last few years. I commented out everything in my stylesheet and brought them back piece by piece, trying to follow a mobile-first approach as closely as I could. It also meant changing some markup to make it easier to work with. This was by far the most time consuming part, taking me about a month to do (outside of other projects, of course).

The last piece was that I found some of my designs weren’t easy to make responsive without a significant overhaul. For example, my “Speaking” page—the heaviest page of the bunch at 1.8MB—was a page full of image replacements… 21, to be exact. Perhaps not coincidentally, it got very few visits; for reference, it gets about 2.14% of the visits I get on my most popular post, “Progressive Enhancement. Still Alive and Kickin’.” So, I decided to remove the page from the site until I can redesign it, something I’ve been meaning to do anyway.

Same goes for my “Publications” page. That one is at 2.01%. Later ’gator.

My case study pages like Crayola and Star Warscontain pretty large images that don’t look great on smaller screens. Plus they take a while to download. But, I like them, so they’re staying until I think of something better to do with them. Open to suggestions.

With the addition of fluid grids, flexible images, and media queries, here’s how the site’s looking.

Statistics for DanielMall.com after making the site responsive
Page HTTP Requests Page Weight Load Time
Home 35 (1) 775KB (58.2KB) 1.16s (0.32s)
Work 85 (no change) 722.1KB (6.6KB) 1.41s (0.13s)
Speaking Killed
Publications Killed
Articles 31 (1) 533.9KB (18.5KB) 0.905s (.135s)
About 40 (no change) 597.7KB (0.2KB) 1.07s (0.18s)
Contact 32 (no change) 522.6KB (3.3KB) 0.921s (0.026s)

More to come

When I started, I ran the original site through WebPagetest.

WebPagetest results before making any optimizations

Here are the results after the optimizations.

WebPagetest results after optimizations

That’s right: they’re identical. (I swear they’re not the same image.) What does that mean? It means there’s more work to do. There’s always more work to do. However, I feel much more confident that my site is in a better place to be able to improve it. The foundation is there now.

On a related note, this is all an experiment where I’m learning as much about my site (and the web) as I can. If you’re interested in following along more closely, I’ve decided to open source my whole site. It’s now on Github. You can see everything from how I’ve been able to maintain this site without a CMS to all the embarrassing ways I’m doing things.

I’ll be working on a part 2 to this post where I’ll attempt all things I know nothing about: caching, GZIPping, and getting a CDN set up. Stay tuned!

blog comments powered by Disqus

Article Info