CSS diner →
For beginners, CSS selectors and selector specificity can be tricky to properly understand without significant trial and error. Fortunately Luke Pacholski created this smart little game to help you learn properly. Clever.
For beginners, CSS selectors and selector specificity can be tricky to properly understand without significant trial and error. Fortunately Luke Pacholski created this smart little game to help you learn properly. Clever.
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.
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.
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.
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.
A lot of design and development insights in this Gigaom post by Janko Roettgers. Fascinating to see the Netflix team debate image weight so heavily:
However, the team ran into a significant issue when it began to build out the final UI for consumers in the third quarter of 2013, just months before it was scheduled to launch. It discovered that lower-end Blu-ray players and streaming boxes couldn’t handle WebP decoding on the fly, or at least not as smoothly as Netflix would like them to. That’s why the team decided to still serve JPEGs to cheap consumer electronics devices by default, but send WebP images to game consoles and other more powerful machines…
…The goal was to find that sweet spot where images look great but still load quickly, and transitions are smooth — something Netflix internally calls a “recipe” for image encoding. It was a time of constant fine-tuning, a time when even something as minuscule as a 150ms delay during an image transition warranted further tweaks. “You will feel that,” insisted McCarthy.
Chasing down page weight and experimenting with multiple platforms? There’s a lot in common here with web development workflows.
It feels like it’s rare to wait more than a few weeks before another JavaScript-powered open source MVC framework comes along. That’s exactly why Lauren Orsini’s article on ReadWrite is so helpful. She goes over the strengths and weakness of the three most popular frameworks. For me, especially coming into a Ember.js completely fresh, it’s an excellent starting point.
jQuery creator and Khan Academy dean John Resig was a recent guest on the Shop Talk web design/development show. It’s a solid, smart listen. Pay special attention around the 46 minute mark, where John and usual hosts Chris and Dave discuss the lack of women in the web development community.
I’m finding fullscreen overlays increasingly common as websites tackle a universal look that’s applicable to a wide range of browser viewports. But there’s a lot more than a simple opacity fade to give the overlay effect uniqueness. Mary Lou’s examples over at Codrops flesh out a few examples.