Smashing Newsletter: Issue #30
This newsletter issue was sent out to 54,334 newsletter subscribers on March 29th 2011.
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. The Current State of HTML5 Forms2
02. Unobtrusive Grids for Designers3
03. Painless CSS Prefixes4
04. The Art of Hand Lettering5
05. Moshik Nadav’s Typography6
06. Comprehensive Overview of Coding Standards7
07. Automatic Placeholder Images8
08. Quotevadis: Inspiring and Interesting Quotes9
HTML5 has many new features intended to make the process of creating websites easier and to improve people’s experience in using those websites. Among the features are many enhancements to Web forms. Because HTML5 is fairly new and not all of its features have been worked out yet, not every browser supports HTML5 features the same way.
On Wufoo’s HTML5 Forms website11, you can explore all of the new features to learn which browsers support which features and to what extent. The list of browsers includes various versions of Firefox, Safari, Chrome, Opera and Internet Explorer. Unfortunately, IE9 is far from wide HTML5 support in terms of HTML5 Forms. (tb)
Hand-crafting a grid for every project you tackle can get time-consuming. But because different projects have different requirements, it’s sometimes necessary, which leaves designers spending hours building or customizing the perfect grid for each website they design.
Susy13 simplifies all that. It’s a Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want. Notice: Susy runs on Compass and Sass, which run in the command line, so you will have to learn both. (cc)
Adding CSS prefixes for various browsers takes time; and many designers have to write the appropriate prefix for each, mostly for new CSS3 features. Not exactly a productive use of time. Sure, eventually you’ll have memorized them all, but it still usually means writing eight or ten lines of CSS code instead of two or three.
But if you’re using a Python framework, you can just use CSSPrefixer15 instead. Write your CSS code as you normally would, and let CSSPrefixer insert all of the necessary prefixes for various browsers. And then use the time you save for something that’s actually productive. (cc)
In this day and age of ubiquitous computer use, we have gotten used to the familiar typefaces that fill our environment. So, being exposed to something different every once in a while can be beneficial. Decorative lettering and ornate documents are regarded as a field exclusive to professionals who have practiced the art over years of training.
The Art of Hand Lettering17 is a blog by Alan Ariail, a commercial professional of over 25 years. He brings you a behind-the-scenes look at what it takes to create custom lettering, going through an intricate process that begins with the sketch pad and culminating in the finished piece of art. It is an intriguing illustration of a craft that many thought lost. And as a bonus, if you’re interested in hand lettering, have a look at the making of the cover artwork18 for Max Goldt’s album L’Eglise des Crocodiles. (ks)
Moshik Nadav’s true love is typography and typeface design. He sees typography as a distilled form of design. He is currently a fourth-year student in Jerusalem specializing in typography. Below is only one of the many great experimental type designs19 that he exhibits on his website and that are worth checking out.
Nadav’s portfolio21 is full of inspirational typographic artwork and creative projects. Especially interesting is his project “Playful Ampersand” which features hundreds of experimental designs of the traditional Ampersand sign. Moshik worked for two years as a graphic artist at a prominent advertising company in Israel and now works as a freelancer, practicing typography and typeface design. (ik)
Developing comprehensive standards and best practices for your company’s front-end coding projects can be time-consuming and intimidating. Without them, though, there’s a high probability that you’ll run into problems either with some parts of the code not playing nice with others or with redundancies that waste time and resources. And problems get compounded when a project changes hands and a new programmer has to figure out what the last one did.
Isobar23 has crafted an incredibly comprehensive set of coding standards that cover everything from SEO and accessibility to performance guidelines to testing and support. The best part is that Isobar has put it all up online in an easy-to-browse, well-organized format. Whether you need to craft guidelines for your company or are a developer working on other people’s projects, this set of guidelines is well worth reading, because it gives you a sense of the standards that some of the leaders in this industry hold themselves to. (cc)
When designing websites, how often do you need placeholder images until the client can get the final visuals to you? Or perhaps you’ve designed a theme and need some images for the demo. In any case, it’s easy to spend hours searching Flickr for images that work with the design and then resizing or otherwise modifying them to fit. It’s a huge waste of time in most cases because the images will never make it to the production website.
That’s why Flickholdr25 is so handy. Using simple-to-understand URLs, you can embed images at whatever size you need, with the tags you need, and even in black and white. Say you need an image of a cityscape that’s 300 × 300 pixels and in black and white. Just type in
http://flickholdr.com/300/300/cityscape/bw, and you’ll get an image that fits. Change the parameters in the URL to whatever you need (the structure is
flickholdr.com/width/height/tag,tag/bw), and you can add a
/1 for the latest image. It even includes a copyright watermark with the proper credit. Please make sure to always ask the photographers for permissions to use their work according to the licenses they provided. (cc)
Inspiration can come from all kinds of sources. Sometimes a source is visual; other times, it’s something we’ve overheard or read. And creatives are almost always looking for new and interesting sources of inspiration.
Quotevadis27 is a Tumblr blog that offers quotes from creative and intelligent individuals, both living and dead, on an almost-daily basis. Recent quotes have come from people as diverse as Jackson Pollock, Bertrand Russell, Charlie Sheen, Henry Ward Beecher and Patrick Geddes, among many others. An excellent replacement for the dusty old “about:blank” page in your browser. (cc)
The authors are: Iris Kopic (ik), Thomas Burkert (tb), Cameron Chapman (cc). Katrin Svana (ks).
- 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://wufoo.com/html5/
- 11 http://wufoo.com/html5/
- 12 http://susy.oddbird.net
- 13 http://susy.oddbird.net/
- 14 http://cssprefixer.appspot.com
- 15 http://cssprefixer.appspot.com/
- 16 http://custom-lettering.blogspot.com
- 17 http://custom-lettering.blogspot.com/
- 18 http://www.youtube.com/watch?v=O5wOu9diXr0
- 19 http://www.moshik.net/Playful-Ampersand-Experimental-Typography-Moshik-Nadav.aspx
- 20 http://www.moshik.net/Playful-Ampersand-Experimental-Typography-Moshik-Nadav.aspx
- 21 http://www.moshik.net
- 22 http://na.isobar.com/standards/
- 23 http://na.isobar.com/standards/
- 24 http://flickholdr.com
- 25 http://flickholdr.com/
- 26 http://quotevadis.com/
- 27 http://quotevadis.com/