I’ve done many web-based ajax request forms in my career. Regardless of the project, I generally see the same processing design aesthetic: the submit button flips to a disabled state and a loading animation, usually a circular spinner, pops up. So designer and developer Mary Lou asks, why not try something different with the button itself? The results are pretty cool. Some ideas are admittedly a bit too clever, but it’s fun to see such creativity in action.
Great news from the responsive image front: the picture element, a responsive image solution championed by many developers (including myself) is finally coming to fruition in the latest Firefox and Chrome dev builds. Safari will hopefully follow suit soon. Members of the Responsive Images Community Group discuss what’s been decided and how we reached this point.
There’s a lot of responsive grid frameworks out there but many don’t understand what they are really crafting in the HTML and CSS. Jordan Lev’s tutorial goes over the basics.
I haven’t revisited Alien for quite a while. But Ridley Scott’s classic has aged extremely well, and it’s influence on modern sci-fi and horror tropes is undeniable; smart analysis is always welcome. This video essay by Steven Benedict is exactly that; it hits on some major themes while not overstaying itself welcome.
The next time I teach any introductory course on HTML/CSS I need to pass this list of “commonly frustrating HTML and CSS quandaries” by designer (and creator of Bootstrap) Mark Otto along to the class.
A four minute super cut of scenes from Michael Mann movies? Count me in.
The 1910 design team posted some advice for optimal web typography on their blog. Some of it I’ve seen before, but rarely in such a concise yet helpful format. Here’s one of those “why didn’t I think of this myself” moments, regarding picking an optimal body text size:
If in doubt, just grab a camera and take a picture of the text from the desired viewing distance and compare this to a picture of a page from a regular textbook taken from 30 to 40 cm away. Alternatively hold the book somewhere between yourself and the screen while keeping one of your eyes closed. If the digital text is smaller than the printed one you’ll want to go bigger.
Smart tutorial by Louis Lazaris over at Sitepoint on WebPageTest. Like so many other developers, I find myself on WebPageTest all the time for web page performance optimization. But I only understood the page basics; Lazaris mostly focuses on the Filmstrip View, an aspect of WebPageTest I’ve rarely looked at but clearly should have a long time ago.
The penultimate season of Mad Men starts in a few weeks, so it’s a great time to look back at some of the show’s definitive episodes. “The Wheel” is undoubtedly one of them. As A.V. Club writer Todd VanDerWerff writes, that pitch to Kodak is still incredible:
Somewhere in the middle of that pitch, though, he [Don] realizes the place he longs to go is the place he’s already talking about, even if he won’t allow himself to feel that for more than a millisecond. He’s trapped by time, as we all are, forced to live our lives in sequence, as the same, flawed people who never really realize the truth of who they really are at heart, which is wounded and beaten and fleeting. But also, possibly, kind and good and capable of something outside of themselves.
Jeremy Keith:
If your client or boss expects that a website will look and behave the same in every browser on every device, then where did they get those expectations from? And rather than spending your time trying to meet those impossible expectations, I think your time would be better spent explaining why those expectations don’t match the reality of the web.
It’s like Mike Monteiro says about clients: if they just don’t get something about your design, that’s not their fault; it’s yours. Explaining your design work is part of your design work. It’s the same with web development.
Exactly. And I love how Keith concludes his post at the end: the web isn’t just another platform where if you have the right device, you get all of the content, otherwise you get zero. It’s instead a continuum; different browsers can have different experiences.