Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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

  1. Join The Contrast Rebellion2
  2. Tilt Firefox Extension: DOM Inspection In 3-D3
  3. WebPutty: Advanced Real-Time CSS Editor4
  4. Making Select Boxes Much More User-Friendly5
  5. Better Additional Fields In WordPress Posts6
  6. Don’t Fear The Internet7
  7. Is Your Email Load A Social Liability?8
  8. iABC: Every Letter Speaks For Itself9
  9. 50 Things Every Creative Should Know10
  10. Smashing Cartoon: “Exclusive” Social Network11

1. Join The Contrast Rebellion

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.

Join the Contrast Rebellion13

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 Extension14 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 3D15

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 Editor16

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)

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-friendly21

Chosen22 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 Types23 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 Internet24.

Don’t Fear the Internet25

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? is a service that reveals just how big your email load is. Provide 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: claims that it doesn’t read messages in your mailbox and checks your account only to see how many messages are in it. currently works only with Gmail (Gmail’s infrastructure allows 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 iABC26, a short reference piece on the structure, meaning and purpose of letters.

iABC: Every Letter Speaks for Itself27

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 Know28, 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 Know29

“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 Cartoons30 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. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11 #a10
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top