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
- The Current State of HTML5 Forms2
- Unobtrusive Grids for Designers3
- Painless CSS Prefixes4
- The Art of Hand Lettering5
- Moshik Nadav’s Typography6
- Comprehensive Overview of Coding Standards7
- Automatic Placeholder Images8
- Quotevadis: Inspiring and Interesting Quotes9
1. The Current State of HTML5 Forms
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)
2. Unobtrusive Grids for Designers
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)
3. Painless CSS Prefixes
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 CSSPrefixer 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)
4. The Art of Hand Lettering
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 Lettering15 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 artwork16 for Max Goldt’s album L’Eglise des Crocodiles. (ks)
5. Moshik Nadav’s Typography
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 designs that he exhibits on his website and that are worth checking out.
Nadav’s portfolio17 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)
6. Comprehensive Overview of Coding Standards
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.
Isobar19 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)
7. Automatic Placeholder Images
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 Flickholdr21 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)
8. Quotevadis: Inspiring and Interesting Quotes
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.
Quotevadis23 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 https://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://custom-lettering.blogspot.com
- 15 http://custom-lettering.blogspot.com/
- 16 http://www.youtube.com/watch?v=O5wOu9diXr0
- 17 http://www.moshik.net
- 18 http://na.isobar.com/standards/
- 19 http://na.isobar.com/standards/
- 20 http://flickholdr.com
- 21 http://flickholdr.com/
- 22 http://quotevadis.com/
- 23 http://quotevadis.com/
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 Oxford, on March 15—16, with smart design patterns and front-end techniques.