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

This newsletter issue was sent out to 37,849 newsletter subscribers on August 17th 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. Book Cover Archive2
  2. Wireframes Showcase3
  3. Rounded Images With CSS34
  4. HTML5 Boilerplate: A Rock-Solid Default for HTML55
  5. Bookmarking Deluxe: Share and Sync Your Links With URList6
  6. Get Old Versions of Your Favorite Software7
  7. Design Environments: Where Do You Design?8

1. Book Cover Archive

Finding inspiration for your projects can be tiring. We sometimes look through every Web design gallery we can find, hoping to stumble on something that gives us a creative idea. But there are so many other sources of inspiration that we never look at.

Book Cover Archive

Alexander S. Budnitz has put together a book cover archive on his website that spans more than a century of art. You can search by time period, designer (though only a couple of well-known ones are included) and even series (again, only some are included). It’s a useful resource if you’re looking for inspiration for a book cover or similar project. (cs)

2. Wireframes Showcase

In design, wireframes are useful because they help you and your client focus on important structuring issues before considering detail-oriented challenges. And as with all other parts of the job, drawing inspiration from other people’s work can lead to a clearer and more efficient organization of your website. That is the purpose of Wireframe Showcase9, a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs.


Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece and a chance to provide feedback or ask the designer questions through a comment form. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes. (jb)

3. Rounded Images With CSS3

Just a couple of years ago, we wracked our brains to find cross-browser solutions for rounded corners in CSS and HTML. We created images of corners that simulated roundness. We played with the background-image property to simulate resizable images. And we hacked JavaScript to make corners look rounded. Lucky for us, these times will be gone soon, with the help of the CSS3 border-radius property. Now, using a single CSS property is enough to achieve the effect. Who would have thought five years ago that it would be so easy today?

Roubded Images with CSS311

In fact, a resourceful designer in search of creative solutions can do many things with simple CSS properties. For instance, Trent Walton came up with a clever technique to create rounded images12 (in this case, rounded avatars) with the border-radius property. The solution is simple: create a frame class for your image, and give it a border. Then, round both the frame and image with the border-radius property, and you’re done: a simple technique with no additional images or scripts — just an extra line of code.

Unfortunately, the solution doesn’t work in Firefox: -moz-border-radius works for the div, of course, but not for the img. Still, it degrades quite well into a square avatar with a border. For a good alternative, give Nick La’s CSS3 Rounded Image With jQuery13 a try. (vf)

4. HTML5 Boilerplate: A Rock-Solid Default for HTML5

Future-proofing a website with HTML5 is one thing, but coding a website so that it works in older browsers adds another layer of complexity. The designer’s life would be made much easier by having a complete base template for building websites in HTML5, CSS and JavaScript that takes into account older browsers and available enhancements.


That’s where HTML5 Boilerplate15 comes in. It’s a base template for a fast, robust and future-proof site that includes not only files for the HTML, CSS and JavaScript, but also a robots.txt file, .htaccess file and mobile style sheet. It normalizes behavior between browsers — working even in IE6 and IE7 — and handles progressive enhancement for optimum accessibility. It’s also built so that the developer can remove part of it without breaking the whole thing. (cc)

5. Bookmarking Deluxe: Share and Sync Your Links With URList

Whether you want to share links with others or sync your bookmarks between computers, URList might be just the tool you’re looking for. URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link.


To edit a list, you have to sign in via Twitter or Google account (no sign-up is required). You can then add to a list, delete links or rename them. You can also share a list’s URL with friends and access your lists from another computer. No matter how you use it, URList is a handy little tool. (mm)

6. Get Old Versions of Your Favorite Software

Ever upgraded an application and then found that you hated the new version, or that it was incompatible with another program you use? Or maybe you just long for software from your teenage years. Perhaps your favorite plug-in doesn’t work with the new version? Any of these sound familiar? Then here is a solution for you.

Favourite Software16

OldVersion.com17 provides downloads of outdated versions of popular software programs. There’s everything from Netscape to Camino, AIM and ICQ to LimeWire and Blender. Most programs have multiple archived versions available, often dating back many years. (Ever wanted to see what IE 2.0 looked like on a Mac? Now you can!) A couple of hundred programs are available, for both Mac and PC. Just remember that programs are often updated because of security vulnerabilities. (cc)

7. Design Environments: Where Do You Design?

Ever dreamed of a bigger space, nicer office or more original desk? Where We Design18 is a showcase of design environments of people who are proud of where they work. These designers, artists, architects, freelancers and agencies have uploaded images of their offices for all to see and be inspired. The purpose of the website is to find out about the places where they built their achievements and how the environments helped them.

Design Environment19

Workspaces are rated by the community based on design, uniqueness or simply how much people would want to work there. The insights and descriptions make the gallery even more interesting to explore. Let yourself fall into this dream of inspiring and unique spaces. Who knows what your work environment will look like in future? (jb)

The authors are: Vitaly Friedman (vf), Christina Sitte (cs), Manuela Müller (mm), Cameron Chapman (cc), (jb).


  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

↑ 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