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

CSS-Techniquies, (X)HTML, PHP

• Circular Menu with CSS
  
  This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example.
• CSS Tips
  10 CSS Tips from Google blog Google Blogoscoped: CSS Bug Hunting, Anti-aliased PNG files, Quick ‘n’ dirty rounded box corners, Opacity, Cross-browser padding, CSS Hacks.
• CSSeasy.com
  Free fixed and fluid CSS layouts: The modern way to learn CSS.
• CSS Layouts
  
  168 of the most common website layouts made in Cross Browser, Standards Compliant CSS. Works in Internet Exporer 6, Internet Explorer 7, Firefox, Opera, Safari etc.
• Uni-Form
  Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, accessible and usable forms.
• Devthought: CSS+JavaScript Navigation Menu
  
  Presents a tutorial on how to design an interactive site navigation with CSS and JavaScript-effects (Mootols-Bibliothek)
• Default Styles for CSS
  Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.
• How to choose your hotel room with CSS and JavaScript
  This articles shows, how to implement the online order procedure of a hotel room with CSS und JavaScript.
• Form field hints with CSS and JavaScript
  
  Tooltips can be useful if they provide needed information. This article explains, how to fade in field hints while some fields are processed.
• 25 Code Snippets for Web Designers
  An overview of useufl techniques and code snippets.
  There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs – here we bring together 25 of the most helpfull in the first part of this series. 25 more code snippets can be found in the second part of the article.
• CSS+JavaScript Font Detector
  This Javascript code can be used to guess if a particular font is present on the users machine. It uses simple Javascript and some CSS rules to check whether that font is available.
• Time Sensitive CSS Switcher
  CSS Switching script that changes style sheet based on time of day.
• CSS speech bubbles
  
  A simple CSS only method of adding a little style to your comments. This uses 5 images per ‘bubble’ which can be easily customized to have any background color.
• Control.Tabs : Unobtrusive CSS Tabs for Prototype
  Control.Tabs is a JavaScript library for creating accessible, flexible & unobtrusive tabbed interfaces in your applications or pages. It uses anchors and element ids to function, so browsers that do not support JavaScript will still be able to navigate through your tabs.
• Grid Systems: Oh Yeeaahh!
  
  Grid Design is becoming more and more important. Khoi Vinh and Mark Boulton describe in their presentation a way to create impressive design with few simple grid-based considerations.
• Creating a CSS layout from scratch
  This 12-steps-guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.
• Solid Block Menu
  A new horizontal CSS-based navigation menu. This is a lean, professional looking CSS menu that’s draped in a solid two color background image. The divider between the menu items is simply a white CSS border. The style is extremely easy to customize thanks to the simple background image used.
• 101 CSS Resources to Add to Your Toolbelt of Awesomeness
  101 CSS-techniques, tools and resources in an overview. Among them CSS Templates, Layouts, Code Snippets, Tips, Tutorials and Utilities.
• CSS Boxes with Outside Frame (Rounded or Not)
  CSS Boxes with Outside Frame (Rounded or Not)
  Learn how to create a box with an alpha-transparency frame that can expand and shrink to fit your content and will be able to sit above all sorts of different background patterns.
• ShadedBorder: JavaScript Round Corners with Drop Shadow
  Steffen Rusitschka is keeping the rounded corner legend alive with his new RUZEE.ShadedBorder JavaScript library.
• 8 web menus you just can’t miss
  “I will show you some great examples in this posting which I hope you will enjoy and use on your websites. Some of them are built by me while other have credits but are free to use.”
• CSS Link Backgrounds
  In this experiment I will attempt to make in-line link backgrounds, to mark external links, that work in all browsers.

CSS Tools and Services

• Free CSS Editors
  A list of free CSS Editors and over 70 of the most popular CSS tips, tricks, tutorials, examples.
• CSSFly
  CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Take a look at Chris Pederick’s Web Developer Firefox Extension, too.
• 10 Free CSS Graph Resources Generators
  10 CSS Generators or Techniques that may help you in generating CSS graphs.
• 6 Tools for Web Design at The Apple Blog
  6 ultimate useful tools for efficient web-development. Among them Textmate, Subversion, Linotype FontExplorer X and more. Besides: useful references in comments.

Web-Typography

• Add Windows Vista fonts to your stylesheets
  Windows Vista is finally released, but web-developers still hesistate to make use of Vista fonts in Web. Christian Montoya presents “the old” and “the new” fonts, shows differences and advantages of Vista Fonts. Learn how to download Vista Fonts for free in our recent article.
• Baseline Rhythm Calculator
  Graphic designers know that layouts with a consistent baseline will look much better than inconsistent ones. Even if you are not a graphic designer, this is an easy way to make your text look tidy. Our free Baseline Rhythm Calculator can be used to generate a basic stylesheet with the proper calculations. The unwritten rule in web-typography says that the perfect proportion lies somewhere between 1:1.5 and 1:1.7.
• Web Typography Sucks | Slides and notes from SxSW 2007
  SxSW presentation by Richard Rutter and Mark Boulton about web-typography, its main rules and its future.

Articles and Publications

• Design View / Andy Rutledge – Web Standards: it’s about quality, not compliance.
  “The Web standards movement faces widespread resistance and apathy, in part, for the most ridiculous of reasons. These reasons are unnecessarily supported by poorly chosen terminology and how the message is being communicated.”
• 10 Quick Tips for an Easier CSS Life
  As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible.
• Choosing an Accessible CMS
  How do you go about choosing an accessible content management system (CMS)? What are the main criteria for success? And how to ensure ease of use for authors including screen reader users? An overview of Jadu, Mambo, Joomla, Quick and Easy, Expression Engine, Plone, Drupal, Texpattern, Xoops and Typo3.
• Redesigning the ExpressionEngine Site
  
  Observing design process is always interesting, particularly if the results is both functional and beautiful. Jesse Bennett-Chamberlain about the redesign of ExpressionEngine.com.
• The Principles of Beautiful Web Design
  The article describe the fundamental principle and concepts of developing page layout and page composition.
• The business case for Web standards-based development
  Building Web sites with modern standards-based techniques can reduce bandwidth costs, enhance accessibility, and facilitate content management. This article prompts you to ask whether your Web techniques are stuck in the 1990s.
• Setting & Retrieving Accesskeys with JavaScript and DOM
  Accessibility expert Ian Lloyd revisits the accesskey attribute, working with JavaScript and the DOM to enable users to set their own access keys.
• Ten Productivity Tips for web designers
  To imrpove productivity isn’t that hard as it seems to be. Ben Hunt lists 10 steps to a better efficiency.
• (The Only) Ten Things To Know About CSS
  10 important aspects of CSS, a getting-started list to make sense of CSS.
• Google Blogoscoped CSS Tips
  A dozen of useful CSS-tips like CSS Bug Hunting, “Centering the thing”, “Anti-aliased PNG files” and more.
• Design your content
  The following philosophies show you how to design for content. Part two will show you how to use other elements to improve your content in a more practical way – by Andrew Faulkner.
• 4 Steps To Effective Web Design Pricing
  Perhaps one of the hardest skills to learn when freelancing in web design is how to fairly and effectively price your services. A project quote can either sell a client, or turn them away. Here are some guidelines on how to develop a web design pricing guide.
• Ultimate htaccess Examples
  .htaccess: “here’s my list of the ultimate htaccess code snippets and examples that I use all the time.”
• Web apps: from idea to launch
  Planning to build a web application? These are the 10 steps that will get you from idea to launch.
• Evaluation of WYSIWYG editors (2007)
  Test of accessibility features in WYSIWYG editors. Apparently, XStandard and EditOnPro are the best.
• The Definitive Post on Gzipping your CSS – Compressing CSS
  This post is the source for the most definitive/recent/tested method (in the scope of this blog) of gzipping your CSS when either Apache compression module is not available for use.
• 13 Ways to Avoid Building Web Applications That Suck
  13 Ways to Avoid Building Web Applications That Suck. At the risk of giving away all of my (not so secret) secrets, here are some useful things to do.
• No Margin For Error
  How many times have you heard someone say: “Why does my site look different in IE than in Firefox”? This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers.
• 10 Photoshop Masters
  
  I’ve been working with Photoshop for some time now. I really like the software and what can be achieved using it. What amazes me more is the quality of works that were done using it. There are people who really know how to push the boundaries of the tool and produce astonishing pieces of work. It is exactly those people, whom have inspired me that i want to list in this post.
• X/HTML 5 Versus XHTML 2
  The competition to become the next markup language for the Web is heating up. This article takes a look at what’s cool and what’s uncool about the competing technologies.
• Euroblog 2007 – Survey and Conference – Weblogs in Communication Management
  The European survey “Social Software – A Revolution for Communication?”. Over the last year the amount of weblog-readers, weblogs and readers of RSS-feeds had doubled. More than 400 communication experts from all over Europe participated in the second major study dealing with the way weblogs and social software are changing organizational practice. The survey, co-ordinated by the European Public Relation Education and Research Association (Euprera), builds a comprehensive picture of the impacts imposed by weblogs, podcasts, RSS, video- and picture-sharing.[via Praegnanz.de]
• Creating User Friendly 404 Pages
  We understand what 404 means: Page Not Found. But the average internet user has no idea what 404 means or what to do about it. To them, it’s yet another unintelligible error message from the computer. Most 404 pages are unvarnished geek-speak.
• Google Search Engine Ranking Factors
  
  This document represents the collective wisdom of 37 leaders in the world of organic search engine optimization. Together, they have voted on the various factors that are estimated to comprise Google’s ranking algorithm (the method by which the search engine orders results). The result is a resource of incredible value – although not every one of the estimated 200+ ranking elements are included, it is my opinion that 90-95% of the knowledge required about Google’s algorithm is contained below.

Design-Galleries, Showcases, Inspiration

• 30 Free Fading Background Images
  This is the first set and consists of a color fading to white. All fading background images in this set fade into white, so for the best results, you should set the CSS background color of your “body” to #FFFFFF. These fading background images are intended to be used with your CSS in a repeat-x fashion. All files are in PNG format and are on average 4K in file size.
• Neil Duerden : Freerange creative thinking ++
  Creativity can be sexy. Inspiring works by Neil Duerden impress. Motifs: Print-Design, Graphics, Advertisement.
• FullSingle – Full site Single page
  FullSingle is a showcase of web sites that are just one page in size.
• Top 10 Most Beautiful Blog Designs
  Some interesting blog design examples. Even if you are not a web designer you will probably find inspiration on this list.
• The 45 Best Technology Sector Corporate Web Designs: A-G
  “I spent the time to look through 414 websites of publicly traded companies in the technology sector starting with the letters A-G, and chose the 45 best designs. See what having millions of dollars for a budget can get you.”
• Pro Web Art
  ProWebArt is web design gallery where we collect the most inspirational and quality web designs.
• Complete Logo Design Guide
  
  An extensive list of quality resources that can help you to learn more about everything related to logo design. Facts, history, tutorials, tips, designers, portfolios and everything you need to know about logo and logo design. “We have collected more then 300 links in 14 categories related to logo design but there are a lot more quality resources out there so we apologize to everyone who should be here on this list and aren’t.”
• Best of Weblog-Design
  
  A list of 30 best Blog Designs. Among listed sites are Ologram.be, Twisted Melon, Alazanto and Superflousbanter.
• Magic lighting effect in photoshop
  How to create a magic lighting effect in Photoshop.
• Well-formed data | Elastic lists
  
  A Flash-based demonstration of an “elastic” list to present complex data structures. More examples can be found on Well-Formed Data and in the article Infosthetics: Form Follows Data.
• Best Front Design Archives
  Newspaper design should boost readership and revenue. We achieve these goals by improving our clients’ content with editing and design.
• Netdiver Reel Shorts
  Brilliant storyboards and visual fx from either studio reels, shorts, flash intros, advertising spots or films. They rely on video or illustration or text or assortment of all. Some require interactions, others, just sitting-back and watching. By Carole Guevin.
• Put Your Best Foot Forward
  Below is a list of 19 sites I gathered from around the web who have footers that caught my eye. Some are aesthetically pleasing, some offer atypical forms of navigation and functionality, and some just plain work well.
  You might want to take a look at CSS-Based Footers: Modern Solutions.

References, Tutorials

• 15 Javascript Snippets You Can’t Live Without
  You either love Javascript or you hate it. Either way it can provide great functionality that users love. And it doesn’t have to affect usability. Here are 15 Javascript snippets for making great sites with a little bit extra flavour: Image Loading & Fading, Dynamic Data Tables, Tabbed RollBar, Draggable Windows, Drag & Drop Shopping Cart, Sliding Content Areas.
• Linotype FontExplorer X
  
  In March Linotype finally released a Windows-Version of one of the most popular Font Management-Tools – Linotype FontExplorer X. The tool is now available for download, free of charge. No license fee, no shareware, or nag screens, and no functionality limits. [via Praegnanz.de]
• Yahoo! Widgets – 1,000s of Widgets for your Mac or Windows Desktop
  
  The fourth version of the popular Widget Engine was released. The Yahoo! Widget Gallery offers over 4,000 desktop Widgets – the most available anywhere online. New feature is Widget Dock, which helps you to organize your widgets more efficiently. Yahoo! Widgets is the only major desktop Widgets platform that works on both Windows and Mac OSes. Alternative: Google Desktop. The latter is also available for Mac-users now.
• TextExpander
  Ergonomy from its best side: TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings and images. The tool is available onlz for Mac OS X.
• Design Workflows at Work: How Top Designers Work Their Magic
  26 Designers, 10 questions. Have you ever wondered how the top designers work their magic? What is their workflow? What tools and techniques work best for them as they create compelling and inspiring designs? The purpose of this panel is to help you learn more about the workflows that work best in today’s fast paced environments.
• A Roundup for “Developers, Developers, Developers”
  Developer Tools for project planning, system administration, usability testing, collaborative development, and web services. A compilation of products that developers may find useful.
• Goplan
  Goplan is an online project management solution. It allows teams and individuals to collaborate through tasks, file management, real-time chat, online calendaring, and many other features. You can test the service with login demo@goplan.org and password demodemo. [via Cameron Moll]
• Scrapblog
  
  Rich Internet Applications are coming. Online Flash application that lets you drag and drop photos, video, text and audio onto a background image and export the result in a variety of formats.
• Mobile Web Developers Guide
  The guidelines of Mobile Webdesign. The essential facts you should know about the design for mobile devices – for printing and learning. By Ronan Cremin, Jo Rabin, Brian Fling, D. Keith Robinson. 91 pages in .pdf.
• The Web Design Process Round-Up
  Dozens of references related to “Design Process”. Where to start from? How to start? How to solve problems? This article provides references to answers.
• The top 50 Firefox extensions
  Firefox is fantastic, but with the right add-ons you can make it bigger, better and faster and more flexible. Gary Marshall shares his list of the 50 esential Firefox extensions. You are definitely familiar with many of them, hopefully not with all of them.
• Most Hired
  Most Hired collects job opprtunities from the following job boards: 37 Signals Jobs, 37 Signals Gigs, Krop, Venture Beat, Authentic Jobs, GigaOM Jobs, Joel On Software, Crunch Board, MeFi Jobs, FreshWebJobs, Slashdot, CSS Beauty, MinistryCamp, Boses and Arrows, Design Meltdown, nPost.
• Apollo – Adobe Labs
  Apollo is a cross-OS runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s. A Developer-Kit and a Runtime for Apollo-applications can be downloaded from Adobe Labs for free. Apollo Cheat Sheet is already available.
• DHTMLSite – Ultimate Resource on DHTML/AJAX Scripts and Tutorials
  This new projects collects fresh CSS-Snippets, techniques and tools for web-developers.
• Free CSS Editors
  An overview of 14 CSS-editors and 70 CSS-based techniques.
• Ruby on Rails resources
  An overview of Ruby On Rails-applications, examples, tutorials and further related articles. A goldmine for users, who work with Ruby on Rails on a daily basis.
• Digital Web Magazine – The Working Designer
  New section in the Digital Web Magazine: In this compelling series, talented web designers choose one of their projects and walk us through their thought processes and workflows as they create exceptional designs. The column offers a unique opportunity to watch designers at work, seeing what inspires them, how they address challenges and solve problems, what motivates their choices, and how they work with clients and other team members. [via Manuela Hoffmann]

Tools, Web-Services

• Truwex
  Free validation tool to check web site accessibility. “The major difference is that Truwex checks the generated source, not just the raw HTML source. That means checking all the ugly HTML that gets injected into the page by JavaScript…” [via Roger Johansson]
• Sitescore 2 – how does your website score?
  
  Silktide released the second version of Sitescore – tool, which analyzes web-sites, detects mistakes and problems, reports them and rates sites. The service is available for invited useres only.
• ready.mobi Report
  This report tests the mobile-readiness of your site using industry best practices & standards.
• QuestionForm
  
  Questionform is a web application for creating, publishing and analysing online surveys and forms.
• popuri.us
  A tool to check at-a-glance the link popularity of any site based on its ranking (Google PageRank, Alexa Rank, Technorati etc.), social bookmarks (del.icio.us, etc), subscribers (Bloglines, etc) and more.
• PicFindr3
  PicFindr is a rich internet application (RIA) that helps you search several stock image and photo community sites simultaneously. PicFindr searches the web* for stock photography that is completely free to use commercially.
• GridMaker
  GridMaker is a small script for Photoshop which allows speedy development of simple grids. At the moment it works only in Adobe Photoshop CS2.
• Top Web Tools of the Month
  An overview of interesting new online-tools, like PassPack for password management, Zamzar for data conversion and HighRiseHq as Online Contact Manager.
• Stripe Generator
  Generate seamless striped background images.
• ThinkFree
  ThinkFree a tool with integrated Microsoft Office-functionality (Excel, Word, PowerPoint), now offers a Wordpress Viewer Plugin. With this plugin you can integrate MS Office documents, spreadsheets and presentations in your weblog.
• Jimdo – Pages to the People
  Jimdo is a very easy to use webservice where you can create your own Jimdo-Page (website) for free! Integrate pictures, videos, texts easily into your Jimdo-Page, change the design with one click, add as many pages as you want. Alternative: Google Page Creator.
• Deskload – Your Online Desktop
  Deskload is an online desktop-like bookmarks organizer that allows you to manage and share your favorite links.
• everystockphoto
  everystockphoto.com is a search engine for 1,000,000 photos released under the Creative Commons license. “We are now searching over one million free photos! We have been adding creative commons photos as a part of our ongoing efforts, and we will soon be adding large numbers of public domain photos as well.”

Ajax, Javascript

• base2.DOM: Yet Another JavaScript Library Without Documentation
  Just what the world needs, another JavaScript library. Because this library is standards-based it means that you don’t have to learn a new API. It uses standard DOM properties and methods throughout which also means that I don’t have to write any documentation. It is part of a suite of little libraries that I’m developing called base2. This is the first library under that umbrella and is called base2.DOM.
• DED|Chain JavaScript Library
  DED|Chain is free open source software (BSD License) that will allow you to build first class, high-quality websites without the cruft. You get the reliability of Yahoo! UI, and the developer friendliess of jQuery. You also receive the benefits of an easily customizable A.P.I. which puts you in control of how you will work with the library.
• How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS
  In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed on most computers; old computers won’t take 10 minutes for a DIV to slide down.
• Squish
  The Squish for Web edition enables testing HTML-based Web and Web 2.0 (Ajax) applications in different web browsers running on different platforms.
• Switch Content Script
  Switch Content Script is a flexible script that adds contact/expand functionality to arbitrary block content on a page using a simple “icon” to toggle its state.
• Ext Library
  Anyone new to using the Ext library or trying to learn more about it has come to the right place. This tutorial will walk through Ext basic concepts and how to get a dynamic page up and running quickly. It is assumed that the reader has some Javascript experience and a basic understanding of the HTML document object model (DOM).
• Making a Font Selector
  “We recently made a font selector for this site to offer visitors the option of changing the type-face to something they’re more comfortable with. This font selector was made with a PHP Hypertext Preprocessor (PHP) script which, unlike JavaScript, is a server-side utility, meaning users don’t need to have any special add-ons or plugins for their browser to use it.”
• Ajax MGraph
  
  Ajax Graph based on Prototype.js. Pure XHTML/CSS Graph, User interactive, Runs in Firefox IE and Opera, PHP Powerer – easy database integration. The script runs in Firefox, IE und Opera.
• The Cruiser Behaviors Library
  “Dan Yoder has created the Cruiser Behaviors Library, extensible stylesheets for decorating DOM elements with interfaces and event handlers. Cruiser uses Prototype, and is inspired by the Behaviour library itself. [via Ajaxian]
• 15 Javascript Snippets You Can’t Live Without
  An overview of 15 useful JavaScript Snippets. Among them Image Loading and Fading, Dynamic Data Tables, Tabbed RollBar, Draggable Windows and more.
• Javascript code prettifier
  A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page (correctly highlight code written in C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles).

Icons, Fonts, Wordpress Themes

• Freebies | BittBox
  Collection of free Abstract Illustrator Brushes, Patterns, Grunge Fonts, free vectors.
• Sweetie | Cute and clear icons
  A set of clean icons for use in web applications or program interfaces.
• Baroque Borders
  A fancy ornamental set of seamless borders in vector format. Each border has a left and a right ending piece and a seamless center piece that can be duplicated to create any length of border.
• Free Fonts of the Month: Geo Sans, OT Versa, Diavlo
  
  We continue to collect most beautiful high quality freefonts, which can be used for both private and professional projects without any restrictions whatsoever. Geo Sans, Mank Sans, OT Versa, Diavlo and more.
• 8 Fresh Wordpress Themes
  Nice Wordpress Themes are quite hard to find. Let’s take a look at 8 Fresh Wordpress Themes.

The Last Click

• Business card for personal trainer
  Sometimes it’s enough to get kicked by your inspiration to win new customers. An unusual Business Card for a usual Business Company.
• MSR Asirra: A Human Interactive Proof
  Asirra is a human interactive proof that asks users to identify photos of cats and dogs. It’s powered by over two million photos from our unique partnership with Petfinder.com. Is Asirra a future alternative to Captcha? [via Maratz]
• YouTube – OK Go – Here It Goes Again
  
  Apparently treadmills can be used for different purposts. Turn on the music, think of some unusual kind of dance, upload it to YouTube and become one of the best YouTube-Videos ever uploaded. The winner of YouTube Video Awards was added to the YouTube’s Greatest Hits.