Issue #83 | Tuesday, April 30th 2013 | 141,533 subscribers | Previous issues
Dear Friends,
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="snell-invoice-may13">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. snell-invoice-may13.pdf.
The support for the download attribute 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 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
09. Smashing Highlights (From Archives)
10. New on Smashing Job Board
11. Recent Articles On Smashing Magazine
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 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)
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 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)
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 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)
4. Aleo: Sleek Free Font With Personality
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)
Advertisement
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 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)
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: 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! (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 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)
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 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)
9. Smashing Highlights (From Archives)
-
Useful Typography Tips For Adobe Illustrator
Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds.
-
Five Useful Interactive CSS/jQuery Techniques Deconstructed
With the wide variety of CSS3 and JavaScript techniques available today, it's easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we'll walk through five interactive techniques that you can start using right now.
-
Elements Of A Viral Launch Page
In this article, we'll outline some best practices and examples of successful viral launch pages. Let's define a viral launch page not only as a "Coming soon" landing page, but also as a usable beta page or even in some cases a finished product page.
10. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Front End Web Developer/Designer at Sifteo, Inc. (San Francisco, CA)
Sifteo, a venture-backed start-up creating a next-generation game system for families (Sifteo Cubes), is seeking a visual designer with front-end web development chops to join our small-but-mighty marketing team. We like generalists here at Sifteo, and this position is no exception. This is a "do both" role.
-
Interaction Designer at oDesk (Redwood City, CA)
oDesk is looking for a thoughtful Interaction Designer to join our quirky, fun-loving UX team. You'll be a valued collaborator in our work to research, envision, design and help build a kick-ass user experience for our global user community. You're an excellent communicator with a strong design sense, a technical background, and the ability to effectively present and advocate for your ideas.
-
Web & Mobile Designer at Clarimont (Brisbane, Australia)
We're now looking to add a new member to our team that is passionate about creating cutting edge user experiences. While this is initially a contract role, we would be looking to transition the suitable candidate to a full time position.
11. Recent Articles On Smashing Magazine
