Smashing Newsletter: Issue #37
This newsletter issue was sent out to 60,952 newsletter subscribers on July 5th 2011.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.
Table of Contents
01. Speed Is A Feature2
02. Sprite Cow: Generate CSS For Sprite Sheets3
03. Badger: Sexy Notification Badges With jQuery4
04. GreatAster: The Online Art Boutique5
05. Meeting Notes Made Easier6
06. Works Of Art Done Entirely In Light7
07. CSS Support In HTML Emails8
08. Recipefy: An Online Cookbook9
09. A Lyric A Day10
Page-loading times affect user satisfaction, SEO and many other factors that determine the success of a website. Performance, therefore, can no longer be considered an afterthought or part of a post-launch strategy. The best approach is to consider speed as a feature, just like any of the other features and widgets on your website.
Stoyan Stefanov is writing the comprehensive Book of Speed12: The Business, Psychology and Technology of High-Performance Web Apps. The book will include nine chapters, covering topics such as “The Performance Business Case,” “Fewer Page Components,” “Smaller Components” and “Optimizing Images.” Each chapter discusses in depth the technical details of how page-loading time can be optimized. The book is work in progress and its parts are released under the public domain; you can contribute your ideas via GitHub. (tb)
When it comes to optimizing the loading times of pages and reducing the number of HTTP requests, CSS Sprites is one of the most popular techniques to use. With sprites, you store small images in a larger master file and then “grab” them using the
background-position property in CSS. The technique is often used for icons, user interface design elements and buttons in various states. However, manually calculating the values of the
background-position property can be quite tiresome. There has to be a better way.
Indeed, there is. Sprite Cow14 is an online tool that helps you get the
height properties of sprites from a sprite sheet as a nice bit of copy-able CSS code. To get the CSS code, just upload the master sprite, click on the image in the sprite that you’re interested in, or select an area by clicking and dragging. The tool also works with master files that do not have transparent backgrounds, but to use them you’ll need to select the color using the “Pick background” feature.
Overall, a quick, simple and useful time-saver. The tool currently works in Chrome and Firefox, but doesn’t play well with Safari on Mac due to a lack of HTML5 File & FileReader support; hence, you might want to consider alternative tools, such as SpriteMe15, Sprite CSS Generator16 and Smart Sprites17. (vf)
Daniel Raftery has released Badger18, a jQuery plug-in that displays notification updates for any HTML element without the need for images. The design is modelled on the badges found on the iPhone and iPad, which makes it an attractive way to notify your users in a way that many of them are already familiar with. So if you are developing a Web-based version of your application for those mobile devices, you might consider using the plug-in to imitate the native iOS experience.
Basically, the plug-in adds a nice rounded badge to the corner of an HTML element. Hence, it can be useful for comments areas, dashboards, admin panels and other elements. The plug-in works in modern browsers, including Internet Explorer 9.0 (although IE8 shows a square badge). The plug-in is licensed under the MIT Licence. The minified version is 1.8 KB, and the full version is 2.4 KB. (vf)
Museums around the world stockpile the great works of art, making them inaccessible to most people. GreatAster20 has chosen to grant the world access to its fine collection of historical and contemporary art. High-resolution scans of illustrations from antique textbooks, as well as engravings and renowned masterpieces make up this treasury of art. Simply search the collection by entering your query, and specify the desired size and resolution prior to purchasing.
If GreatAster is unable to find your desired style, theme or technique, it will put all of its wheels in motion to get it for you. You can subscribe to the RSS feed to get constant updates on the collection. If you are a true art lover, you can not only download, but purchase pieces as wall art. GreatAster also has a “Free for web22” section in which the owners of the project allow to freely employ any available images from their gallery but require a link back to the site. The whole collection is updated constantly, so check back daily. The website might at least trigger your creativity anew. (sp)
Take the hassle out of creating meeting notes with minutes.io23. This is a neat little Web app for creating and sharing notes quickly and effortlessly. We all know how writing down ideas and suggestions from meetings can be time-consuming, and yet the best time to note those comment is either during the meeting itself or right after it has ended.
This tool can be used at both times very easily. Minutes.io essentially gives you a detailed template in which you can track attendees and record agenda items, with due dates and owners. Once the meeting has finished, you can email the notes to all of the attendees before they get back to their desks. The tool uses HTML5 local storage, so your drafts are saved in the browser even if you are offline, waiting to be sent when you’re online again. You can even use keyboard shortcuts for quicker notes. (ar)
Light painting is probably one of the most beautiful forms of photography. Using nothing but various lighting tools and a single long exposure, beautiful shapes are created seemingly from nothing. In true light painting, no post-processing or retouching work is done.
David Gilliver26 creates beautiful light paintings using a variety of light tools. The one shown above, Ribbon Dance27, shows beautiful reflections in the water, and bright, vibrant colors. The photographer is “present” in all of his paintings, although he isn’t visible because he wears dark clothing and is constantly moving. Be sure to check out his website and his photostream for even more great light paintings! (cc)
Cross-browser compatibility can be a nightmare for designers, but it doesn’t come close to the compatibility headaches across email clients. Unfortunately, the support for CSS, even at the most basic level, is very limited and so designers for the most part give up using CSS at all. That’s unfortunate, though, because some popular email clients have at least some support for CSS, and designers miss out (or at least make their jobs harder) by not using it.
Campaign Monitor has just updated its “Guide to CSS Support in Email29,” available in Excel and PDF (as well as on the website). It covers ten of the most popular email clients: Outlook versions 2000, 2003, 2007 and 2010, Apple iOS, Windows Live Hotmail, Apple Mail 4, Yahoo Mail Beta, Google Gmail, and Android 2.3 (Gmail). Armed with this chart and the client profile of your useres, you can make educated decisions about which CSS elements to use and which to avoid. (cc)
Do you love spending time in the kitchen cooking up fancy meals? Have you invited guests over for dinner (or perhaps someone special) but run out of ideas for what to cook? If you have, then you will love Recipefy30, an online recipe manager that helps users share their favorite recipes and discover new dishes. Users can find new recipes and share their personal favorites with the Recipefy community.
Recipefy provides users with a fun, easy way to find new recipes and to organize their favorites for safe-keeping online. And it works as an online organizer and bookmark for your recipes as well: your own online cookbook of sorts. It’s an easy way to discover new recipes and share recipes between friends. So, what are you making tonight? (ar)
Take one lyric from a song every day and create art or shoot a photograph inspired by it. That’s exactly what Lukes Beard has been doing for almost a year now. The result is fascinating: A Lyric a Day32 is a remarkable collection of artwork, all dedicated to powerful statements in songs and heavily influenced by the music and the designer’s personal mood and interpretation of the songs.
The designer’s commitment to the project is both encouraging and challenging: are you ready to commit yourself to designing something every single day34, too? A Lyric a Day is a good example of a creative side project, which in this case helps the designer explore his creativity and imagination and study new ways to connect music, lyrics and visual design. (vf)
The authors in this newsletter are: Vitaly Friedman (vf), Andrew Rogerson (ar), Cameron Chapman (cc), Thomas Burkert (tb), Stephan Poppe (sp).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 #a9
- 11 http://www.bookofspeed.com/
- 12 http://www.bookofspeed.com
- 13 http://www.spritecow.com
- 14 http://www.spritecow.com/
- 15 http://spriteme.org/
- 16 http://spritegen.website-performance.org/
- 17 http://csssprites.org/
- 18 http://thrivingkings.com/badger/
- 19 http://thrivingkings.com/badger/
- 20 http://greataster.com/
- 21 http://greataster.com/
- 22 http://greataster.com/en/freeimages
- 23 http://minutes.io/
- 24 http://minutes.io/
- 25 http://www.flickr.com/photos/davidgilliver/5429471150/
- 26 http://www.davidgilliverphotography.com/
- 27 http://www.flickr.com/photos/davidgilliver/5429471150/
- 28 http://www.campaignmonitor.com/css/
- 29 http://www.campaignmonitor.com/css/
- 30 http://www.recipefy.com/
- 31 http://www.recipefy.com/
- 32 http://alyricaday.com/
- 33 http://alyricaday.com
- 34 http://www.smashingmagazine.com/2009/12/22/design-something-every-day/