Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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-up”
A digital Style Guide is a necessary tool for every slightly bigger website. Anna Debenham started collecting various style guides. She wrote an article about them1, and now she wrote this next article which highlights some of the style guides she hadn’t really mentioned before. An incredibly valuable resource!


RWD Calculator2
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 Planning3
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 interfaces4
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 interfaces5

About those vector icons6
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 chart7, this clever logo8 and this great example of a map9 (unfortunately, they only seem to work in Opera).

How to Create Stunning Effects With 165 Media Queries or Less!10
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 Garden11 that Roy Tomeij and I made a while ago.

Fun with mediaqueries12

On :target13
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 design14
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 animals15
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 animals16

Previous Issues17

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


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

↑ Back to top Tweet itShare on Facebook

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.

  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

    Felicia Santos

    May 29, 2012 11:18 pm

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


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top