Smashing Newsletter: Issue #39
This newsletter issue was sent out to 63,695 newsletter subscribers on August 2nd 2011.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.
Table of Contents
01. Join The Contrast Rebellion2
02. Tilt Firefox Extension: DOM Inspection In 3-D3
03. WebPutty: Advanced Real-Time CSS Editor4
04. Making Select Boxes Much More User-Friendly5
05. Better Additional Fields In WordPress Posts6
06. Don’t Fear The Internet7
07. Is Your Email Load A Social Liability?8
08. iABC: Every Letter Speaks For Itself9
09. 50 Things Every Creative Should Know10
10. Smashing Cartoon: “Exclusive” Social Network11
The Contrast Rebellion12 calls for support to, once and for all, get rid of low-contrast designs and unreadable text on the Web. The website features some prime examples of poor contrast, comparing them to websites whose designers actually paid attention to contrast.
Think of how many users a low-contrast website excludes: seniors with poor vision, users on old devices, people with small mobile screens, you name it. The page discusses why we tend to pay too much attention to aesthetics while neglecting readability and explains why “content does not equal illustration.” Commit to putting only high-contrast text on the Web, declare that low-contrast text is bad practice, and join the Contrast Rebellion! Let’s make this world a more readable place. (sp)
Unlike other DOM inspectors, Tilt allows for instant visual analysis of the relationship between various parts of the Web page, but it also makes it easy to see obscured and off-page elements. On request, developers can pull in further information on each node’s type, ID, class or attribute, providing a way to inspect (and edit) the inner HTML and other properties. The driving force behind the visualization is WebGL. The latest build of the extension is available for downloading and should work in the latest version of Firefox. Who knows? Perhaps playing with the DOM can be fun after all. (vf)
Your CSS editing process is not likely as efficient as it could be. Especially in small projects, you probably have the CSS open in your editor of choice and the HTML open in a browser; every time you make a change, you have to save and upload the file and then refresh the website in order to see what the change has done to the page. Or perhaps you work with a tool such as Firebug or the Web Developer toolbar and have to deal with getting your code changes out of the browser and into the CSS editor and then uploaded to the website. Sounds familiar? Both workflows are more time-consuming than they need to be.
Enter WebPutty17. WebPutty is a Web-based syntax-highlighting CSS editor. It has support for SCSS and Compass; a side-by-side preview pane; and instant publishing with minification, compression and automatic cache control. The tool opens your CSS in one pane and your website in another, both in the same window. Edit the CSS and see your changes take effect in near real time, without the need to save or upload anything. WebPutty can also host your CSS files, although you have the option to save them them to your own server.
WebPutty is free for early adopters, but requires a Google account for registration. You might also want to consider alternative tools such as Vogue18 and LiveReload19; and you can find even more tools in a recent Smashing Magazine article20. (cc)
Select boxes. Yes, those nasty, long, unwieldy things that we have to use sometimes so that users can select their country or time zone. Never fun to use, are they? Especially when the user has a small display, such as a mobile device, or (in the case of long forms) when the select menu appears at the very bottom of the browser’s viewport and the user has to scroll down a bit in order to see all of the options in the input field. It doesn’t have to be this way.
optgroup. It also has support for
disabled and default text (HTML5’s
placeholder attribute). The plug-in is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module, and it can be forked on GitHub. Unfortunately, the script doesn’t work properly on mobile devices yet, so some tweaks are necessary. Otherwise, it’s a clean solution to a grimy common problem in Web form design. (vf)
The default WordPress blog post format is great if you’re running a basic blog. But what if you’re running a movie or book review website? Or a recipe website? Or a website that has a regular format for posts but in which extra fields would be handy? Wouldn’t it be great if you could add a special section right on the page where you write and edit posts, showing the movie title and genre (if it’s a review website) or the ingredients and serving number (if it’s a recipe website)? This would make your posts more consistently formatted and ensure that you don’t forget some vital information for visitors, such as the URL for a movie trailer.
The More Fields24 plug-in for WordPress does all this and more. You can add custom boxes to the editing page for whatever fields you need. You can also create custom archives and feeds based on custom field values; add More Fields boxes for only certain post types (using the More Types25 plug-in); and add any number of boxes with any number of fields to the editing page. (cc)
This website will appeal to all those creative geniuses out there who are not familiar with how the Web (and particularly websites) work. Do you know someone who needs help? They could be your run-of-the-mill creative type or a writer, fine artist, photographer or print designer; this person doesn’t really understand how to update those pages that their pal coded for them or that they built on their own by following a step-by-step tutorial. Instead of explaining everything in a lengthy email, you could just send them a link to the website Don’t Fear the Internet26.
The website gives those who don’t want to learn to code a brief introduction to WordPress, CSS and HTML, and even throws in some PHP trickery. The resource presents short digestable chunks of technical information in witty yet concise screencasts that run from three to five minutes. Episode 1 starts by explaining the technology behind the Web and what a website is, practically speaking. The second part talks about the structure of HTML code. Episode 3 sheds light on the developer tools hidden in the browser that will make understanding code easier.
The project was created and is curated by Jessica Hische and Russ Maschmeyer, and more episodes will be released soon. Keep following their updates, and don’t forget to forward the address to anyone you know who might be having trouble getting accustomed to the Web. (sp)
Do acquaintances doubt that you really are busy checking email for hours every day? Courteous.ly28 is a service that reveals just how big your email load is. Provide Courteous.ly with access to your Gmail account, and it will check your inbox periodically. You decide what should be monitored: whether it’s unread messages, your total number of messages or the number of emails you’ve sent today. You can then paste the link provided in your email signature or on your website. The service updates the information every 10 minutes.
When people click on the link, they will see right away whether your current email load is “light,” “normal” or “high.” Precise evaluations could take a while, until the tool figures out your usage patterns, because light, normal and high are obviously relative to each user. The service could be useful for informing correspondents why you have forwarded an email to a colleague rather than reply yourself or why some emails still haven’t been answered. A word of caution: Courteous.ly claims that it doesn’t read messages in your mailbox and checks your account only to see how many messages are in it.
Courteous.ly currently works only with Gmail (Gmail’s infrastructure allows Courteous.ly to retrieve the necessary data without requiring a password). The service was developed by Eric Gilbert, assistant professor at Georgia Tech’s College of Computing. Show ’em just how much email you have to check… unless of course they should be minding their own business! (sp)
You might remember a random tweet last year that caused a stir among typography minded designers, asking “Do you have a favorite font for every letter?” The answers eventually resulted into a nice collection of witty stories on all letters in the Latin alphabet. Oliver Reichenstein has been working with Indra Kupferschmid on the history, shape and sound pattern of each letter and has now published an article that breathes new life into each of them. The result is iABC30, a short reference piece on the structure, meaning and purpose of letters.
The page sums up the remarks on the letters in 140 characters, along with a beautiful specimen of each letter. For instance: “A is the mother. It’s the metaphysical Bull ? leaping from beyond into existence (beth).” Stay tuned for the second round: lowercase letters! (il)
For all those out there who want to take the plunge in the creative industry but aren’t quite comfortable with the idea yet, this one’s for you. When Jamie Wieck realized that he had no clue about professional life following his art college degree, he researched it by starting this little primer, #The50 Things Every Creative Should Know32, a resource for all those in a similar situation. #the50 addresses the most common concerns held by graduating creatives and aims to bridge the gap between art college and the professional world.
“You cannot score without a goal.” “Do as many internship as you can stand.” “Embrace limitations.” “If you are going to fail, fail well.” These gems can all be tweeted using the button that Jamie has put under each entry, helping you help friends in need of guidance. If you think Wieck’s idea is worth contributing to, then follow #the50 tweets34 and submit your own “lessons learned”, and it could soon turn into #the10035. (sp)
Smashing Cartoons36 is a regular section on Smashing Magazine. (Almost) every week we publish a new cartoon created by our illustrator Ricardo Gimenes. The cartoons are dedicated to Web design and development, offering a comic twist on everything happening around the Web. In this issue, Fleaty explores the benefits of exclusive social networks.
The authors in this newsletter are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Cameron Chapman (cc), Stephan Poppe (sp).
- 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 #a9
- 11 #a10
- 12 http://contrastrebellion.com/
- 13 http://contrastrebellion.com/
- 14 http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/
- 15 http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/
- 16 http://www.webputty.net/
- 17 http://www.webputty.net/
- 18 http://aboutcode.net/vogue/
- 19 https://github.com/mockko/livereload
- 21 http://harvesthq.github.com/chosen/
- 22 http://harvesthq.github.com/chosen/
- 23 http://more-plugins.se/plugins/more-fields/
- 24 http://more-plugins.se/plugins/more-fields/
- 25 http://wordpress.org/extend/plugins/more-types/
- 26 http://www.dontfeartheinternet.com
- 27 http://www.dontfeartheinternet.com/
- 28 http://courteous.ly/
- 29 http://www.courteous.ly
- 30 http://www.informationarchitects.jp/en/iabc/
- 31 http://www.informationarchitects.jp/en/iabc/
- 32 http://www.the-50.org/
- 33 http://www.the-50.org/
- 34 http://search.twitter.com/search?q=%23the50
- 35 http://twitter.com/#!/_the100
- 36 http://www.smashingmagazine.com/the-smashing-cartoons/
- 37 http://www.smashingmagazine.com/the-smashing-cartoons/