Smashing Newsletter: Issue #13
This newsletter issue was sent out to 35,395 newsletter subscribers on July 20th 2010.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.
Table of Contents
01. Note and Point: Keynote and PowerPoint Gallery2
02. Free Icon Set for Web Design and Software3
03. ManyBooks: Repository of Free E-Books4
04. Crack It Open5
05. Fine Tune Paragraph Endings With CSS6
06. Which Loads Faster?7
07. Vintage Logos8
08. Quick and Dirty Forms Generator9
Creative types are able to leave their mark on just about everything they touch, often transforming off-putting specs into a work of art. For example, mere mortals might underestimate the artistic potential of formal presentations, but you and I know that they can be a great support to let the imagination run free. Indeed, what is better than using a blank page and defined content to polish our design skills?
The drawback is that these awesome presentations are made for clients and so usually don’t reach a wide audience. Fortunately, Note and Point11, a website that collects this work, might well change that. This gallery highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — will surprise you by the attention given to color, illustrations and typography. (jb)
Beautiful free icon sets always come in handy. Ömer Çetin’s PixeloPhilia 212 icon set offers 44 free PNG icons that could be a perfect fit for a Web or user interface design in an online or desktop application. The set contains both general icons (address book, map, mail, download, target) and rather obscure ones (comic book, license, mug, USB), all in a resolution of 32×32 pixels.
The icons might be perfect for communicating navigation options or quickly illustrating the purpose of a page block. The set was released under a Creative Commons license. (vf)
Buying e-books to use on various e-reader platforms can get just as expensive as buying hard copies, especially if you’re a voracious reader. And while websites like Project Gutenberg offer free e-books of texts that are in the public domain, the formats available are limited, which means you have to spend time converting them.
ManyBooks15 offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice16, as well as newer books such as The Gospel of the Knife17, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function. (cc)
Sharing files with other Web workers around the globe sometimes makes you feel like you’re staring at a can of tasty food but can’t find a can opener. Just when you think you’re fully equipped, along comes a file extension you’ve never heard of. Don’t worry: no need to Google anymore. Check out OpenWith.org18. You’ll find a free program for just about everything you would ever need to open, including source code, data files, disc images, spreadsheets and video files.
All formats are categorized by existing file extensions and the corresponding name right next to it. A click on the name opens a page showing free programs that can open the extension. OpenWith is a comprehensive and useful resource. Give it a try, and crack open your can. (mm)
When typesetting, designers try to avoid leaving just one or a few words hanging on a line at the end of a paragraph. Doing so is considered poor typography because it leaves too much white space between paragraphs and interrupts the reader’s eye movement (see the example below). A simple typographic solution is to rework the line by adding indented paragraph endings. But the problem is particularly annoying when aligning a paragraph next to an image that exceeds the paragraph’s height.
Soh Tanaka has come up with a simple and quick solution to this problem with CSS21. Just add
overflow: hidden to the relevant
<p> tag, or wrap the paragraph with a container that has the attribute
overflow: hidden. Simple and useful. You’ll find examples of the problem and its solution on the demo page22. (vf)
With widespread broadband Internet access, page loading time has become less of an issue than it was 10 years ago, when the majority of users were still on dial-up. But that doesn’t mean we should disregard loading times entirely. To avoid visitor frustration, we should still make sure the loading times of our websites are comparable to those of similar websites.
Which loads faster?24 lets us see two websites load side by side in real time. Then it shows how long each took to load and the percentage difference. It’s a useful development tool — and comparing how competing (or feuding) websites rank in their loading times is fun. (cc)
Vintage is in. Today’s lifestyles are infused with vintage fashion, books, music instruments, furniture, toys and much more. But here we’re addicted to design, so let’s talk about vintage logos25. This Flickr collection showcases logos from a mid-’70s edition of the book “World of Logotypes.” The collection will especially appeal to those seeking inspiration or interested in advertising relics of the past.
The set will give you an appreciation of styles done decades ago, and many still look trendy, fresh and up to date. Logotypes, initials, monograms, icons, symbols — you can find every style of logo you’re looking for. Just don’t be disappointed if you discover that someone years ago has beaten you to a logo concept that you thought was original. (cs)
Faary27 is an online form builder. Granted, generators like this have been around a long time. But Faary is a bit different. It operates with the help of text lines, and the form is generated as such. The tool creates an HTML form with CSS, which can be downloaded as a ZIP archive.
Available components are a form header, email field, text area, radio buttons, check boxes, drop-down menu and button line. Styling is not available, but the whole thing is pretty easy to use and will save you time. A commercial option is available, too. A one-year membership gives you unlimited forms with PHP functions for $19.95. (sl)
The authors in this newsletter are: Sven Lennartz (sl), Vitaly Friedman (vf), Jessica Bordeau (jb), Manuela Müller (mm), Cameron Chapman (cc).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 http://noteandpoint.com/
- 11 http://noteandpoint.com/
- 12 http://omercetin.deviantart.com/art/PixeloPhilia2-166570194
- 13 http://omercetin.deviantart.com/art/PixeloPhilia2-166570194
- 14 http://manybooks.net/
- 15 http://manybooks.net/
- 16 http://manybooks.net/titles/austenjaetext98pandp12.html
- 17 http://manybooks.net/titles/shetterlywother07Gospel_of_the_Knife.html
- 18 http://www.openwith.org/
- 19 http://www.openwith.org/
- 20 http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
- 21 http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
- 22 http://www.sohtanaka.com/web-design/examples/quick-tip-overflow/
- 23 http://whichloadsfaster.com/
- 24 http://whichloadsfaster.com/
- 25 http://www.flickr.com/photos/mr_carl/sets/72157604144345854/
- 26 http://www.flickr.com/photos/mr_carl/sets/72157604144345854/
- 27 http://faary.com/
- 28 http://faary.com/