Best Of March 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 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

  • We All Love Typography
    “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.”

  • Changethethought
    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 abduzeedo ]

  • Create Spectacular Concept Art in Photoshop
    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 Logotypes
    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 logos. [ via iso50 ]

  • Color Chart: Reinventing Color from 1950 to Today
    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 Characters
    A collection of mascots used in modern web design. We’ve collected some, too.

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

Ajax, Javascript

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

  • FancyZoom 1.1
    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.
  • Flexigrid
    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 Editor
    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 Designers
    This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

  • WaveMaker Visual Ajax Studio
    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 Layout
    The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML.

CSS-Techniques, (X)HTML, PHP

  • CSS Message Box collection
    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 CSS
    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 Layout
    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-Border
    ““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 Replacement
    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 Selectors
    “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-shadow
    Cross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though.
  • Equidistant Objects with CSS – CSS-Tricks
    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 Thing
    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 FLOAT
    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 Series
    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 conflict
    “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 tricks
    Including rounded corners without images, ordered lists, tableless forms, blockquote, vertical centering with line-height and CSS drop caps.

Freebies

Tools, Web-Services

  • XHTML/CSS Markup Generator
    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 System
    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.

  • MoreCSS
    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 Generator
    This handy tool helps you create dummy text for all your layout needs.
  • Spam Proof eMail Address Generator
    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.
  • Piwik
    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.

  • codepad
    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.

  • snippely
    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 Devices
    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.com ]

  • Rotatee
    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.com ]
  • favicon.ico Generator
    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 viewer
    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

  • How much do web designers earn?
    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 WakeupLater ]
  • DOM Reference
    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 Software
    A brief review of three open-source social networking applications which you can use to create online communities or social networks. Among them Dolphin, Elgg and PHPizabi. Lovdbyless is worth mentioning as well.

  • Internet Explorer 8 Beta 1 released
    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. Details, comments, analysis and ideas. And, finally, IE8 Readiness Toolkit for web-developers.
  • Safari 3.1 Update
    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 Released
    The Acid3 test has been released and most current browsers fail it miserably. Exception: Safari has done its homework perfectly. [ via Thinkvitamin ]

  • 5 Free Screencasting Apps for Creating Video Tutorials
    This article features AviScreen, CamStudio, Copernicus, Screencast-o-Matic and Jing. Both Windows and Mac-applications are included.
  • Pixton – The User-Generated Comic Strip
    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 About
    For instance, PPcalc helps you to figure out your PayPal fees.
  • Catalogue of Corporate Identity
    The catalogue of corporate identities including colors, size and typeface. 640 logos are featured.
  • Best of Joomla
    A growing repository of Joomla templates, extensions and tools for Joomla.
  • Photoshop Brushes
    A growing collection of free Photoshop-brushes. Currently over 500 brushes are available and the collection is growing.

Articles and Publications

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

  • Write a well structured CSS file without becoming crazy
    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 ExpressionEngine
    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 Width
    What’s the difference? An explanation and basic examples in a pretty long screencast.
  • Subversion for Designers
    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 Interview
    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 insights.
  • 6 Phases of the Web Design and Development Process
    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.

  • Mediatyping
    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 Web
    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 design
    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 Style
    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 Designers
    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 factors.

  • 12 Ways to Tap Into an Endless Well of Creativity
    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 Die
    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 Details
    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 Complaints
    10 complaints the customers have about the design of corporate web sites
  • Six suggestions that can make you a better designerStruggling 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

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

  • Lazy Oaf Pimp My Pumps
    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.

  • Cableyoyo
    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 Disagreement
    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 Contest
    Coloring easter eggs… online. [ via swissmiss ]

  • ASCII Art in Google AdWords
    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!
    Absolutely incredible. This song consists only of alert sounds from Windows OS. And the best thing: the song is absolutely smashing!

↑ Back to top

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 and loves solving complex problems in large companies. Get in touch.

  1. 1

    great stuff as usual. Thanks!

    0
  2. 2

    Antonio Lupetti

    March 27, 2008 7:07 am

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

    0
  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.

    0
  4. 4

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

    0
  5. 5

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

    0
  6. 6

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

    0
  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

    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.

    0
  9. 9

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

    Great work guyz, as usual.

    0
  10. 10

    awesome as usual!

    SM is really the best!

    Keep it up guys!!! ^^

    0
  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.

    0
  12. 12

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

    0
  13. 13

    Excellent list!

    0
  14. 14

    gr8 roundup… very useful…

    0
  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!

    0
  16. 16

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

    0
  17. 17

    This post is huuuuge …. It’s amazing.wow

    0
  18. 18

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

    0
  19. 19

    Have a nice weekend!:)

    0
  20. 20
  21. 21

    Wow, great collection.

    0
  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.

    0
  23. 23

    the coolest collections.. nice job guys..

    0
  24. 24

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

    0
  25. 25

    Awesome..so much stuff, so little time!

    0
  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,
    Wolfgang

    0
  27. 27

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

    0
  28. 28

    Tyler @ Building Camelot

    March 28, 2008 1:50 pm

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

    0
  29. 29

    Merci beacoup pour cette collection ..

    0
  30. 30

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

    0
  31. 31

    Thank you SM!

    0
  32. 32

    Brilliant stuff again! Thanks :)

    0
  33. 33

    Leo F. Swiontek

    March 31, 2008 2:14 am

    It’s really AMAZING to have such analysis.web developers will enjoy it .there’s lots of interesting stuffs to go thru.

    0
  34. 34

    Thanks for the LovdbyLess mention! We’re thrilled by the response and hope others find it useful and create some killer communities with it. Great job on the rest of the list, too, it’s incredible to see what’s coming out every month.

    0
  35. 35

    great summary…. i’m agree about your great work, because i need hours to read all great articles ;)

    Ralph

    0
  36. 36

    This site is a very interesting collection! I very much would like to see you my icons of rss included in its review, too :)

    0
  37. 37
  38. 38

    great articles but my favorite was the Windows XP and 98! song, bad ass

    0
  39. 39
  40. 40

    Thank you for this great tutorial.

    0
  41. 41

    Keep up the great posts, I look forward to -The Best of every year-

    0
  42. 42

    That windows xp video is amazing. The information you provide with CSS-Techniques, (X)HTML, PHP is excellent. Thank you for all these helpful post. Check out norcaldesigns.com/ for some creative web designs.

    0
  43. 43

    Nice collections. loved it..

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top