- January 6th, 2007
- 5 Comments
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 Developers1
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?2
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 Icons3
7 Icons for free download, some additional icons4 by Wolfgang Bartelme.
- Mini Icons Set5
Brand Spanking New presents 113 10×10 greyscale icons for free download.
- Iceburrg WordPress Theme6
Clear, nice and legible. Free WordPress theme in winter colors.
Design-Galleries, Showcases, Inspiration
- Liquid Designs7
A gallery of liquid CSS-designs
- Corporate Logos Repository8
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.com9, too.
- Web Design Inspiration10
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 200611 and Top 7 Freshest Designs of 200612
References, Tutorials, Tips
- Top 10 best Font-Foundry-Websites 200613
Handpicked font-foundries, selected by a German web-developer.
- Criteria for optimal web design (designing for usability)14
Quite old, but still very insightful article about Design and Usability.
- Top Ten Mistakes in Web Design15
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 Theme16
Lists dozens of references, which might be useful if you are going to design a new WordPress theme.
A library of unknown or unused HTML-tags.
- Creating a Page Curl in Photoshop18
Veerle Pieters explains, how to create a page curl of a photo with Photoshop. Besides: Photoshop Gold Effect19, Convertion to GrayScale20, Web 2.0 Logo Tutorial
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.
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.
Creates grid-maps of logos of your favourite web-services.
- Rounded Cornr27
Generates HTML/CSS-Code for rounded corners. Alternatively you can also use Google28 to create rounded corners. A round-up of techniques which generate rounded corners on the fly can be found here29.
Helps to develop creative newsletter designs with few clicks.
CSS-Techniques, (X)HTML, PHP
- Intricate Fluid Layouts in Three Easy Steps31
YUI Grids CSS32 offers many new options for web-developers. One of them is fluid multi-column cross-browser layouts, which make it possible to create quite complex33 Layouts. You can make your work with YUI more efficient using YUI CSS Grid Builder34.
- Bye-bye to boring page footers35
Footers don’t have to be boring. Simon Collison describes one possibility to make footers visually appealing.
- Overlapping tabbed navigation in CSS36
- 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 Accessible37
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 Technique38
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. Example39.
- Sifr 3 Beta Released40
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
- CSS Advisor Beta43
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.
- The Really Simple History (RSH)47
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
48In 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.
- 15 tips to choose a good text type50
Juan Pablo De Gregorio describes 15 typographic aspects you should keep in mind choosing typofaces for your web-sites.
- Compose to a Vertical Rhythm51
“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 example52 with headings, footnotes and sidenotes.”
- The 100% Easy-2-Read Standard53
5 rules for better legibility and reading experience.
Articles and Blog Posts:
- Email Design Guidelines for 200654
in Web 2.0 Newsletters are becoming important again. Learn how to design they efficiently..
- Internet Explorer and the CSS box model55
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 Forgotten56
An overview of few (X)HTML-Tags, which nobody uses, but which can be quite useful in some situations.
- Ultimate htaccess Article57
Explains everything you wanted and should know about .htaccess.
- Insert HTML page into another HTML page58
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 Reasons59
There are 8 reasons, why Flash isn’t used that often in Web 2.0.
- The Mobile Web, Simplified60
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 Drop61
- Why digg is destined for failure62
Jason Clarke points out, why Digg has no future.
- 97% of websites still inaccessible63
- What is Web 2.0?66
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 Design67: “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 Startups68
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 popular69
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-201570
14 mistakes in Web Design which are made over and over again.
- How to write effective Tutorials71
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 again72. New techniques make it possible to circumvent the Captcha mechanism. In this context one should take bulletproof solutions73 into consideration.
- 1 http://www.devsource.com/article2/0,1759,2069735,00.asp?kc=DSRSS04029TX1K0000651
- 2 http://www.smashingmagazine.com/2007/01/02/where-can-i-find-textures-and-background-images/
- 3 http://www.factorycity.net/projects/microformats-icons/
- 4 http://www.bartelme.at/journal/archive/microformats_icons/#When:09:22:00Z
- 5 http://www.brandspankingnew.net/archive/2006/12/hohoho.html
- 6 http://www.devlounge.net/extras/iceburgg
- 7 http://www.cssliquid.com/
- 8 http://www.logotypes.ru/default_e.asp
- 9 http://www.brandsoftheworld.com/
- 10 http://www.flickr.com/photos/splat/sets/981332/
- 11 http://smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006
- 12 http://wisdump.com/design/top-7-freshest-designs-of-2006/
- 13 http://www.fontwerk.com/340/top-ten-foundry-websites-2006/
- 14 http://psychology.wichita.edu/optimalweb/
- 15 http://www.useit.com/alertbox/9605.html
- 16 http://www.cre8d-design.com/blog/2007/01/01/useful-resources-for-creating-a-wordpress-theme/
- 17 http://obscuretags.com/
- 18 http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/
- 19 http://www.andreibilan.blogspot.com/2006/09/bling-bling-your-logo.html
- 20 http://www.metacafe.com/watch/317062/correct_way_to_convert_any_photo_to_grayscale/
- 21 http://www.nicora.net/index.cfm?method=article&blogID=C88F54CC-D998-BFC0-D995-3823E52FA483
- 22 http://getfirebug.com
- 23 http://www.digitalmediaminute.com/screencast/firebug-js/
- 24 http://www.wymeditor.org/en/
- 25 http://www.chacha.com
- 26 http://www.iloggo.pl/displayWelcomeScreen
- 27 http://www.roundedcornr.com/
- 28 http://xach.livejournal.com/95656.html
- 29 http://www.smileycat.com/miaow/archives/000044.html
- 30 http://letterpop.com
- 31 http://24ways.org/2006/intricate-fluid-layouts
- 32 http://developer.yahoo.com/yui/grids/
- 33 http://24ways.org/examples/intricate-fluid-layouts/complex-layout-example.html
- 34 http://blog.davglass.com/files/yui/grids/
- 35 http://www.thinkvitamin.com/features/css/bye-bye-to-boring-page-footers
- 36 http://www.shapeshed.com/journal/overlapping_tabbed_navigation_in_css/
- 37 http://www.alistapart.com/articles/makingcompactformsmoreaccessible
- 38 http://www.alistapart.com/articles/switchymclayout
- 39 http://www.alistapart.com/d/switchymclayout/transition_layout_news.html
- 40 http://novemberborn.net/sifr3/beta1
- 41 http://www.ejeliot.com/blog/72
- 42 http://www.ejeliot.com/samples/combine/combine.phps
- 43 http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1
- 47 http://codinginparadise.org/projects/dhtml_history/
- 48 http://24ways.org/2006/tasty-text-trimmer
- 50 http://typies.blogspot.com/2006/11/15-tips-to-choose-good-text-type.html
- 51 http://24ways.org/2006/compose-to-a-vertical-rhythm
- 52 http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html
- 53 http://www.informationarchitects.jp/100E2R/
- 54 http://www.campaignmonitor.com/blog/archives/2005/11/html_email_desi.html
- 55 http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
- 56 http://www.3point7designs.com/blog/2006/12/26/semantic-tags-you-may-have-forgotten
- 57 http://www.askapache.com/2006/htaccess/htaccesselite-ultimate-htaccess-article.html
- 58 http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/
- 59 http://fadtastic.net/2006/12/11/the-demise-of-flash-8-main-reasons/
- 60 http://24ways.org/2006/the-mobile-web-simplified
- 62 http://www.downloadsquad.com/2006/12/11/why-digg-is-destined-for-failure/
- 63 http://www.456bereastreet.com/archive/200612/97_of_websites_still_inaccessible/
- 64 http://www.nomensa.com/resources/research/united-nations-global-audit-of-accessibility.html
- 65 http://news.bbc.co.uk/1/hi/technology/6210068.stm
- 66 http://www.2dot0-film.co.uk/Web2/P6/p6.html
- 67 http://www.thinkvitamin.com/features/design/communicating-web-20-through-design
- 68 http://www.downloadsquad.com/2006/12/01/seven-rules-for-web-2-0-startups/
- 69 http://www.modernlifeisrubbish.co.uk/article/10-reasons-why-top-10-lists-are-so-popular
- 70 http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
- 71 http://www.tutorialized.com/tutorial/How-To-Write-Effective-Tutorials/12606
- 72 http://sam.zoy.org/pwntcha/
- 73 http://www.smashingmagazine.com/2006/12/14/preventing-spam-bulletproof-solution/