Smashing Magazine - we smash you with the information that will make your life easier. really.

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.

  

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

  

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

  

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

  

• 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

• Creating A Fantastic Fantasy Night Sky In Photoshop
  This tutorial shows how to create cartoon style clouds using Photoshop and a bit of Illustrator.

  

• Icons Speed Drawing
  Icons Speed Drawing — learn how to design professional “users” icons from scratch.
• Top 50 Logo Design Tutorials
  An impressive collection of step-by-step tutorials which can improve your design skills and provide you with a sophisticated approach for designing a logo.

  

• Adobe Photoshop Tutorials – Best Of
  This article provides professional Adobe Photoshop tutorials which can enrich your design skills and improve the quality of your works.

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]

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

• SearchField
  SearchField is a simple lightweight, unobtrusive script that adds styling and behaviour to your search form fields. It features plug & 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.

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

• 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?

  

• 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

• Pricing Table Showcase: Design Patterns for Sign-Up Pages
  In his ongoing series “Elements of Design” Christian Watson now showcases pricing tables. The gallery covers 22 examples.

  

• Button design collection
  You need some inspiration for button design? This collection contains over 140 web buttons harvested from different places across the Web.
• 36 creative logos
  The showcase of some beautiful and creative logos, presented in no particular order.

  

• 25 Beautiful, Minimalistic Website Designs
  An overview of minimalistic, simple and beautiful designs.
• Oriental Gallery – Oriental Design Inspiration, We Show Websites Design You Have Never Seen
  This is a quite different CSS-based design gallery. It showcases Asian web-designs, mostly Korea and China which are at least as good as European or American designs. Bonus: 20+ Creative Russian Web Designs.

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.

  

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

  

• 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 & videoblog.

  

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

  

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

  

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