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.

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
  
• Jambor-ee - Celebrating ExpressionEngine
  Jambor-ee is a resource for web designers, developers, webmasters, and site producers interested in using Expression Engine Web Publishing System.

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.
• Star it!
  Small copy-paste-Widget for your pages, which enables yous visitors to rate your pages.
• 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.
• Web Designer’s Toolbox
  A lot of sites have been promoting pages for web developers, but none of them have asked what people are actually using to do good work. This site hopes to answer that question and provide people with the best sites first - not somewhere in the middle of long lists.

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 Screencasts for beginners and professionals: CSS Part I, CSS Part II, CSS Div Layouts. Screencasts about Photoshop follow.
• 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.
• How to Get People to Read Instead of Skim
  Question: how can you make sure your visitors are actually reading your content? Answer: offer less content.

The last click:

• The Paradox of Choice and the Secret to Happiness (YouTube)
  Barry Schwartz, famous American psychologist and sociology professor at Swarthmore College, explains why more is worse than less. Too many options reduce usability and leave a negative impression.
• 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.

• Published in Best of the Month, January 6th, 2007
• Tags: best of

• links for 2007-01-07 at guessboy (January 9th, 2007 at 1:22 am )
• Mannyliban.com » Blog Archive » Warning: Web 2.0 Taboo (January 9th, 2007 at 2:12 am )
• Natalie Downe » Blog Archive » links for 2007-01-09 (January 9th, 2007 at 3:54 pm )
• LetterPop » Blog Archive » LetterPop in the news; thank you, bloggers! (January 16th, 2007 at 5:53 am )
• 煎蛋 » 2007年4月网络最佳 (May 16th, 2007 at 9:33 am )

Leave a Reply