Smashing Daily #15: Slides, Columns, Design
A lot of good reads about Responsive Web Design in this edition of The Smashing Daily. If that’s not really your thing, then you might want to read about font-pairing, architecture (actual buildings), CSS patterns, column layouts, URLs and content, and CSS clouds. Enjoy!
“Multi-column confusion | The Haystack.1”
Multi-column layout works great with long articles on paper. It’s a bit harder to work with design-wise on the Web, but it is possible. Technically it is very hard to get it right, explains Stephen Hay in this thorough article about how CSS columns work and how they should work. A great read.
“Design Process In The Responsive Age3”
Bigger companies with specialists (interaction designers, visual designers, front-end developers, back-end developers) have a hard time finding new workflows for designing and building Responsive Websites. An argument often heard against Responsive Design is that it results in more deliverables, and more work. In this clever article Drew Clemens proposes a rather smart solution to this issue which actually uses the talent of all specialists on a much more efficient way. I think this article is an important piece of the new workflow puzzle. A great read.
Here’s a great post by Brad Frost about the idea of one Web (or content parity, the term he prefers). It’s the idea that if you go to a URL you should get what you ask for, regardless of the device you’re using, or the country you’re from. A great post filled with great but shameful examples.
“Cache them if you can6”
“The fastest HTTP request is the one not made”—a great, simple statement that clearly explains why caching is important. Steve Souders collected some data about caching and wrote this excellent article about it.
Combining two typefaces can result in a great looking design, but it can also cause destruction. Here’s a simple game that helps you with finding the right combination of typefaces. Very helpful!
“CSS 3D Clouds9”
These are exciting times. We keep finding new things we can do with all the new Web technologies out there. Did you ever imagine that you could actually make clouds with CSS3? Neither did I. Here’s an example and here’s the tutorial10, both by Jaume Sánchez. Incredible!
“Adactio: Journal—Sharing pattern libraries12”
Writing CSS is not about laying out individual templates, it’s about creating design systems. Jeremy Keith collected a lot of high quality links about design systems, CSS approaches and style guides. You should definitely try to find the time to click though it, it’s a great resource!
“Fashionably flexible responsive Web design13”
Here are the slides from a full-day workshop by Andy Clarke about Responsive Web Design. Some parts are a bit hard to follow without Andy talking, but this huge presentation is filled with lots and lots of good information.
“Microsoft’s Vienna Headquarters by INNOCAD Architektur15”
Working in a beautiful environment can help in creating great products. I’m not sure what Microsoft is making in Vienna, but their products might just get better in this new office with lots of lines and actual slides in-between floors16!
- 1 http://www.the-haystack.com/2012/06/01/multi-column-confusion/
- 2 http://www.the-haystack.com/2012/06/01/multi-column-confusion/
- 3 http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
- 4 http://bradfrostweb.com/blog/mobile/content-parity/
- 5 http://bradfrostweb.com/blog/mobile/content-parity/
- 6 http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
- 7 http://www.typeconnection.com/index.php
- 8 http://www.typeconnection.com/index.php
- 9 http://www.clicktorelease.com/code/css3dclouds/
- 10 http://www.clicktorelease.com/tutorials/css3dclouds
- 11 http://www.clicktorelease.com/code/css3dclouds/
- 12 http://adactio.com/journal/5334/
- 13 https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1
- 14 https://hacks.mozilla.org/2012/04/mozilla-hacks-weekly-april-12th-2012/
- 15 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/
- 16 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/mv_020612_11/
- 17 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/
- 18 www.smashingmagazine.com/the-smashing-daily-archive/
- 19 www.smashingmagazine.com/the-smashing-daily-archive/