Smashing Newsletter: Issue #83

This newsletter issue was sent out to 141,530 newsletter subscribers on Tuesday, April 30th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

You know how it feels when somebody makes you do stuff that you don’t really want to do. Well, the same thing happens in the browser when your patient visitors realize that clicking on a harmless link has just prompted their browser to download a 50 MB PDF file on their limited and shaky EDGE connection. Of course, what we as designers should do in these situations is to indicate that the link is a PDF download and provide instructions on how users can download the file if they want to — “Right click and save as,” that is. But is it really an optimal solution? Can we do better than this?

Right click and save as2

Yes, Jonathan Svärdén has a better solution3. We can use the HTML5 download attribute to make it clear to the browser that the file shouldn’t be displayed, but should instead only be downloaded: <a href="9fd-f32ff322.pdf" download="steven-snell-invoice-may12">Download file</a>. In fact, if you’re serving up a dynamically generated file with a randomly generated filenames like 9fd-f32ff322.pdf, the markup will tell the browser to name the file appropriately, i.e. steven-snell-invoice-may12.pdf.

The support for the download property is still quite limited — with Chrome and Firefox 20+ supporting it, and Jonathan provides a couple of fixes and workarounds for this. However, since the feature is an add-on for capable browsers and doesn’t have any drawbacks, we can and should start using it right away. Your users might really appreciate it!

— Vitaly

Table of Contents

01. Learn How Things Might Work4
02. With The Warp Speed Through Space: CSS3 Galaxy5
03. The Stars Among The Chairs6
04. Aleo: Sleek Free Font With Personality7
05. The Grid Bookmarklet For Vertical Rhythm8
06. The Perfect Shade Of Color9
07. Going Back In Time: With Retro Vector Goodies10
08. It Takes Only Five Words11

121. Learn How Things Might Work

Have you ever wondered how the devices that you use every day work? Such as your everyday companion, your mobile phone, the coffee cup that provides you with the fresh goodness of caffeine throughout the day or the toaster that delivers your favorite breakfast foundation in the morning? Jing Zhang has put together some nice Imaginary Factory infographics13 that explain how things might be made, with some interesting insights into your everyday products.

Learn How Things Might Work14

A similar idea came to Matt Stephens, who has a passion for both type and automotive manuals. Stephens took apart the pieces of his favorite typefaces and displayed them like furniture in a construction manual. They even include drill holes and screws. See how your favorite letter would be constructed in the Exploded Alphabet15 and what material it would be made of. (ml)

162. With The Warp Speed Through Space: CSS3 Galaxy

You know the drill: when it comes to CSS3, there is some really good practical stuff out there, as well as some pretty nifty eye-candy demos which are hardly useful in practice at all. Still, sometimes these demos challenge what we can do with CSS today, and by pushing the boundaries they prompt us to take a different perspective on what we usually do with our humble stylesheets.

With The Warp Speed Through Space: CSS3 Galaxy17

Noah Blon has put together a Hyperspace CSS3 demo18, an infinite exploration of space, implemented using a background image, a couple of transforms, perspective origins and animations. The visual effect is astonishing, and works pretty well with CSS gradients as well. Now, this must have taken quite some time and experimentation. If you’re looking for more CSS experiments, make sure to check Blon’s other demos19 as well. Now, what about your next experiment in CSS? (vf)

203. The Stars Among The Chairs

Doesn’t every designer’s home or workplace need at least one special piece of furniture? Even if you are not a designer — fine furniture makes fine people… So, how about a new chair? Need some inspiration? Iconic Furniture21 lets you look at some of the most iconic furniture pieces of the past century. Imagine having some of these at home or in the office! Wouldn’t it be fancy to offer your client a seat in the coconut chair?

The Stars Among The Chairs22

The coconut chair got its name from its distinctive shape resembling a coconut cut into eight pieces. It was designed by George Nelson and George Mulhauser — two of the most important designers of the last century.

Iconic Furniture is worth a visit, but not only for the pieces it showcases. The elegant way in which the website lets you scroll from one chair to the next makes this guide a beautiful masterpiece in itself. (ea)

234. Aleo: Sleek Free Font With Personality

Alessio Laio has designed a wonderful and versatile free font: Aleo Font Family24. This contemporary typeface comes with a sleek overall look, giving it an unobtrusive yet strong personality. It’s distinguished by its semi-rounded details. Does Aleo look familiar to you? Could be. It was designed as the slab serif partner to Łukasz Dziedzic’s Lato25 font (which is freely available as well). Aleo comes in three weights (light, regular and bold), each accompanied by corresponding true italics. Ligatures ensure an improved reading flow and diacritics support multi-language use.

Aleo: Sleek Free Font With Personality26

As Aleo is released unter the SIL Open Font License, it is free for both personal and commercial use. If you want to show your appreciation for this well-crafted typeface, you can make a donation to the designer. So, do you already have in mind what you could use Aleo for? (cm)

275. The Grid Bookmarklet For Vertical Rhythm

If you tend to develop your websites in the browser, it’s often handy to have a grid overlay that can inform your design decisions as you iterate your designs. And in fact, there are quite28 a few29 tools30 out there, but only a few of them allow you to adjust vertical spacing and offset on the fly, as you code.

The Grid Bookmarklet For Vertical Rhythm31

Gridwax32 is a browser bookmarklet that you can drag into your bookmarks toolbar and activate to overlay the current page. To adjust vertical spacing, just press Shift + DownArrow/UpArrow, and for the offset Shift + LeftArrow/RightArrow. Easy. Another helpful tool to make the design process in the browser just a tiny bit easier! (vf)

336. The Perfect Shade Of Color

You found almost the perfect hex color value for your design, but you want the shade to be a tad lighter or darker? So what do you usually do? Probably open Photoshop and start dragging the color picker until you have found your desired tone. Web designer and developer Dennis Leblanc has created a much more convenient way to do this: HexColorTool3634.

The Perfect Shade Of Color35

All you have to do is enter the six-digit hex value of your color and choose whether the tool should find lighter or darker hues of it. HexColorTool3634 lets you select a percentage range between 0 and 20%. And the best thing: you don’t have to install anything, as you can access the tool from any browser. It is even responsive. Alternatively you can use the good old Color Blender37 by Eric Meyer. Time to improve your workflow, isn’t it? (cm)

387. Going Back In Time: With Retro Vector Goodies

Remember the ’80s, when commercials were crazy and cell phones gigantic? People spent their Saturday afternoons in the arcade or in front of their home gaming systems. The ’80s were like living in the future, and so were the designs of the time. If you’re into graphic design elements from this or other past eras, you must check out Retro Vectors39, a great source of vintage vector goodies from the good ol’ times — 1880s to the 1980s.

Going Back In Time: With Retro Vector Goodies40

Besides futuristic gaming and computer design, you’ll find Gothic-style ornaments from the Victorian era, as well as small ad clipart from the ’50s and ’60s — the golden age of advertising. Original materials that have fallen out of copyright have been scanned at the highest resolution possible. The content includes graphics from 100-year-old newspapers and other printed materials such as shop catalogs, calling cards and posters. All files are free to use for commercial or personal work. (ea)

418. It Takes Only Five Words

Every once in a while we need some words of motivation to keep us going, to lift our mood or simply to provide us with some inspiration. Often it takes just a little quote to put a smile on our faces. On their website Five Words42, Australian design duo Skye Dwyer and Melissa Lee provide a new inspiring message every day, each one nicely packed into a unique typographic work of art. What’s special about the more than 700 designs is that they all consist of exactly five words — no more no less.

It Takes Only Five Words43

Clicking through the pages feels like sitting in front of a pile of fortune cookies, slowly cracking one at a time, always wondering what comes next. A wonderful place to forget time. For typography aficionados and word lovers alike. (cm)

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

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://svarden.se/blog/2013-04-22-right-click-and-save-as/
  3. 3 http://svarden.se/blog/2013-04-22-right-click-and-save-as/
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12 #
  13. 13 http://www.behance.net/gallery/Imaginary-Factory/8067551
  14. 14 http://www.behance.net/gallery/The-Exploded-Alphabet-Series-1/7957591
  15. 15 http://www.behance.net/gallery/The-Exploded-Alphabet-Series-1/7957591
  16. 16 #
  17. 17 http://codepen.io/noahblon/full/GKflw
  18. 18 http://codepen.io/noahblon/pen/GKflw
  19. 19 http://codepen.io/noahblon/
  20. 20 #
  21. 21 http://iconic-furniture.com/
  22. 22 http://iconic-furniture.com/
  23. 23 #
  24. 24 http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673
  25. 25 http://www.fontsquirrel.com/fonts/lato
  26. 26 http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673
  27. 27 #
  28. 28 http://hashgrid.com/
  29. 29 https://github.com/sfcgeorge/Grid-Bookmarklet
  30. 30 http://daneden.me/baseline/
  31. 31 http://gridwax.gs/
  32. 32 http://gridwax.gs/
  33. 33 #
  34. 34 http://hexcolortool.com/
  35. 35 http://hexcolortool.com/
  36. 36 http://hexcolortool.com/
  37. 37 http://meyerweb.com/eric/tools/color-blend/
  38. 38 #
  39. 39 http://retrovectors.com/
  40. 40 http://retrovectors.com/
  41. 41 #
  42. 42 http://www.five-words.com.au
  43. 43 http://www.five-words.com.au/

The Smashing Newsletter Team 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!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    This issue was Amazing! That font is just what I was looking for, and two new tools as well? I’m freakin’ out over here!

  2. 2

    Dana Oira Toribio

    April 30, 2013 5:48 pm

    We’re launching a fully-responsive HTML5 interactive site and Gridwax might help with tightening up the responsiveness details!

  3. 3

    About CSS3 experiments… Here’s mine :-)

    A 3D Dojo http://netizen.ws

    Pure CSS3/HTML5, no JavaScript was used on the website!

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