M-Dot or RWD

M Dot or RWD. Which is Faster? outlines some great research conducted by Doug Sillars on whether m-dot or responsive sites are faster. Redirects slow m-dot sites from the very start while those sites might turn out to be lighter in requests & KB weight (potentially due to incomplete experiences, I’d argue).

But what is really interesting is the idea that RWD sites are VERY competitive on Visually Complete and SpeedIndex scores. The median values are within 5% for both metrics. Even though it appears that RWD is faster, there is enough fluctuation in the data that we should probably call it a dead heat.

Be sure to read the full post. It’s well worth your time.

CSS Zen Garden #221

There’s a lot to love about Andrew Lohman’s CSS Zen Garden #221 theme, Mid-Century Modern. In addition to the type, color palette, and imagery, I am particularly fond of the layout itself. Each section flows nicely to the next and the entire site (that stretches to 1920px) retains its unique character at any width.

css-zen-garden-221-AL

TBT: Flash Edition

I was cleaning out an old hard drive and found this ridiculous little 8+ year old Flash (SWF) gem hanging around. Its issues are too numerous to count, but I think I was having a good time when I made it.

Optimizing Images

Friends don’t let friends load 300kb PNG images on their websites no matter how cool the transparent photo of a happy customer waving over a gradient background looks. That said, when raster graphics are required, one should always optimize them. My favorite tools for this are ImageOptim and ImageAlpha. The more I use them, the more they inform how I design.

CSS-Zen-Garden

While working on this page design for my Apothecary CSS Zen Garden theme, I knew I would be exporting a handful of PNGs with alpha transparency. Page weight could have easily surpassed the 1mb mark because of that, but I knew that if the texture graphics were only 2 or 4 colors that Image Alpha could get me massive savings.

Image-Alpha

Note the bottom-left of the above screenshot. I reduced textured-border.png by 85% in file size (34,760 bytes to 5383 bytes). I consider that free money. Whatever you do, use apps like ImageOptim and ImageAlpha on everything, and donate because, holy shit, they’re free.

Frank Chimero on His New Site

frankchimero-website

In describing some creative epiphanies he had while building his new site, Frank hit on two that resonated with me:

Accepting that it’s okay if the site looks “traditional,” and that I didn’t need to opt into a willfully esoteric design or interaction method to make a “statement.” Blegh to pointless statements.

Admitting that if I was writing a lot of markup or CSS, I was working against the grain of the web.

How very dao of him. I think that what makes a ‘designer’ a ‘web designer’ is the ability to recognize the grain of the web and a willingness to go with it. Being able to code is great, but paramount to that is the unique understanding designers who love the web possess. Convention can be good. Web technologies work best when they’re embraced all for their strengths and weaknesses. Great work, Frank! You’re one of the best web designers I know.

Jenn Schiffer on Accessibility

It’s 2014 and we continue to build a Web for what we consider to be the group most worthy of access: able-bodied, good-sight-and-hearing-having people, in a class that can afford high-bandwidth and memory for large asset loading sites.

Reading Jenn’s entire post will be well worth your time.

Building the McLaren MP4-12C

I enjoyed this 2011 BBC documentary on the making of the McLaren MP4-12C. Just as fascinating as the car itself, is the glimpse into the McLaren way: perfection plus one.

The headquarters, where “you go home cleaner than you were before you came into work,” looks to me like a cross between set pieces from 2001: A Space Odyssey and Gattaca.

McLaren HQ
McLaren HQ

McLaren head, Ron Dennis on the working environment:

It’s less apparent that it [the building] is very clean. It’s less apparent that it’s odorless. It is also a constant temperature. We hold the whole building within 1° of 22°. There is no clutter in this building. Cluttered building, cluttered mind. It’s the attention to detail that I’m really quite well-known for.