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

This newsletter issue was sent out to 48,706 newsletter subscribers on January 18th 2011.

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. Check What’s Inside the Bag2
  2. Learn Proper Photoshop Etiquette3
  3. Weave Some Silk4
  4. Got Trees But Need Wood?5
  5. The Noun Project: Free High-Quality Symbols6
  6. Scale Images to Fit the Browser7
  7. CSS-101: The Easy Way to Learn CSS8
  8. Leisure-Suit Larry… in HTML5!9

1. Check What’s Inside the Bag

It is said that you don’t really know a person that well until you have seen what’s inside their bag. Bagcheck lets you pull the cover off of that accessory that everyone has, and lets you connect with people and their interests. The site provides an easy way to share items with people you know or share interests with.

Give your friends a peek into the things you love, and become acquainted with your inner circle. You can also form new relationships with like-minded people by searching, browsing or quickly creating bags related to favorite hobbies and activities. To sign up, you need to have a Facebook account. (ik)

2. Learn Proper Photoshop Etiquette

If you’re the only one who ever sees your Photoshop files, then you’re free to set them up and manage them pretty much however you want. But in the professional design world, collaborating with other designers or taking over projects that others have started is pretty common. And that’s when the way you set up and manage your Photoshop files becomes very important to achieving a happy and productive work environment.


The Photoshop Etiquette Manifesto for Web Designers11 lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you’ll make it easier for others to work with your files and make it more likely that your project will go smoothly. Some of the things included are common sense (e.g. proofread before exporting), but others you wouldn’t necessarily think of (e.g. globalize masks as best as possible, keep logos as vector smart objects, compare against wireframes). The site also provides helpful illustrations and explanations for each example so that there’s no confusion. The site is a bit difficult to read though, mostly due to the background image. (cc) (vf)

3. Weave Some Silk

Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk12! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.


Sealk lets you create stunning pieces of art in seconds. Just click and drag anywhere on the screen and let the silk take over. Holding the Shift key while the silk cloud is moving lets you change the wind’s direction, blowing your creation across the display. Check out some of the featured artwork clips to get the hang of it. Silk is compatible with Chrome, Firefox and Safari browsers. So, go ahead: give it a whirl! (sp)

4. Got Trees But Need Wood?

Notforest is what many of us have been waiting for. Those who are fed up with all of the distractions that come with modern website consumption can now easily get rid of everything that hinders a good read.


Simply drag the featured link into your bookmark toolbar, visit any website, click the bookmarklet, and the website is immediately stripped of everything other than the main content. The main content is presented in a nice, easy-to-read fashion, and those annoying ads and banners no longer kill your read. You no longer have to cope with clutter. (sp)

5. The Noun Project: Free High-Quality Symbols

Symbols have been an integral part of our daily life for a long time. The language consists of symbols. Each symbol represents an object or concept, and symbols form the world’s visual communication in a simple way. Icons and pictograms are a dime a dozen out there, but usually they are expensive to license or are protected in other ways.


The Noun Project15 provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well. (cs)

6. Scale Images to Fit the Browser

Mobile website optimization is not about using the latest CSS3 techniques to just hide elements and resizing text, but also about making sure that images (especially big ones) work on thousands of different-sized screens. This is the premise of tinySrc16.


tinySrc is a simple and free Web service for scaling images on the fly! You have to merely prefix all large images in your source code with the tinySrc URL (e.g., and tinySrc does the rest. In the future, creating many different thumbnails on your own server will no longer be necessary. tinySrc provides an API to handle defined and adaptive sizing and lossy image encoding as well. This is a nifty free service for scaling images to fit the browser. (rs)

7. CSS-101: The Easy Way to Learn CSS

Both books and video tutorials are great for learning. But when it comes to CSS, online resources and tutorials are better, because you can test and play the code right away.. With complicated matters such as collapsing margins, overflow and block formatting contexts, seeing the impact of different ways of coding live on screen, along with explanations of what’s going on is very helpful. On CSS-10118, you can actually see that.


Thierry Koblentz, a French-born California Web designer, has put together a beautiful website that explains some of the trickiest parts of CSS. Go check it out, and call CSS-101 for help the next time you can’t figure out why your divs don’t float the way they’re supposed to. (mm)

8. Leisure-Suit Larry… in HTML5!

Those who are interested in retro games will remember the products of the company Sierra Entertainment. We are talking about such graphic adventures as King’s Quest, Space Quest and Leisure-Suit Larry. Sierra Entertainment is no more, and computer games today look entirely different from the pixel-edged look of the past. However, some of those old games do still exist—thanks to Martin Kool, for example, who has rebuilt several hits20 from those ancient computer days.

Kingsquest II

As of now, you can play these games in the browser or on your iPad, and you will soon even be able to use an iPhone. They’re all in HTML and CSS; you don’t have to install anything. No particular browser is required; you can start immediately. And it’s free. You can also save and restore your progress with bookmarks. Everyone plays for themselves, but when you are close by, you can interact with other players. (sl)



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

↑ 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