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 #11

This newsletter issue was sent out to 32,040 newsletter subscribers on June 22nd 2010.

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

  1. LaunchList: The Designer’s Ultimate Website Check List2
  2. What the Hex? Game for CSS Geeks3
  3. The Graphs2, a Large Free Vector Icon Set4
  4. Generate HTML Tables Out of Spreadsheet Data5
  5. Pop-Up Ping Pong6
  6. No More Lorem Ipsum, Please!7

1. LaunchList: The Designer’s Ultimate Website Check List

Every design project has many little details that one has to take care of before it goes live. Have you checked your content for spelling errors? Did you design a 404 page? What about the print style sheet? LaunchList8 helps you review important items before the big launch.

Ultimate Webdesign Checklist9

By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. The email does not contain a direct link to the check list, but it has a plain text review of the things you have checked (along with your comments). If this tool is not flexible enough for you, you may want to look at the Ultimate Website Launch Checklist10, which is also available as a PDF download. (vf)

2. What the Hex? Game for CSS Geeks

Among the variety of methods of representing color values, some are easier to identify than others. For example, RGB and CMYK are quite intuitive once you get used to them. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then What the Hex?11 is a simple game for you.

What the Hex12

All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers. (jb)

3. The Graphs2, a Large Free Vector Icon Set

Beautiful free icons always come in handy. Goce Mitevski just released The Graphs 213, a set of 36 unique graphic designs and many variations, adding up to 169 graphic icons. The set includes common icons for charts, such as lines, bars and pies.

The Graphs14

The set is available in Adobe Illustrator AI format and SVG for free downloading, so you can change colors, resize elements, replace objects, make adjustments and create new combinations in your editing application. The Graphs2 is licensed under a Creative Commons Attribution Share Alike 3.0 Unported License. (vf)

4. Generate HTML Tables Out of Spreadsheet Data

Many designers shun tables entirely in their designs, opting for CSS styles to create fake tables. But tables have their purpose, which is to display tabular data (i.e. what you would put in a spreadsheet). Also, clients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain.

Generate HTML Tables15

Enter Tableizer16. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and voila! You have a properly formatted HTML table for your data. It can save you a ton of time setting up tables and entering data. You could even pass it along to clients who might need to put tables in pages or blog posts but would end up making a mess of things. (cc)

5. Pop-Up Ping Pong

Developers are coming out with innovative games on what seems a daily basis. And sometimes we just need to take a break from our work and do something fun for a few minutes. Playing a quick game online is a great way to do this.


This new version of Pong18 is different from most online games. Rather than working in Flash or JavaScript, it works in pop-up windows. You get three pop-up windows to start. Two of the windows serve as sliders for the two players (you can play against another person or the computer) and one is the “ball.” You control your slider using the arrow keys or the A and Z keys. Other than that, it works just like an old-fashioned game of Pong. One tip: holding down a key to move seems to work very slowly (or not at all, at least on a Mac running Firefox); tapping the key repeatedly is better. Warning: sounds starts automatically. (cc)

6. No More Lorem Ipsum, Please!

Sometimes it may be useful to use less generic dummy text in your designs: for instance, when you want to give your design more context, and see how it works best with the text that could actually be used on a website. Whether you need an ordered or unordered list, a simple paragraph or a headline, just grab it from Kureno’s Lorem Ipsum Tool.

Check one or several of the control boxes and click “Generate.” You can even choose between three different content types from a drop-down list: “Design Studio,” “Business” and “Technology.” What’s the point of this tool? As the developers of the app put it, “We think lorem ipsum is bad for your Web design, and you should be rid of it forever.” There you go. (mm)

The authors in this newsletter are: Vitaly Friedman (vf), Cameron Chapman (cc), Jessica Bordeau (jb), Manuela Müller (mm).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

↑ 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