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

This newsletter issue was sent out to 46,178 newsletter subscribers on November 23rd 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. Design Moo: Discover and Share Quality Design Resources2
  2. Baker eBook Framework: Better eBooks for the iPad3
  3. Make Web Forms Look Consistent Across Browsers4
  4. The Aloha Editor: WYSIWYG Editing the HTML5 Way5
  5. Politely Decline Speculative Work6
  6. Things I Learned About Browsers and the Web7
  7. The Endless Mural: Global, Interactive, Collaborative Art8

1. Design Moo: Discover and Share Quality Design Resources

“Join together and share valuable free Web design resources.” This could be the slogan of the design community Design Moo9, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts.

Design Moo10

All of these useful goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Premium Pixels11 by Orman Clark as well, another website featuring free high-quality resources. (cs)

2. Baker eBook Framework: Better eBooks for the iPad

The iPad has become the digital reading device of choice for many people, thanks in part to its iBooks app. However, how would one go about creating an eBook for iPad? Of course, there are many possibilities: you could just use InDesign, OpenOffice or Apple Pages to generate the book in the ePub format, however you may run into formatting problems.

Baker eBook Framework12

Baker eBook Framework13 is a nice new alternative. Based on HTML5, Baker makes creating a book for the iPad as easy as coding a basic Web page… even easier, considering it comes with a full framework for you to use. The idea is to give designers a set of templates to build HTML5 pages with a fixed width of 768px and use the power of WebKit for styling and animations. The format of Baker is HPub, which is basically one folder, book/, that contains all of your HTML files, all enumerated . It even comes with information on how to get your book into the App Store. It’s all free and BSD-licensed. You can download a sample book14 made in Baker for free. (cc) (vf)

3. Make Web Forms Look Consistent Across Browsers

One of the most difficult browser inconsistencies to deal with is web forms. Some designers advocate for styling form elements to match the brand, whereas others prefer to leave them unchanged so that they match the native look and feel of the operating system. The debate bounces between proponents of pixel-perfect design and those who embrace the flexible nature of the Web. Whatever side you take, you should know what can be done to achieve a unified appearance of Web forms.

Web Forms15

Nathan Smith has come up with an interesting solution for consistent cross-browser design of Web form elements. Formalize CSS16 is a set of HTML templates that use CSS and JavaScript to bridge the gap between various browsers and operating systems. The templates are available for various JavaScript libraries, such as jQuery, Dojo, MooTools, Prototype and YUI. Formalize CSS takes the best ideas from each and implements what is practical across the board. The post announcing the release also contains screenshots of what the forms will look in various browsers on various operating systems. (tb) (vf)

4. The Aloha Editor: WYSIWYG Editing the HTML5 Way

The Aloha Editor17 is a new concept in online editing for CMSs and blogging platforms. The heart of this jQuery plugin is a floating menu. The context-sensitive navigation bar is modeled on the ribbon from Microsoft Office. But the menu appears where you do the actual editing. And if that doesn’t suit you, you can pin it anywhere else.

Aloha Editor18

The developers rave on their (rather boastful) website about the incredible speed of the editor, but you will need a modern browser to see everything work as expected. You can edit content directly in accordions, sliders, tickers, captions and slideshow footers. Previews, reloading and pop-ups are no longer required.

Aloha Editor19

Thus far, the whole thing looks like a very good effort. For example, you can add and edit tables, but you cannot upload or edit pictures. The tool is not quite ready yet, but the idea and implementation look very promising. (sl)

5. Politely Decline Speculative Work

There’s some disagreement in the design community on the value of working “on spec.” There is a definite movement against it, and it has very solid reasons to back up its denouncement of it. But that doesn’t necessarily help your everyday designer who isn’t quite sure how to deal with a prospective client who asks them to do spec work. After all, a lot of designers are doing work for people they know in their community, which can make getting out of doing spec work a tricky situation.

That’s where this form letter comes in. “I won’t do free design work to win your business — here’s why” is a Web page that offers a stock letter you can send to clients explaining why spec work is bad for everyone involved. It’s concise and professional, and it presents clear arguments against spec work, with links to additional information. Plus, you can personalize the letter by adding the recipient’s name to the end of the URL. (cc)

6. Things I Learned About Browsers and the Web

For most of us, the Internet is part of our daily lives, even if we don’t know everything there is to know about it. For things you’ve always wanted to know about the Web but were afraid to ask, we’ve found a book for you to flip through. Built in HTML5, this guide has it all: starting from the meaning of “Internet” all the way to open source and modern browsers.

Browsers and Web20

The guide 20 Things I Learned About Browsers and the Web21 is a brief reminder for anyone who’s curious about the basics of browsers and the web. The neat little red man was illustrated by Christoph Niemann. (ik)

7. The Endless Mural: Global, Interactive, Collaborative Art

Everybody is talking about HTML5, and online creators are eagerly exploring its possibilities and limitations. The Endless Mural22 is an interactive, collaborative art website built in HTML5. You are encouraged to play and draw using the tools and artwork provided and to join the global collaboration.

Endless Mural23

The settings give you a fair amount of control over how your mural turns out. You can submit your drawing to The Endless Mural, explore other submissions, rate the creations and share them in four different ways. This is an inventive and engaging project by Joshua Davis Studios and Automata Studios. (ks)

The authors are: Vitaly Friedman (vf), Sven Lennartz (sl), Iris Kopic (ik), Thomas Burkert (tb), Stephan Poppe (sp), Christina Sitte (cs), Cameron Chapman (cc), Katrin Svana (ks).


  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
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23

↑ 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