06.18.14 |
∞
Developer Razvan Onofrei:
Setting a vertical rhythm shouldn’t be very hard. There are many tools out there that can even generate the CSS for setting your vertical rhythm on the scale you choose.
The baseline is the imaginary line upon which a line of text rests.
There is one problem with most of these tools: they bring the baseline concept into discussion without really tackling the problem.
In typography, the baseline is the imaginary line upon which a line of text rests. And it has to be aligned with the grid we use for establishing our vertical rhythm. That’s it.
But here comes the tricky part. We all know how line-height works and that the text will always be vertically aligned to its middle, NOT to the baseline.
Really enjoyed reading through the wonky breakdown between cap height, line-height and overall alignment on the web. I expect to play around with his alignment gist at some point.
06.17.14 |
∞
Designer Elliot Jay Stocks talks about typographic rules on the web:
To summarize: we can hyphenate pretty well, but justification still has a way to go, so I’m afraid to say that we’re not going to be using them together the way we do in print any time soon.
06.10.14 |
∞
After what feels like an eternity in the web community, Firefox’s Firebug web debugger just released version 2. By now I’ve moved my development tools entirely to Chrome; their DevTools have continuously iterated and pushed the ball forward. But fans of Firebug should be happy. There’s a lot that’s been added, most notably code auto completion and console log grouping.
06.09.14 |
∞
All in one JS powered web app to rapidly generate fast cross-browser animations, written by web developer Joel Besada. It just came out today, but my first impressions are very positive. Instead of downloading a clunky, bloated Mac app for doing CSS3 animations, this feels a lot fresher and more lightweight. I was able to put together a fairly complex CSS3 animation quickly though I haven’t inspected the exported CSS in detail yet.
06.04.14 |
∞
Jason Rodriguez, writing for A List Apart:
Just like with responsive websites, there are three main components of a responsive email: flexible images, flexible layouts, and media queries.
The only difference between the web and email is in how these three techniques are implemented.
In email design, we have a limited subset of HTML and CSS at our disposal. We can’t rely on properties and values that designers use for responsive sites on the web; margins, floats, and ems don’t work in many email clients. So we have to think of workarounds.
Frankly before this post I considered “responsive” email as something of a lost cause. But there’s a lot of strategic, well explained code examples here that make me want to revisit the emails we regularly send out as part of our day job. At the very least check out Jason’s solution for flexibile images which has a very clean HTML and CSS-based solution.
05.30.14 |
∞
It’s exciting to be able to deploy a true “finalized” responsive image spec to the public, something in upcoming months that should be rapidly adopted by the browsers. That’s exactly what happened to us at Pocket – a stable version 2.0 release came out a few weeks before I needed it for our latest major release. If you’re already using some other, competing responsive image solution, I’d recommend looking into Picturefill and consider switching over. It’s a polyfill that’s very well equipped for the finalized picture element.
The implementation was pretty painless, though I did find occasional image pop-in when using the srcset attribute in a solo image (no picture element). There’s also sometimes a double image download in already native-supporting srcset browsers (e.g. latest Chrome). It’s a known temporary issue and only a minor downside given Picturefill’s overall benefits.
05.29.14 |
∞
As part of my work on the Pocket Premium purchase flow, I integrated the Filament Group’s Politespace plugin for our credit card form field. It’s pretty simple: when the user blurs off the input field in question we auto add spaces to improve readability (e.g. in our case for Visa cards we add spaces between every four characters). When a user focuses back on said field the spaces are removed.
05.28.14 |
∞
It’s very rare I write a plug about my day job here, but this deserves a mention: today Pocket unveiled Pocket Premium, a for-pay subscription service that adds permanent library, full-text search and suggested tags to the core (free) Pocket platform. It was a huge effort among the whole team and my web work added significant improvements for all users: a slicker, smarter search, a conversion of the whole site to a smarter blend of Typekit, Picturefill 2 for responsive imagery across our marketing pages and much more.
05.27.14 |
∞
Cool online book by author Dan Zambonini on getting a web app off the ground successfully. As he writes:
You’ll find processes, statistics and resources that you can use for the entire lifecycle of your app, from developing the seed of an idea to post-launch promotion. Rather than getting bogged down with unnecessary detail and opinion disguised as best practice, this book concentrates on the critical points of each topic to ensure a well-rounded app that’s equipped for even the most demanding users.
That’s the key – it’s short and very much to the point. And it’s completely free.
05.19.14 |
∞
The Flickr web developer team breaks down the usability and performance considerations behind their new signed out homepage. There’s a lot of solid content including emphasis on 3d transforms to keep CSS animations fast and throttling JavaScript-based scroll events.