Kolz Blog

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in February 2008. All images can be clicked and lead to the sites from which the screenshots have been taken.

Design-Galleries, Showcases, Inspiration

• 20 Beautiful HDR Pictures There are some photography techniques that really give me the goose bumps, but the good ones. HDR is one of those techniques… and you’ll probably love these as much as we do.
• Pattern Inspiration Sometimes it’s needed to go look in odd places to find inspiration. Take patterns for example, often used for backgrounds etc. There is a bit of a trend in interior design at the moment with the revival of the vintage wallpaper backgrounds from the sixties & seventies.
• The Evolution of Tech Companies’ Logos You’ve seen these tech logos everywhere, but have you ever wondered how they came to be? Did you know that Apple’s original logo was Isaac Newton under an apple tree? Or that Nokia’s original logo was a fish? Let’s take a look at the origin of tech companies’ logos and how they evolved over time.
• Modernist Stamps Flickr Set A set of Modernist stamps featured in January’s Monograph, a collectable A5 Booklet from Creative Review. [via cpluv]
• Quick Grungy Poster Photoshop Tutorial This tutorial shows how to create a sort of grunge poster. You’ll learn how to make some elements look a bit dirty, create textures and add some depths to the elements using shadows and blend modes.
• Logo Design Trends 2008 Logos are the ultimate mark of distinction and everyone loves them. This article attempts to discuss current trends in logo design; among them - organic 3D, Waves, Transparency, Minimal Typography and The New Crest.
• Grid and Column Designs If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog.
• Movable Love A showcase of interesting and beautiful sites powered by Movable Type. Textpattern Showcase and Wordpress Showcase might turn ot to be useful as well.
• Home Page Carousel Showcase: 40+ Carousel Designs Christian Watson strikes again. A showcase of home page carousel designs to see what common themes emerged and also what different approaches designers took.
• Pre-owned bookmarks Pre-owned bookmarks, collected over the years from books purchased at flea markets, garage sales, used bookstores, etc.
• Typesites Typesites is a weekly showcase of websites with interesting typographic design.
• Insanely Creative Portfolios From Around the Web A growing collection of beautiful online portfolios. Not single one of them is Web 2.0ish, which is a good thing.

Icons, Fonts

• Flower Folders Iconset All icons are transparent, created in Illustrator, completely vectorized and available in .png 512 x 512. Format: .psd, scalable, layered, editable. Illustrator file .ai is attached. Licensed under Creative Commons Attribution-Non-Commercial 3.0.
• iPhone Wallpapers A collection of excellent wallpapers for your iPhone.
• Free Vector Icon Set - Containing 25 Icons “This set contains 25 scalable Illustrator icons. You can open the .ai file with any version of Illustrator above 8.0. With earlier versions, you might loose some of the effects on the icons.”
• PNG Icons & Icon Packs A large collection of free and fresh icons collected on one single site.
• Free Flag Icons More than 220 free flag icons representing countries and unions all over the world in PNG format. Sizes : 16×16, 24×24, 32×32, 48×48.
• 16 Incredibly Detailed, Useful (and free) Dingbat Fonts An overview of useful Dingbat fonts available for free download.

News, Updates, Tips

• NYTE New York Talk Exchange illustrates the global exchange of information in real time by visualizing volumes of long distance telephone and IP data flowing between New York and cities around the world. Videos and images are included.
• Netdiver Magazine - Best of the Year / 2007 Netdiver reviews some of the most interesting and inspiring projects of the year 2007. “These folks whatever their disciplines create memorable and dazzling projects, taking us to uncharted territories where imagination, skill, talent abide - inciting us to keep pushing forward.”
• Konigi: Form, function, fetish Konigi community researches how others have designed the look and feel of web sites and crafted their user interfaces. “If you’ve ever searched around for market research and competitive information related to the user experience and design of web sites within any industry, then you’ll want to watch this space.”
• Make3D Make3D generate a 3D model out of any uploaded photo. The results are quite impressive. 3D models can be downloaded in VRML, Flash or 3dS format. You need to register before uploading your own images.
• Firefox Hits New High as IE7 Lags IE: 66%, Firefox: 28% (European browser usage statistics). Mozilla Firefox continued its slow but steady march against the worldwide dominance of Microsoft Internet Explorer in 2007. Though the open-source web browser continues to sit firmly in second place behind IE, where it’s been for years, usage of Firefox is still on the rise.
• Adobe AIR v1.0 & Flex 3.0 Released; New Adobe Open Source Site Launched Continuing their march into the RIA space, Adobe announced the official release of AIR v1.0 and Flex 3.0. The new Adobe AIR runtime enables Ajax developers to build rich Internet applications (RIAs) that deploy on the desktop. AIR applications run across operating systems on the WebKit HTML engine and are easily delivered using a single installer file.
• Map of social network popularity around the world Asia loves Friendster, Russia loves LiveJournal, and Orkut still dominates Latin America. [via Waxy]
• OpenID goes Big In February Google, IBM, Microsoft, VeriSign and Yahoo joined the OpenID Foundation: will OpenID-enables sites (where users do not need to remember traditional authentication tokens such as username and password and can use universal authentification instead) soon become a standards?
• Web Developer Crossword Puzzle This crossword puzzle’s questions cover such topics as: search engines, CSS, C#, JavaScript, Browsers, Programming and just about anything else Web-related (.pdf). The answers are already published (.pdf).
• Free Photoshop Actions to Boost Your Designs An action is a series of tasks that you play back on a single file or a batch of files - menu commands, palette options, tool actions, and so on. This article presents a number of actions for Photoshop you can download and use for free.
• Things I have learned in my life so far Another social project focusing on people’s experiences summarized in a brief statement and a photo.
• SitePoint CSS Reference Sitepoint has published an updated version of its comprehensive CSS reference.
• You Suck At Photoshop Video Tutorials Donny Hoyle is damn good. The most entertaining Photoshop video tutorials you’ve ever seen.

CSS-Techniques

• How to recreate Silverback’s Parallax Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.
• Five CSS menu tutorials This post includes five CSS menu tutorials inspired by some Web 2.0 sites with round corners, scriptaculous and Ajax effects. Among them: Digg-like navigation bar using CSS, Flickr-like horizontal menu and Gettyone-like search options menu.
• Elegant navigation bar using CSS This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS.
• Vertically center content with CSS A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative.
• Em & Elastic Layouts with CSS This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.
• Custom Double Solid Borders for Images We are not going to use border-style:double; As we know these are not easy to control. Imagine a situation where you want outer border on the image. How would you achieve this? And further more, how would you achieve this with no additional markup? A small but very useufl trick.
• Create Resizing Thumbnails Using Overflow Property This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.
• Pure Css Data Chart Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?
• Open External Links in New Window Automatically This script initiates on page load and goes through all links (anchor tags) in document. It then checks links, and based on current domain name it recognizes link as internal or external. Furthermore, to external links script adds a class name “external”. That way you can visually separate them from internal links.
• Cross-browser transparent columns A demonstration of how to implement cross-browser transparent columns. It’s used by having combination a transparent div with the same height as it’s parent and a div containing the content. Then we pull the overlay div to the left and set the content div to position: relative; to fix the z-index.
• CSS Browser Selector You should always avoid feeding browsers with specific CSS-style sheets, but if you badly need to solve some inconsistency issues, CSS Browser Selector might be an option to consider.
• Book-style Chapter Introductions Using Pure CSS This article describes how you can create the scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph. With CSS. The technique doesn’t work in IE.
• Perspective CSS Experiment Perspective-effects with pure CSS.
• A very different approach to tagging People normally use tags to link related posts. On his forum Edward Tufte uses a totally different approach. Instead of linking to pages for each tag, it simply shows the tagged articles inline. No separate screens. No navigation. It’s a beautifully simple solution.
• How to create CSS layouts without using float This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts without using absolute positioning or floats.

CSS-Tools, References, Templates

• Free Web Templates - Nuvio Templates 72 free, valid, tableless, standard-conform, carefully commented templates which also contain print style sheet. The Simply Theme is also available as a WordPress-theme.
• Pixels to Ems Conversion Table for CSS The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the has font size set to 1em or 100%.
• Blueprint CSS Resources A growing collection of tools, tutorials, articles and references related to the Blueprint CSS Framework.

Ajax, Javascript

• Sniff browser history for improved user experience This article teaches you how to mine the rich treasure trove of personalization data sitting inside your visitor’s browser history for deep personalization experiences. “I can scan a current visitor’s browser history to determine an active presence on one or more bookmarking sites. Once I determine the current visitor is also a Digg user I can show live data from Digg.com to prompt a specific action such as submitting a story or voting for content. I can create a much better user experience for 3 services I know my visitor actively uses instead of spraying 50 sites across the page.”
• Facebook Style Input Box The approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”
• mooSocialize - social bookmark widget, ajax based, add your post to the most common social networks This Ajax-based widget allows you to integrate the bookmarking feature directly into your post. By clicking the mooSocialize button, a window will appear, which lets you choose a preferred service without leaving the site you’d like to bookmark.
• Step by Step - Show and explain visitors what your page has for them You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
• GWT-Ext Widget Library GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.
• GlassBox GlassBox is a compact Javascript User Interface (UI) library, which uses Prototype and Script.aculo.us transparent border, colorful layouts and “Flash-like” effects.
• Soft Edge Technique: Soft Edges and Opacity Gradients for Images This snippet creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create “cloudy” soft edges or one-side opacity gradients without any image editing software.
• How to highlight search results with JavaScript | Eric Wendelin Use the combination of a JavaScript snippet and CSS-style to highlight words or phrases in the search results making it easier for your visitors to find the most relevant content on your weblog.

Web-Typography

• A Guide to Web Typography Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained Monkeys were able to correctly identify Helvetica 90% of the time. Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients: Contrast, Size, Hierarchy and Space.
• Twenty-Six Types of Animals by Jeremy Pettis 26 impressive examples of original lettering style; each of the illustrations is supposed to capture the essence of a beast with… pure typography.
• The Funkiest Ampersands You Have Ever Seen An ampersand is the figure used to represent the word ‘and’, it is widely recognized by the symbol &. Have a look at some of the funkiest ampersands you have ever seen.
• Flickr: International Typographic Style The International Typographic Style, also known as the Swiss Style, is a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Helvetica, and flush left, ragged right text. A typographic Flickr Pool. More Typography.
• CSS Type Set A handy tool that lets you define an optimal font family, font size, color and further settings such as leading and letter-spacing online.
• Typeflash Typeflash is an interactive typo site that lets you create personalized eCards with animated typefaces designed by Peter Vajda.

Tools, Web-Services

• Firebug 1.1 John J Barton has released a new beta-version of Firebug. Among new features are eval() debugging, external editor interface, browser-generated event handler debugging, stack side panel on “Script” panel for callstack and support of Firefox 3.
• YUI 2.5.0 Released The YUI Team released the new version 2.5.0 of the YUI library. Six new components were added — Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler.
• File Destructor 2.0 - Hype Magazine Want to play games on your Playstation but got a deadline for an exam or report that didn’t match your gaming ambitions? Send trashed files and blame your faulty computer, instead of confessing that you are a lazy bum who just wants to play videogames.
• Ajaxonomy del.icio.us Spy This tool enables you to observe live which bookmarks are added to Del.icio.us.
• PicLens Firefox Extension PicLens transforms Firefox into a full-screen, 3D experience for viewing images in full-size. The developers promise that “photos will come to life via a cinematic presentation that goes well beyond the confines of the traditional browser window”. Impressive.
• Nourish: RSS to Email Service Nourish is a next generation newsletter service which allows you to take any RSS feed from content you publish (like a blog), and convert it into an automated email newsletter your readers can subscribe to.
• BrowserSim PSD + Action set BrowserSim is a Photoshop psd + action set for quickly producing customized browser chrome framing (IE 7, Firefox 2) for web design mockups. An action file for automatically formatting window titles and URLs is included.
• HelloTxt HelloTxt is an aggregate of microblogging services through which users can quickly publish updates to multiple networks simultaneously. You can post to Twitter, Pownce, Facebook, Tumblr and other networks at the same time, with one click. One message that goes to all accounts. [via MakeUseOf]
• Easy Text to PNG conversion This service provides the ability to convert headlines and navigations to PNG images automaticlly. The process is automated as you simply need to add a JavaScript file and define which tags should be replaced.
• Jawr - More than a Javascript/CSS compressor Jawr is a tunable packaging solution for Javascript and CSS which allows for rapid development of resources in separate module files. Writing a simple descriptor properties file, and using a servlet and a tag library are all the requirements to use it.
• FeedJournal - The Newspaper You Always Wanted FeedJournal automatically converts RSS feeds to a printable newspaper. Once the feed is selected, yo can define preferred newspaper layout (number of columns, margins etc.) and generate a printable newspaper-style PDF document.
• .htaccess Editor This tool enables you to easily create .htaccess files online.
• PDFescape - Your Online PDF Reader, Editor, Form Filler, Form Designer, Solution PDFescape lets you open PDF files online, make changes and save them right into the .pdf-file for free. Thus you can fill in PDF forms, add text and graphics, add links, and even add new form fields to a .pdf file.

Articles and Publications

• 10 Mistakes in Icon Design The article 10 Mistakes in Icon Design reviews the most commonly observed mistakes in icon design. Among them are insufficient differentiation between icons, unnecessary elements and overly original metaphors. Worth reading.
• Version Targeting: Threat or Menace? Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman. They Shoot Browsers, Don’t They? — Jeremy Keith about the same topic.
• Keeping Your Elements Kids in Line with Offspring Maintainable code is even more important if you’re going to hand off your code to a client or a content management system: the less intricate the markup, the fewer chances there are for the nuances of your code to become lost in the shuffle. Alex Bischoff about how to keep your markup clean.
• Product pages: so much suck, so easy to fix Amy Hoy covers a lot in this article — from James Joyce and upchucking, to Firefox, telepathy, and Opera. Through it all she shows you how see through the eyes of a user and an experience designer, and how to use that viewpoint to improve your site.
• The Principles of Beautiful HTML Email [Design Principles] As web designers, we’re used to designing for the particular constraints and capabilities of web browsers, and there’s a ton of great advice out there to help. HTML emails are a different story, though — they’ve often been the black sheep of the web design world, and have either been ignored or actively repelled.
• The Highly Extensible CSS Interface Cameron Moll’s extensive series of how-to create highly extesnible CSS-based interface. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.
• The Immutable Laws of Web Design and Development | Blue Flavor Are software engineering rules, principles and laws applicable to web design? Brian Fling tries to find out.
• Detailed Look at Stacking in CSS Using the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination. z-index explained.
• Top-10 Application-Design Mistakes (Jakob Nielsen) Jakob Nielsen: Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Last Click

• Typographic home decoration Have you ever thought about decorating walls in your house with… typography? Well, harmonie interieure does exactly that. The results are pretty cool. [via Siwssmiss]
• Good 50×70 The aim of Good 50×70 is to use these skills to highlight more important things than beer and trainers. It’s a competition to raise awareness amongst the creative community of the power we have to be a force for good. There are 7 briefs from 7 charities on 7 issues that affect thousands of people around the world. All you have to do is pick a topic that inspires you and submit a poster on that theme. Good 50×70 is open for entries from February the 18th, 2008. The entries close on midnight April the 20th, 2008.
• Mothergoose It’s teatime! This tee-set will never get broken once you let it drop on the floor. It has nothing to do with web design, but the set is pretty sweet.
• Broken Link Necklace So this necklace just didn’t load. Now you can imagine how great the image would’ve been. The pendant is made from non-toxic shrink plastic, and coated for durability. The cord is made from leather with sterling silver clasp.
• Moleskine… Mac Notebook Laser engraved half white - half black Mac Book. Designed by Jona Bechtolt, laser engraved by Engrave Your Tech of Portland, Oregon.
• Rainbow Bookshelf Not practical, but gorgeous: Rainbow Bookshelf is an example of organizing books by color. What comes out of it is pretty unusual. A good way of changing the whole aspect of a bookshelf with a little bit of creativity.
• Designing Marvels: Simple yet Incredible! Some interesting design concepts: scroll down to the rolling bench and the umbrella bag.
• YouTube - Surfin’ on the Web This song was written when nobody knew what that means. There were about 100 websites in the World, and not more than 3000 “Web surfers”. Dedicated to Tim Berners Lee, the inventor of World Wide Web.