Smashing Daily #10: Touch, Vector, Git

As always, there’s something for everybody in this edition of The Smashing Daily, for designers, for developers, for project managers, icon freaks and for nerds as well. And for everybody who’s looking for a clear way to learn git, there’s an excellent illustrated website for you!

Style guide round-up1
A digital Style Guide is a necessary tool for every slightly bigger website. Anna Debenham started collecting various style guides2. She wrote an article about them3, and now she wrote this next article which highlights some of the style guides she hadn’t really mentioned before. An incredibly valuable resource!

Styleguides4

RWD Calculator5
Did your designer create an aside that’s exactly 437px wide with a padding of 9px and does he really believe these are exactly the right proportions? And at the same time you promised your client to create a fluid, responsive website? Here’s a tool by Stuart Robson that translates designer pixels to human percentages.

A Simple Device Diagram for Responsive Design Planning6
Here’s a nice and handy device diagram which gives you an overview of some major devices currently in use. One thing it shows clearly is that there is no such thing as a mobile portrait resolution or a tablet resolution, everything just overlaps. This diagram can be used as a tool to decide where some high-level breakpoints might be early on in the design process—exact breakpoints will show up later when you work with real content in real HTML.

[watching] Creating responsive HTML5 touch interfaces7
Here’s a video of an excellent presentation by Stephen Woods who talks about how to create good, responsive (as in responsing) HTML touch interfaces. The talk is a bit web-kit-centric, but the advice he gives is still very valuable for (inderaction) desingers.

A great video about touch interfaces8

About those vector icons9
An icon can measure 16x16px but also 512x512px as well. Theoretically, the use of SVG could save you a lot of time and many kilobytes when working on icons. But unfortunately, as Kirill Grouchnikov explains in this excellent article, icons don’t scale too well. What he doesn’t mention though is the fact that you can use mediaqueries in SVG which might solve some of the issues mentioned in this article. Andreas Bovens made some nice examples which show how this works like this chart10, this clever logo11 and this great example of a map12 (unfortunately, they only seem to work in Opera).

How to Create Stunning Effects With 165 Media Queries or Less!13
You can do serious stuff with mediaqueries but you can also do fun stuff with it, like changing a word based on the viewport width. Arley McBlain shows you how to do it in this nice tutorial. It reminds me of this insane Adaptive CSS Zen Garden14 that Roy Tomeij and I made a while ago.

Fun with mediaqueries15

On :target16
The :target selector can be very handy, but there are some weird and annoying things you have to know about when using it. Chris Coyier did all the hard work for you. He explains how it works, what you can do with it and all the rest.

We need a standard show navigation icon for responsive Web design17
Andy Clarke decided it’s time for a standard show navigation icon for mobiles and other smaller screens. He took a look at the different icons that are used in apps and websites and concluded that an icon with three lines is the right one. Most commenters (there are lots of them, it’s a very interesting conversation to read) seem to agree.

Last Click

git animals18
Many people have a hard time understanding and getting used to git. This website tries to help these people in the best possible way: git code is illustrated with animated gifs of animals.

Git is easy with animals19

Previous Issues20

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

Footnotes

  1. 1 http://maban.co.uk/66
  2. 2 https://gimmebar.com/loves/maban/collection/front-end-styleguides
  3. 3 http://24ways.org/2011/front-end-style-guides
  4. 4 http://maban.co.uk/66
  5. 5 http://www.rwdcalc.com/
  6. 6 http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  7. 7 http://christianheilmann.com/2012/03/16/watching-creating-responsive-html5-touch-interfaces/
  8. 8 http://christianheilmann.com/2012/03/16/watching-creating-responsive-html5-touch-interfaces/
  9. 9 http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
  10. 10 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-chart/
  11. 11 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-logo/
  12. 12 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-map/
  13. 13 http://css-tricks.com/lark-queries/
  14. 14 http://nerd.vasilis.nl/adaptive/zengarden.html
  15. 15 http://css-tricks.com/lark-queries/
  16. 16 http://css-tricks.com/on-target/
  17. 17 http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
  18. 18 http://git-animals.tumblr.com/
  19. 19 http://git-animals.tumblr.com/
  20. 20 www.smashingmagazine.com/the-smashing-daily-archive/
  21. 21 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

    Feedback: I’d like to see “Smashing Daily” as a newsletter so that its feeds are delivered directly to my email on a daily basis.

  2. 2

    Can you subscribe to Smashing Daily through email? Or can you only rss the page?

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