As a front end developer I find myself tweaking easing functions a lot, especially when I’m fine tuning web UI before launch. There’s no substitution for testing the final product but this easing function cheat sheet gives you a nice starting point. Besides, it’s virtually impossible to remember the animation details between many easing functions like easeOutBounce and easeInOutBounce.
I’m already a big fan of Chris Coyer over at CSS Tricks, but I think he outdid himself with his work on this article over at 24 Ways. It’s possibly the best completely from scratch introduction to the Grunt task manager (which is essential to my daily workflow) that I’ve seen. Now when I’ve got coworkers or friends that ask what the hell Grunt is, I point them to this article first.
There’s been countless articles on adapting a responsive design to make web sites mobile friendly. But what about in the opposite direction? What happens when you need to take a traditionally fixed width web site at 960px and make it look great on a 27 inch monitor. Designer Mike Pick goes through a few examples at A List Apart, both good and bad, to see what what works best.
I’m already a big fan of the Node based task manager Grunt for my day job; it makes minifying, and linting my code for errors a breeze. But this post by Google developer Addy Osmani caught me onto a new really cool Grunt task called grunt-responsive-images. It batch produces multiple, final resolution images for web deployment based on a list of original source images. Great for responsive web design and serving up basic HDPI imagery.
I enjoyed reading through this article where The Guardian web developers dive into how RWD can play semi-nice with a browser as old as IE8. Looks like a pretty slick methodology via a Sass mixin to deliver responsive friendly stylesheets to both modern and older browsers (via the Stuff and Nonsense design blog.)
I put a lot of stock in work by the Filament group with their past work on the Picturefill polyfill; this small extension they recently created looks especially cool. It’s basically a super quick, jQuery based method to kill off the annoying delay you get by default when tapping links on a mobile device. Faster interactions make for a better user experience.
Nice talk at the Fronteers web developer conference all about the flexbox module by developer Zoe Gillenwater. Some of the talk got a bit too deep into coding syntax that was a bit difficult to follow in a single slide based presentation. But stick around to the end where Zoe talks about the practical benefits of using flexbox today. It’s the first time I’ve been encouraged to dip my toe into flexbox with production level work.
Keeping to a reasonable line width adds significantly to a web page’s readability. But it’s easy when building a site to forget about this and hand counting characters on a screen is a drag. That’s why Chris Coyier’s simple bookmarklet here works great. Run it on any site and determine immediately how your lines are shaping up.
From Randomwire, one reason why native Japanese sites often feel so cluttered, at least to more of a traditionally U.S. centric eye:
Logographic-based languages can contain a lot of meaning in just few characters. While these characters can look cluttered and confusing to the western eye, they actually allow Japanese speakers to become comfortable with processing a lot of information in short period of time / space (the same goes for Chinese).
We’ve making progress on the responsive image front in modern browsers, but alas, we’re at an impasse. As noted by Opera rep Bruce Lawson:
The outcome of the meeting was that
isn’t a viable option. Browser makers don’t like the fact that it’s a new element that does the same as (or what
should do if we were speccing it today), and that it depends on multiple nested children…
…The Paris meetup’s most immediate outcome was agreement that srcset + DPR-switching is the right initial step forward (i.e., the 2x, 3x, etc. syntax).
Bottom line, the consensus is moving toward srcset over a new picture element but no modern browsers are yet shipping with it.