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.

A tip by Stephen Hay2

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 :focus states.

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.

Screenshot6

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.

An HTML design principle

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 café. In a comment on the accompanying blog post13, Mathias Bynens scores a few points by pointing out how to easily do this yourself with some simple JavaScript.

Last Click

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.

Remove content with lasers15

Previous Issues16

For previous Smashing Daily issues, check out the Smashing Daily Archive17.

Footnotes

  1. 1 https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-mobilism-2012
  2. 2 https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-mobilism-2012
  3. 3 http://www.css-101.org/articles/enhancing_keyboard_navigation/skip_links_revisited.php
  4. 4 http://inamidst.com/stuff/notes/csspx
  5. 5 http://hellogeri.com/blog/view/what_goes_up_doesnt_have_to_come_down
  6. 6 http://hellogeri.com/blog/view/what_goes_up_doesnt_have_to_come_down
  7. 7 http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
  8. 8 http://timkadlec.com/2012/05/wtfwg/
  9. 9 http://www.w3.org/community/respimg/2012/05/11/respimg-proposal/
  10. 10 https://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/
  11. 11 http://blog.lukebrooker.com/future-friendly-style-guides
  12. 12 http://www.dom111.co.uk/files/utf8/
  13. 13 http://www.dom111.co.uk/blog/coding/tool-fix-broken-unicode-characters/312
  14. 14 http://simonwillison.net/static/2010/goatlaser/
  15. 15 http://simonwillison.net/static/2010/goatlaser/
  16. 16 www.smashingmagazine.com/the-smashing-daily-archive/
  17. 17 www.smashingmagazine.com/the-smashing-daily-archive/

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Goat Laser! That is one of the coolest things I have seen on the web this year. Hmmm I wonder, alien mothership laser? :-)

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top