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
01. Book Cover Archive2
02. Wireframes Showcase3
03. Rounded Images With CSS34
04. HTML5 Boilerplate: A Rock-Solid Default for HTML55
05. Bookmarking Deluxe: Share and Sync Your Links With URList6
06. Get Old Versions of Your Favorite Software7
07. Design Environments: Where Do You Design?8
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.
Alexander S. Budnitz10 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)
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 Showcase11, 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)
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
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?
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 images14 (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 jQuery15 a try. (vf)
Whether you want to share links with others or sync your bookmarks between computers, URList18 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)
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.
OldVersion.com21 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)
Ever dreamed of a bigger space, nicer office or more original desk? Where We Design22 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.
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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 http://www.abudnitz.com/covers/
- 10 http://www.abudnitz.com/covers/
- 11 http://www.wireframeshowcase.com/
- 12 http://www.wireframeshowcase.com/
- 13 http://trentwalton.com/2010/08/03/css3-border-radius-rounded-avatars/
- 14 http://trentwalton.com/2010/08/03/css3-border-radius-rounded-avatars/
- 15 http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/
- 16 http://html5boilerplate.com/
- 17 http://html5boilerplate.com/
- 18 http://www.urli.st
- 19 http://urli.st
- 20 http://www.oldversion.com/
- 21 http://www.oldversion.com/
- 22 http://wherewedesign.com/
- 23 http://wherewedesign.com/