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 Newsletter: Issue #81

This newsletter issue was sent out to 137,046 newsletter subscribers on Tuesday, April 2nd 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


As professionals who care about our craft, our design discussions often circle around best practices and perfect solutions for design problems. We care, and that’s what makes our work good and our workflow better with every new project. But perfect solutions don’t exist in the real world2, and so seeking pragmatic alternatives that get projects finished in time is fine, too — as long as we don’t compromise our professional principles, that is.


As Harry Roberts and Nicolas Gallagher remind us, questioning status quo is helpful4 and necessary5. So when was the last time you broke your CSS/JS habit and tried something different and counter-intuitive for a change? What about trying out OOCSS, LESS, SASS or RESS? Or refactoring a stylesheet with rems and SVG sprites?

That’s exactly what we’ve set out to do this week on Smashing Magazine’s website to improve the performance and the code base. So in case you notice any bugs or issues, please let us know on Twitter6 and share your experiences on breaking your habits using the hashtag #smnlhabits. Good luck!

PS: If you happen to be around Freiburg, Germany this week, make sure to drop by a Smashing Meetup With Paul Boag on April 4th — we’d love to meet you! By the way, Paul Boag’s “Client Centric Web Design” eBook is available in our Smashing eBook Library7 starting from today, so happy reading and stay tuned to the updates!

— Vitaly

Table of Contents

  1. CSS Icon Stacks8
  2. What Are Your Biggest Failures?9
  3. Building An Automatic Table Of Contents10
  4. Adaptive SVG Illustrations With CSS11
  5. CSS3 For Responsive Web Design: Workshop With Andy Clarke12
  6. Free PSD: Corporate Identity Mock-Up Set13
  7. Photoshop Shortcut To Copy Color Hex Value14
  8. Windows Of New York15
  9. So What Exactly Is UX Anyway?..16
  10. New Characters To Extend Your Superhero Collection17

1. CSS Icon Stacks

If you worked with PNG sprites for a while, you probably experienced a sense of relief when you first played around with SVG or icon fonts. The latter provide a couple of interesting features that you don’t have with “classic” vector graphics. With icon fonts you can define custom ligatures and assign any combination of characters to an icon glyph — e.g. to embed scalable logos into your Web font. In fact, you can do more than that. What about building modular, complex, stacked, multi-colored icons?

CSS Icon Stacks

Conor Muirhead was struggling with a solution for displaying multi-colored icons using Web fonts. So he came up with a nice little technique that he calls Icon Stacks. Split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a “mega-icon.” And if you’d like to add a little bit more depth or polish to your mega-icons, just use CSS gradients and the background-clip property to pop things up a bit. Simple, right? A clever technique that might save some headaches and time in your next project. (vf)

2. What Are Your Biggest Failures?

While we love discussing our success stories and the mysterious paths that lead us to happy accidents and important achievements, we tend to avoid talking about our failures and biggest mistakes. However, usually it’s the times when we fail miserably and have to start over when we are truly getting better at what we do.

What Are Your Biggest Failures?18

In his blog, the designer Ben Krogh started a fantastic series of interviews about failures19 and mistakes designers made in their careers. Interviews go into detail examining the reasons behind and the consequences of failures and what designers learned from them. An insightful series of articles, worth reading, bookmarking and learning from. (vf)

3. Building An Automatic Table Of Contents

Tables of contents aren’t a must, but having one on a content-heavy page can be quite beneficial as users can quickly jump to their desired section. Of course you can also build your table of contents manually, but doing it dynamically on-the-fly with JavaScript can save quite some time. Of course, building a dynamic table of contents isn’t that difficult and Chris Coyier has published a detailed tutorial20 on how to build it.

Building An Automatic Table Of Contents21

Since an automatically created table of contents isn’t subject to authoring errors, it is more reliable, and, written once, JavaScript can create one on every page you like. The tutorial walks you through the six easy steps it takes to build your own. A nice and really simple solution. (cm)

4. Adaptive SVG Illustrations With CSS

Responsive design is usually associated with fluid images, adjusted navigation patterns and layout shifts. However, what if we applied responsive design techniques in places where they aren’t usually used — e.g. when working with SVG illustrations?

Adaptive SVG Illustrations With CSS22

Because SVG is XML-based, the same CSS attributes that we use to style HTML pages can also be used to style SVG files. So we can apply an id attribute to SVG elements (e.g. svg id="flourish" and customize their appearance using an id or class selector. And if we apply a media query, we can easily create adaptive SVG illustrations. In his blog, Dudley Storey explains how to create adaptive SVG illustrations23 and embed them in a responsive design. Another way to break out of the boxes of thinking that we are all sometimes used to.

If you’d like to learn more about SVG and its (great) browser support, make sure to check Chris Coyier’s article on Using SVG24. (vf)

5. CSS3 For Responsive Web Design: Workshop With Andy Clarke

It’s always useful to see how our colleagues — professional designers and developers — work and think and what we can learn from their design processes to improve our own design workflow. What sounds fantastic in theory, doesn’t necessarily work in real-life projects, and this is why it’s great to get practical insights into work done by well-respected professionals.

CSS3 For Responsive Web Design — Workshop With Andy Clarke

That’s why we invited Andy Clarke, author, speaker, designer and the creative mind behind Stuff and Nonsense25, to host a brand new full-day workshop in our hometown Freiburg, Germany. Andy will explain how you can use Flexbox and display: table to rearrange content, make the most of tiny bitmaps with border images and improve Web typography in your designs. The workshop will be held on June 25th 2013. The number of seats is limited, so make sure to grab your ticket now!. We’d love to meet you! (vf)

6. Free PSD: Corporate Identity Mock-Up Set

We live in a world of brands and logos. Everything requires its own identity, and creating a memorable and recognizable corporate identity (CI) is often an essential part of any design project. However, when it comes to presenting a newly designed CI to clients, how would you present a brand? As a vector graphic or as a print-out? Wouldn’t it be helpful to have a complete mock-up set of the various assets that the CI could be displayed on — e.g. CDs, pencils, letterhead, calendars or bags — to give the client a better idea of how the logo would feel in various settings and environments?

Free PSD: Corporate Identity Mock-Up Set26

Well, the creative minds behind blugraphic did just that. They released a Photoshop PSD freebie which you can use to present your CI designs to your clients or in your design portfolio: Corporate Identity Photoshop Mock-Up27. The free mock-up consists of those assets which are typically used to display and promote a brand: office utensils, letterhead, business cards, CD cases, etc.

All elements are build with vector shapes, which means that you can easily resize them without losing quality. You can also change the proportions of everything to fit the sizes of your identity elements. (ea)

7. Photoshop Shortcut To Copy Color Hex Value

Have you ever wondered if there’s a shortcut to copy the hex color value of a color selected in Photoshop using the eye dropper tool? The same question was bothering Noah Stokes28, so he asked on Twitter. Sean McCabe29 came up with a handy little tip: You can set a keyboard shortcut to copy a color’s hex value.

Photoshop Shortcut To Copy Color Hex Value30

Just select a color with the eye dropper, switch to your code editor and paste the hex value into your CSS. To make things even easier, you can assign this feature to one of your function keys and have it at your fingertips whenever you need it. Looking for yet another alternative? Dries Delaey31 noted that a simple right click on a color with the eye dropper, which copies the hex value, also does the job. (cm)

8. Windows Of New York

Windows are the eyes of a city: they watch people walking, the rush hours of traffic, the movements of nature, life. Sometimes we just pass by them without really attempting to see the details which make them so unique.

Windows Of New York32

Graphic Designer Jose Guizar noticed the beauty of the Windows of New York33 and had an idea: to illustrate them and categorize them by their neighborhoods. Take a look at his project and you will observe the nuances of the architectural style present in the Big Apple. (tts)

9. So What Exactly Is UX Anyway?..

Everybody is talking about UX, UI, IA, intuitive interfaces and easy-to-use products, but do we and our clients have a common shared vocabulary about what these terms actually mean? To get you well prepared for your next conversation about UX-related issues, UX Apprentice34 has broken down this vast territory to the absolute basics, explaining the process of UX design by exploring its three layers: Discovery, Strategy and Design.

So What Exactly Is UX Anyway?..35

After learning about the core principles, you will see them being put into practice in real-life examples. A little quiz puts your newly aquired knowledge to the test. And in case you want to learn even more, Theresa Neil, the author of the resource, has put together lists of further resources like books, blogs and links to advanced UX topics for you to explore. The topics covered include an entire UX process from customer research to storyboarding, prototyping and testing to the final launch — the basics every designer should understand. (cm)

10. New Characters To Extend Your Superhero Collection

We all love our good ol’ superheros like Batman or Catwoman, but we have to admit that this set can become quite limited over time. Everett Downing is just in time to save our bored minds by presenting us hundreds of new characters36 to love. The animator draws at Pixar and decided that his New Year’s resolution for 2010 would be to draw one new superhero each day for one year. He didn’t quite manage to finish in the same year but has picked up the challenge again to complete the set of 365 characters.

New Characters To Extend Your Superhero Collection37

When beginning with a character, he starts first with the name. A name is either cool, comes from a pun or is made up of a word play. From there, he creates the rest. He also sets a deadline and only spends one hour on each drawing. Those simple rules set boundaries for infinite creative possibilities and to define the working process — a perfect example of how to create an efficient workflow. (ml)

The authors in this newsletter are: Cosima Mielke (cm), Esther Arends (ea), Talita Telma Stöckle (tts), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8 #a1
  9. 9 #a2
  10. 10 #a3
  11. 11 #a4
  12. 12 #a5
  13. 13 #a6
  14. 14 #a7
  15. 15 #a8
  16. 16 #a9
  17. 17 #a10
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 1

    Another SMASHING issue! I have loved every one of these. You are bringing fresh ideas and this issue especially about breaking up the status quo has been just wonderful! Thank you all so much.


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