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 newsletter as well, of course.

Table of Contents

01. Join The Contrast Rebellion
02. Tilt Firefox Extension: DOM Inspection In 3-D
03. WebPutty: Advanced Real-Time CSS Editor
04. Making Select Boxes Much More User-Friendly
05. Better Additional Fields In WordPress Posts
06. Don’t Fear The Internet
07. Is Your Email Load A Social Liability?
08. iABC: Every Letter Speaks For Itself
09. 50 Things Every Creative Should Know
10. Smashing Cartoon: “Exclusive” Social Network

1. Join The Contrast Rebellion

The Contrast Rebellion 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.

Join the Contrast Rebellion

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)

2. Tilt Firefox Extension: DOM Inspection In 3-D

How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Tilt Firefox Extension: DOM Inspection in 3D

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)

3. WebPutty: Advanced Real-Time CSS Editor

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.

WebPutty: Advanced Real-Time CSS Editor

Enter WebPutty. 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 Vogue and LiveReload; and you can find even more tools in a recent Smashing Magazine article. (cc)

4. Making Select Boxes Much More User-Friendly

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.

Making select boxes much more user-friendly

Chosen offers an alternative approach to select menus. It’s a JavaScript plug-in that lets users just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enter” or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, 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)

5. Better Additional Fields In WordPress Posts

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.

Better Additional Fields in WordPress Posts

The More Fields 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 Types plug-in); and add any number of boxes with any number of fields to the editing page. (cc)

6. Don’t Fear The Internet

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 Internet.

Don’t Fear the Internet

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)

7. Is Your Email Load A Social Liability?

Do acquaintances doubt that you really are busy checking email for hours every day? Courteous.ly 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.

Is Your Email Load a Social Liability?

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)

8. iABC: Every Letter Speaks For Itself

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 iABC, a short reference piece on the structure, meaning and purpose of letters.

iABC: Every Letter Speaks for Itself

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)

9. 50 Things Every Creative Should Know

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 Know, 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.

The 50 Things Every Creative Should Know

“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 tweets and submit your own “lessons learned”, and it could soon turn into #the100. (sp)

10. Smashing Cartoon: “Exclusive” Social Network

Smashing Cartoons 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.

Fleaty

The authors in this newsletter are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Cameron Chapman (cc), Stephan Poppe (sp).

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top