Best Of February 2008

Advertisement

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days – an overview of web-sites you shouldn’t have missed in February 2008.

All images can be clicked and lead to the sites from which the screenshots have been taken.

Design-Galleries, Showcases, Inspiration

  • 20 Beautiful HDR Pictures1
    There are some photography techniques that really give me the goose bumps, but the good ones. HDR is one of those techniques… and you’ll probably love these as much as we do.

    Screenshot2

  • Pattern Inspiration3
    Sometimes it’s needed to go look in odd places to find inspiration. Take patterns for example, often used for backgrounds etc. There is a bit of a trend in interior design at the moment with the revival of the vintage wallpaper backgrounds from the sixties and seventies.

    Screenshot4

  • The Evolution of Tech Companies’ Logos5
    You’ve seen these tech logos everywhere, but have you ever wondered how they came to be? Did you know that Apple’s original logo was Isaac Newton under an apple tree? Or that Nokia’s original logo was a fish? Let’s take a look at the origin of tech companies’ logos and how they evolved over time.

    Screenshot6

  • Modernist Stamps Flickr Set7
    A set of Modernist stamps featured in January’s Monograph, a collectable A5 Booklet from Creative Review. [via cpluv8]
  • Quick Grungy Poster Photoshop Tutorial9
    This tutorial shows how to create a sort of grunge poster. You’ll learn how to make some elements look a bit dirty, create textures and add some depths to the elements using shadows and blend modes.

    Screenshot10

  • Logo Design Trends 200811
    Logos are the ultimate mark of distinction and everyone loves them. This article attempts to discuss current trends in logo design; among them – organic 3D, Waves, Transparency, Minimal Typography and The New Crest.
  • Grid and Column Designs12
    If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog.

    Screenshot13

  • Movable Love14
    A showcase of interesting and beautiful sites powered by Movable Type. Textpattern Showcase15 and WordPress Showcase16 might turn ot to be useful as well.
  • Home Page Carousel Showcase: 40+ Carousel Designs17
    Christian Watson strikes again. A showcase of home page carousel designs to see what common themes emerged and also what different approaches designers took.

    Screenshot18

  • Pre-owned bookmarks19
    Pre-owned bookmarks, collected over the years from books purchased at flea markets, garage sales, used bookstores, etc.
  • Typesites20
    Typesites is a weekly showcase of websites with interesting typographic design.
  • Insanely Creative Portfolios From Around the Web21
    A growing collection of beautiful online portfolios. Not single one of them is Web 2.0ish, which is a good thing.

Icons, Fonts

News, Updates, Tips

  • NYTE32
    New York Talk Exchange illustrates the global exchange of information in real time by visualizing volumes of long distance telephone and IP data flowing between New York and cities around the world. Videos and images are included.

    Screenshot33

  • Netdiver Magazine – Best of the Year / 200734
    Netdiver reviews some of the most interesting and inspiring projects of the year 2007. “These folks whatever their disciplines create memorable and dazzling projects, taking us to uncharted territories where imagination, skill, talent abide – inciting us to keep pushing forward.”
  • Konigi: Form, function, fetish35
    Konigi community researches how others have designed the look and feel of web sites and crafted their user interfaces. “If you’ve ever searched around for market research and competitive information related to the user experience and design of web sites within any industry, then you’ll want to watch this space.”

    Screenshot36

  • Make3D37
    Make3D generate a 3D model out of any uploaded photo. The results are quite impressive. 3D models can be downloaded in VRML, Flash or 3dS format. You need to register before uploading your own images.
  • Firefox Hits New High as IE7 Lags38
    IE: 66%, Firefox: 28% (European browser usage statistics). Mozilla Firefox continued its slow but steady march against the worldwide dominance of Microsoft Internet Explorer in 2007. Though the open-source web browser continues to sit firmly in second place behind IE, where it’s been for years, usage of Firefox is still on the rise.

    Screenshot39

  • Adobe AIR v1.0 and Flex 3.0 Released; New Adobe Open Source Site Launched40
    Continuing their march into the RIA space, Adobe announced the official release of AIR v1.0 and Flex 3.0. The new Adobe AIR runtime enables Ajax developers to build rich Internet applications (RIAs) that deploy on the desktop. AIR applications run across operating systems on the WebKit HTML engine and are easily delivered using a single installer file.

    Screenshot41

  • Map of social network popularity around the world42
    Asia loves Friendster, Russia loves LiveJournal, and Orkut still dominates Latin America. [via Waxy43]

    Screenshot44

  • OpenID goes Big45
    In February Google, IBM, Microsoft, VeriSign and Yahoo joined the OpenID Foundation: will OpenID-enables sites (where users do not need to remember traditional authentication tokens such as username and password and can use universal authentification instead) soon become a standards?
  • Web Developer Crossword Puzzle46
    This crossword puzzle’s questions cover such topics as: search engines, CSS, C#, JavaScript, Browsers, Programming and just about anything else Web-related (.pdf). The answers are already published47 (.pdf).
  • Free Photoshop Actions to Boost Your Designs48
    An action is a series of tasks that you play back on a single file or a batch of files – menu commands, palette options, tool actions, and so on. This article presents a number of actions for Photoshop you can download and use for free.

    Screenshot49

  • Things I have learned in my life so far
    Another social project focusing on people’s experiences summarized in a brief statement and a photo.
  • SitePoint CSS Reference50
    Sitepoint has published an updated version of its comprehensive CSS reference.
  • You Suck At Photoshop Video Tutorials51
    Donny Hoyle is damn good. The most entertaining Photoshop video tutorials you’ve ever seen.

CSS-Techniques

  • How to recreate Silverback’s Parallax52
    Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback53 site.

    Screenshot54

  • Five CSS menu tutorials55
    This post includes five CSS menu tutorials inspired by some Web 2.0 sites with round corners, scriptaculous and Ajax effects. Among them: Digg-like navigation bar using CSS, Flickr-like horizontal menu and Gettyone-like search options menu.

    Screenshot56

  • Elegant navigation bar using CSS57
    This tutorial explains how to design an elegant navigation bar (gettyone58 inspired) for your site using CSS.

    Screenshot59

  • Vertically center content with CSS60
    A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative.
  • Em and Elastic Layouts with CSS61
    This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.
  • Custom Double Solid Borders for Images62
    We are not going to use border-style:double; As we know these are not easy to control. Imagine a situation where you want outer border on the image. How would you achieve this? And further more, how would you achieve this with no additional markup? A small but very useufl trick.

    Screenshot63

  • Create Resizing Thumbnails Using Overflow Property64
    This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.
  • Pure Css Data Chart65
    Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?

    Screenshot66

  • Open External Links in New Window Automatically67
    This script initiates on page load and goes through all links (anchor tags) in document. It then checks links, and based on current domain name it recognizes link as internal or external. Furthermore, to external links script adds a class name “external”. That way you can visually separate them from internal links.
  • Cross-browser transparent columns68
    A demonstration of how to implement cross-browser transparent columns. It’s used by having combination a transparent div with the same height as it’s parent and a div containing the content. Then we pull the overlay div to the left and set the content div to position: relative; to fix the z-index.

    Screenshot69

  • CSS Browser Selector70
    You should always avoid feeding browsers with specific CSS-style sheets, but if you badly need to solve some inconsistency issues, CSS Browser Selector might be an option to consider.
  • Book-style Chapter Introductions Using Pure CSS71
    This article describes how you can create the scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph. With CSS. The technique doesn’t work in IE.

    Screenshot72

  • Perspective CSS Experiment73
    Perspective-effects with pure CSS.

    Screenshot74

  • A very different approach to tagging75
    People normally use tags to link related posts. On his forum Edward Tufte uses a totally different approach. Instead of linking to pages for each tag, it simply shows the tagged articles inline. No separate screens. No navigation. It’s a beautifully simple solution.
  • How to create CSS layouts without using float76
    This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts without using absolute positioning or floats.

CSS-Tools, References, Templates

Ajax, Javascript

  • Sniff browser history for improved user experience84
    This article teaches you how to mine the rich treasure trove of personalization data sitting inside your visitor’s browser history for deep personalization experiences. “I can scan a current visitor’s browser history to determine an active presence on one or more bookmarking sites. Once I determine the current visitor is also a Digg user I can show live data from Digg.com to prompt a specific action such as submitting a story or voting for content. I can create a much better user experience for 3 services I know my visitor actively uses instead of spraying 50 sites across the page.”
  • Facebook Style Input Box85
    The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”

    Screenshot86

  • mooSocialize – social bookmark widget, ajax based, add your post to the most common social networks87
    This Ajax-based widget allows you to integrate the bookmarking feature directly into your post. By clicking the mooSocialize button, a window will appear, which lets you choose a preferred service without leaving the site you’d like to bookmark.

    Screenshot88

  • Step by Step – Show and explain visitors what your page has for them89
    You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
  • GWT-Ext Widget Library90
    GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag and Drop support, highly customizable ComboBoxes, Tab Panels, Menus and Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT91 and Ext92.

    Screenshot93

  • GlassBox94
    GlassBox is a compact Javascript User Interface (UI) library, which uses Prototype and Script.aculo.us transparent border, colorful layouts and “Flash-like” effects.
  • Soft Edge Technique: Soft Edges and Opacity Gradients for Images95
    This snippet creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create “cloudy” soft edges or one-side opacity gradients without any image editing software.
  • How to highlight search results with JavaScript | Eric Wendelin96
    Use the combination of a JavaScript snippet and CSS-style to highlight words or phrases in the search results making it easier for your visitors to find the most relevant content on your weblog.

Web-Typography

  • A Guide to Web Typography97
    Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained Monkeys were able to correctly identify Helvetica 90% of the time. Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients: Contrast, Size, Hierarchy and Space.
  • Twenty-Six Types of Animals by Jeremy Pettis98
    26 impressive examples of original lettering style; each of the illustrations is supposed to capture the essence of a beast with… pure typography.

    Screenshot99

  • The Funkiest Ampersands You Have Ever Seen100
    An ampersand is the figure used to represent the word ‘and’, it is widely recognized by the symbol &. Have a look at some of the funkiest ampersands you have ever seen.

    Screenshot101
    Screenshot102

  • Flickr: International Typographic Style103
    The International Typographic Style, also known as the Swiss Style, is a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Helvetica, and flush left, ragged right text. A typographic Flickr Pool. More Typography104.

    Screenshot105

  • CSS Type Set106
    A handy tool that lets you define an optimal font family, font size, color and further settings such as leading and letter-spacing online.
  • Typeflash107
    Typeflash is an interactive typo site that lets you create personalized eCards with animated typefaces designed by Peter Vajda.

Tools, Web-Services

  • Firebug 1.1108
    John J Barton has released a new beta-version of Firebug. Among new features are eval() debugging, external editor interface, browser-generated event handler debugging, stack side panel on “Script” panel for callstack and support of Firefox 3.
  • YUI 2.5.0 Released109
    The YUI Team released the new version 2.5.0 of the YUI library110. Six new components were added — Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler.

    Screenshot111

  • File Destructor 2.0 – Hype Magazine112
    Want to play games on your Playstation but got a deadline for an exam or report that didn’t match your gaming ambitions? Send trashed files and blame your faulty computer, instead of confessing that you are a lazy bum who just wants to play videogames.
  • Ajaxonomy del.icio.us Spy113
    This tool enables you to observe live which bookmarks are added to Del.icio.us.
  • PicLens Firefox Extension114
    PicLens transforms Firefox into a full-screen, 3D experience for viewing images in full-size. The developers promise that “photos will come to life via a cinematic presentation that goes well beyond the confines of the traditional browser window”. Impressive.

    Screenshot115

  • Nourish: RSS to Email Service116
    Nourish is a next generation newsletter service which allows you to take any RSS feed from content you publish (like a blog), and convert it into an automated email newsletter your readers can subscribe to.
  • BrowserSim PSD + Action set117
    BrowserSim is a Photoshop psd + action set for quickly producing customized browser chrome framing (IE 7, Firefox 2) for web design mockups. An action file for automatically formatting window titles and URLs is included.
  • HelloTxt118
    HelloTxt is an aggregate of microblogging services through which users can quickly publish updates to multiple networks simultaneously. You can post to Twitter, Pownce, Facebook, Tumblr and other networks at the same time, with one click. One message that goes to all accounts. [via MakeUseOf119]

    Screenshot120

  • Easy Text to PNG conversion121
    This service provides the ability to convert headlines and navigations to PNG images automaticlly. The process is automated as you simply need to add a JavaScript file and define which tags should be replaced.
  • Jawr – More than a Javascript/CSS compressor 122
    Jawr is a tunable packaging solution for Javascript and CSS which allows for rapid development of resources in separate module files. Writing a simple descriptor properties file, and using a servlet and a tag library are all the requirements to use it.
  • FeedJournal – The Newspaper You Always Wanted123
    FeedJournal automatically converts RSS feeds to a printable newspaper. Once the feed is selected, yo can define preferred newspaper layout (number of columns, margins etc.) and generate a printable newspaper-style PDF document.

    Screenshot124

  • .htaccess Editor125
    This tool enables you to easily create .htaccess files online.
  • PDFescape – Your Online PDF Reader, Editor, Form Filler, Form Designer, Solution126
    PDFescape lets you open PDF files online, make changes and save them right into the .pdf-file for free. Thus you can fill in PDF forms, add text and graphics, add links, and even add new form fields to a .pdf file.

Articles and Publications

  • 10 Mistakes in Icon Design127
    The article 10 Mistakes in Icon Design reviews the most commonly observed mistakes in icon design. Among them are insufficient differentiation between icons, unnecessary elements and overly original metaphors. Worth reading.

    Screenshot128

  • Version Targeting: Threat or Menace?129
    Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman. They Shoot Browsers, Don’t They?130 — Jeremy Keith about the same topic.
  • Keeping Your Elements Kids in Line with Offspring131
    Maintainable code is even more important if you’re going to hand off your code to a client or a content management system: the less intricate the markup, the fewer chances there are for the nuances of your code to become lost in the shuffle. Alex Bischoff about how to keep your markup clean.
  • Product pages: so much suck, so easy to fix132
    Amy Hoy covers a lot in this article — from James Joyce and upchucking, to Firefox, telepathy, and Opera. Through it all she shows you how see through the eyes of a user and an experience designer, and how to use that viewpoint to improve your site.

    Screenshot133

  • The Principles of Beautiful HTML Email [Design Principles]134
    As web designers, we’re used to designing for the particular constraints and capabilities of web browsers, and there’s a ton of great advice out there to help. HTML emails are a different story, though — they’ve often been the black sheep of the web design world, and have either been ignored or actively repelled.
  • The Highly Extensible CSS Interface135
    Cameron Moll’s extensive series of how-to create highly extesnible CSS-based interface. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

    Screenshot136

  • The Immutable Laws of Web Design and Development | Blue Flavor137
    Are software engineering rules, principles and laws applicable to web design? Brian Fling tries to find out.
  • Detailed Look at Stacking in CSS138
    Using the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination. z-index explained.
  • Top-10 Application-Design Mistakes (Jakob Nielsen)139
    Jakob Nielsen: Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Last Click

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    You guys rock! Thanks for this nice “best of”! Great as usual ;-)

    0
  2. 2

    Mega Collection! Thanks very much.

    0
  3. 3

    thanks for mentioning me

    0
  4. 4

    Thanks for the mention of my article. I hope people appreciate it :)

    0
  5. 5

    Impressive as always! Thanks for including my articles.

    0
  6. 6

    very interesting stuff as usual. I was specially interested in HDR images as I’m trying to learn some techniques and thanks to SM I could found ‘photomatix’ that makes sthe work much easier. You can see my photographic portfolio at .

    0
  7. 7

    Deny Sri Supriyono

    February 29, 2008 4:54 am

    woah, a great huge list!

    0
  8. 8

    hey, the best of february is beauty, a lot of work quality !!

    0
  9. 9

    Damn, this was a huge list! Thank you!

    0
  10. 10

    You saved my weekend ! A lot to read. Thank You !

    0
  11. 11

    my pick for this list : Blueprint CSS Resources :)

    Cool…

    0
  12. 12

    Thanks to add my tutorials on this post! Have a nice day. Antonio

    0
  13. 13

    Wow – what a list – that’s going to keep me busy for a while. Thanks.

    0
  14. 14
  15. 15

    Thanks for mentioning Typesites, loving the RSS to newspaper converter too, that’ll be handy.

    0
  16. 16

    Thanks for the nod! Great list as always. Those typographic walls are just beautiful!

    0
  17. 17

    damn, it really smash me! yaha

    0
  18. 18
  19. 19

    Brilliant stuff

    0
  20. 20

    do you have too much free time boys… I need so much time to read your great links and my problem is – the day has only 24 hours ;)

    From Germany

    Ralph

    0
  21. 21

    Wow! You guys what an awesome list. Love the first one of the photos and the rolling bench idea!

    0
  22. 22

    I think I clicked on almost every single link you offered. Thank you for compiling such a useful list of resources, you guys are fantastic.

    Jon

    0
  23. 23

    Wow! Very nice and large collection!

    0
  24. 24

    Excellent Stuff..;)

    0
  25. 25

    Wow – so much here! It’ll take me all of March to go through these – incredile post! Thanks.

    0
  26. 26

    Amazing as usual. Worth the time given to make it ..
    Congrats !

    0
  27. 27

    Another great list! A good time to get some more web apps featured?
    cheers,

    0
  28. 28

    Thanks. Great list as always. One thing … why you are linking to google cache for the “Free Photoshop Actions to Boost ….”, site is up and runing.

    0
  29. 29

    Vitaly Friedman & Sven Lennartz

    February 29, 2008 5:52 pm

    @Morkof: the site was unavailable at the moment when we published the article. It’s up again so we’ve updated the link. Thanks.

    0
  30. 30

    I just did a round up of the best graphic design articles from February 2008 as well.
    http://justcreativedesign.com/2008/01/28/best-graphic-design-articles-january-2008/
    If your interested. :) Thanks for the list!

    0
  31. 31

    Nice Post, you should check out my simple web site business at http://www.TheSimpleWebSolution.com

    0
  32. 32

    thanks for mentioning my Flower Folders Icons!

    0
  33. 33

    My optician said I’ve got to stop visiting SMASHING, he said theres so much eye candy on there it’s making my eyes go rotten ………… Sorry for the crap joke :p

    Great stuff guys ….

    0
  34. 34

    Wow, very interesting list. Thanks for sharing.

    0
  35. 35

    amazing and sexy :)

    0
  36. 36

    Good collection! I especially liked the link to the LOGO TREND article, the PATTERN INSPIRATION, the GRID AND COLUMN link and FREE ICONS are of course always a nice treat!

    0
  37. 37

    Great post as always SM rocks

    0
  38. 38

    brilliant post, thanks for your efforts

    0
  39. 39

    Wow ……..what a collection….

    0
  40. 40

    Pretty good backgrounds and patterns also at .

    0
  41. 41

    this is my first time to commet
    i just want to say thank you
    in the past whole year , i think your guys’ work bring me great fun

    0
  42. 42

    Nice lists.. Thanks so much!!

    0
  43. 43

    WOW !! Smashing as usual. You guys are unbeatable.

    0
  44. 44

    There were some I missed in there. Thanks for the roundup.

    0
  45. 45

    Thank you for the CSS techniques… this was missing lately in smashing magazine.

    0
  46. 46

    Brilliant. Keep rocking guys!

    0
  47. 47

    hdr pictures are really amazing.. i wish some day :)

    0
  48. 48

    You guys are the “Best”. Cheers fellows…

    0
  49. 49

    Awesome List!
    Thank you very much for these. You got my bookmark!

    0
  50. 50

    I genuinely enjoy going through this post. I actually added 13 of your resources in my personal reference library.

    Keep up the quality of your content.

    0
  51. 51

    Perfect as always! Thanks guys for the good work!

    0
  52. 52

    Excellent, I like best of.

    0
  53. 53

    Anyone has reference for “growing textarea” like the one facebook have?

    Please kindly help :)

    0
  54. 54

    I like so much all your articals “best of…” !!!!
    That helps me a lot !

    0
  55. 55

    Wonderful collection! Well done! Thanks!

    0
  56. 56

    smashing magazine you are the best

    0

↑ Back to top