Menu Search
Jump to the content X

Best of January 2007


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. Links checked: July/04 2008.

Design-Galleries, Showcases, Inspiration Link

Icons, Fonts, WordPress Themes Link

  • Five Freefonts You Shouldn’t Have Missed4
  • Free Photoshop Brushes
    HUGE collection of Photoshop Brushes and Patterns to download, or upload your own.
  • 12 Basic Free CSS Templates5
    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 Layouts6 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 Scratch8
    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 Templates9 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 theme10 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, YouTube11
    A collection of userstyles for use with the Stylish Firefox extension

Web-Typography Link

References, Tutorials, Tips Link

  • HTML5 Elements and Attributes17 presents 110 new HTML-elements in a compact overview. The new HTML-Standard is supposed to be released as Web Applications 1.018.
  • Visual jQuery Cheat Sheet19
    A compact introduction to the JavaScript-Framework jQuery20, with examples and detailed tutorials.
  • PDF-mags21
    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 Checklist22 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.023 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.024 ,including “What’s new”, “Installing” and “Upgrading”.
  • 100 Best Fonts25 A professional selection of fonts by Fontshop. A PDF-version26 of the document is also available.
  • Code Igniter28
    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.
  • WordPress 2.1 Ella29 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 Guidelines31
    The updated 2006 Research-Based Web Design & Usability Guidelines book is now available. (PDF – 292 pages, 161 MB

  • Wikipedia Search Engine WikiSeek Launches33 : WikiSeek (is dead) 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 Tutorial34
    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 Favicon35
    Favicon Tutorial by Jonathan Snook. Feel free to take a look at our article Inspire Yourself: 50 Remarkable Favicons36.


Tools, Web Services Link

  • Design-Feed38
    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!Watch40
    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).
  • Bubblesnaps41
    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 web43
    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.044
    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 245
    Shaun Inman releases a new version of Mint, an extensible web site analytics program.

  • Tinglets47 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 Generator48
    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 Link

  • Hyperlink Cues with Favicons49
    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 Without50
    Take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites.
  • Custom Reading Containers51
    This amazing little script allows the user to resize any container.
  • CSS Printing Guide52
    A good guide to creating a stylesheet to control printing properties
  • PNG Overlay53
    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
  • Styling form controls with CSS, revisited54
    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 CSS55
    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 Encoding57
    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 escapes58
    Jens Meiert about a new possibility to filter Internet Explorer with CSS.
  • Centering an image | Part 1, Centering an image | Part 259
    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 celebrations60 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 randomizer61
    A simple PHP script that randomizes an optional number of items from an array and creates an HTML list item for each of them.

  • Attach icons to anything with CSS63
    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 support65
    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-Layout66
    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?67
    “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 Tooltips68
    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 table69
    At a glance access to CSS2 support information for all the browsers, plus links to full text descriptions of every bug described.

  • How to convert your photoshop document to a CSS in less than 30 seconds71 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 Link

  • DOMAss – The DOM assistant72
    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 Shortcut74
    A site that provides a quick redirect to the official W3C documentation for any CSS property.

Ajax, Javascript Link

  • Interface elements for jQuery75
    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.
  • mootools76
    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 script78 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.579
    Prototype Javascript Library Prototype 1.5 and the Documentation is Here

Articles and Publications: Link

  • Cheating Color80 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 developer81
    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 Development82
    Andy Budd updates the Usability Check List For User Interface Design83 from Jakob Nielsen for the new web applications we use today.

  • Markup as a Craft85 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 Process86
    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 link87
    Paul Boag discusses some of the accessibility and usability issues around the way we style up the humble hypertext link

  • Enhance your (page) performance!88
    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 Again89
    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 Photoshop90
    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 Prototyping91
    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 know92
    Small selection of web design, usability, and accessibility related results of research.

  • Great web tools for the frontend ninja94
    Five tools you should always keep in mind, developing web-sites. Among them Functional Accessibility Evaluator95, Swift – The Webkit browser for Windows, Sloppy96, CSS Compressor97 and Web Page Analyzer98 .
  • How to Grok Web Standards99 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 Accessibility100
    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 Bother101
    Digital Web Magazine, Nick Gould about the problems and solutions occuring in Web-Design and Web-Development-related contracts.
  • Must Read Search Marketing Blogs102
    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 Interview103
    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 Have104
    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 Business105
    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 Domain106
    “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 make107
    Seven accessibility mistakes that even well-intentioned developers make, and some advice on how to avoid them.
  • Best Practices for Title Tags108 How to Make the Best Title Tag Possible.
  • 23 Ideas for Finding New Readers for Your Blog109
    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 Link

  • Kaliber10000 { The Pixel Patterns Collection }110
    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 Link

  • Tim O’Really on Web 2.0111 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.com112 Some Firefox-Fans use only Firefox browsing in the Web. Some others use Firefox-Wallpapers on their desktops. Some bake cookies with Firefox Logo.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Well, thank you! Very usefull information!

  2. 2

    At first I thought I am being pingback spammed, but hey I am featured lots of times here :)

  3. 3

    Can we have some good websites offering design services?

  4. 4

    great list!

  5. 5

    Brill List, Thanks

  6. 6

    Great work man! as usual…

  7. 7

    You guys are amazing and have outdone yourselves this time. I love huge lists! Keep up the great work.

  8. 8

    awesome links here many thanks :D

  9. 9

    Awsome list, keep on going!

  10. 10

    Nice collection.

    Thumbs up :)

  11. 11

    Good! That’s good! I like it.

  12. 12

    Yes! This is a great list. The WordPress stuff alone is a Godsend for me (and the PhotoShop Brushes).

  13. 13

    Great references, useful information, thanks!

  14. 14

    Thank you! This list helps me a lot! You did a great job!

  15. 15

    I also think that the design of some sites on the list is really well done. But more intersting is the list itself! =)

  16. 16

    what a beautiful webmaster tool list, thanks

  17. 17

    Awesome list i hope that my website was there . Thanks .

  18. 18

    i hope that my website was there

    thanks for this article

  19. 19


  20. 20

    I believe there are a lot more pleasant times ahead for folks who take a look at your site. I really like your website, keep posting!


↑ Back to top