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 newsletter anytime.
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 solution. 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!
01. Learn How Things Might Work
02. With The Warp Speed Through Space: CSS3 Galaxy
03. The Stars Among The Chairs
04. Aleo: Sleek Free Font With Personality
05. The Grid Bookmarklet For Vertical Rhythm
06. The Perfect Shade Of Color
07. Going Back In Time: With Retro Vector Goodies
08. It Takes Only Five Words
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 infographics 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 Alphabet and what material it would be made of. (ml)
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 demo, 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 demos as well. Now, what about your next experiment in CSS? (vf)
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 Furniture 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)
Alessio Laio has designed a wonderful and versatile free font: Aleo Font Family. 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 Lato 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)
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 quite 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.
Gridwax 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)
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: HexColorTool.
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. HexColorTool 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 Blender by Eric Meyer. Time to improve your workflow, isn’t it? (cm)
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 Vectors, 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)
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 Words, 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).
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!
Every second Thursday we send out our lovely email newsletter with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Why don't you sign up, too, and get a free Smashing eBook as well?
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!
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
It's done. The Smashing Book #4, our brand new book with smart front-end techniques and design approaches. Written by respected designers and developers, neatly packed in a gorgeous hardcover.
Do you feel like your workflow is slowing you down? We might have just what you need. Our front-end, UX and RWD workshops in London, Zürich and Berlin. Read more...
Exciting things are happening and you should consider joining the talented staff at HIMSS as our Sr. Manager, Web Design & Online Standards as we are transforming…
Northeastern University Web Designer/Developer Requisition Number: STFR001261 Division/College: Marketing and Communications FT/PT: Full…