We continue to collect the best web-development-related sites, articles, references, tutorials and freebies released or published online over the last month. Below you’ll find a list of useful resources you shouldn’t have missed in January 2007.

Design-Galleries, Showcases, Inspiration

• Zeniltuo.com - inspiration journey
  All website galleries in one page (CSS & Flash)
• Email Design Gallery
  The Campaign Monitor email design gallery highlights the amazing email designs being sent by our talented customers each and every day.
  

Icons, Fonts, Wordpress Themes

• Five Freefonts You Shouldn’t Have Missed
• Free Photoshop Brushes
  HUGE collection of Photoshop Brushes and Patterns to download, or upload your own.
• 12 Basic Free CSS Templates
  These templates are intended to be a starting point for your own designs, they aren’t in any way meant to be an actual website design. The templates include some basic directory structure as well as basic markup and styling. You can preview the templates by clicking one of them below.
• CSS Layouts: 1, 2, 3 and 4 Column Layouts All the CSS layouts you see here are 100% free: no catch. There’s over 50 to choose from, so there’s no need to worry about running out of ideas. Grab ‘em, use ‘em, love ‘em - that’s all we ask.
  
• Designing a WordPress Theme From Scratch
  A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice.
• Free XHTML/CSS Website Templates All templates in this section are FREE, tableless, W3C-compliant web design layouts designed by Template World designers. These templates have been tested and proven compatible with all major browser environments and operating systems.
• Useful resources for creating a Wordpress theme To kick off my blog for 2007, I am going to write a series of posts for people wanting to know how to create a Wordpress theme. Here’s some resources I’ve found useful for putting one together:
• Valacar’s Userstyles: Google, YouTube
  A collection of userstyles for use with the Stylish Firefox extension
• Web 2.0 Icons Pack
  A small set with 3D Web 2.0 Icons. Use Fireworks to make Web2.0 site’s logo to these icons.
  

Web-Typography

• Whitespace
  Article from Mark Boulton that illustrates and explains Whitespace. - Feel free to take a look at our article White Space and Simplicity: An Overview .
• The Effect of Typeface on the Perception of Email
  This study investigated the effect that a font has on the reader’s perception of an email.
• Best Fonts of 2006
  With each new year, we reflect on the great fonts that appeared on MyFonts during the previous year. We present to you the best fonts from the top ten font design styles of 2006: best text font, retro font, ornament font, techno, Roman, formal script, handwriting, brush script, grunge, and calligraphic fonts. Most Popular Business-Typefaces.
  

References, Tutorials, Tips

• HTML5 Elements and Attributes presents 110 new HTML-elements in a compact overview. The new HTML-Standard is supposed to be released as Web Applications 1.0.
• Visual jQuery Cheat Sheet
  A compact introduction to the JavaScript-Framework jQuery, with examples and detailed tutorials.
• PDF-mags
  Here you find links and soon much more information about free PDF mag’s from all over the world with main focus on art, design, illustration and life.
• Google Ranking Factors - SEO Checklist There are “over 100 SEO factors” that Google uses to rank pages in the Google search results (SERPs). What are the search engine optimization rules?
• Drupal 5.0 After 8 months of development we are ready to release Drupal 5.0 to the world. The Drupal 5.0 release contains many improvements, both visible and under the hood. To jump right in, check the videocasts about Drupal 5.0 ,including “What’s new”, “Installing” and “Upgrading”.
• 100 Best Fonts A professional selection of fonts by Fontshop. A PDF-version of the document is also available.
  
• Code Igniter
  Code Igniter is an Application Development Framework - a toolkit - for people who build web sites using PHP. Its goal is to enable you to develop projects much faster than you could if you were writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries. The QuickTime movies show Code Igniter’s capability.
• Intype
  Intype is a powerful and intuitive code editor for Windows with lightning fast response. First alpha release is available for download.
• WordPress 2.1 Ella
  The latest version of WordPress “Ella” is now available. Here’s a sampling of what’s in the new version: Autosave, easier import/export, our new tabbed editor allows you to switch between WYSIWYG and code editing instantly while writing a post, new search engine privacy option…, 2.1 also includes over 550 bug fixes.
  
• Research-Based Web Design & Usability Guidelines
  The updated 2006 Research-Based Web Design & Usability Guidelines book is now available. (PDF - 292 pages, 161 MB)
  
• Wikipedia Search Engine WikiSeek Launches : WikiSeek is a search engine that has indexed only Wikipedia sites, plus sites that are linked to from Wikipedia. It serves two purposes. First, it is a much better Wikipedia search engine than the one on Wikipedia. Second, the fact that it also indexes sites that are linked to from Wikipedia means that, presumably, it will return only very high quality results and very little spam. In addition to the search engine, WikiSeek has two additional tools - a search plugin for FireFox, IE7 and Opera, and a really useful greasemonkey-like Firefox Extension that will change the way Wikipedia looks on that browser by adding a “WikiSearch” button to the search box
• Learn Ruby on Rails: the Ultimate Beginner’s Tutorial
  While it certainly makes no attempt to constitute a complete guide to the Ruby language, this tutorial will introduce you to some of the basics of Ruby. We’ll power through a crash-course in object oriented programming, covering the more common features of the language along the way, and leaving the more obscure aspects of Ruby for a dedicated reference guide. I’ll also point out some of the advantages that Ruby has over other languages when it comes to developing applications for the Web.
• Prototype Reference Widget
  “In order to get quick access to the documentation I created a simple Dashboard widget.
• Making a Good Favicon
  Favicon Tutorial by Jonathan Snook. Feel free to take a look at our article Inspire Yourself: 50 Remarkable Favicons.
  

Tools, Web Services

• Design-Feed
  Design-Feed is a design feed aggregator. We hand-pick the most interesting design related RSS feeds and present them in an easy-to-browse format.
  
• Hey!Watch
  Online Video Encoding Platform. Enjoy video encoding in the format you need. All formats and devices. A huge list of formats updated frequently (input and output).
• SiteVista
  See how your email newsletters look in a wide range of different email clients, and webmail systems.
• Bubblesnaps
  Create your own Bubblesnap today! Easily add animated speech bubbles to your photos and e-mail them to your friends as ecards!
  
• Ways to test your site for the mobile web
  There are over 40 different mobile devices and more than 160 different mobile browsers. This article lists references to tools, which can simulate the presentation of web-pages on mobile devices.
• Xopus 3.1
  Xopus is an XML editor targeted at people who don’t want to have technical knowledge. Xopus hides all actions that would make the XML document invalid. In Xopus someone can edit an XML document in its published format while Xopus keeps the information separated from the style. And Xopus runs in a browser for easy deployment.
• Email Riddler 2.0
  Email Riddler is an online tool that encrypts and transform your email address into a series of numbers when displaying it, making it virtually impossible for spam harvesters to crawl and add your email to their list.
• Mint 2
  Shaun Inman releases a new version of Mint, an extensible web site analytics program.
  
• BrowserReports
  The project is based on the idea to collect the information about used browsers with the help of voluntary helpers, who place the code of a “collector” on their web-sites. A neck-and-neck race between Firefox and IE continues.
  
• pic2color
  extracts color schemes from images. Online.
• Tinglets are a set of bookmarklets that you can place in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers.
• Typo Generator
  Keyword Misspelling Generator - allows you to generate various misspellings of a keyword or phrase to match common typing errors. Useful for creating keyword lists around your most important keywords to bid on.

CSS-Techniques, (X)HTML, PHP

• Hyperlink Cues with Favicons
  I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?
• 53 CSS-Techniques You Couldn’t Live Without
  Take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
• Custom Reading Containers
  This amazing little script allows the user to resize any container.
• CSS Printing Guide
  A good guide to creating a stylesheet to control printing properties
• PNG Overlay
  Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time
• Create browser dependent stylesheets using PHP
  If you are a web designer you must know that it’s crucial to learn how to detect a browser type and fine tune your design to look the same in using all major browser otherwise you risk losing visitors. There are many ways to detect a browser type and we will talk in this tutorial how to do it using PHP as a programming language.
• Styling form controls with CSS, revisited
  224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.
• Iconize Textlinks with CSS
  With this little CSS technique a user can identify a link by it’s icon. The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.
  
• The Definitive Guide to Web Character Encoding
  What is character encoding? And which form of encoding should you use? Displaying humble text online has its challenges, but as Tommy explains, good character encoding practice takes no more than a little diplomacy in the form of some forethought, and consideration for your users and their systems. His definitive guide makes essential reading for anyone preparing content for the Web.
• Internet Explorer filter or hack using character escapes
  Jens Meiert about a new possibility to filter Internet Explorer with CSS.
• Centering an image | Part 1, Centering an image | Part 2
  There are two techniques for placing an image within a block level element: 1.)Wrapping the IMG element in the block level element within the markup, 2.) Setting up the background-image CSS property for the block level element…..
• Riding Rails 1.2: REST admiration, HTTP lovefest, and UTF-8 celebrations Ruby on Rails 1.2 with new features released. “We’re taking mime types, HTTP status codes, and multiple representations of the same resource serious. And of course there’s the international pizzazz of multibyte-safe UTF-8 wrangling. That’s just some of the headliner features”.
• Simple PHP randomizer
  A simple PHP script that randomizes an optional number of items from an array and creates an HTML list item for each of them.
  
• The easiest way to PNG support in IE6 :This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds.
• Attach icons to anything with CSS
  Thanks to CSS selectors it’s possible to attach icons to anything you want just by adding an attribute of your choosing to your HTML.
  
• CSS Selectors and Pseudo Selectors and browser support
  The following is a range of css tests concerning selectors and pseudo selectors. I have not included all selectors or pseudo selectors, but it is a work in progress, so more will be added as time goes by.
• How to convert Photoshop Design to XHTML/CSS-Layout
  To start off with, this is not a “fit all” tutorial, and I am not a writer. What I can do though, is show you how to take a photoshop layout and make xhtml compliant website that’s easy on the eyes, easy to maintain, and good step in the “standards” direction.
• Five CSS tricks that repeatedly saved my a**e, why need more?
  “Instead let me share with you CSS techniques that saved my a*** whenever I had to create a layout using CSS or proving those wrong that claimed layout tables cannot be replaced”
• Bubble Tooltips
  Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
• CSS support table
  At a glance access to CSS2 support information for all the browsers, plus links to full text descriptions of every bug described.
  
• Good-Looking, Sharp Offset, CSS Text Styling It’s hard to describe this effect, which looking at the title is obvious. This is the kind of styling places like Joyent use in their level two headings, with a very slight white offset. Although theirs are buried within images, mine are CSS (with a little extra markup) and valid xHTML 1.0 strict. Here’s what it does.
• How to convert your photoshop document to a CSS in less than 30 seconds As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document. Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ?

CSS Tools and Services

• DOMAss - The DOM assistant
  DOMAss is short for DOM Assistant, and the idea is to provide a simpler and more consistent way to script against the Document Object Model (DOM) in web browsers.
  
• CSS Documentation Shortcut
  A site that provides a quick redirect to the official W3C documentation for any CSS property.
• CSS Type
  web safe typography on screen for pixel perfectionists

Ajax, Javascript

• Interface elements for jQuery
  Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.
• mootools
  MooTools is a compact, modular, Object-Oriented javascript framework designed to make writing extensible and compatible code easier and faster. MooTools lets you get the job done efficiently and effectively.
  
• AJAX poller script A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs.
• Prototype Javascript Library 1.5
  Prototype Javascript Library Prototype 1.5 and the Documentation is Here

Articles and Publications:

• Cheating Color Jason Santa Maria: Have you ever been strapped to use specific colors outlined in a branding guide? Felt restricted because those colors ended up being too light or dark for the way you want to use them? Here’s the solution: throw out your brand guide…
• How to write a proper CV and get hired as a web developer
  the following tips are primarily for web developers (coders of HTML/CSS/JavaScript and some server side language), they will probably not work for other professions involved in web development. The following is the view of the author, Christian Heilmann and does not represent the view of Yahoo! as a company…
• Heuristics for Modern Web Application Development
  Andy Budd updates the Usability Check List For User Interface Design from Jakob Nielsen for the new web applications we use today.
  
• Markup as a Craft The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code. Your markup might be good now, but following the guidelines in this article will help bring it to the next level. 21 guidelines to markup
• Tips for a Better Design Review Process
  One of the hardest part of a designers job is presenting their work, selling their designs to clients or stakeholders and gathering feedback. The design review cycle. I’ve written up some tips, tricks and advice that will hopefully help a few designers out there turn this dreaded task into something they look forward to.

Don’t be the weakest link
Paul Boag discusses some of the accessibility and usability issues around the way we style up the humble hypertext link

• Enhance your (page) performance!
  Sluggish internet speeds may be a thing of the past, but instant page loads are still the stuff of the future. Christian Heilmann has some tips for delivering faster, smoother pages to your visitors today.
• Firefox 3 Plans and IE8 Speculation - Browsers Heading Apart Again
  Mozilla has published a wiki page detailing its plans for the next version of Firefox, codenamed “Gran Paradiso. The target release date is sometime in the third quarter.
• 10 CSS Tips from a Professional Front-End Architect
  CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. Simply thinking through your process before starting each project will save you headaches as the site grows.
  
• A List Apart: Articles: Quick CSS Mockups with Photoshop
  This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.
• Paper Prototyping
  As interfaces become ever more complex and development schedules seem to get shorter and shorter, you may find it useful to give up your user-interface modeling software for awhile in favor of something simpler. All you need is paper, pens, scissors, and your imagination…
• 15 important research findings you should know
  Small selection of web design, usability, and accessibility related results of research.
  
• Great web tools for the frontend ninja
  Five tools you should always keep in mind, developing web-sites. Among them Functional Accessibility Evaluator, Swift - The Webkit browser for Windows, Sloppy, CSS Compressor and Web Page Analyzer .
• How to Grok Web Standards Many web designers, myself included, come to the web with a background in the graphic arts. We think in pictures, not in code. When we first begin designing for the web, we’ll use HTML and CSS crudely, as a means to an end—a method of arranging pretty boxes in space—without grasping the true nature of the box itself or what it contains.
• Practical, Entry-Level Web Accessibility
  You may have an appreciation of web accessibility but are scared of even going there. This may be because you fear peer review. It may be that you’re concerned you’ll miss a beat or won’t get it quite right. Well don’t be fearful or intimidated. I encourage you to try.
• Web Design Contracts: Why Bother
  Digital Web Magazine, Nick Gould about the problems and solutions occuring in Web-Design and Web-Development-related contracts.
• Must Read Search Marketing Blogs
  lists over 250 popular Weblogs which are related to SEO, SEM, Social Media and Online PR. The Blogs are presented in the alphabetical order.
• Interviewing 9rules ~ A Group Interview
  It’s always a pleasure to interview a 9rules member and get their views on current web design issues. It’s even better to interview six at once. So without further ado, I present the 9rulers in question
• Essential Tools Every Blogger Should Have
  You’ve started your blog and you’re up and running, but do you have the essential tools necessary to be a blogging pro? Here’s a list of tools that will improve your blogging experience and productivity.
• Finding Business
  A common question I get is, “Where do you find your clients?” The fact of the matter is, I don’t. They find me. That’s right. I invest no money in sales or advertising. I don’t even have a portfolio. Yet, it’s not uncommon to get a couple requests a week for work. I believe that there are three good reasons why this is.
• Expectations and Best Practices for Moving to or Launching a New Domain
  “So let’s say you are registering a new domain, moving content from an old domain to a new domain, or shifting domains altogether - what can you expect?” - A very useful article from the SEOmoz Blog
• Seven accessibility mistakes you don’t want to make
  Seven accessibility mistakes that even well-intentioned developers make, and some advice on how to avoid them.
• Best Practices for Title Tags How to Make the Best Title Tag Possible.
• 23 Ideas for Finding New Readers for Your Blog
  Over the weekend I ran an ‘open mike’ discussion which asked the question of How do you find Readers for Your Blog? There were quite a few responses to the question - some of which went a little unnoticed as they were moderated until I got home. So I thought I’d summarize some of the main themes that arose in the discussion with a few quotes from those who left comments.

Colors, Textures

• Kaliber10000 { The Pixel Patterns Collection }
  As the name implies, this section of K10k is a resource for deliciously pixellated patterns. We’ve used a ton of these over the years, so creating a section dedicated to the sharing of these tiling beauties seemed like a rather sensible thing to do.

The Last Click

• Apple iPhone In January everbody talked about it. The “magical”, “a mobile phone of the next generation” is supposed to ignite the revolution in mobile devices and combine multimedia and mobile technologies. The phone, which will cost from $499 (257 Euro) to $599, will be launched in the US in June and Europe later this year. An unofficial iPhone FAQ is already published.
  
• Tim O’Really on Web 2.0 Tim O’Reilly takes a look back at the steps that led to what is now the Internet publishing and education giant O’Reilly Media. He then talks about Web 2.0 being a term that truly refers to the natural continuation of the promise of Web 1.0, post the dot-com shakedown etс. Get a broad view in this engaging 40 minutes with one of the principal Web visionaries.
• blog.josephhall.com Some Firefox-Fans use only Firefox browsing in the Web. Some others use Firefox-Wallpapers on their desktops. Some bake cookies with Firefox Logo.

• Published in Best of the Month, February 7th, 2007
• Tags: best of

• Cubma » Blog Archive » morgonmixen (February 7th, 2007 at 2:56 pm )
• minimlwork » Web-Sites of the Month (February 7th, 2007 at 5:49 pm )
• Web-Sites of the Month: The Best of January 2007 « Tons of Fresh News (February 7th, 2007 at 6:41 pm )
• Mike F » Web-Sites of the Month: The Best of January 2007 (February 7th, 2007 at 10:47 pm )
• 2cents » Blog Archives » Web-Sites of the Month: The Best of January 2007 | Smashing Magazine (February 7th, 2007 at 11:44 pm )
• Web-Sites of the Month: The Best of January 2007 « Blog Archive Prateek (February 8th, 2007 at 7:02 am )
• 煎蛋 » Web-Sites of the Month: The Best of January 2007 (February 8th, 2007 at 9:54 am )
• 1983 » 2007-02-07 Daily Catch (February 8th, 2007 at 12:13 pm )
• Don’t Quibble with Quimble » Blog Archive » Cool Design stuff (February 8th, 2007 at 12:34 pm )
• links for 2007-02-08 | On Influence and Automation (February 8th, 2007 at 8:30 pm )
• The best info for webdesigners online - Jan 2007 at Candyjar - David Ward (February 9th, 2007 at 1:15 am )
• pixtorm blog » Blog Archive » ronda de links # 67 (February 9th, 2007 at 4:42 am )
• 网摘日日看 » links for 2007-02-08 (February 9th, 2007 at 7:29 am )
• links for 2007-02-09 at Just another geek (February 9th, 2007 at 12:34 pm )
• Candes Blog » Web-Sites of the Month: The Best of January 2007 (February 11th, 2007 at 1:50 am )
• Utopia Parkway » Blog Archive » links for 2007-02-08 (February 12th, 2007 at 5:07 am )
• All in a days work… (February 12th, 2007 at 8:11 am )
• lowfatbrains.com » links for 2007-02-12 (February 13th, 2007 at 3:18 am )
• links for 2007-02-20 at orioa (February 20th, 2007 at 2:21 pm )
• Dan Grossman : Stumbling Across the Web #4 (February 21st, 2007 at 1:37 am )
• Links For Thursday 8th February 2007 at Digitalia (February 22nd, 2007 at 10:24 pm )
• After The Dot Net » Blog Archive » links for 2007-02-24 (February 25th, 2007 at 2:51 am )
• links for 2007-03-02 « B-link List (March 2nd, 2007 at 8:36 am )
• 5starideas.com » Blog Archive » The Top 10 Free Time Wasting Sites on the Net (March 29th, 2007 at 5:04 am )
• 5starideas.com » Blog Archive » PC World - 101 Fabulous Freebies (April 16th, 2007 at 2:09 am )
• 煎蛋 » 2007年4月网络最佳 (May 16th, 2007 at 9:36 am )

Leave a Reply