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 guides. She wrote an article about them2, and now she wrote this next article which highlights some of the style guides she hadn’t really mentioned before. An incredibly valuable resource!
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 Planning5”
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 interfaces6”
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.
“About those vector icons8”
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 chart9, this clever logo10 and this great example of a map11 (unfortunately, they only seem to work in Opera).
“How to Create Stunning Effects With 165 Media Queries or Less!12”
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 Garden13 that Roy Tomeij and I made a while ago.
: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 design16”
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.
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.
- 1 http://maban.co.uk/66
- 2 http://24ways.org/2011/front-end-style-guides
- 3 http://maban.co.uk/66
- 4 http://www.rwdcalc.com/
- 5 http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
- 6 http://christianheilmann.com/2012/03/16/watching-creating-responsive-html5-touch-interfaces/
- 7 http://christianheilmann.com/2012/03/16/watching-creating-responsive-html5-touch-interfaces/
- 8 http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html
- 9 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-chart/
- 10 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-logo/
- 11 http://people.opera.com/andreasb/demos/demos_svgopen2010/svg-mediaqueries-map/
- 12 http://css-tricks.com/lark-queries/
- 13 http://nerd.vasilis.nl/adaptive/zengarden.html
- 14 http://css-tricks.com/lark-queries/
- 15 http://css-tricks.com/on-target/
- 16 http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
- 17 http://git-animals.tumblr.com/
- 18 http://git-animals.tumblr.com/
- 19 www.smashingmagazine.com/the-smashing-daily-archive/
- 20 www.smashingmagazine.com/the-smashing-daily-archive/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.