
Smashing Magazine we smash you with the information that will make your life easier. really.
Best of December 2006
By Smashing Editorial, January 6th, 2007 in Best of the Month | 10 Comments | Forum
Every month we take a look at new tutorials, tips, articles and techniques presented in Web-Development-related blogs and magazines and collect them for you. Below an overview of the best tools and articles, which have become popular or were published in December 2006. Links checked: June/23. 2008
Colors, Palettes, Textures etc.
- Color Theory for Developers
A brief overview of important aspects of color theory and its use in web-development. Apparently, HSB [Hue / Saturation / Brightness] model provides a much more realistic way of controlling color. - Colour with Contrast
Want to make sure your site is readable by the widest possible audience without being “boring” and “ugly” but aren’t sure how? A selection of tools are now available to help you choose colours or check the colours you’ve been given to provide adequate contrast. - Where can I find textures and background images?
Web offers many useful resources one should always keep in mind searching for textures. Below you’ll find a hand-picked selection of some useful resources related to textures and background images. We tried to pick the best ones which offer quality and professional content without annoying advertisement.
Icons, Wordpress Themes
- Microformats Icons
7 Icons for free download, some additional icons by Wolfgang Bartelme.
- Mini Icons Set
Brand Spanking New presents 113 10×10 greyscale icons for free download. - Iceburrg Wordpress Theme
Clear, nice and legible. Free Wordpress theme in winter colors.
Design-Galleries, Showcases, Inspiration
- Liquid Designs
A gallery of liquid CSS-designs - Corporate Logos Repository
A collection of over 5000 logotypes, used by companies worldwide. All logos are available as Adobe Illustrator Images and can be downloaded as .zip-files. Alternatively you can use BrandsOfTheWorld.com, too. - Web Design Inspiration
A collection of impressive CSS-Designs. Collected by Patrick Haney, it includes 329 images and is updated on a regular basis. - The best CSS-based designs in 2006: 50 Beautiful CSS-Based Web-Designs in 2006 and Top 7 Freshest Designs of 2006
References, Tutorials, Tips
- Top 10 best Font-Foundry-Websites 2006
Handpicked font-foundries, selected by a German web-developer. - Criteria for optimal web design (designing for usability)
Quite old, but still very insightful article about Design and Usability. - Top Ten Mistakes in Web Design
Jakob Nielsen updates his list of top 10 mistakes in web design. “The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be”. - Useful Resources for Creating a Wordpress Theme
Lists dozens of references, which might be useful if you are going to design a new Wordpress theme. - ObscureTags.com
A library of unknown or unused HTML-tags. - Creating a Page Curl in Photoshop
Veerle Pieters explains, how to create a page curl of a photo with Photoshop. Besides: Photoshop Gold Effect, Convertion to GrayScale, Web 2.0 Logo Tutorial

Tools, Web-Services
- Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This screencast shows, how you can debug JavaScript code efficiently. - WYMeditor
WYMeditor is a free web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications. - Chacha
Cacha is a new guide-based search engine, powered by human intelligence. A place to find exactly what you’re looking for without sifting through millions of results. Chacha offers Intelligent search results from people who are knowledgeable about the very thing you are looking for. - Iloggo
Creates grid-maps of logos of your favourite web-services. - Rounded Cornr
Generates HTML/CSS-Code for rounded corners. Alternatively you can also use Google to create rounded corners. A round-up of techniques which generate rounded corners on the fly can be found here.
- Letterpop.com
Helps to develop creative newsletter designs with few clicks.
CSS-Techniques, (X)HTML, PHP
- Intricate Fluid Layouts in Three Easy Steps
YUI Grids CSS offers many new options for web-developers. One of them is fluid multi-column cross-browser layouts, which make it possible to create quite complex Layouts. You can make your work with YUI more efficient using YUI CSS Grid Builder. - Bye-bye to boring page footers
Footers don’t have to be boring. Simon Collison describes one possibility to make footers visually appealing. - Overlapping tabbed navigation in CSS
A tutorial showing how overlapping tabbed navigation is possible in CSS and can be cross-browser compatible, accessible and javascript free.. - Easy Cross Browser Transparency
If you’ve ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you’ve probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS. - Making Compact Forms More Accessible
Tightly designed forms can look great on paper, but they often ignore accessibility issues altogether. Mike Brittain presents his solution.

- Switchy McLayout: An Adaptive Layout Technique
Marc van den Dobbelsteen delivers a new technique, which we’ve been waiting for so long. Liquid Switchy McLayout adapts its appearance (not only the size of pages, but also the content!) depending on the screen resolution, in which it is viewed. Example. - Sifr 3 Beta Released
Compared to sIFR 2 the new version is radically different. Backwards compatibility has been broken, but that’s okay since deployment is now ridiculously easy. There’s great control over how the text is rendered inside the Flash movie: you can easily use bold and italics together, or use different colors. There’s support for leading, kerning and opacity, filters, blend modes and anti-aliasing.
CSS Tools and Services
- Automatic merging and versioning of CSS/JS files with PHP
“Most sites include a number of CSS and JavaScript files. Whilst developing it’s usually easier to manage them as separate files but on a live site it makes sense to merge files to reduce the number of HTTP requests the browser has to make. I hate maintaining this stuff manually so I’ve written a PHP script which takes care of merging files on the fly whilst also versioning the merged file automatically as the various component files change”. - CSS Advisor Beta
New service, provided by Adobe, which is supposed to help developers to find solutions to CSS and browser compatibility issues, share solutions and workarounds you’ve discovered with the community, comment on and improve existing solutions.
Ajax, Javascript
- Cody Lindley: Javascript
Collection of articles about Javascript - from Stripe Dance (Adding Stripes To Tables and Lists) to jTip - A jQuery Tool Tip. - The Really Simple History (RSH)
The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases. - Tasty Text Trimmer
In most cases, when designing a user interface it’s best to make a decision about how data is best displayed and stick with it. Failing to make a decision ultimately leads to too many user options, which in turn can be taxing on the poor old user. Under some circumstances, however, it’s good to give the user freedom in customising their workspace. Sliding a slider left of right dynamically changes the length of each article shown. It’s that kind of awesomey magic stuff that’s enough to keep you from sleeping. Let’s build one. - Accessible JavaScript: Beyond the Mouse
The combination of Accessibility and JavaScript is possible. James Edwards explains, how it works.
Web-Typography
- 15 tips to choose a good text type
Juan Pablo De Gregorio describes 15 typographic aspects you should keep in mind choosing typofaces for your web-sites. - Compose to a Vertical Rhythm
“The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page. To see this in action, I’ve created an example with headings, footnotes and sidenotes.” - The 100% Easy-2-Read Standard
5 rules for better legibility and reading experience.
Articles and Blog Posts:
- Email Design Guidelines for 2006
in Web 2.0 Newsletters are becoming important again. Learn how to design they efficiently.. - Internet Explorer and the CSS box model
An old new problem: how does Internet Explorer understand CSS Box Model and how can you make sure your web-site looks identically in IE and other browsers? Roger Johansson explains. - Semantic Tags you many have Forgotten
An overview of few (X)HTML-Tags, which nobody uses, but which can be quite useful in some situations. - Ultimate htaccess Article
Explains everything you wanted and should know about .htaccess. - Insert HTML page into another HTML page
You aren’t allowed to use Iframe designing web-pages according to XHTML Strict Standard. The ultimative solution is the Object-Tag. - The Demise of Flash: 8 Main Reasons
There are 8 reasons, why Flash isn’t used that often in Web 2.0. - The Mobile Web, Simplified
Mobile Web is coming. Cameron Moll informs us what we should know about Mobile Web and what designers should know about it. - Anatomy of a Drag and Drop
How does Drag’n'Drop with Javascript actually work? Jonathan Snook presents an answer. - Why digg is destined for failure
Jason Clarke points out, why Digg has no future. - 97% of websites still inaccessible
According to a Study of United Nations 97% of all Web-page are inaccessible. BBC confirms: 93% failed to provide adequate text descriptions for graphics, 73% relied on JavaScript for important functionality, 98% did not follow industry web standards for the programming code. - What is Web 2.0?
What is Web 2.0? And how does it apply to me anyway? Paul Boag presents his screncast about the main aspects of new web culture. Besides: Communicating Web 2.0 Through Design: “So how do we teach our users to use all these fancy new gadgets? We do it through the magic of instructive design. Let’s take a look at how some simple design elements can be used to communicate the value of these new interactions and get our users moving forward quickly.”. - Seven Rules for Web 2.0 Startups
These days it seems like anyone with an idea and some time can crank out a Web 2.0 startup, be it a service, community, one-trick-pony or ambiguously named whichamadinger. With goofy names, varying user experiences and questionable goals running amok, we figured it was time to lay down some ground rules. Check out our seven tips to help Web 2.0 startups be all they can be. - Top 10 reasons why ‘Top 10′ lists are so popular
Love them or loathe them, you only need to take a quick glance over popular social link sites to see that ‘Top 10′ pages are incredibly prevalent. Here’s a list of 10 reasons why such lists are so popular. - Biggest Mistakes in Web Design 1995-2015
14 mistakes in Web Design which are made over and over again. - How to write effective Tutorials
Describes, how to create a clear, readable Tutorial to a given topic.
The last click:
- Who thinks that Captcha is an ultimate solution against spam, should think again. New techniques make it possible to circumvent the Captcha mechanism. In this context one should take bulletproof solutions into consideration.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
10 Impressive JavaScript Animation Frameworks
Create stunning and eye-grabbing animation and transition effects.
Linux System Monitoring Tools Every SysAdmin Should Know
Need to monitor Linux server performance?
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated








pierro (January 7th, 2007, 1:09 am)
howdy - i dont like this word “awesome”;
but what can i write: this post is awesome !
thanks for this.
Joe (January 7th, 2007, 2:55 am)
Really great list. I opened lots of tabs on this one. Thanks.
Bence (January 7th, 2007, 4:23 am)
Veerle
DuohPietersuzbek (January 8th, 2007, 3:11 pm)
I’ve bookmarked lots of pages from smag, but now I guess it is time I subscribe to rss :) Can’t miss this stuff…
Good job guys, and thanks.
Chetan (May 16th, 2007, 9:18 pm)
hello friends, I want source code which allow me to read the pages on my website but not allow anyone to save it on their hard-disk in any manner (i.e. 1)By using ’save web page as’option in file menu or 2)using ctrl+s or 3)using right click)
I find the solution for right click but, I am struggling with 1st option . So can u please help me