Best of January 2007

Advertisement

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

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

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.Screenshot
  • 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.
  • 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:Screenshot
  • Research-Based Web Design & Usability Guidelines
    The updated 2006 Research-Based Web Design & Usability Guidelines book is now available. (PDF – 292 pages, 161 MB

    Screenshot

  • Wikipedia Search Engine WikiSeek Launches : 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 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.

    Screenshot

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.

    Screenshot

  • 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).
  • Bubblesnaps
    Create your own Bubblesnap today! Easily add animated speech bubbles to your photos and e-mail them to your friends as ecards!

    Screenshot

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

    Screenshot

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

    Screenshot

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

    Screenshot

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

    Screenshot

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

    Screenshot

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

    Screenshot

  • CSS Documentation Shortcut
    A site that provides a quick redirect to the official W3C documentation for any CSS property.

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.

    Screenshot

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

    Screenshot

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

    Screenshot

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

    Screenshot

  • 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

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

↑ Back to top

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 and loves solving complex problems in large companies. Get in touch.

  1. 1

    Well, thank you! Very usefull information!

    0
  2. 2

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

    0
  3. 3

    Can we have some good websites offering design services?

    0
  4. 4
  5. 5

    Brill List, Thanks

    0
  6. 6

    WHOA!
    Great work man! as usual…

    0
  7. 7

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

    0
  8. 8

    awesome links here many thanks :D

    0
  9. 9

    Awsome list, keep on going!

    0
  10. 10

    Nice collection.

    Thumbs up :)

    0
  11. 11

    Good! That’s good! I like it.

    0
  12. 12

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

    0
  13. 13

    Great references, useful information, thanks!

    0
  14. 14

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

    0
  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! =)

    0
  16. 16

    what a beautiful webmaster tool list, thanks

    0
  17. 17

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

    0
  18. 18

    i hope that my website was there

    thanks for this article

    0
  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!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top