Menu Search
Jump to the content X

Best Of March 2008


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 March 2008.

All images can be clicked and lead to the sites from which the screenshots have been taken. And please, please, don’t forget to check out the last link. You won’t regret it.

Design-Galleries, Showcases, Inspiration Link

  • We All Love Typography1
    “Whether it’s spacing, font choice, position, kerning, I just can’t seem to get that look. I am always looking for designs that showcase amazing typography, below are 50+ examples of what I have found inspiring in my quest to achieve typography greatness.”



  • Changethethought4
    Christopher Cox collects great works that have been awarded many times and was mentioned by Computer Arts, Design Taxi, Webby Awards, Pixel Surgeon and others. [ via abduzeedo5 ]


  • Create Spectacular Concept Art in Photoshop7
    Creating conceptual work can be fun and relies heavily on your imagination. This tutorial shows how to combine stock photographs to create a stunning effect that can be easily reproduced to work with almost any combination of images.


  • The Rainbow Monkey
    A portfolio of Markus Hofko. Interactivity meets style. Impressive works.
  • Vintage Logotypes9
    Well Eric Carl has graciously posted all of the pages from the book to his Flickr page. You can also download all the images in a handy Zip file directly from his blog. More vintage logos10. [ via iso5011 ]


  • Color Chart: Reinventing Color from 1950 to Today13
    This MOMA exhibition takes as its point of departure the commercial color chart, an item that openly declares the status of color as mass-produced and standardized. It features the work of 44 artists who take a position in which art and life mingle rather than remain separate, and where beauty is found in the everyday rather than in the ideal.


  • Cool Web Characters15
    A collection of mascots used in modern web design. We’ve collected some, too.


  • bottle caps!17
    A showcase of… well, bottle caps. This photoset on Flickr includes 162 photos.

Ajax, Javascript Link

  • iCarousel18
    iCarousel is an open source (free) javascript tool for creating carousel like widgets.


  • FancyZoom 1.120
    Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoomis providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself.
  • Flexigrid21
    Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.


  • markItUp! Universal Markup Editor23
    markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
  • jQuery Tutorials for Designers24
    This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.


  • WaveMaker Visual Ajax Studio26
    WaveMaker Visual Ajax Studio is an visual builder that enables the drag & drop assembly of scalable, web-applications using Ajax widgets, web services and databases. WaveMaker’s Studio enables data-driven and web-services based applications to be quickly created without complex code, forms, patterns or portal frameworks. Both open-source and commercial licenses are available.


  • dfFlexiGrid – Liquid Javascript Grid Layout28
    The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML.

CSS-Techniques, (X)HTML, PHP Link

  • CSS Message Box collection29
    A collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).


  • Clean Tab Bar Digg-like using CSS31
    This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover).


  • CSS Drop Column Layout33
    When I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room.


  • Creating a Body-Border35
    ““Body Border” is a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I’d feature how it was done here.”
  • Nine Techniques for CSS Image Replacement36
    CSS image replacement is a technique of replacing a text page element with an image. This article covers nine techniques, including a testing page with all nine techniques put to the test.


  • Combating Classitis with Cascades and Sequential Selectors38
    “There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work.”
  • Cross-browser text-shadow39
    Cross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though.
  • Equidistant Objects with CSS – CSS-Tricks40
    Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.


  • Table-Based Layout Is The Next Big Thing42
    With the release of Internet Explorer 8 some of the more obscure areas of CSS are going to become very important. One of them: CSS tables.
  • How to create CSS layouts without using FLOAT43
    There are many CSS layouts out there. Some rely on AP (Absolutely Positioned) elements, others use FLOATs. This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts.
  • The Highly Extensible CSS Interface ~ The Series44
    Cameron Moll continues to publish the parts of his series of how-tos and savvy conversation about highly extensible CSS-interfaces. Recent publications cover CSS Selectors & jQuery as well as Ajax Interactivity.


  • delivering code / how to avoid conflict46
    “So let’s assume we’re delivering a clean piece of html code with all the necessary styles in a separate css file that both need to be included in the source document. The problem we’re dealing with is that there’s a realistic chance that your nicely tweaked piece of code will be overruled by already existing css declarations. Luckily, we can take some measures to avoid this.”
  • 29 CSS-Snippets for Google AdSense
    Getting creative with Google AdSense.
  • Most used CSS tricks47
    Including rounded corners without images, ordered lists, tableless forms, blockquote, vertical centering with line-height and CSS drop caps.

Freebies Link

Tools, Web-Services Link

  • XHTML/CSS Markup Generator52
    Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.


  • 960 Grid System54
    The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.


  • MoreCSS56
    MoreCSS is a small JavaScript library for everyday things, like creating tab menus (for example like the one above), tables and lists with zebra-style etc. But the really special thing is: you can do these things like in regular CSS.
  • Dummy Text Generator57
    This handy tool helps you create dummy text for all your layout needs.
  • Spam Proof eMail Address Generator58
    This tools enables you to enter your email, choose colors and font types and create a picture of your email address which spam bots will not be able to read.
  • Piwik59
    An open source web analytics application which is supposed to be an advanced alternative to Google Analytics. The features are built inside plugins: you can add new features and remove the ones you don’t need. Sounds promising.


  • codepad61
    Codepad is a pastebin that runs your code for you. It works like a compiler or interpreter, not like the read-eval-print loop of an interactive interpreter prompt. If you want to print the value of an expression, you need to use your language’s print command. The tool supports C++, Perl, Python, Ruby and others.
  • Feed Analysis v1.1
    This tool analyzes your FeedBurner feeds, provides statistics about the growth rate, calculates average subscribers and predicts further development. Growth rate is particularly useful.

  • snippely62
    Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.


  • SHIFD Beta – Shift Content Between Your Devices64
    a really easy way to capture and view notes, places and links from your mobile phone, web browser or computer desktop. I most often use it for mobile notes-to-self; whenever I need to capture a name, place, task or thought I just text it to ShifD. [ via Coolhunting.com65 ]


  • Rotatee67
    Rotatee lets you create ad campaigns to manage different advertising spots on your website. Each campaign can target certain spot (ex. sidebar). You can specify how many ads should be shown on each spot and how often each of them should appear. Currently in private beta. [ via Makeuseof.com68 ]
  • favicon.ico Generator69
    This tool lets you draw 16px × 16px favicons online, store them, share them and rate them.
  • DebugBar – IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer70
    An Internet Explorer plug-in that brings you new powerful features . Free for personal use. The tool includes a DOM inspector, HTTP inspector, Javascript inspector and Javascript console,HTML validator and other features.

News, References, Tips Link

  • How much do web designers earn?71
    Not much. $54,000 a year. The results of AIGA’s 2007 Salary Survey. The survey covers all aspects of designers and their compensation. [ via WakeupLater72 ]
  • DOM Reference73
    This chapter provides a brief reference for the general methods, properties, and events available to most HTML and XML elements in the Gecko DOM. The articles listed here cover DOM Core Specification, DOM HTML Specification and DOM Events Specification.
  • Open-Source Social Networking Software74
    A brief review of three open-source social networking applications which you can use to create online communities or social networks. Among them Dolphin75, Elgg76 and PHPizabi77. Lovdbyless78 is worth mentioning as well.


  • Internet Explorer 8 Beta 1 released80
    Microsoft released the first beta of Internet Explorer 8. Among new features the integration of pseudo-classes :after and :before. IE8 improves rendering of content authored to various web standards in standards mode. The new version features an enhanced and standardized DOM that brings it in line with implementations in other browsers. Additionally, IE8 has dramatically enhanced AJAX support with features like DOM: Storage, Cross Document Messaging (XDM) and the Selectors APIs. And (hurrah, hurrah): IE8 will use Standards mode by default. Details81, comments82, analysis83 and ideas84. And, finally, IE8 Readiness Toolkit85 for web-developers.
  • Safari 3.1 Update86
    The new release adds support for CSS 3 web fonts, broader SVG images capability , and offline storage for Web applications in SQL databases.
  • Acid3 Test Released87
    The Acid3 test88 has been released and most current browsers fail it miserably89. Exception: Safari has done its homework perfectly. [ via Thinkvitamin90 ]


  • 5 Free Screencasting Apps for Creating Video Tutorials92
    This article features AviScreen, CamStudio, Copernicus, Screencast-o-Matic and Jing. Both Windows and Mac-applications are included.
  • Pixton – The User-Generated Comic Strip93
    Pixton is a user-generated comic strip, that you create, publish, share and remix with your friends. Pixton characters are created by choosing from preset attributes and expressions, specifying hair and skin color, rotating body parts, and setting height and girth with a drag of the mouse. Registration is required.


  • 9 Tools PayPal Users Should Know About95
    For instance, PPcalc96 helps you to figure out your PayPal fees.
  • Catalogue of Corporate Identity97
    The catalogue of corporate identities including colors, size and typeface. 640 logos are featured.
  • Best of Joomla98
    A growing repository of Joomla templates, extensions and tools for Joomla.
  • Photoshop Brushes99
    A growing collection of free Photoshop-brushes. Currently over 500 brushes are available and the collection is growing.

Articles and Publications Link

  • The Evolution of Websites100
    How 10 popular websites have (and have not) changed over the last 10 years.


  • Write a well structured CSS file without becoming crazy102
    This is a descriptive post about how to write a well structured CSS file. Main principles of successful CSS-coding: be simple, be “elegant-code” oriented, be methodic. A useful read.


  • An Introduction to ExpressionEngine104
    EE has the power to drive even most medium- to large-scale websites. If you’re looking for a reason to invest some time and effort into learning and installing it, keep reading.
  • Fixed Width, Fluid Width and Elastic Width105
    What’s the difference? An explanation and basic examples in a pretty long screencast.
  • Subversion for Designers106
    There’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers.


  • Web/Graphic Designer Group Interview108
    An extensive group interview of 10 web-developers. Some interesting insights into designers’ workflow, how they seek for inspiration and what they begin their projects with. More useful insights109.
  • 6 Phases of the Web Design and Development Process110
    Web Design Engineering: an attempt to introduce some structure into the design and development process into 6 pieces: information gathering, planning, design, development, testing and delivery and maintenance. These stages are typical for usual software development process.


  • Mediatyping112
    What does it take to refactor a stylesheet for a mobile version of a web-site? How to start and what to consider? Dave Shea delivers answers.
  • Coding for the mobile Web113
    Developing for the iPhone is great, but it’s only a sliver of the mobile market, and the real world of mobile development is a lot hairier. Opera developer relations manager Chris Mills writes about do’s, don’ts and best practices.


  • 9 best practices for email design115
    Designing for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.
  • Legends of Style116
    It’s a well-established fact that achieving cross browser consistency when styling form controls is an “exercise in futility”. And one of those elements that just won’t play ball is the legend tag.
  • A Guide to Pricing for Designers117
    What should you consider when estimating the price for your work? Armen Thomassian suggests to consider business overheads, part-time or full-time, experience, image and… respect. More pricing factors118.


  • 12 Ways to Tap Into an Endless Well of Creativity120
    There is no reason to ever run out of ideas. The world, our minds, history, and the Web offer an infinite realm of artistic exploration. Consider the impact your habits, approach, organization, and internal rhythms have on your finished work. Find out some approaches professional artists use to continuously wave a wand of endless creativity.
  • Sign Up Forms Must Die121
    When planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement. Show potential customers how they can use your service and why they should care.


  • Design is in the Details123
    Paying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.
  • 10 Complaints124
    10 complaints the customers have about the design of corporate web sites
  • Six suggestions that can make you a better designer125Struggling with too many projects, and not sure where to start? Wish you had a few tricks up your sleeve to make things easier? While the following is certainly not a definitive list, it does contain a few of the things which sound quite reasonable.

The Last Click Link

  • Alphabet Popup Book by Marion Bataille126
    ABC3D is a pop-up book featuring the alphabet. Each letter is displayed in a creative way. [ via Geekologie127 ]
  • StatAttak128
    Impressive typographic t-shirts.


  • Lazy Oaf Pimp My Pumps130
    Lazy Oaf’s off-the-wall designer shoes are inventive one-offs all using the classic plimsol as a canvas. Each pair is one-of-a-kind and made using materials that aren’t necessarily street-safe, which means they might be more functional as sculptures than as footwear. They start at £35 from Lazy Oaf.


  • Cableyoyo132
    This is damn useful. Cableyoyo is an empty spool around which you wrap your existing cord. It will take any cord up to 5mm in diameter, and this covers all low voltage chargers, USB, firewire, data and telephone cables.


  • Designing for Disagreement134
    Designing for Disagreement is a visual explanation of think/make, a new method of creative problem solving with the ultimate focus on expeditions, honest, and accurate results. A new concept by Paul Burke. Nice visualization.


  • Easter Egg Coloring Contest136
    Coloring easter eggs… online. [ via swissmiss137 ]


  • ASCII Art in Google AdWords139
    How to distinguish your ad from other competitors’ ads? Get creative. In Google AdWords you can use ASCII to stand out. Result: this ad received 47% more clicks than before.


  • Music using ONLY sounds from Windows XP and 98!141
    Absolutely incredible. This song consists only of alert sounds from Windows OS. And the best thing: the song is absolutely smashing!

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    great stuff as usual. Thanks!

  2. 2

    Antonio Lupetti

    March 27, 2008 7:07 am

    Hi guys, thanks for add my blog (woork) this month too! :)

  3. 3

    Thank you once again. One lifetime is too short to discover all the wealth you share with us. I like the Ajax/CSS tips best.

  4. 4

    Wow, what a compilation! I love this one too – you featured it earlier this month: 312 High quality icon packs.

  5. 5

    You guys never cease to amaze me. Day after day after day with fresh new content. Amazing collections every single time.

  6. 6

    hey the last thing is for sure man what a nice use of samples :P that was nice thanks for sharing. :)

  7. 7

    Unbelievable! You must be a bunch of robots from the future always knowing the cool-stuff in advance and typing quality blog entries at the speed of light 8=0

  8. 8

    Yet another great roundup. I spend a lot of time online, yet you always manage to provide me links to stuff that I never imagined existed. Love the type and the feedburner stats analysis. Many thanks SM.

  9. 9

    Practically infinite amount of information. My browser hung while loading this page. (ohk..thatz a exaggeration :) )

    Great work guyz, as usual.

  10. 10

    awesome as usual!

    SM is really the best!

    Keep it up guys!!! ^^

  11. 11

    Awesome post, and thank you so much for featuring Inspiredology, Smashing Magazine is one of the reasons why I started blogging, and I love it. Keep up the great posts, I look forward to “The Best of” every month, now I cant wait till April.

  12. 12

    I am so grateful for this site, this post was a treasure chest of links. Made my day.

  13. 13

    Excellent list!

  14. 14

    gr8 roundup… very useful…

  15. 15

    Like all above, this list is quite overwhelming.

    I’m also shocked to find my own site listed; it’s very humbling. Thank you!

    P.S. Absolutely loved the video at the end!

  16. 16

    This site is GREAT…it’s going to take me all weekend, maybe a week, to digest this post.

  17. 17

    This post is huuuuge …. It’s

  18. 18

    Wow, you’ve been busy doing a lot of reading! Thanks for linking to my group interview.

  19. 19

    Have a nice weekend!:)

  20. 20


  21. 21

    Wow, great collection.

  22. 22

    Wow, thanks for the link on behalf of Changethethought. I am just getting started with my blog and my print section is being updated on pretty much a weekly basis right now. So expect more work. I’ll be selling prints, including the one you included a picture of, starting some time this summer.

    Thanks again.

  23. 23

    the coolest collections.. nice job guys..

  24. 24

    AMAZING! and the ASCII Art in Google AdWords !!!!! hahahahaha!!!

  25. 25 much stuff, so little time!

  26. 26

    Wow, the ASCII-Arts in the Ads are my favorites, too.
    And the Article about pricing was very interesting for me.
    Than you!
    Best regards from Germany,

  27. 27

    Awesome resource yet again. Massive thanks for featuring an article of mine as well! :)

  28. 28

    Tyler @ Building Camelot

    March 28, 2008 1:50 pm

    I love you guys! Love it — love it — love it!
    Thank you!

  29. 29

    Merci beacoup pour cette collection ..

  30. 30

    AW! I’m smashed! Awesome! Super! I love this :) I digged it, I Stumbled it. Thanks Smash!


↑ Back to top