Best Of January 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 January 2008.

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

News, Discussions

  • Automatic IE7-Update Expected in February
    On February 12 Microsoft will push a new version of Internet Explorer 7 and auto-update the previous version of IE with IE 7. Microsoft also posted guidelines on how to ward off the automatic update if admins want to keep the older IE6 browser on their companies’ machines. Is it the possible end of IE 6?
  • Internet Explorer 8 passes the Acid2 test: A Milestone
    Still being in development, Internet Explorer 8 now passes the Acid2 smiley face test (video). The beta of IE8 is expected to be released in the first half of 2008.

    Acid2 Test: Smiley Face

  • Farewell Netscape
    AOL announced that it won’t support Netscape any longer. Will the browser ‘be sorely missed’? Did it pass away peacefully in the night, a lot later than many of us thought it would? The discussion about the browser many of us used once and dismissed afterwards.
  • Movable Type Open Source
    Movable Type is now open source. This means you can freely modify, redistribute, and use Movable Type for any purpose you choose. MT Open Source has every feature in Movable Type 4.0 along with several new minor improvements and bug fixes.
  • IE’s Questionable Version Targeting
    According to Microsoft, IE8 is going to support a new feature — the so-called version targeting via the <meta http-equiv="X-UA-Compatible" content="IE=8" />-declaration. Drawbacks and benefits in the article by Tim Kadlec. Eric Meyer discusses the same topic.

References, Tips

  • UI-Patterns: User Interface Design Pattern Library
    It’s a common practice to use recurring solutions to solve common problems. This project seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

    Screenshot

  • Interface Research
    The Art Institute of Atlanta has conducted a usability and user interface survey among its students. The results not necessary match with your expectations. For instance, 77% of students preferred links to be on the left of the page, while 72% preferred drop-down-menus for navigation.
  • The WordPress Help Sheet
    The WordPress Help Sheet includes basic template files and PHP-snippets. The advanced version contains snippets from Styling Different Categories to Dynamic Page Titles.

    Screenshot

  • 114 Sources for License-Free Images
    An extensive overview of a number of sources. Most of them are indeed good.
  • Freeware Software for Web Designers
    An overview of advanced open-source applications designers and web developers can use during the design process.
  • Common Craft – Explanations In Plain English
    Among other things, CommonCraft presents products and services in a simple format to make sense of complex ideas. Now you finally know how to explain RSS, Social Bookmarking and Social Networking to your grandmother.

    Screenshot

  • Collection of CSS snippets
    Konstruktors offers a collection of CSS snippets for constructing grid based layouts, columns, basic typography and navigation elements.
  • Introduction to Good Usability
    Peter Conradie offers his Introduction to Good Usability as .pdf-file for free download. The .pdf covers interface design guides (breadcrumbs, tabs, linking, overlays, drop down menu, scroll etc.) as well as author’s principles of good usability.

Tutorials

Tools, Services

  • IM History
    IM-History is a desktop application that lets your save and sync IM conversations for multiple instant messengers in one place. Whether you’re on Skype, MSN, AIM, ICQ, at work or at home, you can have all of your chat conversations securely stored in one place. [via makeuseof.com]

    Screenshot

  • Cover It Live – Live Blogging 2.0
    CoveritLive is a service which allows you to blog in real-time. Your commentary publishes in real time like an instant message. You can drop polls, videos, pictures, ads and audio clips. Comments and questions from your readers instantly appear but you can control what gets published.
  • Microsoft Live Labs: Volta
    Microsoft’s Volta technology is a developer toolset that enables you to build multi-tier web applications by applying familiar techniques and patterns. Developers prototype the application first as an entirely client application; afterwards the compiler takes care of the client code, server code, and boilerplate code that ties the two tiers, handling such functions as communication, serialization, and security.

    Screenshot

  • Pingie
    Pingie is a free RSS to SMS service that allows users to forward RSS feeds to mobile phones. Please note, normal carrier charges still apply. You may be charged for each text message you receive. Currently available only in USA.
  • MySQLDumper – smart backup for all your web projects
    A small life-saver for smart backups. A PHP-Script has a maximum of execution time; anything after above the limit (Usually sets to 30 seconds) will result in losing data. MySQLDumper uses a proprietary technique to avoid execution interruption.
  • Chyrp
    Chyrp is a blogging engine designed to be very lightweight while retaining functionality. It is driven by PHP and MySQL (with some AJAX thrown in), and has a pimpin’ theme and module engine, so you can personalize it however you want.

    Screenshot

  • PDF Hammer – Free Web Based PDF Editor
    PDF Hammer is a website that allows you to edit your PDF files online for free. You don’t need to install any additional software, you can edit PDF documents right now inside your browser. Once you start, you will be able to upload one or more PDF files into your project, arrange the pages in any order you wish, and delete any pages you don’t want.
  • Easylistener
    Easylistener is a Flash music player which can literally play any page on the web. Simply point it at your favorite music blog, RSS feed or playlist document and it will crawl that URL and start playing back any mp3s it finds.

    Screenshot

  • toread – an email-based bookmark service
    “toread” is an email-based free bookmark service. You can bookmark your “toread” web pages by just clicking the bookmarklet on your browser and the article will be sent to you via e-mail. Useful.
  • Online Charts Builder
    This tool allows you to instantly generate charts online using Google Chart API.
  • ies4osx
    Internet Explorer For Os X is the installer that will download all the necessary files and install them in a convenient app package named “Internet Explorer 6.0″ in your applications folder. With this tool you can have several version of IE installed side by side.

    Screenshot

  • The Alphabetizer
    The tool puts just about any list in alphabetical order. Alphabetize words, songs, titles, email addresses, phrases, sentences. List sorter.
  • LetterMeLater : Send Scheduled Emails
    LetterMeLater offers one feature that your email doesn’t have, ‘the ability to schedule when an email should be sent’. It allows you to send scheduled emails without leaving your main email program, regardless whether it’s a web based service (GMail) or a desktop client (Outlook).

CSS-techniques, (X)HTML, PHP

  • Resetting Again
    Eric Meyer’s latest take on the ultimate global reset file for cross-browser content presentation. The small changes involve a paring down of the possible quotation around blockquotes and qs.
  • Better Email Links: Featuring CSS Attribute Selectors
    Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.

    Screenshot

  • Advanced CSS Printing – Using CSS Page Breaks
    There are numerous spots that are good for page breaks: between page sections (h2 or h3 tags, depending on your site format), between the end of an article and subsequent comments / trackbacks and between long blocks of content. This article illustrates how you can use CSS properly to ensure the correct printing of your Web pages with CSS Page Breaks.
  • Advanced CSS Menu Trick
    What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

    Screenshot

  • Better Ordered Lists (Using Simple PHP and CSS) – CSS-Tricks
    Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.

    Screenshot

  • Pushing a shopping cart full of tea with CSS and JavaScript
    “The idea is that the cart would only start following the scrolling page if it had a product in it; an empty cart would not. I ended up not using the feature for a variety fo reasons, but I thought I could still share the logic behind the effect.”
  • A Savvy Approach to Copyright Messaging
    Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.

    Screenshot

  • Coda-Slider 1.1.1
    CSS-based technique which combines navigation tabs with sliding animation using jQuery.
  • Css Text Gradients
    Text Gradient is a simple CSS trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.
  • Iconize Textlinks with CSS
    Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.

    Screenshot

  • Stretchy Images with HTML and CSS
    An extensive overview of techniques to stretch images depending on the browser window resolution of visitors.
  • Style Your Image Links
    Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. But what can you do with image mouseovers? Add a different border? This script will certainly help you to do a bit more than that.

    Screenshot

  • SearchField
    SearchField is a simple lightweight, unobtrusive script that adds styling and behaviour to your search form fields. It features plug and play onfocus and onblur behaviors as well as auto suggestion and is highly customizable.
  • Digg-like navigation bar using CSS
    This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

    Screenshot

  • What CSS Did We Learn in 2007
    An overview of the most useful, interesting and innovative CSS-techniques published in 2007.

CSS Tools and Services

  • James Whittaker – Em based layouts – Vertical rhythm calculator
    This tool converts px-values to em-values depending on the font-size of the text. You can also set margins and paddings automatically — depending on the line-height you’ve defined. Very useful.

    Screenshot

  • CSS Text Wrapper
    The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

    Screenshot

  • Design Bookmarklet
    Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
  • Drawter.com – DrawAble Markup Language
    Drawter Beta 2 provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

    Screenshot

  • Snipplr – Code 2.0
    Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers.
  • The sliding date-picker
    CSS+Ajax-based solution for a sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. The script is based on the Prototype/Scriptaculous library.

    Screenshot

  • NicEdit.com – Micro Inline WYSIWYG Editor
    NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

    Screenshot

  • cssdoc
    This is starting as a little approach to help individuals and teams to improve writing, coding, styling and managing CSS files. The main concept is to put all the good and tested usage of DocBlock comments into CSS. That’s putting style, docblocks and tags together.

Ajax, Javascript

  • Lightview
    Another tool which creates lightboxes or images galleries.

    Screenshot

  • ie7-js
    IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
  • Mootools animated sidebar menu
    This tutorial explains how to implement an animated menu using mootools JavaScript library.

    Screenshot

Web-Typography

  • Better web typography
    Craig Grannell demonstrates how to take a leaf out of print typography’s handbook in order to transform your type using a baseline grid.
  • TypeNeu / Typography News for Type Perfectionistas
    TypeNeu is a social platform and source of inspiration for all you typophiles. The project reports on the past, present and the future of typographic culture. Apparently, “typophile is a common diagnosis, and yes this is the cure.”

    Screenshot

  • sIFR Tutorial: Use Your Own Fonts
    Unfortunately, using sIFR is somewhat programmatic in nature and reliant on the user having a little familiarity with JavaScript and Flash. So for those who care more about implementing the effect than the actual programming behind it, here’s a quick guide to get you started.

Articles and Publications

  • Advancing Advanced Search
    How uses advanced search? How to design it properly? Answers can be found in this article.
  • CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
    A comprehensive article about CSS Stripes, advantages they have and the tools you can use to generate them “on the fly”.
  • Google to Wikipedia: “Knol” thine enemy
    Google has announced the development of a service which will make it easier for those with knowledge to share it with the world. The system is called “Knol”—which refers to a “knowledge unit”—and it will let anyone create, edit, and profit from creating a page packed with information on a specific topic. In other words, Google doesn’t just want to link Wikipedia, it wants to be Wikipedia. And Google doesn’t want to miss the traffic which steadily goes to Wikipedia pages. Can Google be evil?

    Screenshot

  • Understanding CSS Colour modes
    CSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new colour modes that CSS3 introduces are still a riddle to most. In this article the author walks through all the different options we (will) have to define our colours.
  • Account Sign-in: 8 Design Mistakes to Avoid
    Designing a user-friendly account registration is quite difficult to achieve. Jared M. Spool explains how to do it properly. Account Sign-In: 8 Design Mistakes to Avoid.
  • Improve website load time by 500% with 3 lines of code
    To reduce the server load, you can make fewer HTTP requests, add a far-future expires header, Gzip your page’s components, minify your JavaScript, CSS and HTML. And you can use one single PHP-script to do just that.
  • 12 Steps to Creating a Professional Web Design
    Web design from scratch. Although there is no “one size fits all” process to creating a website, there are a number of things a website designer must do to create a professional web design and website. 12 of them are listed in this article.
  • How to Get Transparency with .PNG in Multiple Browsers
    This article analyzes the Cross Browser Transparency with .PNG and shows some approaches of how this problem can be solved.
  • How to Build a Web Start-up
    Did you know that 7 years after starting, only one-third of new businesses have positive cash flow? In this series of articles and videos Ryan Carson will share the things he’s learned — starting with building a cash flow spreadsheet — to help your start-up succeed and avoid the deadpool.
  • Automatically Version Your CSS and JavaScript Files
    The Particletree team describes how you can integrate version control in your CSS- and JavaScript-coding with htaccess changes, CSS and PHP.
  • Trendmap3 Countdown: 2008 Predictions
    Oliver Reichenstein predicts the main happenings for the year 2008. Facebook redefines itself as an online identity service and, Digg will be sold to a News Corporation.

Design-Galleries, Showcases, Inspiration

Icons, Fonts, Templates, WordPress Themes

  • Free logo templates
    Vlastimil Svoboda creates free blank logos templates and free vector art images in Adobe Illustrator EPS files and offers them for free download. This set can be useful if you are stuck in the middle of the creativity block working on a logo design.

    Screenshot

  • Free Icon Sets
    DryIcons.com offers 9 high quality icon sets for free download. All sets contain icons commonly available in 16×16, 24×24, 32×32, 48×48 pixel 32-bit transparency PNG format and 128×128 pixel Photoshop’s PSD format.
  • 90 Free Vector Icons Set – Web Design Blog
    The link was removed due to copyright infringement.
    A set of 90 high-quality free vector icons, all stored in one EPS file.

    Screenshot

  • Free Pixel Flag Icons
    This is a set of 177 free 27×17 pixel flag icons created with transparent backgrounds.
  • 100 Excellent Free WordPress Themes
    All these high-quality WordPress themes can be downloaded, customized and used for free in both personal and commercial projects. The article has 8 sections: vibrant, minimalistic, magazine style, grid-based, clean and legible, advanced, experimental, photoblog and videoblog.

    Screenshot

  • Theme Test Drive – WordPress Plugin
    Theme Test Drive WordPress plugin allows you to safely test drive any theme on your blog as administrator, while visitors still use the default one. It happens completely transparently and they will not even notice you run a different theme for yourself.
  • 35 Grunche Splash Vector Graphics
    A set of Grunche Splash Backgrounds Vector Graphics includes 35 .eps-files packed in a zip-archive [13.2 mb]. Released under the Creative Commons Attribution-Non-Commercial 3.0 license.

The Last Click

  • Spam One-liners
    Spam can be… beautiful. Linzie Hunter collects Spam-mails, looks for interesting word combinations and phrases and presents them visually. In most cases the emphasis lies on typography. The result is quite impressive.

    Screenshot

  • Feltron Eight
    Nicholas Felton is 30 years old and lives in New York City. Every year he compiles a report about most important facts and events in his life, in his environment and in the world in a pretty nice infographics.

    Screenshot

  • Helvetica: The Movie
    Helvetica is a feature-length independent film about typography, graphic design and global visual culture. Complete movie is now available on Google Video.
  • Alison (Images)
    The life in photos. “When my daughter Alison was born, in the tradition of a new parent, I began to photograph her, initially in a separate and private body of work. However, in the process of documenting Alison’s growth, I developed a passionate interest in human relationships and capturing intimate moments in the lives of family and friends.” An incredible piece of art.
  • Everyday (Video)
    Noah Kalina has taken a picture of himself everyday for 2356 days. He has never smiled. Not even once.
  • Apple MacBook Air
    Apple has introduced MacBook Air, the world’s thinnest notebook which weights 3 pounds (1.36kg). Apple claims that MacBook Air is ultrathin, ultraportable, and ultra unlike anything else. However, there are at least 10 reasons to wait, as some details certainly are cause for concern: the processor, docks, overall speed and expandability are only few of them.

    Screenshot

↑ Back to top

The Smashing Team loves high-quality content and cares about 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

    I’m still in awe by that css text wrapper thing, that thing is amazing.

    0
  2. 2

    Nice post. Some pretty cool stuff on here.

    0
  3. 3

    Keep ‘em coming next month!!

    0
  4. 4

    Thanks for including a link to my gallery of minimalistic website designs.

    0
  5. 5

    Too bad, Helvetica, the movie is already gone. Any alternative links?

    0
  6. 6

    I think it’s worth nothing that IE8 doesn’t actually pass the ACID 2 test. As noted in their announcement, IE 8 will require a special meta tag to actually render pages with their new rendering engine. So it’s slightly misleading t say that IE 8 passes the ACID 2 test — it contains a rendering image that could pass the ACID 2 test if it didn’t require special markup.

    Anyways – thanks again for the great list of stuff!

    0
  7. 7

    It will be great to see what changes when IE8 comes out. If they use backward compatibility tags and what that will do to the web as we know it. I personally think it will be a good safety net so that sites don’t take a dive with a new a new browser comes out. Maybe that will be on the Best of 2008. . . Or Worst of 2008.

    Great list!

    Thanks

    0
  8. 8

    I’ve had trouble with ies4osx. It doesn’t load any interface fonts or inputs (web address bar missing), though it seems to work fine besides that. Anyone have luck with that?

    0
  9. 9

    Nice! Lots of helpful links!

    0
  10. 10

    Goodness me! What a roundup; there’s enough to keep me going for a month.
    Some great links to some even greater resources. Particularly impressed with theme test drive plugin–that is very useful. I’m always tweaking, so this is invaluable.

    The understanding css colour modes was also pretty useful; and I thought I understood the topic ;)

    The better order lists item has made me rethink my own ordered lists.

    An inspiring post (yet again). Great work SM!

    0
  11. 11

    That’s a really nice list. Now I just need a cup of coffee and then start browsing the links :)

    0
  12. 12

    Better em calculator is there: http://riddle.pl/emcalc

    0
  13. 13

    Holy *?%¤# what a list. You guys are kings…

    0
  14. 14

    Excellent resource yet again :) Thank you for linking to my css colour modes article!

    0
  15. 15

    Amazing list as always guys! How you manage to find all that stuff is beyond me :)
    Thanks for linking to two of my articles.

    0
  16. 16

    Do you think it’s a free icon set?
    http://yellowicon.com/stockicon/view/11/angular_stock_icons

    I feel bad, I never believe that smashing guys can post links to warez !

    0
  17. 17

    Vitaly Friedman & Sven Lennartz

    January 26, 2008 7:34 am

    @Oh no: thank you for pointing us to the original source. The link has been removed.

    0
  18. 18

    Love the CSS-iconizer thing…just installed it on my blog!

    0
  19. 19

    Best of collection, at it’s best – smashing M is amazing ^^

    0
  20. 20

    Very very nice post. It’s an amazing collenction.

    0
  21. 21

    Yes definitely an amazin list…especially those posts concerned with CSS

    0
  22. 22

    Thanks for the post, a great collection of many useful things!

    0
  23. 23

    Great collection. I will take a look at them one by one. Thank you for providing so much useful resources.

    0
  24. 24

    A fantastic collection – thanks so much for the useful links.

    0
  25. 25

    Good collection with useful links

    0
  26. 26

    Thanks for featuring my Em Calculator. Again another fantastic set of links for developers.

    0
  27. 27

    What a fantastic list of links. I could definitely use/put to use a lot of this stuff. Thanks!

    0
  28. 28

    Karanlık Sokak

    0
  29. 29

    Glad somebody has the time to wade through and weed out all the quality postings, apps and tips every month.

    A truly fantastic resource, at a bargain price!

    Now I just need someone with the time to read through and try everything!

    Thanks

    0
  30. 30

    Cool collection . Thanks to given this informations

    0
  31. 31

    Great list. I look forward to these lists every month :)
    THANK YOU !!!

    0
  32. 32

    Drawter is really cool, I’m looking forward for Amateur version! Thank you!

    0
  33. 33

    looks cool

    0
  34. 34

    I’m so glad to see the Best Of’s make a return. This is by far my favorite article to find on Smashing every month.

    0
  35. 35

    You guys rock! once again what a great post.

    0
  36. 36

    This is really very useful and coll post, thanks ;-)

    0
  37. 37

    Very thorough list! The CSS Text Wrapper thing is lots of web geek fun!

    Also appreciated the link to one of my articles…thanks.

    0
  38. 38

    Yeah, that’s a very big collection! Maybe too big for the best.

    0
  39. 39

    Seriously, I look forward to these lists every month. I have not seen one better collection of amazing stuff all in one place that could ever top your monthly lists. If I could make sweet love to your lists and father their children in some way, I would.

    Seriously. They’re THAT good.

    They make me want to cry.

    *sniffle*

    0
  40. 40

    i love you guys
    Thx for giving us so much joy every month with the best list over the internet
    U rox a lot

    0
  41. 41

    I need 40 hours a day just to keep up with all the new cool stuff that comes out each month. Total overload.

    0
  42. 42

    Computer Repair

    June 19, 2011 8:40 pm

    Ur Website is Kool ! Also Checkout this Computer Repair Course !

    0

↑ Back to top