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?
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.
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!
Table of Contents
- Learn How Things Might Work4
- With The Warp Speed Through Space: CSS3 Galaxy5
- The Stars Among The Chairs6
- Aleo: Sleek Free Font With Personality7
- The Grid Bookmarklet For Vertical Rhythm8
- The Perfect Shade Of Color9
- Going Back In Time: With Retro Vector Goodies10
- It Takes Only Five Words11
1. 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 infographics12 that explain how things might be made, with some interesting insights into your everyday products.
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 Alphabet14 and what material it would be made of. (ml)
2. 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.
Noah Blon has put together a Hyperspace CSS3 demo16, 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 demos17 as well. Now, what about your next experiment in CSS? (vf)
3. 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 Furniture18 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 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)
4. Aleo: Sleek Free Font With Personality
Alessio Laio has designed a wonderful and versatile free font: Aleo Font Family20. 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 Lato21 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.
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)
5. 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 quite23 a few tools out there, but only a few of them allow you to adjust vertical spacing and offset on the fly, as you code.
Gridwax25 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)
6. 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: HexColorTool2826.
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. HexColorTool2826 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 Blender29 by Eric Meyer. Time to improve your workflow, isn’t it? (cm)
7. 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 Vectors30, a great source of vintage vector goodies from the good ol’ times — 1880s to the 1980s.
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)
8. 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 Words32, 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.
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).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://svarden.se/blog/2013-04-22-right-click-and-save-as/
- 3 http://svarden.se/blog/2013-04-22-right-click-and-save-as/
- 4 #a1
- 5 #a2
- 6 #a3
- 7 #a4
- 8 #a5
- 9 #a6
- 10 #a7
- 11 #a8
- 12 http://www.behance.net/gallery/Imaginary-Factory/8067551
- 13 http://www.behance.net/gallery/The-Exploded-Alphabet-Series-1/7957591
- 14 http://www.behance.net/gallery/The-Exploded-Alphabet-Series-1/7957591
- 15 http://codepen.io/noahblon/full/GKflw
- 16 http://codepen.io/noahblon/pen/GKflw
- 17 http://codepen.io/noahblon/
- 18 http://iconic-furniture.com/
- 19 http://iconic-furniture.com/
- 20 http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673
- 21 http://www.fontsquirrel.com/fonts/lato
- 22 http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673
- 23 http://hashgrid.com/
- 24 http://gridwax.gs/
- 25 http://gridwax.gs/
- 26 http://hexcolortool.com/
- 27 http://hexcolortool.com/
- 28 http://hexcolortool.com/
- 29 http://meyerweb.com/eric/tools/color-blend/
- 30 http://retrovectors.com/
- 31 http://retrovectors.com/
- 32 http://www.five-words.com.au
- 33 http://www.five-words.com.au/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.