Smashing Newsletter: Issue #18

This newsletter issue was sent out to 41,928 newsletter subscribers on September 28th 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

01. Interactive Comic With HTML5 and Parallax Effect2
02. Slablet: jQuery/CSS UI Framework for iPad3
03. FollowUpThen: Simple Email Reminders4
04. Typographic Sins: Create Better Designs5
05. Quick CSV Data Conversion6
06. Getting Creative… With Money7
07. Ethics for Web Designers8

1. Interactive Comic With HTML5 and Parallax Effect

HTML5 is coming to modern browsers, and developers are already pushing its limits. To this end, Microsoft has created an online comic, Never Mind the Bullets9, to show off HTML5/CSS3’s features (SVG background, JavaScript acceleration, etc.) as they function on IE9. It’s a fully interactive experience, complete with animations and other features that were until now possibly only with JavaScript or Flash.

Interactive Comic10

The comic is a Western in a fairly traditional comic-book style, but with a lot of extras. It’s viewable in other browsers, but not as fully as with all of the features built into IE9. There’s also a feature that lets you create your own comic strip using the same characters. We never thought we’d say these words, but the website is actually best viewed in Internet Explorer 9. A similar project is Lost World’s Fairs11, which uses IE9’s support of the Web Open Font Format (WOFF) to explore typographic possibilities on the Web. (cc)

2. Slablet: jQuery/CSS UI Framework for iPad

Apparently, “slablet” is slang for computer tablets such as the iPad and other branded tablet devices, so these Slablet CSS templates12 should be self-explanatory. The templates were designed for mobile versions of websites and applications to create a native iPad-alike experience for users. The templates support both portrait and landscape modes. Slablet uses jQuery and iScroll for smooth page transitions.

jQuery/Css UI Framework13

The framework contains three templates: light chrome, dark chrome and mixed chrome. Of course, Slablet also works with “traditional” browsers: Firefox, Safari, Chrome, Opera and Internet Explorer 8+. The files are licensed under MIT und GPL licenses and therefore are free to modify and reuse. A preview is available on the developer’s demo page14. You might also want to check out alternative frameworks for the iPad, such as Sencha Touch15 and jQPad16. (tb)

3. FollowUpThen: Simple Email Reminders

A classic problem: you write an email about an important issue to a colleague, but you never hear back, and so the issue goes unsolved for weeks just because you forgot to follow up. This happens way too often, leaving many projects unfinished and bugs unfixed.

FollowUpThen17

FollowUpThen18 might help you crack this nut for good. In your next email, just add [interval]@followupthen.com as a recipient, and the tool will send you a reminder after the time interval you specify. You can put the address in the Cc field to send a follow-up email to both you and your colleague, or Bcc to remind only yourself.

You also get fine-grained control of the time interval: 3months@, 3hours@, 3days@, tomorrow@, nextweds@, etc. You probably wouldn’t want to send sensitive data to this third-party system, even although the website claims that all email content is deleted once the follow-up has been sent. The service is free, but you have to verify your email address the first time you use the service. Once you do that, you’ll receive all details, instructions and scheduling methods via email. Another service with similar functionality is Followup.cc19. (vf)

4. Typographic Sins: Create Better Designs

Typography is arguably one of the most important elements in any design, online or off. And while setting type on a page isn’t terribly complicated per se, following certain principles will dramatically increase the readability and aesthetics of a layout. Learning these guidelines can mean the difference between adequate typography and truly great typography.

Typographic Sins20

That’s why Typographic Sins21 (also available as PDF) by James Godfrey and Patrick Wilkey is useful. The document covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design. (cc)

5. Quick CSV Data Conversion

As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain.

CSV Data Conversion22

Mr. Data Converter23 takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. It makes data conversion a painless process. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer24 a try. (cc)

6. Getting Creative… With Money

Paper money has been around for over a thousand years. The currency is familiar to us; we trust it, and we humans are creatures of habit, often hostile to change. But that hasn’t stopped designers and illustrators from experimenting with their own versions of these monetary staples.

Screenshot25

Many designers dream of being offered the chance to redesign the banknotes of their local currency or even contribute new kinds of legal tender. With all of the currency types in the world today, some more intricate than others, there is certainly no lack of inspiration to draw from. But when designers let their imagination run loose and try their hand at designing money, there is no telling what they come up with. For example, Xavi García has created a banknote by hand26 that reminds the user of the effort that went into its creation, replacing the currency value with the amount of time the note took to create.

Screenshot27

And Dowling | Duncan28 has proposed a complete revision of US currency. You can see this and more impressive money design submissions at the Dollar ReDesign Project29 website. (ks)

7. Ethics for Web Designers

Ethics aren’t often discussed in Web design. As designers, we don’t have a fiduciary relationship to our clients: we don’t handle their money or make decisions for them. We design promotional material. They’re free to hire whoever they want, and they have no particular obligation to any one of us beyond what’s spelled out in the contract, and vice versa.

Ethics30

But that doesn’t mean there are not real ethical concerns related to website design. And it doesn’t mean we shouldn’t be discussing what our ethical obligations are—to ourselves, our colleagues and our clients. Robot Regime31 is a website dedicated to discussing ethics and Web design, and it already features a lot of great content, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want. (cc)

The authors are: Vitaly Friedman (vf), Thomas Burkert (tb), Cameron Chapman (cc), Katrin Svana (ks).

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