Smashing Newsletter: Issue #27
This newsletter issue was sent out to 49,539 newsletter subscribers on February 15th 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. Friends of Type2
02. Magical jQuery Layouts With Isotope3
03. Start an HTML5 Project in Seconds4
04. Climb Up Those Search Results5
05. Treesaver: Smart Design for eReading6
06. Death to Captchas7
07. 750 Words, Every Single Day8
08. tar Wars, Episode IV: Retold in Icons9
Friends of Type10 helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.
All the creative posts are mainly meant to log ideas and aid you with daily inspiration. The posts are sketches and ideas around visualized language: a habit born out of the real-time collaboration among type artists. Don’t forget to drop by every last week of the month, when a guest designer is featured. (ik)
jQuery can be used not just to add some interactivity to a website, but also for more profound tasks such as building layouts. In fact, jQuery can add functionality (not to mention animation and user-friendliness) to your layouts that would be lacking with just CSS and HTML.
Isotope13 is a useful jQuery plug-in that enables you to create dynamic, intelligent layouts that can be rearranged dynamically. Items included in an Isotope layout can be sorted based on just about anything: be it filtering, sorting, infinite scroll and various layout modes. For instance, Isotope’s versatile layout engine can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height. Don’t forget to check out demos14. The plug-in was developed by David DeSandro. (cc)
Starting a new project always requires a bit of set-up and preliminary coding. And because some designers aren’t too familiar with HTML5’s specs yet, a new project can require a lot of cross-referencing to make sure everything is standards-compliant. This is especially true for projects with heavy demands (such as jQuery, special server configurations, etc.).
Don’t know the basics of SEO or how to optimize your website? Have you ever wondered how you made it into the top 20 search results on Google but not even the top 100 on Bing? SEOmoz’s “Beginner’s Guide to Search Engine Optimization (SEO)17” gives you an in-depth tutorial on how search engines work, and it covers the fundamental strategies for making websites search-engine friendly.
SEOmoz has put the free guide together to give designers and developers some insight into the magic of “being found.” The 10 chapters offer an introductory explanation of how search engines operate, how people interact with them and why one should optimize their website. There are four chapters on search-engine–friendly design and keyword research and on how usability, experience and content affect both ranking and link popularity.
The three last chapters give useful advice on tools and services, some myths and misconceptions about search engines and info on how to measure and track your success in optimization. You don’t necessarily need to hire an agency or professional to move up into those top 20 search results: a couple of hours’ time and a few simple steps might do the trick! (sp)
Columns, headlines, headings and images are automatically converted or adjusted to the device’s viewport. The framework is free for all uses and available under the MIT and GPLv2 licenses. You’ll find detailed documentation and a step-by-step walkthrough on how to use Treesaver. Notice that in order to develop and test Treesaver pages on your own machine, you must access them via a local server. (mm)
Many websites use Captchas to prevent spam. They’ve long been the standard to sort the spammers from real people on Web forms. But are Captchas really the best solution? The post “Death to Captchas21” by Tim Kadlec discusses the negatives of using the Captcha system and specifically why reCaptcha isn’t any better.
The article tackles Captchas from a usability and accessibility standpoint, arguing that putting the onus of spam prevention on the user is not fair and that spam should instead be dealt with strictly on the receiver’s end. He also discusses the effectiveness (or lack thereof) of Captchas for blocking spambots from submitting online forms. Do you and your colleagues agree? The article is a well-argued piece and is definitely worth keeping in mind. (cc)
750 Words23 is a well-known idea brought to life on a website for those of us who just can’t seem to get away from the keyboard and screen. The idea is that by starting the day writing out three pages of whatever is filling your mind, you will clear your mind for ideas to flow the rest of the day. You simply write. Anything and everything.
It’s personal, just as it should be. You can see some statistics on your progress, including fun little information, such as what emotion you might be feeling based on your entry for the day. And then there are those mysterious badges that pop up out of the blue. You can share your statistics with other users and earn points as you add to your 750 words every day. Now go tick-tick away on your keyboard. (sp)
Images can say more than words alone, and they can be a powerful tool for storytelling. Images engage and involve, they visualize data, and they condense large chunks of information in a compact and memorable way.
Star Wars is a legend. The story has been used for decades in a variety of ways: be it theatre performances or monochrome LEGO bricks, it still has a large and growing fan base. So while some fans are waiting for a new 3D version, there is now a convenient short form of the first part (which is the episode IV). And the best thing: it actually fits in this newsletter.
Wayne Dorrington’s Star Wars: Episode IV26 presents the whole story of Star Wars: Episode IV in… icons! Not a single word is used in the design. A nice example of vivid, creative and original artwork. It’s also just fun to remember a great movie this way. (sl), (vf)
The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Iris Kopic (ik), Stephan Poppe (sp), 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://friendsoftype.com/
- 11 http://friendsoftype.com/
- 12 http://isotope.metafizzy.co/
- 13 http://isotope.metafizzy.co/
- 14 http://isotope.metafizzy.co/
- 15 http://initializr.com/
- 16 http://initializr.com/
- 17 http://guides.seomoz.org/beginners-guide-to-search-engine-optimization/
- 18 http://guides.seomoz.org/beginners-guide-to-search-engine-optimization/
- 19 http://treesaver.net/
- 20 http://demo.nomadeditions.com/real-eats/
- 21 http://timkadlec.com/2011/01/death-to-captchas/
- 22 http://timkadlec.com/2011/01/death-to-captchas/
- 23 http://750words.com/
- 24 http://750words.com/
- 25 http://9gag.com/gag/75939/
- 26 http://www.waynedorrington.blogspot.com/