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.

What browsers do with columns2

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.

Content Parity4
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.

Great examples of bad practices5

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.

Type Connection7
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!

Play the type pairing game8

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!

Fire!11

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.

Mozilla Hacks Weekly, April 12th 201214
Do you need more to read? Here’s an old link list by The Mozilla Developer Engagement Team.

Last Click

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!

Nice17

Previous Issues18

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

Footnotes

  1. 1 http://www.the-haystack.com/2012/06/01/multi-column-confusion/
  2. 2 http://www.the-haystack.com/2012/06/01/multi-column-confusion/
  3. 3 http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
  4. 4 http://bradfrostweb.com/blog/mobile/content-parity/
  5. 5 http://bradfrostweb.com/blog/mobile/content-parity/
  6. 6 http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
  7. 7 http://www.typeconnection.com/index.php
  8. 8 http://www.typeconnection.com/index.php
  9. 9 http://www.clicktorelease.com/code/css3dclouds/
  10. 10 http://www.clicktorelease.com/tutorials/css3dclouds
  11. 11 http://www.clicktorelease.com/code/css3dclouds/
  12. 12 http://adactio.com/journal/5334/
  13. 13 https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1
  14. 14 https://hacks.mozilla.org/2012/04/mozilla-hacks-weekly-april-12th-2012/
  15. 15 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/
  16. 16 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/mv_020612_11/
  17. 17 http://www.contemporist.com/2012/06/02/microsofts-vienna-headquarters-by-innocad-architektur/
  18. 18 www.smashingmagazine.com/the-smashing-daily-archive/
  19. 19 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
  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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