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 #97

This newsletter issue was sent out to 168,798 newsletter subscribers on Tuesday, November 19th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Time passes quickly, and another year is soon coming to an end. We’re immensely proud and happy of everything we have achieved this year, and eagerly look forward to the official release of the Smashing Book #442 next week. As we’re known to be big fans of adding icing on the cake, we’ve prepared something quite extraordinary for you.

The Smashing Book #442 is on its way — it’s only a matter of days!

Have you marked the 26th of November on your calendar yet? A mystery will be waiting for you on the Smashing Magazine front page this upcoming Tuesday at 14:00 CET. The first dozen of readers to try their luck and solve the mystery will win very special and unique prizes. Make sure you don’t miss out! ;-)

Cheerio everyone, and keep an eye open for hints!
Iris (@smash_it_on)

Table of Contents

  1. Dashed, Animated CSS Background5
  2. Happy Fox, A Free Font6
  3. When Intuition Just Isn’t Good Enough7
  4. Free Quality Photos: Use As You Please8
  5. Clean Up Your Photoshop Swatches And Styles9
  6. Making Website Testing More Efficient10
  7. Color Scheme Repository For Google Maps11
  8. Web Services (Not) In Control12
  9. Exploring How Writing Works13
  10. Encoding: How To Get It Just Right14
  11. The Cubicle Is Dead: Rethinking Workspaces15
  12. Life Is Like Riding A Bicycle…16
  13. Draw Me A Typographic Iceberg17
  14. Keep Calm… And Attend A Smashing Workshop!18

1. Dashed, Animated CSS Background

If you are into shadows, dashes, animations and CSS, today is probably going to be the best day of your life. Well, what if you combine them all to produce a nice visual effect for type on your website? Well, that’s what Lucas Bebber did.

Dashed, Animated CSS Background19

The result is a Sass/Compass mix20 in which you can define foreground, background and shadow colors, distance of the shadow, the cut distance as well as the size, ratio and angle of strips being displayed in the shadow — and you can animate it all, too. Lucas used :before and :after pseudo-elements, a linear gradient and background-size for stripes alone. It’s a good idea to replace pt definition in type size with ems though. Funky! (vf)

2. Happy Fox, A Free Font

Even if you don’t happen to be a huge typography fan, we’re sure you’ll love Fran’s and Laura’s Happy Fox21 typeface. It’s a thin font with hand-drawn and condensed shapes.

Happy Fox, A Free Font22

Happy Fox is their first typeface project, and they’re quite proud of it. You can download it and spread the word with a tweet or post about it on your blog. Psst, there’s also another goodie hidden inside the download folder — check it out! (il)

3. When Intuition Just Isn’t Good Enough

You can’t always trust your intuition, and you don’t have to reinvent the wheel all the time. If you’d like to set up a good typographic hierarchy for headings and body copy on your website, you can use one of the tested and proven scales out of the box.

When Intuition Just Isn't Good Enough23

Type Scale24 provides a quick visual reference for choosing the proper scale. Derived from Tim Brown’s Modular Scale calculator25, it lets you select a scale and preview it right away. Basically, you just need to enter the base font-size for your body content (16px works), examine the em values that the tool outputs and choose the ones that work best. No guesswork necessary! (vf)

4. Free Quality Photos: Use As You Please

When was the last time you felt inspired by generic, random stock photos? Stock photos are actually quite easy to spot, and usually look alienated, unfit or plain ridiculous. With Gratisography26, Ryan McGuire has decided to provide free high-resolution pictures which are freely available for personal and commercial projects.

Free Quality Photos: Use As You Please27

While admittedly some pictures do look like stock photos, most pictures are unique in their own right, shot professionally from unique angles. All of the pictures have been captured by Ryan McGuire himself, with new ones being added to the gallery every week. Definitely worth bookmarking! (vf)

5. Clean Up Your Photoshop Swatches And Styles

Photoshop has many features and default styles as well as swatches that can empower us and invite new users to play and explore the endless possibilities. However, if you’re an experienced designer, chances are high that the pile of defaults has cluttered up your work environment and has eventually slowed you down. Instead of copying and pasting styles and colours, you might find it more efficient to clear out any defaults and build custom palettes to you current project instead.

Clean Up Your Photoshop Swatches And Styles

Selecting color and styles individually and deleting them is tedious work. Luckily, Mindy Wagner provides a time-efficient solution for this. She has created two empty palettes for you to download. Simply replace the swatches and styles defaults with these empty palettes and you’ll have a blank toolbox that can be filled with your very own custom styles. If you want to learn more about creating you own portable design toolkit, check out Martin Gittin’s article28. (ml)

6. Making Website Testing More Efficient

You know the drill: building responsive websites involves a lot of testing and making adjustments — sometimes a pretty tedious cycle. However, the right tools can help to make your testing workflow a lot more efficient. One of these little helpers is browser-sync29. Developed by Shane Osbourne, the command-line tool keeps multiple browsers and devices in sync — just as the name implies.

Making Website Testing More Efficient30

Browser-sync comes with some really nice features. It does not only make your browsers follow your clicks, but also reloads live, and watches your CSS files and injects them when they change. It even serves static files, and copies data to all of your browsers when you fill out a form once. Sounds good, doesn’t it? (cm)

7. Color Scheme Repository For Google Maps

Google Maps is a great tool to visualize locations and directions, but there is one downside that can’t be denied. Unfortunately, the visual appearance doesn’t really blend well into most website designs. Well, at least it hasn’t until now. The team behind Snazzy Maps31 decided to give back a little something to the Web community by releasing a repository of color schemes for Google Maps.

Color Scheme Repository For Google Maps32

Each map theme comes with a JavaScript style array and the exact code you need to customize your very own map. With styles ranging from pale colors to bright retro tones and grayscales, you can help to make the selection even larger by submitting your own themes. By the way, the styles are licensed under Creative Commons and thus are free to use. Really handy for your next project! (cm)

8. Web Services (Not) In Control

Kelly Slater once said, “Surfing is like the mafia. Once you’re in — you’re in. There’s no getting out.” But did you ever think that getting out of a Web service could be as difficult as getting out of surfing? Guess what, it can! Registering to services like Skype, Picasa or Netflix is mostly very easy, but deleting your account can be very difficult and sometimes even requires you to contact customer service. Hmm, dark patterns!

Web Services (Not) In Control33

Luckily, two guys have switched on the lights and have created Just Delete Me34 — a directory of direct links to delete your account from particular Web services. At present, 300 services are listed. All links are marked as either easy, medium, hard or impossible to indicate the difficulty level. You not only get the direct URL to delete your account, but in most cases also additional information on how to completely remove it. On top of that, Just Delete Me offers you a very smart Google Chrome Extension and a Fake Identity Generator. A big Thank You to Robb35 and Ed36 — well done, guys! (ea)

9. Exploring How Writing Works

On the Web, writing, editing and publishing has become an almost ubiquitous activity. Everybody has to prepare, manage and “meet” content at some point. Yet, while we’ve recently started discussing Content Management Systems37 more than ever, not enough attention is paid to actual content “production”, i.e. writing.

Exploring How Writing Works38

Editorially’s STET39 (which stands for Let It Stand) aims to fill this gap and encourage more discussions between writers and editors. It’s a writers’ journal on culture and technology which pairs good writing with notes that explain what makes writing so good. Each article is thoroughly designed, copyedited and presented, with contributions ranging from technical to design topics. A good journal with brilliant content to give copy the attention it deserves. (vf)

10. Encoding: How To Get It Just Right

The issues of encoding have been identified ten years ago, and so have the solutions for getting it just right. Nevertheless, common editors still save in ASCII by default, many Web developers still don’t know about character encoding and the Internet is still full of websites showing garbled text. Oli Studholme40 summarizes what is essential for building a Web page with bulletproof encoding.

Encoding: How To Get It Just Right41

The article mentions everything you need to know about browsers and text editors in regards to encoding. You’ll find out how to declare character encoding for Web servers, in HTML and CSS, as well as the necessary steps that you have to take when writing in HTML, JavaScript, MySQL, and for general programming. Don’t forget to check out the list of great resources on the topic! (ml)

11. The Cubicle Is Dead: Rethinking Workspaces

Where do you feel most creative? At a bustling coffeeshop, at a desk in an open space office, or lounging on a couch in some quiet corner? Everyone is different and so are our needs when it comes to workspaces. Luckily, companies have started to realize that our surroundings significantly influence creativity, and that sitting in a gray, inflexible cubicle from 9 to 5 isn’t the best motor for groundbreaking ideas. Young, dynamic startups were among the first to break with the outdated concepts of what an office typically looks like — and many companies have followed with fresh ideas. Want to sneak a peek behind closed doors?

The Cubicle Is Dead: Rethinking Workspaces42

Custom Spaces43 lets you browse through thousands of photos of unique office spaces, every single one of them bubbling over with ideas on how to make work more pleasant, and as a consequence, more productive. Delve into impressive lounge areas, quiet spaces, meeting rooms, play areas, and kitchens! A nice bonus feature: each office portfolio is accompanied by the contact data of interior designers and vendors that have helped bring it to life. But be warned, chances are high that you’ll get at least a bit jealous at the sight of half-pipes, fully-equipped bars and rooftop terraces. (cm)

12. Life Is Like Riding A Bicycle…

Now here’s a little something for all the athletes among you — well, cyclists, to be more precise. Neil Stevens strikes again with another fresh set of prints that celebrate the success of British Cycling44. Among the prints in the forthcoming series (soon to be available in Neil’s online shop) are the Mark Cavendish, Bradley Wiggins and the Velodrome designs.

Life Is Like Riding A Bicycle...45

These giclée prints will be printed on 315gsm uncoated paper and look good on any wall. One of our favorite quotes: “Life is like riding a bicycle. To keep your balance you must keep moving!” (il)

13. Draw Me A Typographic Iceberg

Imagine you receive a call from someone who asks you to draw a typographic iceberg. What would you say? You probably wouldn’t know how to answer, and end up saying, “Huh?” Or let’s say, Sesame Street calls you to draw hand-lettered quotes of Bert or Ernie. Well, we’ve come across someone out there who actually has received these kind of assignments, and what she makes of them is just too stunning and beautiful — we just had to share!

Draw Me A Typographic Iceberg46

Meet Mary Kate Mc Devitt47, a letterer and illustrator living and working in Brooklyn, NY, and lean back to dive into her colorful showcase of Hand Lettering & Illustration48 gallery. Mary doesn’t just display her work but also shares interesting bits of information behind every assignment and where she gets her inspiration from. If you take a closer look, you’ll also be able to figure out what an iceberg and a hermit have in common. (ea)

14. Keep Calm… And Attend A Smashing Workshop!

Do you feel like you’re just not advancing enough in your front- or back-end skills? Have you had a chance to check out our line-up of Smashing Workshops49 yet? With our full-day workshops in London, Berlin and Zurich, we encourage you to grab a seat and say goodbye to your programming woes. Now if one of these workshops don’t help you get better and smarter, what will?

Workshops in Zurich, CH

All workshops in Zurich →56

Workshops in Berlin, DE

More workshops in Berlin →66

Would you like us to organize workshops in your city? Is there a particular topic that you’d like to master? Let us know by getting in touch with us and we’ll be there before you know it!

The authors in this newsletter are: Iris Lješnjanin (il), Vitaly Friedman (vf), Shavaughn Haack (sh), Christiane Rosenberger (research) and Elja Friedman (tools).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  12. 12 #a8
  13. 13 #a9
  14. 14 #a10
  15. 15 #a11
  16. 16 #a12
  17. 17 #a13
  18. 18 #a14
  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
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66

↑ 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

    I clicked on the ‘ View the online version’ on top of the email I received and it took me to issue 91 instead. How can smashing magazine make such a schoolboy error? pfffbt.

  2. 2

    You seem to have forgotten to update the “View the online version” link in the email newsletter since issue 91. That’s where I ended up when I clicked on it.


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