Smashing Daily #2: Keyboard Navigation, Responsive Workflow And Goats
This post is the second in the new Smashing Daily series on Smashing Magazine, in which we help you stay on top of what’s going on in the industry. Vasilis van Gemert carefully picks the most interesting discussions, tools, techniques and articles that have been published recently and presents them in a nice compact overview.
Responsive Design Workflow (Mobilism 2012)1
One of the hardest parts of responsive design is that we have to change the way we work and completely change our workflow. The deliverables we’ve been working with for the past 10 years just don’t work anymore. More and more clever people are starting to think about a new workflow, and Stephen Hay is one of them. At the Mobilism conference, he presented this excellent talk. Just pick and choose the ideas that you think will serve you, your team and your clients well.
Better keyboard navigation3
There are many good reasons to use skip links, but there are definitely other ways to make content accessible to keyboard users. Here’s a nice proof of concept by Thierry Koblentz that uses the Tab key to jump from section to section and the arrow keys to navigate links within those sections. It feels intuitive once you find out how it works (yes, I know that’s somewhat — but not entirely — contradictory), and it clearly shows the importance of styling
“CSS px Is an Angular Measurement4”
The next time a designer asks you to create a “pixel-perfect” design, tell them that you will, but only if they can explain what the
px unit in CSS is exactly. And be sure your designer’s name is not Sean B. Palmer.
“What Goes Up, Doesn’t Have to Come Down5”
What happens to your data if a service closes down? Can you trust your precious online presence to third-party services? Geri Coady writes about the closing down of Gowalla and links to some very interesting articles and videos on the subject of shutdowns.
“Responsive Images and Web Standards at the Turning Point7”
You don’t want to serve a 1024-pixel-wide image to a 320-pixel-wide screen; that would be a silly waste of bandwidth. There is no easy way to implement a technique for that, so a group of Web developers worked on a new HTML element to solve the issue. A few days ago, a different solution was added to the spec without the developers being consulted and without the work they had done being considered. You can understand that not everyone is happy8 about this. If you’re interested in this subject, then definitely read this article to learn about the beautiful HTML design principles mentioned, and after that be sure to read the W3C thread9, too.
“Desktop Apps with HTML5 and the Mozilla Web Runtime10”
People like to use apps and don’t really care what technology they’re built with. There are good reasons to use the so-called “native” technology for an app, but there are also many good reasons to use HTML. Mozilla is working on a Web runtime that lets you create launcher apps for Web pages, and here’s an in-depth explanation of how it works.
“Future-Friendly Style Guides11”
Now that we’ve finally accepted that the Web does not have a fixed width, we need to find a new workflow. The Photoshop-centered way we used to work is not good enough anymore. People are starting to think and write about a new “responsive” workflow, and that’s a good thing. Here’s an article by Luke Brooker about his new workflow, centered on the concept of style guides.
“Fix Broken Unicode Characters12”
Here’s a handy tool to fix those broken Unicode characters like
Remove content with a goat laser14
Yes, all of these new Web technologies like
canvas look absolutely great, but can you actually create something useful with them? Two years ago, Simon Willison created this extremely handy
canvas technique, and to be honest, I can’t wait till we finally see it implemented somewhere.
- 1 https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-mobilism-2012
- 2 https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-mobilism-2012
- 3 http://www.css-101.org/articles/enhancing_keyboard_navigation/skip_links_revisited.php
- 4 http://inamidst.com/stuff/notes/csspx
- 5 http://hellogeri.com/blog/view/what_goes_up_doesnt_have_to_come_down
- 6 http://hellogeri.com/blog/view/what_goes_up_doesnt_have_to_come_down
- 7 http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
- 8 http://timkadlec.com/2012/05/wtfwg/
- 9 http://www.w3.org/community/respimg/2012/05/11/respimg-proposal/
- 10 https://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/
- 11 http://blog.lukebrooker.com/future-friendly-style-guides
- 12 http://www.dom111.co.uk/files/utf8/
- 13 http://www.dom111.co.uk/blog/coding/tool-fix-broken-unicode-characters/312
- 14 http://simonwillison.net/static/2010/goatlaser/
- 15 http://simonwillison.net/static/2010/goatlaser/
- 16 www.smashingmagazine.com/the-smashing-daily-archive/
- 17 www.smashingmagazine.com/the-smashing-daily-archive/