Noupe

20 Free Mac Apps For Web Designer’s Toolkit

2009-11-12T17:57:42Z

Professional web designers on the Mac platform rely on commercial heavy-hitters like Adobe Photoshop, Illustrator, Fireworks, and InDesign for their graphic design needs. And when it’s time to slice and dice, some depend on the excellent Dreamweaver CS4 for WYSIWYG design/development; while many Mac code jockeys swear only by editors like Coda, BBEdit or TextMate. Others prefer to mix, match or blend.

Designers also rely on various supporting apps to accomplish every day jobs like FTP uploading, cross-browser testing (important if you’re designing/developing on a Mac platform only), screen-shot snapping, pixel measuring, and the like.

While many of these programs are slick, they also of course cost … money. Which brings us to free apps for the Mac crowd. Which are the best compared to their commercial counterparts? Or are simply great apps in a league all their own? Put away that credit card for now and let’s find out!

Free Photoshop alternative

GIMP (Mac)
In a nutshell, GIMP provides designers with the power to accomplish almost any task that Adobe Photoshop is used for. Mac users familiar with typical Cocoa apps will find GIMP’s interface and menu system very “un-Mac” like (requiring the X Window System, commonly called X11), but if you soldier through you’ll find a powerful image editing program with all the fixins – advanced multi-layering, text and image effects, pro-level image manipulation, and a full range of design tools. High quality plug-ins are freely available to extend the app, including the ability to use some native Photoshop ones.

Also check out:

Seashore
Based on GIMP, Seashore is a pure cocoa app which makes it very OS X friendly. A range of tools for gradients, textures, layers, and drawing are found in Seashore. However, the program lacks many of GIMPs more powerful features so it’s not exactly a GIMP replacement either.

LiveQuartz
Sporting a sleek Mac interface, LiveQuartz describes itself as a “simple and powerful free photo editor for Leopard.” It does two thing very well: layers and filters. Basic drawing tools are also included but, as with Seashore, it’s not billed as a Photoshop replacement either. In the hands of the right designer, however, fairly sophisticated designs can be created with this nice app, which is also fun to use.

Free Illustrator alternative

InkScape (Mac)
The open-source InkScape, another Mac application that requires X11, is a viable alternative to Adobe Illustrator with its ability to create and edit graphics in scalable vector format.

AI users will feel at home using InkScape with options like layer control, gradients, connector path control/manipulation, various brushes (including calligraphy), type effects, masking, EPS exporting, a 3-D shape tool, object tweaking/sculpting, and even a diagram connector tool useful for a variety of purposes, like creating site maps. Depending on the complexity of your design, files can be exported from InkScape and into Illustrator and vice-versa.

Free Dreamweaver alternative

KompoZer (Mac)
Featuring WYSIWYG website creation and robust CSS editing, KompoZer is a mature, open-source alternative similar to Adobe Dreamweaver on the Mac, and has many of the same bells and whistles, too.

Although it can’t top Dreamweaver’s rich offerings, KompoZer offers full CSS support, code viewing/editing, tabbed views, FTP site management, a color picker, clickable hierarchical properties view bar for code isolation, split views, live preview, and much more. There is even the option to call W3C’s HTML validator to check for valid markup.

KompoZer is built on the NVU architecture, but is less buggy and more feature-rich than NVU since development on that project was stopped and has been replaced by KompoZer.

Also check out:

SeaMonkey
For creating very simple web pages.

Amaya
A project started by W3C, Amaya aims to be a WYSIWYG editor for standards compliant web developers, but lacks KompoZer’s power. It also claims to be a web browser, but will likely not pass muster for most people’s normal web browsing activities.

Free InDesign alternative

Scribus (Mac)
This open-source page layout program for the Mac, similar to Adobe InDesign, is geared towards print professionals in creating business cards, ads, magazines, newsletters, brochures, posters, signs, or just about any other kind of printed material.

Although the application doesn’t allow for measurements in pixels, web designers can still take advantage of Scribus’s multi-page capabilities, master pages, and precise typographic control for quickly generating rough ideas for web banners, buttons, or even website mockups faster than you can say Photoshop! The ability to create PDFs within Scribus (including interactive ones) is another plus. Image export options include PNG, EPS, and PDF.

Free Mac text/coding editors

TextWrangler (Mac)
A powerful general purpose text/code editor for OS X, TextWrangler has many of the same pro features found in commercial editors, such as multi-file search and replace, open/save in various line-ending formats and character sets, find/compare/merge file differences, hard/soft text wrap views, FTP/SFTP support, tabbed viewing, and more.

Simple CSS (Mac)
Simple CSS sports a Mac-friendly interface that helps you point and click your way to building CSS stylesheets. One column allows for style creation, and a main window gives you complete control over fonts, displays, borders, and box dimensions. Multiple projects can be opened simultaneously, and styles are displayed via a WYSIWYG pane. Finalized CSS code can then be previewed and exported.

Firebug (Mac Firefox plug-in)
A must-have Firefox extension for web developers, Firebug offers an impressive array of features for live in-browser code viewing, testing, editing, and debugging of HTML, CSS, and Javascript. Firebug easily overrides HTML and CSS on any webpage for live previewing in Firefox – saving you precious design/development time. A DOM inspector adds to the extension’s impressive capabilities.

Free cross-browser and server-testing apps

VirtualBox (Mac)
VirtualBox sets up a professional virtualization environment on your Mac, similar to Parallels or Fusion, allowing you to install Windows XP, Vista, Windows 7 and others. But if you just need a Windows environment for browser testing on your Mac, the good news is that you don’t even need a licensed copy of Windows to run IE6, IE7, or IE8. VirtualBox can be configured to run all three browsers by installing the VirtualPC disc images (for free) directly from Microsoft.

Adobe BrowserLab (Mac/PC)
This free online screenshot service (still in beta) shows you what your latest web design will look like on the PC side in IE’s 6, 7, 8 and Firefox; and on the Mac side in Safari and Firefox. Although it only takes static screenshots, BrowserLab is useful for catching pesky CSS layout issues, especially with the difficult-to-justify-installing-but-still-important IE6.

There are a number of online browser-testing screenshot services out there already, but BroswerLab is different because load time is much faster than the others and the interface is much better. For Dreamweaver users there’s a slick plug-in that allows you to preview the page you’re working on at the touch of a button. Browser screens can be compared side-by-side, and an interesting Onion Skin View can help idenitify layout quirks at a glance.

MAMP
Although OS X allows you to run a full-blown Apache server out of the box, setting up a properly configured PHP server on your Mac can sometimes be a frustrating endeavor to get just right. Enter MAMP, which stands for “Macintosh, Apache, MYSQL, and PHP.”

Everything you need to run a PHP server is included, complete with phpMyAdmin, SQLiteManager, and a nice control interface to easily start and stop the server. MAMP will not interfere with other Apache installs or modify them in any way. It’s all self-contained within the application folder and can easily be removed. An OS X Dashboard Widget gives you start/stop server controls.

Free Mac FTP program

Cyberduck (Mac)
For Mac users the robust and stable FTP browser/client, Cyberduck, is an open-source must-have for tasks requiring FTP, SFTP, WebDav, Mosso Cloud Files, and Amazon S3 server interaction. Its clean and straightforward operation allows you to quickly upload and download files without the interface clutter found in some FTP programs.

Features include file synchronization, access to file permissions, bookmarks, and integration with various text editors to edit files directly. OS X technologies like Spotlight, Bonjour, Keychain, and even Quicklook are all supported. An included OS X Dashboard widget allows for quick access to servers. Various localizations are also available.

Also check out:

FileZilla
The interface is definitely not Mac-like in elegance, and it doesn’t make good use of integrated Mac technologies like Cyberduck does, but those looking for a dual-pane FTP browser will find it in FileZilla.

Free supporting apps for designers on the Mac

Skitch (Mac)
If a picture is worth a thousand words, then the ability to annotate a picture may be worth even more. Beyond your average screenshot app, Skitch combines the ability to capture anything on-screen with drawing and annotation tools.

With Skitch, for instance, you can quickly capture a design you’re working on and mark it up with non-destructive colored arrows, text, highlights, boxes, and lines – helpful for illustrating concepts not easily conveyed using words alone. Or you could use Skitch to create a series of screenshot tutorials.

Screenshots with our without edits are managed in the app’s history and can be revived later for further editing; or simply drag and drop to the desktop or directly into any application that supports images (like Mail, TextEdit, or any graphic app). You can even upload your screenshot creations to a free skitch.com account or to your own FTP server by simply selecting the “webpost” button. Since Skitch is in beta, rumor has it that the developers will start charging at some point, however this fact is not entirely known and the app has been free of charge for some time now.

Paparazzi! (Mac)
Have you ever been frustrated by the seemingly simple process of capturing a webpage screenshot that scrolled beyond your screen area? Instead of taking multiple screenshots and then pasting them together to form a single file, Paparazzi! allows you to capture an entire page from top to bottom and then export it as a single file into PNG, PDF, JPEG, or TIFF format. Optional cropping parameters can be set, and different screen resolutions can be tailored to fit your needs. A handy timed-delay snapshot function can also be adjusted.

Imagetricks (Mac)
This handy little app claims to “reveal the hidden power of your images,” and that’s exactly what it does. The free version of Imagetricks boasts a myriad of popular Photoshop-like filters and effects. Various masking effects can also be applied to allow for even more options. Modified images can then be exported in any of the major web file formats for insertion into your next layout.

Pixius (Mac)
This Adobe AIR application gives you a slick tool for measuring anything on-screen in pixels. Easy resize handles give you quick measurements in height and width, and the multi-screen mode allows you to move the tool back and forth between screens for dual-monitor users.

A light-dimming feature darkens the background but leaves your focus area lit. You can also pick between three skins for the app, two of which emulate browser chrome for IE and Safari Mac, respectively; handy for quickly checking screen sizes during design-time without taking your design into a browser. Screenshot functionality is slated for a future release.

Also check out:

PixelStick
Uses the Cartesian coordinate system for exacting on-screen measurements.

Calipers This Adobe AIR app floats above all other applications. Future release plans include custom skins, alpha transparency, and customizable blade colors.

Colors (Mac)
Colors lets you sample color values anywhere on-screen. You can then copy and paste the RGB values into any application. Simple, fast-loading, and very handy for your design toolbox.

Also check out:

DigitalColor Meter
Many of us forget that Apple already provides a free color-sampling tool. Just look inside your Utilities folder! Formats include RGB, YUV, and CIE.

Xee (Mac)
A lightweight and ultra-fast image viewer, Xee can replace OS X’s Preview while also offering designers additional power options like the ability to move, copy, or rename files while viewing. Opening an image within a folder containing other images allows you to browse all the images in that folder with keyboard shortcuts and forward/back commands, or via the automatic slideshow. You can even browse images inside archives. File type, EXIF info, creator, and color space are displayed front and center. JPEG lossless is supported.

Integrity (Mac)
Moving, modifying, or deleting file names is a common practice for web developers, but it can be all too easy to incorrectly re-link files during the process, too. Conversely, outgoing links on your site can change unexpectedly. Integrity removes the tedium of manual link-checking by quickly crawling internal and external links on your site and reporting broken ones.

MindNode (Mac)
This dead-simple open-source “mind mapping” program is a great way to quickly explore creative concepts of all shapes and sizes, and also works for site map layouts during website planning. It sports a lean interface and is especially handy when you want to get ideas down fast. MindNode lets you create multiple maps, and nodes remain connected to their respective maps, yet can be moved anywhere in the pasteboard area; which expands automatically to self-adjust. The free version lets you customize background color, node paths, and fonts – individually or in groupings. Export options include PNG, PDF, and HTML.

Conclusion

The number of quality web design apps on the Mac has grown along with the surge in popularity the platform has enjoyed in recent years. Finding decent free apps can still be a challenge, however, especially for graphic designers. Hopefully you’ve found a few on this list that are interesting to you. One caveat: the term “free,” used liberally throughout this article, should also be followed with “donation requested” kept in mind if a program is particularly useful to you and the author requests it. Please help support your Mac development community. Happy web designing!

About the author

Corrales Cachola is principal of Corrales Creative, a web and print design firm based in Portland, Oregon. On weekends he stays in shape by carrying CRT monitors and an Apple LaserWriter up and down flights of stairs. Follow him on Twitter and he’ll tell you all about it.

60 Dazzling Panorama And Vertorama Photos

2009-11-11T15:01:08Z

Our post here today is on panorama and interactive panorama photos. A panorama is any wide view of a physical space. Some digital cameras have features that help you to take multiples photos in sequence that can later be manipulated into a large panoramic image.

A true panoramic photo is a continuous scene of at least 110 degrees. Many panoramic photos are about the width of the field of human vision, while some go as wide as 360 degrees. Panorama photos can be classified as vertorama (vertical panorama), polar, planar or flat, cylindrical, equi-rectangular, and so on.

This post contains a huge collection of all different kinds of panorama and interactive panorama photos. We are sure you’ll like them.

Panorama And Vertorama Photos

HDR-Vertorama: ~.High Hopes.~
Palm Beach, Florida.

The Kometik
“This monster is an oil tanker docked in Halifax. It appears to be elevated at the bow while they are working on it (probably wouldn’t fit in our dry-dock!). Look at how small the guy who is working on it looks in comparison! I was trying to get a full profile shot of it, but it is too big for my wide-angle lens. I took a couple of shots and will try to stitch them into a panorama later.”

BBC Television Centre: 360 panorama
“This is a new version of a 360 I couldn’t quite make work before, taken with AutoStitch but put together using AutoPano Pro. I translated the equi-rectangular projection into a stereographic projection using the Flexify plug-in for Photoshop. The original 360 panorama used around 100 shots. It has also been tone-mapped using Photomatix to bring up some of the shadows.

In the corner
Lysefjorden and the Pulpit Rock. One photo, composed of four handheld HDRs of five exposures each, then merged in Photoshop.

Breakthrough
“Four images stitched together with handheld pano vertically. Later added manual bracket exposure by +/- 1 stop each, for a total of five images. Merged and tone-mapped with Photomatix and touched up further in CS4, particularly for shadows and highlights, color balance, curve and USM.”

Pasco Tower
Hay stacked up in Pasco, Washington. This is a vertorama, a total of six images (three exposures at the top and three at the bottom), blended with Photomatix for HDR then stitched together in Photoshop.

My Dam Story: HDR (vertorama and panorama)

Peggy’s Light

Wat Chiangman
Wat Chiangman, Chiang Mai, Thailand

Royal Mile, Edinburgh: Vertorama, no HDR

Prédio da Antiga Cervejaria Brahma

Sailing Under Skeletal Skies
“This cloud formation looked so much like spinal column and ribs… or is it just me? Either way, it made for a nice opportunity for another vertical panorama HDR image.” Howard Amon Park, Richland, Washington.

Locker room
HDR panorama, 2 Reihen, 3×3 Belichtungen.

180 degree vertical panorama

MonumenTaal: Vertorama, no HDR

Vøringsfossen panorama

King Harbor Vertorama 1221.
“Vertorama of the restaurant at the top of King Harbor in Redondo Beach at sunset. This was made from two nine-exposure HDRs, edited and tone-mapped in Photoshop Lightroom and Photomatix, then merged with final editing in Photoshop.” Brookville.

Where the old pier was
“An HDR panorama from the lagoon.”

Palau de les Arts Reina Sofia, Valencia
Nikon D80 18mm HDR stack of 12 exposures.

Vertical Panorama

Rowley Way
“Approximately 40 images merged in AutoStitch (I must get a wide-angle lens to reduce the number needed). Rowley Way, off Abbey Road, NW London. I’d like to try this again when the sky is a bit more interesting.”

Rouen cathedral panorama, France
“Panorama of the inside of Rouen Cathedral. I took 13 pictures with a Pentax K10d, stitched with Hugin, plus several hours of work in Photoshop (mainly to correct stitching errors, because this is a handheld panorama). Best viewed large.

Staples Center panorama
Home of the L.A. Lakers and four other Los Angeles sports teams. This was on the evening of a Depeche Mode concert. This panorama is two rows of eight images, the first I ever stitched. The post-production is still a bit sloppy.

Between Walls…

Norse Explorer
This is a statue of the explorer Leif Ericson in front of Hallgrímskirkja, in Reykjavík, Iceland. It was a gift from the United States in 1930. This is a vertical panorama image, taken with a total of six images, three differently exposed images at the top and three at the bottom; merged together as HDR in Photomatix, then stitched together by hand in Photoshop.

Precast Soldiers
Joostenberg Vlakte, South Africa.

Half Pipe, Cambará Tur: HDR vertorama

Twins, Vertorama Edition

Green Hallgrímskirkja

Molo Sanità: HDR virtual tour panorama

Move Aside Vertoramas…
“It’s panorama time. This is the view from the lower look-out point at the Makapuu lighthouse (Hawaii). This pano is made from four vertical shots of six exposures each. I’m not sure which I like better, verto or pano, but I’ll give you guys both so you can decide. Each frame is an HDR, tone-mapped from six exposures and blended with two of them. Then auto-stitched in CS3. I used curves, contrast, the highlight/dodge tool, unsharp and noise ninja. Oh, and I adjusted the lens distortion in CS3 to fix the curved horizon.”

Te Mata Strange Attractor
Panoramas within panoramas… starting with a 360×180 image of Te Mata Peak and orbiting out.

Untitled, in high-resolution HDR
Library of Congress in Washington, DC. This is a panoramic HDR built from ten single photos.

Old Aberdeen High Street: Portrait Photostitch
Canon 5D with 17-40 f4L portrait view. At f16, correct shutter speed is 15s – 17mm. Four images each with 3x, 2 stop +/- and one correct exposure. HDR’d and tone-mapped in Photomatix Pro and joined manually in Photoshop.

Berlin Olympic Stadium: Panorama HDR

Polar Panorama Photos

This section contains interesting polar panorama photos. Polar panoramas are also referred to as little planet, planet panoramas, 360 degree panorama, wee planets, tiny planets, polar panorama effect, and so on, but they all mean the same thing: photos edited with Photoshop’s Distort filter and Polar Coordinates (or in any other image editor).

Planet Brooklyn, Grand Army Plaza
Sam Rohn, Location Scout: Panoramic Photography, New York City

Planet Central Park, New York
“Picture taken in Central Park, NYC, from the bridge (don’t remember its name). I used a handheld Canon 400D and Sigma 8mm F3.5 fish-eye.”

water planet
Thirty exposed panoramas made from six HDR photos of five exposures each.

Horse Planet: Polar Panorama

Tubby Man

Planet Nagoya! TTI terminal… (HDR)

Planet IMAX

Square (or, rather, circle) in Copenhagen

Saint-Guénolé Church of Batz-sur-Mer: Small Planet

Interactive Panoramas

As the heading suggests, this section contains appealing interactive panoramas. Have a look at these photos, and you will be amazed. We have collected fully interactive 360 degree versions here. Just click on any of the images below.

Audubon Terrace, NYC

Tirtagangga
Tirtagangga (Holy Water of the Ganges, in Balinese) water garden was built in 1948 by the King of Karangasem, Anak Agung Anglurah Ketut Karangasem. This water garden was constructed in the unique Balinese and Chinese architectural styles.

Apple Store, Manhattan

Hall of Science, New York City
The Great Hall at the New York City Hall of Science, designed by architect Wallace K. Harrison. Originally built as part of the 1964 World’s Fair, it now houses a science museum.

Horseshoe Bend

Antelope Canyon

Hayden Planetarium, New York City
Originally built in 1935, the Hayden Planetarium was rebuilt in 2000 as part of the Rose Center for Earth and Space, itself a part of the American Museum of Natural History.

Colorado River Rafting: Elves Chasm, Grand Canyon

Chelsea Hotel, New York City

Zingst, Ostsee

Ice Skating in the Eiffel Tower: Eiffel Tower, Las Vegas

Creating an Old Collage Effect Poster
Amazing view above the clouds. Looking straight down to the world below.

Mountain Hiking

(al)

Ultimate Guide To Grid-Based Web Design: Techniques and Tools

2009-11-10T10:28:27Z

Grid-based layouts are generally more aesthetically pleasing and balanced than those not based on grids. While there are definitely great designs out there that don’t use a grid-based layout, they are more difficult to create and often end up falling into some sort of loose grid structure anyway. So why not just design based on a grid in the first place?

This post offers up a complete guide to designing with grids. There’s plenty of basic information here, as well as tons of links to more in-depth information on specific aspects of grid-based design from other sites. And to top it all off, we’ve compiled a showcase of excellent grid-based designs for inspiration.

The Basics of Grid Design

Virtually any website you design should be based on a grid. Grids lend a sense of structure to your site and improved usability for your visitors. And designing to a grid can simplify your design process and make you a more efficient designer. In a grid-based design, since the guides are already in place for you, your options are reduced, making it easier to decide on the width and height of different elements on your pages.

Basic Principles and Ideas

Most grid systems are split up into either 9, 12, 16, or 20 columns. Custom grids might use more or fewer columns than this. Some grids also break up the design into horizontal rows, which are generally the same width in pixels as the columns.

Many designers feel that grids are only appropriate for fixed-width layouts, but grids are versatile enough to be used in fluid layouts, too. There are already some grid frameworks that make provisions for fluid layouts.

Best Practices in Grid Design

There are a number of things to keep in mind when designing with a grid. While many of the tips below are flexible, it’s helpful to know what they are before you embark on a grid-based design project. There’s nothing wrong with breaking the rules as long as it’s a conscious decision and not an accident.

Use only enough columns as you need for your design. What’s the point of using a grid with 20 columns if you’re only going to use four of those? While combining columns is expected for individual elements, if you only need 12 columns, then pick a grid system (or design your own) that only uses 12 columns. Anything beyond that only creates visual clutter in your design workspace.

Pay attention to both horizontal and vertical spacing. While some grid frameworks don’t have provisions for designing along a horizontal baseline, others do. If you work with one that doesn’t, consider creating your own horizontal rows to help with the spacing of elements vertically. Generally, rows should be the same number of pixels high as columns are wide.

Don’t be afraid to step outside the grid. Sometimes you need to break free of your grid for certain elements. This is fine, as long as it’s a conscious decision and you know why it’s necessary. This is especially prevalent in header and footer design with complex backgrounds (like with an illustrated header). It’s okay to get away from the grid if you feel it’s integral to the design.

Use a pre-designed grid if possible. You don’t have to reinvent the wheel. There are more than a dozen good, grid-based layouts available. One of them will most likely fit your needs, even if you have to tweak it a bit.

Additional Resources

Grid-Based Design 101

Grid-Based Design: Six Creative Column Techniques which covers six techniques for working within grid columns.

Grid Design Tutorials and Resources

There are numerous tutorials and resources available for grid-based design. While many rehash what’s been said over and over again, there are some real gems out there that provide valuable insights into grid-based design. And while tutorials are more sparse than articles, there are some great ones available, some of which are included below.

Tips and Tutorials

Five Simple Steps to Designing Grid Systems—Part 1

This tutorial series on designing with grids comes in five parts. It covers all aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the series.

Seven Smooth Steps to Superb Grids
This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way.

O Rule + Golden Proportion for Calculating the Gutter in a Grid
As the title suggests, this article explains how to use the Golden Proportion (also called the Golden Mean or the Golden Rectangle) and the “O Rule” to establish the gutter widths in your grid design.

Gridlasticness
A short post on elastic grid design based on em sizes. Includes some helpful tips based on a real-world site redesign.

Fluid Grids

This post from A List Apart offers a comprehensive tutorial on creating fluid grids. It covers everything from font sizing to the markup used for the example site.

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework
This tutorial from Nettuts+ goes through the entire process of creating a magazine-style grid-based website design using the Blueprint framework (more information on that below). This is a very thorough tutorial with a demo and downloadable source materials.

960 CSS Framework—Learn the Basics
This article offers a great introduction to work with the 960.gs system. If you’re new to working with 960.gs or grids in general, this is a great place to start.

General Resources

Grid-Based Layout

This is an excellent introductory article for grid-based design that provides a good overview of what grids are and how they’re used.

Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial
This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs.

Setting Web Type to a Baseline Grid
This is a great post from Dev Opera about baseline grids and vertical flow in grid-based designs. It covers not only why you should use a baseline grid, but also how to go about it.

Thinking Outside the Grid
An early article on grid-based design from A List Apart. It covers how to break out of the traditional table-based grid, while still showing designs in the context of their looser grid-based structure.

Grid Style in Modern Web Design: Showcase and Resources
This article gives a great overview of grid-based design, and includes an introduction to what it is and how it works. It also has a great showcase of grid-based designs.

Oh Yeeaahh!

This is a now somewhat famous article on redesigning a well-known website to conform to a grid layout. It details the entire process (in the article and in a downloadable presentation), including the challenges the redesign presented.

The Grid System
This site offers up tons of categorized resources on grid design, compiling articles from all over the web. It also includes tools, books, templates, a blog, and inspiration — all in one place.

Adobe Web Tech Curriculum: Page Layout Grids
This lesson from Adobe gives a great introduction to grid design and includes guidelines for creating and using your own grids. The factors and guidelines are provided in an easy-to-reference bulleted list.

Quiet Structure
This post offers a great critique and evaluation of the CNN.com grid-based redesign. It discusses what elements changed, how the site is structured, and how the grid provides structure to the content in an understated way.

The Complex Grid
This post is typography-specific, though many of the principles it discusses in relation to grid-based design could be applied to other design elements.

Developing the Grid that Supports Your Design
A great overview of creating a grid to fit your proposed design, with some great grid examples based on common layouts.

Designing with Grids
This is a very thorough article from .net magazine about designing grid-based layouts. It covers why grids work along with grid-based design theory and includes some practical suggestions for working with grids.

Design By Grid
Design By Grid offers up tons of grid design resources, including a showcase, articles, and tutorials. They also have a resources section with even more information from around the web.

65 Resources for Grid-Based Design
This is an excellent roundup of resources compiled by Vandelay Design. The listings are categorized by articles, galleries, tools, framework resources, and WordPress themes.

Grid Based Design Toolbox

Fuel Your Creativity has compiled a huge list of grid-based design resources, broken down by category. There are tools, galleries, tutorials, WordPress themes, and articles to get you going with grid-based design.

The Funniest Grid You Ever Saw
This article from Subtraction talks about the redesign of The Onion and how it now fits into a grid-based framework. It’s a very thorough article that offers great insights into how to design a complex grid-based theme so common on news and magazine websites.

45+ CSS Grid Systems, Layout Generators and Tutorials that Every Designer Should Know
Tripwire Magazine has compiled this excellent resource list for grid design. Some basic information is provided for each link, as well as some general grid-design info.

Grid (page layout)
This is Wikipedia’s page explaining grid-based design. It offers some great explanations of why grids work and includes a bit of history and further resources.

Grid Tools, Frameworks and Templates

While sometimes a particular design project calls for a custom grid solution, there are plenty of frameworks that can be customized to work for just about any design. And even if you opt for a custom solution, there are tools available that can help you decide on the basics of your grid’s layout.

1KB CSS Grid

Just as the name suggests, the 1KB Grid System is a grid system based on a CSS file that is under 1 kilobyte. You can customize the grid before downloading, with the number of columns (9, 10, 12, 14, or 16), their width (40, 60, or 80 pixels), and how wide you want the gutters to be (10 or 20 pixels) to create grids from 450px wide up to 1600px (not recommended, obviously). The resulting file is not only super-tiny, but also super-easy to understand and work with. If you’re new to grid-based design, this might be one of the best framework options available.

960 Grid System

960.gs is a grid system based on a 960-pixel-wide page layout. It supports designs based on 12 or 16 columns. The download includes a printable sketch sheet for hand-drawing mockups.

Baseline

Baseline is a framework built with both grid-based design and good typography in mind. It works with HTML 5 and CSS 3 (requiring a modern browser for all of their functionality to display properly). Baseline serves as a great framework for creating grid-based sites that feature visually pleasing typography (beyond just nice fonts and styles).

Blueprint CSS

Blueprint is one of the better-known grid frameworks out there. In addition to the grid-design tools, Blueprint also includes support for typography, print styles, sprites, and more.

Boks

Boks is a cross-platform-compatible Adobe AIR application for working with the Blueprint CSS framework. It lets you configure your grid, baseline rhythm, CSS, and exports a .png file to use in your design mockups.

Fluid 960 Grid System

The Fluid 960 Grid System is based on the 960.gs framework but with a fluid width and incorporates MooTools and jQuery effects. The demo page itself is impressive, and the fluid nature makes it a preferrable choice for many designers.

Grid Calculator

The Grid Calculator is a simple tool that uses sliders to adjust the base font size, number of columns and their width, and the gutter width of your grid. It automatically calculates the total grid width and shows the grid layout below the calculator.

Grid Designer

Grid Designer is a simple grid layout tool for creating grids with any number of columns, of any width, with any size gutters and margins. It’s simple to use and even includes tools for developing your site’s typography at the same time.

GridFox

GridFox is a Firefox plugin that lets you overlay a grid on any website design. You can change the width, the number of columns, and the alignment of the grid, though the gutter width seems to be fixed. It’s a great tool if you’re trying to figure out how an existing grid-based website was set up, or even for double-checking your own work.

Gridinator

The Gridinator is an online tool for creating custom grids that match your needs. You can specify how many columns you want, how wide they should be, the margins, and the body font size, and then download the CSS, HTML, and the image file for creating mockups.

Gridmaker

Gridmaker is a fairly robust online grid creator that includes tools for formatting your vertical columns and baseline properties. You can then export a .png file for creating your design mockups. Gridmaker is also available as a Photohsop CS4 plugin.

Gridr Buildrrr

Gridr Buildrrr is another online grid design tool that lets you create custom grids to meet your design needs. You can specify the number of columns, their width and margins, and the container margin. It also allows you to add draggable boxes to your grid (including leaderboards and resizable width boxes).

Gridstarter—The Web Design Starter Grid

Gridstarter is a free grid template for Photoshop that’s based on a 960px layout. It’s based on a 60×60 grid for 16 columns (which also means you can easily do 2, 4, 6, 8, or 12 columns by combining grid columns). The site also includes screencasts for getting started with Gridstarter.

Grid System Generator

The Grid System Generator makes it easy to set up grid templates for 960.gs, The Golden Grid, the 1KB Grid, and Simple Grid. You can choose the width, number of columns, and margins to create a customized template file for your own needs. The site also offers articles on CSS and grid-based design, plus additional resources from around the web.

Layout Grids for Axure and Pencil

If you use Axure for prototyping and wireframing or the Pencil extension for Firefox, then these Layout Grids are for you. The files included here overlay a grid to your workspace (either in Axure RP Pro 5 or Pencil), making the creation of grid-based wireframes and prototypes much easier.

Slammer

Slammer is a program for Mac OS X Leopard that lets you overlay a grid on any window. It includes rulers to help you position elements precisely and also allows you to save your customized overlays for future use.

The Golden Grid

The Golden Grid is a slightly different grid system based on the number 3. It uses a 6/12 grid system instead of the more common 14 or 16 column format. The grid takes into account the Rule of Thirds (Golden Rule, hence the name) to create more aesthetically pleasing designs.

Web Page Layout Grid

The Web Page Layout Grid is a simple, downloadable (just right click and then click on “view background image”) image for laying out your designs on a grid. Just put the image behind your design work and you have a ready-made grid with pixel markings on both vertical and horizontal axes.

YUI Grids CSS

YUI Grids CSS is a grid framework that supports both fixed- and fluid-width grids. It’s a 4kb file that claims to support over 1000 page layouts. Examples and tools are included, too.

Gallery of Excellent Grid Designs

What would a post on grid design be without a selection of awesome grid-based designs to inspire you? Below are 30 excellent designs based on grids. Some have more complex grids than others, and some do an excellent job of breaking outside of the grid when necessary.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

(ll)

The Big Collection Of Free Design Textures

2009-11-09T01:27:30Z

Knowing your resources is important in all aspects of design. You could be working on a new draft and realize you are missing one thing, texture. Textures are not always beautiful by themselves and many can appear quite boring, but when you add texture to your design, it gives that little bit of depth you might be looking for to make the image pop. With a digital camera or intermediate to advanced skills in Photoshop, textures are easy to make. One thing we may run out of is time. Time to make or even the countless hours surfing the Web for the perfect texture.

This post presents an extensive collection of resources with textures from which you can choose the perfect background image for your next design. Please visit the linked sites to download the textures of your choice.

40+ Beautiful Patterns and Textures for Ornate Backgrounds
The use of ornate patterns in web design has been popular for several years now. Not only does it add a lot of intricate detail, but it’s also a great way to add a level of sophistication to a design. Here are some of the most beautiful ornate patterns and textures

50 Outstanding Free Design Textures
A few good textures can take a boring design and turn into something stunning. As a designer, you should seek to build a library of all kinds of textures to complement a range of styles. Here are 50 completely free and ready to download textures to get you started.

The Big Smashing Texture Gallery
Smashing Magazine organized the Smashing Texture Contest last year and received over 740 e-mails from over 600 participants, resulting in far more than 2000 photos. The result, however, is not just literally zillion of textures, but truly brilliant textures you can use in your private and professional projects for free.

270+ Sets Free And Beautiful Watercolor Textures
Both grunge and watercolor effects are really cool and hot in web design industrial. There are a lot of website backgrounds using watercolor effect. Some people may think watercolor and grunge effects are “dirty”, but if you are able to mix the design with these effects, then you will have a beautiful layout which able to give visitors an impressive appearance.

23 Water Color Textures I
23 High-Res Water Color Backgrounds are now available for free personal and commercial use. Each individual file can be found and downloaded for free at SadMonkey’s DeviantArt Page. Please feel free to use, redistribute or modify the files any way you see fit

25 Free High Res Watercolor Textures
These awesome watercolor textures are brought to you by Daniel Davidson. Daniel is a freelance graphic designer, you can check out his portfolio at SadMonkey Design

>Grungy Watercolor Textures and Layered PSD
Today’s webtreat is a layered PSD of our Grungy Watercolor backgounds on BackgroundsETC along with a selection of several of our favorites.

10 beautiful Free Wood Textures for Your Designs
Used as background images, wood textures are quite popular on the web theses days. In this article, I’ll show you 10 beautiful wood textures that you can freely use to enhance your designs.

12 Free High Resolution Wood/Rock Textures
Textures design are very popular among designers to add to their design work. Today we are offering 12 free high Res textures of wood and rock. You can download/preview the texture by clicking on the images which will take you to the Flickr Photos.

9 Free Hi-Res Wood Panels Textures
It’s time for another high resolution texture set. This time it’s all about wood panels. Wood textures pop up in more and more websites as background images. It’s a trend which sure won’t disappear in the near future. With a bit of tweaking these wood panels textures can be transformed into tile-able background images for your web projects and at the stunning size of 3264×2448 pixels they’re great for your print projects too.

10 Super High-Res Wood Textures
This texture set is courtesy of Franz Jeitz, who you may remember we interviewed recently. Franz runs the design blog FudgeGraphics, and was kind enough to offer this texture set to our visitors. This texture set is huge! Images are 3264X2448px in size – perfect for large scale designs.

30 Wood Textures Sets
If you create nature design work, you maybe will need Wood textures. Wood textures can add more natural feeling to your artworks. Wood textures you can use as backgrounds or apply them to some objects. In this set you will find 31 large-scale, high resolution (1950 * 1310) suitable wood textures. On Psdeluxe you can download this set for free.

200+ Excellent Free High Quality Tree Bark Textures
Tree Bark Texture is a kind of texture taken from the bark of a tree. Some passionate photographers and designers took these textures and contribute it for the design community. This could be useful for any graphics design artwork and normally used for background purpose.

42+ Free Photoshop Textures
Beautiful collection of background textures for Photoshop. A lot of texture backgrounds are used in modern web designing, textures add quality and beautify designs.

100 Beautiful Free Textures
In this post, Smashing Magazine looks at 100 different textures in a wide variety of different categories. Of course, each image is linked to the source where it can be downloaded. As with any type of freebie, be sure to read the terms and conditions or stipulations by the owner before using it in your work.

50+ High Resolution Textures, Tutorials and Resources
Hundreds of thousands of incredible Textures are all over the web. Due to this phenomenally vast amount of textures available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, damaged, dreamy or any look you want

11 High Resolution Free Fabric Textures
Today I have a good set of high resolution of fabric texture. I found some fabric around my house which inspired me to take up my camera and shot some good high res texture. Fabric texture has always been on of my best favorites. Hope you can use high fabric textures for better use in your design.

45+ Absolutely Useful Free Fabric Textures
Today we will showcase a collection of textures where you can use and apply on your future web page design project or just for graphics use. These type of textures is more on different kind of fabrics.

50 Free Rusted Metal Texture
Textured backgrounds are a great way to add an extra dimension to any graphic design project. Magazines and printed media can resort to textured paper for added impact however, this is impossible to do on the web, and the closest we can do is adding texture to simulate this effect.

Large Textures from India
Five large and colorful textures from India.

12 Large Textures
12 beautiful textures for your designs and inspiration.

17 Paper Papyrus Textures
17 Lovely paper textures.

24 High Res Grunge Textures
This pack contains some really nice grunge-style textures.

10 Catalyst Textures
10 beautiful textures with vibrant colors.

Five Grunge Textures
This is a second set of interesting grunge textures designed by Cloaks

12 Free and High-Res Grungy Wall Textures
In this freebie, we share with you 12 free grungy wall textures that you can use on your future design projects in an innumerable amount of ways.

50 Grunge Icon Textures
For those times when you need to fill a small area, here are 50 colorful grunge icon textures..

60+ Free Textures from SXC.hu
In addition to using brushes, you can get great results and save considerable amounts of time by taking advantage of textures that are freely available. One excellent resources of textures (and other types of stock images) is Stock.xchng. Below you’ll find more than 60 textures from their site. Each image links to the page on sxc.hu where the image can be downloaded.

40 Free Concrete Textures
Concrete textures are excellent for use in web and graphic design. You can quickly take your own, since concrete is so easy to find, or you can take advantage of those that are already freely available. In this post we’ll feature 40 different concrete textures from a variety of sources.

Cool Textures in Bricks and Stones
We find ourselves going through photographs and wonder why in the world we even wasted the battery on that shot, not thinking of course they can be used for textures, patterns or even Photoshop brushes at a later time. We have collected several photographs of bricks and stones which could make some pretty cool texture effects in your designs.

Rust Texture Pack
This is a pack of 10 rust textures. You can get any of them from Flickr, or download the full pack in a zip file at the end of the post. Most of them have a resolution of 2560 x 1920..

101 Free Stone and Rock Textures
Most designers are always interested in quality textures to use in their own work. Recently I was looking for some good stone textures, so I decided to put together this collection that will hopefully be a helpful resource for others. There are textures from a variety of different sources.

New York Concrete: 10 Free Hi-Res Textures
The latest texture pack contains 10 high resolution concrete textures taken during my last trip to New York City. I took over 300 photos, mostly of the regular tourist attractions.

40 High Res Textures
If there is one thing that is ubiquitous among almost all grunge web designs, it’s having a good quality grunge texture or dirty background image

30 Most Incredible Textures for Vintage Style Design
One of the most important aspects of a good vintage style design is the use of authentic looking textures. Since most of you probably don’t have time to browse the local antique shop, and your grandmother’s attic is miles away.

Cloud Textures
Weird colors – 27 cloud textures, made from photos. Please credit the artist if you use these textures. Resolution is 1600×1200 pixels.

11 Free Hi-Res Old Grunge Paper Textures
It’s time for another high resolution texture set. This time it’s all about grunge paper textures taken from old books. As a bonus there’s even a nice book cover texture for you to download. Due to the enormous size (about 7MB each) of the textures I will not offer a single zip file containing all the images. Instead you have to individually download each texture by clicking on the preview. I hope you don’t mind. The files are perfect for both web and print jobs to your designs a more organic or vintage feel

60+ Extremely Useful Free Concrete Texture Backgrounds
You may notice the last few days I made some list of free texture resources. And as a continuation of gathering some High Quality Textures on the Web, here are another textures which can be very useful when it comes to grunge designs.

25 Great Free Photoshop Texture Packs
Photoshop textures are very widely used in modern web design, and hopefully you don’t have to create all your textures by yourself since a great choice is available freely on the web. In the following collection we have selected some of the best free Photoshop texture packs.

25 Useful Digital Textures Tiles
25 tileable textures for your multimedia, web, 3d, game or print designs. Bricks, stones, furs, metals and other materials. These tiles were created digitally, so you won’t get the dirt and impurities normally found on scanned images.

30 Free Cardboard Textures
Having the right textures can make a huge difference for designers. Today we’re going to feature 30 of the best free cardboard textures from a variety of different sources.

15 Textures of Italy
Here is the first of several, Italy Texture Packs. This one includes 15 textures from all over Italy. (The name of the city the photo was taken in is in the file name.

25 Free High Quality Brick Textures
I recently used some brick textures for a design project. I got a good collection and thought of sharing it. In this post, you would find some of the best high quality brick textures which can be used in different ways.

60 Unique and Free Paper Textures
One of the most commonly used texture resources is the paper texture effect, many designers including like this texture and use it in many projects and digital painting works in Photoshop.

25 More Free Photoshop Texture Packs

22 Textures from The Grand Canyon
A couple of nice textures from a trip to the Grand Canyon. There are also a few textures from Vegas.

Free Texture Tuesday Rust 2
The venerable rust texture. Rust can be one of the most useful textures when trying to add a hint (or a lot) of grunge to your designs or photos, very handy.

31 Hi-Res Grunge Remodeling Textures
Free high resolution grunge remodelin textures. Overall 31 textures are included in the pack.

10 Free Original Hi-Res Fully Stained Paper Textures
These were created by soaking A4 pieces of paper in a tray filled with food colouring and then left to dry in the sun. The edges are most concentrated while the middle of the paper has a sort of tie-dye effect.

10 Free Hi-Res Photoshop Brushes for Acrylic Textures
These brushes are perfect for textures, overlays, and even poster making, letting you achieve a great organic feel. This set has a total of 9 Acrylic Texture Brushes all hovering at exactly 2500px.

Gallery of Textures
Textur.es is a community ran texture gallery for designers, photographers, and creatives alike.

The Beauty Of Splash Sculptures

2009-11-06T21:52:14Z

By Tim Mercer

Splash Art is a truly beautiful art form requiring precise timming a specialized photography equipment. Masters of the genre often have complex studios set up with lasers, multiple flashes and controlers to acheive the exact timming needed to capture these wonderfull images. With the abstract nature of splash photography you can often make out figures in the liquid forms. The artists featured below have taken this niche to new heights – perfecting their techniques and inspiring us all.

Today we present 45 Stunning Splash Sculpture Photographs taken by masters of their craft. Be sure to check out the photographers’ websites by clicking on their photos.

Splash Sculpture Photography

A Splash

Ghirlanda Colore
The photo is taken by Antonino Dattola.

The Red And The Blue
The photo is taken by Paul Hocksenar.

Last Click

Resources

Strobist
Learn how to photograph water splashes.

Tutorial
A nice tutorial on how to capture water drops on.

Water splash Photography
A great Flickr group on splash photography.

High speed splash photography
How to set up a splash photography studio.

About the author

Tim Mercer is a photography enthusiast, graphic designer, artist and blogger. His blog digital-artist-toolbox offers free resources to the digital artist and graphic designer as well as tutorials, artist interviews, inspiration and more.

Essential CSS/HTML Lists Styling Techniques

2009-11-04T16:54:58Z

By Justin Johnson

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of Javascript). These features can help developers build new sites and applications as well as integrate new content into existing applications.

Unordered/Ordered Lists

Unorderd lists are recommened to be used with a list of items where order is irrelevant. With unordered lists (and all lists actually) the W3C discourage authors from using lists purely as a means of indenting text. This is a stylistic issue and is properly handled by style sheets.
Ordered lists on the other hand are encouraged to be used when order matters for the list elements, example: A cooking recipe or turn-by-turn directions. For the examples in this article it is possible to substitute an ol for a ul or vice-versa. That choice is left to your discretion.

In it’s simplest form an ordered list or unordered list (referred to going forward interchangably as ‘a list’) would contain similar markup to the following:

<!-- an unordered list example -->
<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

<!-- an ordered list example -->
<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

Examining the box model for a list reveals the following:

In short both ul’s and ol’s are considered block level elements, as are each one of their child li tags. As such we can apply margin and padding to both items on all four sides. In regards to the bullet point for ul’s (or the numeral for ol’s) a left margin will move both the bullet/numeral to the right as well as the text, while padding while increase the space between the bullet/numeral and the content of the li.

The Basics of Styling Lists

Styling a list to be used as it is intended, a list, is a fairly straightforward task. To replace the bullets in an ol with a sample graphic icon you could do something like the following:

HTML

<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

CSS

ul li{
	list-style:none; /* removes the default bullet */
	background: url(../images/icon-for-li.gif) no-repeat left center;
	/*adds a background image to the li*/
	padding-left: 10px
	/* this would be the width of the background image, plus a little more to space things out properly */
	}

Basic styling to the numbers of an ordered list is just as straightforward. Consider the following list and CSS.

<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

CSS

With the CSS we will change the font of the ol to change the font of the numerals, then we’ll target the a tags inside our li’s to change their font in order to give them
a different visual representation than the numerals.

ol{
	font-family: Georgia, "Times New Roman", serif;
	color: #ccc;
	font-size: 16px;
}
ol li a{
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
}

More Advanced Uses for List

Accessible-Image Tab Rollovers

While this is an older article, published in 2003, the information contained in it is very valuable. Dan Cedarholm of SimpleBits explains how to create an image based navigation with rollovers using only CSS, HTML and images. If you haven’t read this article before it’s definately worth reading. The code below is a summarized version, but Dan offer’s a full explanation of the code on his site SimpleBits

CSS

<ul id="nav">
<li id="thome"><a href="#">Home</li>
<li id="tservices"><a href="#">Our Services</li>
<li id="tabout"><a href="#">About Us</li>
&lt/ul>

HTML

#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(home.gif) top left no-repeat;
}
#tservices a  {
width: 40px;
background: url(services.gif) top left no-repeat;
}
#tabout a  {
width: 40px;
background: url(about.gif) top left no-repeat;
}

Examples

Note that some of these examples use a modified version of this technique in which one large image (aka an image sprite) is used instead of individual graphics for each nav item.

Pat Rogers Harley Davidson

Fast Company

NBC

ToysR’Us

CSS “Sliding Doors”

While the above method is great if you know what your navigation items are going to be, it doesn’t present a problem if you’re using a content management or blogging system like Wordpress that allows you to create and rename pages at will. The following technique has been around for a while but is just as useful, if not more useful than the previous technique. Douglas Bowman wrote an article for A List Apart in 2003 titled: Sliding Doors of CSS

This technique uses two background images that can tile horizontally to encompass a long page title or shrink horizontally to encompass a short page title. Our HTML markup for the list is very similar to the above technique. Our main changes will center around how we style the list with CSS.

<div id="header">
<ul>
<li><a href="#">Home</li>
<li id="current"><a href="#">Services</li>
<li><a href="#">About Us</li>
</ul>
</div>

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

Examples

Content Scrollers
One trend that is becoming increasingly more and more popular is the concept of content scrollers or sliders. These block level elements cycle through (or are toggled via user interaction) a predetermined set of content which can be any web content. This used to be a technique that was reserved soley for Flash, however, with the advent of Javascript libraries such as jQuery, mooTools, and Prototype it is now possible to do this strictly with HTML/Javascript/CSS. Our code snippet below is an example using jQuery and a jQuery plugin called jCarousel Lite.

HTML

<button class="prev">Prev</button>
<button class="next">Next</button>

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

        $(function() {
            $(".anyClass").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });

Examples of this technique can be found below. Note that not all of the examples below use jCarousel Lite, but they do portray a similar technique/effect.

Ordered Lists: A Side Note

While ol and ul can technically be considered interchangable, an ol was designed to be used for items where order is important. One great example of this could be a list of links that shows a user where they have been, otherwise known as “breadcrumbs”. In the following list you’ll find some step by step tutorials for building CSS breadcrumbs.

Resources for CSS BreadCrumbs

Lists & CSS Resources

The following resources discuss technique and theory in greater detail in regards to CSS and HTML lists.

About the author

Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.

The Future Of The Web: Where Will We Be In Five Years?

2009-11-03T12:56:13Z

By Cameron Chapman

We’re approaching the end of 2009, and many people are wondering what the future will bring. While no one can predict for sure what the Internet holds in its future, there are indicators and trends that can point us in the right direction.

A ton of technologies are ripe for further development in the coming few years. Social media and related apps are definitely going to be at the forefront of the Web for a long time. But plenty of other technologies are on the verge of becoming mainstream, either because of more social acceptance or because of advancements in hardware and applications. Read on for 15 predictions about the future of the Web.

1. Micro-Payments For Quality Content

Submitted on Twitter by @mikaelgramont and @simplybastow.

Some companies are already making strides in the micro-payment arena. Many current systems accumulate a big number of micro-payments before paying out a single larger payment. But that may change in the future; you’ll be able to spend micro-payments as soon as you get them, rather than having to wait for them to add up.

Micro-payments will likely be popular among online magazines and news services, as well as other providers of in-depth content. Micro-payments might also be adopted by artists and content creators to defer costs and make a profit.

The most prevalent current micro-payment systems are within MMORPGs (massively multi-player online role-playing games). These systems use credits that are usually a fraction of a dollar to buy and sell things in the game. There are numerous cases of people actually earning a living through these systems.

PayPal is already offering support for micro-payments at a rate of 5% plus $0.05 per transaction. Amazon is also experimenting with micro-payments through its Flexible Payments Service (FPS). Dedicated micro-payment systems are also starting to crop up.

Micro-payments of the future may be closely-related to mobile payment systems. Payment via cell phone opens up whole new area of economic opportunity, particularly in areas where cell phones are more prevalent than computers. Being able to make and receive very small payments, the equivalent of a dollar or less in many cases, via a mobile device paves the way for many in developing nations to participate in the Internet economy in a way that only a few years ago might not have been deemed possible.

Further Resources

iPhone, MySpace, Facebook Race to Micropayments in 2009
An article from TechCrunch about micro-payment options being worked on by some leaders in social media.

What Would Micropayments Do for Journalism? A Freakonomics Quorum
An article from the New York Times about the potential effects of micro-payments on journalism and news websites.

Can Micropayments Save Newspapers?
An article in the New York Times from The Opinionator about the potential of micro-payments to save newspapers.

The Case Against Micropayments
An article from O’Reilly Media on why micro-payments might not be the best idea.

2. Wider Monitors For More Horizontal-Scrolling Content

Submitted on Twitter by @wakeupstar.

Monitors keep getting bigger. Only a few years ago, the iMac came with a 15-inch monitor. Now the smallest one you can get is 21.5 inches (and the largest is 27). Most new PCs, even at the low-end, come with at least a 17-inch monitor, and in many cases 19 or 20 is standard.

Size aside, virtually every new monitor on the market is widescreen. This means that even average computer users have a lot more screen real estate available. It only makes sense that websites will adapt and make more use of horizontal scrolling in future than vertical, especially websites that have multiple small blocks of content, rather than long stretches of text.

Horizontally-scrolling websites are already becoming popular. Some use JavaScript or Flash to simulate a wide layout, while others use plain old HTML and CSS. In any case, a horizontal layout makes a lot more sense for certain kinds of sites, especially portfolios, media galleries and websites that rely more heavily on multimedia than text.

Further Resources

The Horizontal Way
A showcase of horizontal-scrolling website designs.

Fifteen Web Sites Using Horizontal Scrolling
A round-up of great horizontal designs from Sitepoint.

27 Inspirational Horizontal Scrolling Websites
Another great roundup of horizontal designs from Dzine Blog.

How to Create a Horizontally Scrolling Site
A brief tutorial from CSS-Tricks on creating a website with horizontal scrolling.

3. Magazines In A More Interactive Format (Wiki, Digital Video, Etc.)

Submitted on Twitter by @tomforeman.

There’s some question as to whether the majority of print magazines will even be around in five years. Another magazine seems to close every week, often with little or no notice. And how can we be surprised? With mobile devices now fully capable of delivering great content while we’re on the go, what niches do magazines serve? A magazine used to be a good cheap read that we could pick up to check out the latest trends in one field or another, or quick portable entertainment while we’re on the go. But the mobile Web does all that and more.

Of course, that doesn’t mean we won’t have magazines in five years, just that the majority of them will be online, and they’ll have a lot more than just text content. Magazines will be infinitely more interactive, incorporating wikis, video and audio content, and in many cases their own social networks. Some print magazines are already preparing for the change and have websites that could very easily stand on their own. And a whole new breed of online magazines is appearing in a variety of formats. Some hold on to the page-flipping print format (except digitally rendered), while others have broken free and are more blog-like. Whatever the format, they are providing faster, cheaper and more user-friendly content than their print counterparts. The trend is likely to continue as costs for everything but Web space go up.

Further Resources

Switch from Print to Web: Where to Start?
A guide to making the transition from print format to the Internet.

No Magazines Have to Die
An article that includes strategies for print magazines that are transitioning to digital.

Print and Digital – The Future of Magazine Advertising
A great article that covers the future of magazines from an advertising standpoint.

4. More Collaborative And Real-Time Content

Submitted on Twitter by @wakeupstar.

The Web has long been used by people to collaborate on projects with colleagues or clients who are not geographically close enough for a face-to-face meeting. But recently social media has made a whole new level of collaboration possible. Writing projects are particularly popular and seem to do well across a variety of platforms. Twitter novels and stories have been co-written (Neil Gaiman was recently involved in a collaborative story project with BBC Audio Books and hundreds of Twitter users). Novels have been written entirely on Facebook, with input from readers on the work in progress (e.g. The Man Who Painted Agnieszka’s Shoes by Dan Holloway). Even textbooks have been written by collaboration (see Wikibooks).

As broadband Internet becomes more widely available worldwide, collaborative projects will only get bigger and more frequent. Real-time updates and interaction make it possible to work on practically anything in a collaborative environment. Some projects will consist of small groups of people who already know each other, while other projects will bring together hundreds or even thousands of participants who were till then strangers. There’s really no limit to how many people could participate.

Technology that allows collaboration has been around for years. File sharing has almost always been a part of the Web, though new tools make it easier and more efficient. Services such as Zoho and Google Docs allow writers to collaborate on a single document, tracking changes by each participant and allowing others to revert to earlier versions if necessary. Other services let users communicated in real time through video or audio chats in a collaborative workspace. Improvements to these technologies are likely to continue, and new technologies developed.

Collaborative Apps

The following are some collaborative apps that might indicate where online collaboration is headed.

Wridea is an “idea management” service that includes collaborative brainstorming tools.

Writeboard, from 37Signals, is a collaborative writing app.

Twiddla is a Web-based collaboration tool that lets users mark up pretty much anything online as well as work on a group whiteboard-like space.

Spicebird is a collaboration platform that includes instant messaging, a group calendar and email functionality.

Stixy is a collaboration space that lets you share photos, notes, documents, to-dos and more.

Edmodo is a collaboration tool for teachers and students.

5. More Semantic Content And Apps That Exploit Them

Theories and suggestions have been made for ages on how to make the Web more semantic: everything from creating artificial-intelligence apps that interpret data much like humans do, to more semantic tagging conventions that make it possible for current online apps and services to make sense of what code means to humans. So far, though, no one has even come up with an authoritative definition of what the semantic Web actually is. But even with the semantic waters as murky as they are, people are developing programs and services that work more intuitively and make it easier for average Internet users to find what they’re looking for.

Microsoft’s Bing search engine is one of the first truly mainstream apps that aims to help people find what they’re looking for, even going so far as to help them make decisions. While there’s still plenty of room for additional features and improvement of functionality, Bing has helped to bring semantic search options to the mainstream Internet user.

Semantic tagging and coding conventions are probably the most likely to gain serious traction in the next few years. Many Web designers are already using semantic labels in their code. This makes sense on several levels: it makes it easier for current and future Web apps to figure out what is being displayed on a page, and it makes it easier for designers and programmers to make changes to code without having to leave copious comments explaining what the different parts of the code do.

Further Resources

Semantic Code: What? Why? How?
An excellent article from Boagworld on the importance of semantic coding.

Semantic Web
Wikipedia’s entry on the semantic Web.

The Semantic Web
An older article from Scientific American on the future of the semantic Web.

Semantic Web Road Map
The official road map from the W3C.

6. Augmented Reality In Mobile Web Applications

Given that most mobile devices now have built-in digital cameras (some with video capability), people would naturally now want functionality beyond simple photography. Augmented reality applications can have a range of potential benefits, from making it easier to find your way if you get lost to letting you identify the person sitting across from you at a party.

That last example has many security and privacy experts worried. Facial recognition software is improving all the time, and pretty soon using an augmented reality program on your mobile phone to find out who a person is might be possible. You’d just snap a picture of them, and the app would cross-reference it with social networking profiles and photos across the Web, eventually coming across a match. From there, you could see whatever information the person had chosen to make public about him or herself.

While many people still see augmented reality as the stuff of science fiction, the truth is that at least rudimentary apps are already available. Layar, a free augmented reality app, is available for both the iPhone and Android-based phones. It uses layers provided by a variety of content providers such as Flickr, Wikipedia and Twitter to display an overlay of information on your mobile screen. Other apps will likely follow.

Further Resources

Augmented Reality
Wikipedia’s entry on augmented reality.

How Augmented Reality Will Work
An overview from HowStuffWorks.

Layar Brings Augmented Reality to the iPhone
Coverage from TechCrunch on Layar’s move to the iPhone.

Augmented Reality: A New Way of Seeing
An older article from Scientific American about augmented reality.

7. Better Adoption Of Web Standards

With more and more users accessing the Web from mobile browsers and browsers other than Internet Explorer, Web standards are only going to become more important. Standards-compliant design has already become much more mainstream and been adopted by many (if not most) designers. Great strides are being made across most browser platforms in complying with the standards set by the W3C. Standards-based design will have to be adopted in coming years.

8. Better Web Security Against Phishing, Scams and Spam

Image source

Web security is a constant concern for website providers. From scammers posing as legitimate buyers, to con artists sending out emails posing as legitimate businesses to capture customer information, to spammers sending out unsolicited commercial email, Internet users are bombarded daily by people who want to use their personal information against them.

Individual websites, Web hosts, payment processors and others involved in online transactions are constantly making security improvements. With greater consumer awareness of how to identify phishing schemes and other scams, the majority of these issues will no longer be a concern in the next few years. Of course, that isn’t to say that other tactics won’t replace them.

Further Resources

The Web Standards Project
A grassroots group that promotes the adoption and development of Web standards.

Confronting the Future of Web Standards
An article covering both the history and future of Web standards.

W3C Standards
The official Web standards section of w3.org.

Web Standards
Wikipedia’s Web standards entry.

Web Standards Group
The W3C’s Web Standards Group.

9. Even More Social Apps

Social media isn’t going anywhere. While some people believe social media has gone about as far as it can go, others believe it’s still in its infancy. I think there’s still plenty of room for new apps, new platforms and new ideas in the world of social media. One area ripe for improvement and wider adoption is virtual worlds. Today’s kids have been using virtual worlds since they were toddlers (think Webkinz and Club Penguin), so they’ll likely want to continue using them as teenagers and adults. Plus, with advances in virtual reality on the verge of major breakthroughs, virtual worlds could come to the forefront of social media.

Another area ripe for expansion and improvement is content aggregation. While some services out there will aggregate a user’s activity across multiple social networks and websites, most still have a lot of room for improvement. Eventually, services not only will aggregate a user’s activity across all of the websites they participate in, but will also present that information usefully to their followers.

Niche social networks will also continue to grow. Social networks exist for practically every niche, and this will not go away. Services such as Ning and platforms like Elgg make it easy for non-programmers to set up their own social networks quickly and easily. Many corporations, organizations and groups are setting up social networks for their customers and members. While some have been great successes, attracting thousands of users, others have quickly died and been replaced either by other niche networks or by groups on mainstream general-purpose websites.

Further Resources

Elgg
An open-source social networking engine.

BuddyPress
A set of plug-ins that turns WordPress MU into a social network.

Lovd By Less
An open-source social networking platform.

Ning
Offers free hosted social networks.

OpenSocial
Google’s OpenSocial social network applications platform.

The Social Future for Web 2.0/Web 3.0
A series of predictions on social technologies.

10. More High-Quality Online “TV” Programs

Dr. Horrible’s Sing-Along Blog can be credited with bringing quality online programming to the mainstream. While plenty of great Internet programs existed prior to that, Dr. Horrible quickly gained a cult following and made the transition to mainstream media. The fact that Joss Whedon, Neil Patrick Harris and Nathan Fillion were involved played no small part in the show’s success, but it paved the way for lesser-known directors, actors, writers and producers to gain large online viewerships.

Since Dr. Horrible, a number of other online series and programs have gained wide viewership. Webisodes (which are usually mini-episodes of popular TV shows that are aired exclusively online) have also grown in popularity. While online fictional video is still in its infancy, several informative video blogs have been in production for a while, like TreeHugger TV and CNET TV. One of the more popular amateur fictional programs is Star Trek New Voyages, based on the original Star Trek series.

With video technology becoming increasingly cheaper and easier to use, and broadband Internet access becoming more widespread, high-quality Internet-only programs will become only more prevalent in the future.

Further Resources

Jeff’s Guide to “TV Shows Online Available on the Internet”
This website gives an alphabetical listing of online programming.

Hulu
Offers regular and online-only programming. Hulu is where Dr. Horrible was first aired.

13 Places to Watch TV Online for Free
A list of websites that offer free TV shows.

How to Create a Webisode
A tutorial from eHow.

Webisodes – The Future of Entertainment
A great overview of webisodes and how they got started.

11. Web Apps Play A Bigger Role In Daily Life

Submitted on Twitter by @dougoftheabaci.

Web applications already play a big role in the daily lives of many people. But as more apps become available online and traditional software moves to online-enhanced or online-only models (as some programs are already starting to do), more users will turn to Web applications almost exclusively.

One major factor driving this trend is broad mobile Web access. Being able to access important documents or perform tasks on business applications from anywhere is a huge advantage to many users. A lot of opportunities are opening up for mobile workers, who will no longer be tied to a single location, or even a single computer.

Of course, there are potential drawbacks to using Web apps exclusively. There have already been cases of Web apps or services crashing and losing customer data. Website downtime is another critical factor that can have a huge impact on productivity if offline backups aren’t available. Until these hurdles are overcome, Web-based applications will continue to face resistance for critical functions.

Further Resources

Envisioning the Future of Web Apps
A video from CNET on the future of Web applications built on HTML 5 and micro-payments.

The Future of Web Apps: 7 Things Companies Must Do to Succeed
A post from Mashable on the steps that companies need to take to create useful Web applications.

Future Of Web Apps
The official page of the Future Of Web Apps (FOWA) conference from Carsonified.

12. Search Engine Optimization Will Be Less Important

Submitted on Twitter by @seokai.

Search engine optimization may become less important in the future as Internet users rely more on recommendations and social media to find information. Already, people are asking questions on Twitter and Facebook instead of Google. This means that high-quality content and usability will become ever more important, because users are more likely to recommend a website if they have found it easy to use and useful. Also, search engines themselves will be smarter, meaning they’ll be able to better discern a Web page’s usefulness to a particular user.

13. Your OS Will Be Online

Submitted on Twitter by @dahquium.

While your computer will still store some files, the future of the operating system will increasingly rely on Web-based files. In other words, without an Internet connection, your computer’s functionality will be severely limited.

Google’s Chrome OS seems to be the first serious contender in this arena. Jolicloud is another Web-based OS, developed specifically for netbooks. Both operating systems seem to be aiming specifically at netbooks, where their benefits would be most obvious. For regular laptops and desktop computers, expect the Web-based OS to take a bit longer, mainly because users tend to run more robust apps on them, like Photoshop and Dreamweaver, which will take a bit longer to make fully Web-based.

Further Resources

Web operating system
Wikipedia’s page covering Web-based operating systems.

7 Interesting Web Operating System Applications
An overview of seven Web OS options.

eyeos
A “cloud computing operating system.”

Cloudo
Another Web-based operating system.

14. Customized User Interfaces

Submitted on Twitter by @verseijden.

As Web apps become more integrated in our daily lives, customized user interfaces will surely follow. Being able to tailor the user experience to one’s preferences is a huge plus for many Internet users. And some websites already let you make customizations to the information you see, how you see it and even how you interact with it.

Plug-ins are already being used by programmers to customize the interface of many websites they use regularly. Greasemonkey for Firefox (and some other browsers) is one such plug-in that lets you customize the functionality and appearance of many Web apps and sites.

15. The Web Will Be The Center Of Information And Content Distribution

Submitted on Twitter by @cmachanic.

This, to a large extent, is already coming true. The Web has almost always been a major distribution point for information. But this will only grow in future. Publishers, media producers and other content creators are already turning to the Web to get their products out to a bigger audience. Within the next few years, the Web may fully replace more established methods of content delivery.

Newspapers and magazines will likely be the first media replaced by the Web. Not far behind will be TV and movies. The movie theater probably won’t be entirely replaced by the Web for a very long time, but more people will certainly be renting and buying movies online rather than on DVDs and other physical media.

Books are a different story; they have sentimental value. From a practical standpoint, e-paper (like that used in the Kindle and other e-readers) is not really much different than real paper. But from a psychological standpoint, the difference is too much for many book-lovers to overcome. Of course, that won’t prevent the Internet from playing an ever-larger role in book distribution. The e-book market will continue to grow for the next few years, as younger readers opt for them over paper books. Paper versions of favorite titles might be purchased as collector’s editions, with e-books purchased for daily reading material.

This migration to the Internet will profoundly affect how media is produced and consumed. Media will become more interactive and collaborative, and because of the lower barrier to entry, new players will participate in virtually every method of content production and distribution. The shake-up will affect much more than just the way information is disseminated.

Further Resources

Who Killed the Newspaper?
A slightly older article from The Economist on the decline of the newspaper industry.

Do Newspapers Have a Future?
Another older article on the decline of the newspaper industry, this one from Time magazine.

Are Magazines Doomed, Too?
A post from BuzzMachine about the future of magazine publishing.

The Future of Magazines, Possibly
Gawker’s look at the future of the magazine industry.

The Future of Television
An article from Forbes on the future of TV.

Is the Future of TV on the Web?
An article from CNN about the future of television.

How Netflix is Changing the Future of Movies
A great post about how Netflix and similar Internet-based on-demand movie services are changing the way movies are being distributed.

Movies Online: The Future is (Almost) Here
A Salon.com article about the future of the movie industry in relation to online distribution.

Google & the Future of Books
An article about Google’s foray into book publishing, from The New York Review of Books.

Crystal Kindles: What Does 2010 Hold in Store for the Literary World?
A more near-sighted look at what the future holds for the publishing world.

(al)

40 New Useful Web Development Tools and Resources

2009-11-02T14:22:37Z

To become a professional web designer, you need effective tools that would help you implement beautiful designs with solid coding techniques. Handy ready-to-be-used solutions and smart design tools are always nice to have, but good ones are often quite hard to find. And this is where we come into play.

In this post we have put together a useful collection of new web development tools to save developers and designers time, energy, and headaches. Let’s take a look at 40 new useful web development tools and resources in a goodie bag for you, including easy and fast tweaks to forms, snippets of code, documentation at your fingertips, fonts, and cheat sheets.

Also consider our previous articles:

Fresh Web Development Goodies Bag with 30 extremely useful development tools to inspire you and make your life easier.

Cheat Sheets

jQuery Visual Cheat Sheets
jQuery Visual Cheat Sheets are a useful and practical reference to jQuery 1.3 for web designers and developers. These six cheat sheets contain the full jQuery API reference with detailed descriptions and some sample code. The simple visual style design these sheets allow you to find everything you are looking for with only a glance.

PacketLife Cheat Sheets
This site has a multitude of PacketLife Cheat Sheets. These cheats are broken down into the following categories: Protocols, Applications, Reference, Syntax, Technologies, and Miscellaneous.

CSS Specificity – Cheat Sheet
One of most common difficulties with CSS is determining what CSS rule will be applied on the page. But it’s actually not so hard to understand how these rules are applied and the order of CSS Specificity. Here is a CSS Cheat Sheet to help you understand CSS Specificity better.

Cascading Style Sheet Level 2 Visual Cheat Sheet
CSS2 Visual Cheat Sheet a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers. This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for.

QA Style Sheet
The QA style sheet highlights specific HTML problems like use of deprecated elements, inaccessible images, layout tables, empty elements, or styling-related maintenance issues. Theoretically, it is “unobtrusive” in a sense that when everything’s fine it won’t cause any visible changes.

Complete WordPress Cheat Sheet
The number of WordPress functions can be dauntingly. Print or save a helpful cheat sheet for future reference.

Visual Cheat Sheet CSS Compatibility
This Visual Cheat Sheet will help you to understand CSS behavior in IE6, IE7 and IE8 versions. The two page cheat sheet contains some important CSS references like rules, elements, attributes, pseudo-classes, positions, and more all in one handy reference.

HTML 5 Pocket Book
This is a useful quick reference guide to develop your site in HTML 5.

JavaScript Framework Matrix
The JavaScript Framework Matrix gives an overview of popular JavaScript frameworks and their functions. There are various examples for frameworks and every snippet contains links to official documentation. This matrix shows different API styles and functionalities.

247 Web usability guidelines
Designing usable systems require much more than simply applying guidelines. Guidelines, however, can still make a much needed contribution to usability by promoting consistency and good practice. There are overal 247 web usability guidelines.

Firefox Extensions

CSS Usage
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. It works by opening up the first page of the site you want to check and pressing the “Scan” button in the “CSS Coverage” Firebug tab. In case of a rich (Ajax or DHTML) site, open up as many divs, pop-ups or tabs in the page as possible and press “Scan” again. Visit other pages of your site and press “Scan” again. Each time you press “Scan”, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser. Information available per request includes: Request and response headers, Sent and received cookies, Querystring parameters, POST parameters and Response body.

Useful Tools and Resources

cu3er – The Free Flash 3D Image Slider
CU3ER is an image slider to create 3D transitions between slides, but so much more than that too. This is great! It is also a convenient and multifunctional solution that can be applied in a range of website building areas, from content slider to feature slider, and image and banner rotator. Consider using it when you want to grab the user’s attention.

Juicer – a CSS and JavaScript packaging tool
For best performance, CSS and JavaScript should be served up using as few requests and bytes as possible. Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can even check your syntax, add cache busters to and cycle asset hosts on URLs in CSS files and more.

IxEdit
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. IxEdit is especially useful to try various interactions rapidly in the prototyping phase of your web application.

FireCrystal
FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to “rewind” their interactions with web pages while showing the relevant code. It is currently an alpha release and can suffer from very long load times or crashes in more Javascript-intensive pages.

Code Snippets Gallery
To find some snazzy CSS tricks all in one convenient place, check out the code snippets gallery. There are snippets for CSS, .htaccess, HTML, JavaScript, jQuery, PHP, and WordPress.

eCSStender
Take control of your CSS. Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

Old Version
Old Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.

Search and Share
Search and Share makes highlighting text a more functional action. It attempts to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing. This WordPress plugin can help you get credit for content, improve word of mouth for your site, help your content go viral and much more.

Fonolo
Let’s face it, calling large companies is a hassle: Wading through those dreaded touch-tone menus (”Press 1 for English”), scrambling to find your account numbers, scribbling notes to keep track of which agents said what. Good news! Fonolo is a free web-based service to call a company, letting you skip past their phone menus, automatically entering your account numbers, and creating a detailed call history for each company, with notes and recordings. Connect to the right person with less stress and hassle.

jQuery ListMenu Plugin
jQuery ListMenu Plugin allows you to easily convert a long and hard to navigate list into a compact, easily skimmable ‘first-letter’ based menu, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a list of all list items that start with that letter appear in a submenu. Removing the mouse pointer from the letter or menu closes the submenu.

Trademarkia
Trademarkia is the largest, most accurate, and most complete free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

Haystack
Haystack helps you discover the right web designer for your next project. You can run a search to show all web designers in any city who will work on projects for any budget.

HiFi RegExp Tool
Regular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.

Documentation and Reference Guides

imedo / css_doc
This is a documentation generator for CSS files, similar to Javadoc or RDoc. It extracts file-scope documentation for each CSS source file; extracts documentation for rule sets (i.e. a set of selectors separated by commas with a declaration). Files can be separated into several sections. For rule set documentation, HTML code examples can be incorporated into the documentation.

gotAPI
gotAPI.com provides search and documentation at your fingertips. For developers, this is a fast and vast collection of quick references for HTML, CSS, JavaScript, AJAX, Web2.0 and other software technologies.

Forms

FormToWizard plugin
This detailed tutorial and jQuery plugin will allow you to turn a long form into a wizard with “steps left” information. The entire process of filling a web form can become a step with a description, input fields and navigation that is common for wizard forms – back and next.The entire process can be done with this handy plugin.

Contact Form Study
The fewer questions you ask in a form, the more people will actually complete it, but to what degree? Less is more. Check out this study and the findings to improve your forms.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)
Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element’s built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.

Timeframe
Timeframe is a click-draggable, calendar that offers users to pick a date range for their input.

Scalable CSS Buttons Using PNG And Background Colors
With this article and script, you can create dynamic CSS Buttons using PNG transparency and background colors that degrade nicely and will support full scalability.

Adaptive web forms
Web forms could adapt to user’s behavior, instead of users adapting to them. This could help user experience and usability by saving data so the next time your regular readers are enabled to quickly post comments. However, besides saving just data, the whole user interface can be adapted to provide a different kind of interaction for returning visitors.

A rich password widget for your web forms
This rich password field widget not only has a password strength meter but also has other features that your users may love to have. When you type your password, the password field shows a mask to prevent an ‘over the shoulder’ social engineer. This also provides the ability to show your user the password they type. You can also quickly generate a strong password.

Linkification
Linkification Converts text links into genuine, clickable links. To view and set options, you can (1) use the Linkification right-click context menu, (2) right-click the status bar icon and click “Options”, or (3) click Tools->Extensions, and double-click the Linkification item.

Fonts

jQuery Powered Text / Font Resize Widget
Text resizer, or Font resizer comes handy when dealing with readers who browse in different browser resolutions. It gives them the power to choose the way they read the blog. ThisjQuery widget allows your users to resize text/font on your blog.

Code Style: Most common fonts
Selecting the right and correct font is important. How sure can you be that the font you specify will be present on the end user’s machine? This is a list of the most common fonts for Windows, Mac and Linux and should give you greater confidence in selecting a font.

IE6 Helpers

IE6 CSS Fixer
As web developers, we want IE6 to just die and roast in hades. But until that happens, this is a handy tool. This tool decreases the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It is meant to get a good head-start by fixing roughly 40-60% of all your IE6 issues with just one click, outputting a rough CSS that can be placed in a separate section and can be used as a solid start to finish up the rest of your IE6 debugging work.

Ultimate IE6 Cheat Sheet: How To Fix 25+ Internet Explorer 6 Bugs
After scouring the web for resources, here is the ultimate list of IE6 fixes put together in a reference manual as a resource for anyone who has to deal with Internet Explorer 6.

Paddy – Venn Diagram of IE6
Well, that’s not really a help, but it says it all. Venn Diagram of our favourite browser, Internet Explorer 6.

Web Typography: Font Embedding Services

2009-10-30T20:11:16Z

There are a lot of options out there for using other-than-websafe fonts in your website designs. Dynamic text replacement methods or resorting to very long fontstacks (where most of your visitors won’t see the font you wanted anyway) have long been the standard for using anything other than websafe fonts.

But the @font-face function changes all that. With most major, modern browsers now compatible with it, services are cropping up all over for providing the fonts you want to embed on your site without eating up your bandwidth and server space.

One of the biggest hurdles these services help to overcome is the licensing issues related to embedding certain fonts on your website. While many fonts (especially open source fonts) have licenses that allow for embedding, others strictly prohibit it. Webfont services work with the type foundries to provide fonts for embedding while also providing the security that foundries insist upon.

Currently, there are four such services available, though two (Typekit and Fontdeck) are still invite-only. Read on for more information about each.

1. Typekit

Typekit is invite-only at this point. You can sign up for updates on their website, and they’ll announce when it’s ready. But a lot of information is already available on their blog.

From the looks of it, Typekit will have three available subscription options. The Trial service offers a pretty decent sized collection of fonts from foundries including Bitstream (Vera Sans), Bigelow & Holmes (Luxi Sans, Luxi Serif), Fonthead (Good Dog, Corn Dog, and others), Jason Kottke (Silkscreen) and others. The Personal-level service offers all of the trial fonts, plus fonts from Barry Schwartz (BonvenoCF, Goudy Bookletter 1911), Cathy Davies (Chemist, Chemist Rough), FRiTZe (Vollkorn), and Typodermic (Cardigan, Soap, and others) among plenty of other foundries. The Full Library option has all the fonts from the personal and trial libraries plus fonts from Betatype (Apertura, Pill Gothic 300mg, and others), Insigne Design (Montag, Carta Marina, Deinstag), and Paragraph (Galette, Mentone), among others. Overall, there are hundreds of fonts available.

Typekit works with virtually every major browser, including Internet Explorer, Firefox and Safari. While pricing has not yet been released, the trial version will be free to use.

Typekit Resources

First Impressions of Typekit
This post gives a great, first-hand account of what it’s like to use Typekit.

Examining Typekit
An excellent article that takes a look at the positives and negatives of using Typekit.

Getting Started with Typekit
An excellent introductory guide from Carsonified.

Type Sellers, Web Fonts, and Typekit
A great post from Nice Web Type that talks about @font-face in general and Typekit in particular.

Typekit Hopes to Become the YouTube of Fonts
An excellent article from Webmonkey about Typekit’s potential.

Typekit: Banishing Blight from the Browser
A pretty comprehensive look at Typekit from Linux Magazine.

2. Typotheque Web Fonts

Typotheque is a font foundry providing their own solution to the @font-face dilemma. Their service claims to work on 95% of browsers, and supports multiple languages.

One of the big advantages to this foundry-based service is that you pay for a single license for both print and web usage, and the license fee is a one-time payment. You can use the fonts you purchase on an unlimited number of domains, too, making it a potentially very cost-effective solution.

Of course, the big drawback to this is that you can only use it with Typotheques fonts. While they have some very nice fonts available, it’s a relatively small collection, with only eight distinct fonts (with multiple weights available for most of them). But, if their fonts fit your needs, then it’s a great solution.

Typotheque Resources

Testing Typotheque @font-face Embedding
A very thorough look at Typotheque from For a Beautiful Web.

Typotheque’s Web Fonts Rock, But Old Machines Can’t Learn New Type Tricks
A more critical look at Typotheque from Webmonkey.

Typotheque Web Font Service Demo
A video demonstration of Typotheque on Vimeo.

3. Kernest

Kernest takes a slightly different approach to the webfont service model. Basically, they let type designers and foundries submit their fonts under a variety of licensing options, and set the price for using that particular font on a per-site-per-year basis. They have a few dozen fonts currently available, from a variety of foundries. The preview functionality on the site is also really helpful, letting you try out fonts with text you input.

Kernest works with all major web browsers, including Safari 3 and higher, Firefox 3.5 and up, Opera 10 and up, and Internet Explorer 4 and higher. It’s a pretty impressive list.

Usage is easy, with web designers only needing to choose the fonts, upload Kernest’s CSS Embed, update the site’s CSS tags, and refresh.

Font pricing varies widely on the site, with a lot of fonts available for free and others running in the $10-$20/year range (though some are more expensive). Depending on which fonts you want to use, it can be a very economical option.

Sites Using Kernest

While the other sites don’t yet have galleries of sites using their services, Kernest does. Below are a few sites taking advantage of their technology.

Kernest Resources

A Web Font Service For Real, a Sneak Peek at KernestA great look at how Kernest works, from Readable Web.

The Importance of Knowing Kernest: Pretty High. Your Move, Typekit.
A quick look at Kernest from someone who’s used both it and Typekit.

An Interview with Kernest’s Garrick Van Buren
An interview with the creator of Kernest.

Using New Fonts from Kernest on Blogger
A tutorial for using Kernest webfonts on Blogger blogs.

4. Fontdeck

Fontdeck is a webfont service developed by ClearLeft and OmniTI that’s still in private beta. You can sign up for updates on their website. There’s even less information available about Fontdeck than there is about Typekit.

Of course, the fact that OmniTI will be handling the security aspects of Fontdeck means it’s more likely to get support from font foundries who may be wary or less-secure methods. Fontdeck will likely make guarantees as to the safety of the fonts it provides.

There’s no pricing information available yet for Fontdeck, or even information on how their pricing might be structured.

You can get updates on Fontdeck developments through their Twitter feed.

Advantages of Webfont Services

There are a number of advantages to using webfont services over dynamic text replacement (DTR) or other methods. The first is that these services work well for replacing the font of all the text on a page, not just your headlines. Converting all the text on a page using DTR is impractical due to the conversion time required. Webfont services don’t take any longer to load a page of text than they do to load a header.

Another huge advantage to using a webfont service is that it removes the sometimes-confusing and sticky legal issues involved with embedding fonts on the web. Many font foundries consider embedding fonts to be redistributing them, making it against their terms of service to use @font-face with their fonts. Considering how small most font foundries are (many are just one person), font piracy can be a huge burden for them. Most web services make security a top priority and do a lot to protect font foundries from having their fonts pirated.

The final big advantage to using a webfont service is that it saves your bandwidth. If you have a high traffic site, everyone downloading font files when your page loads can quickly use a lot of bandwidth. Font services host the fonts on their own servers, saving your bandwidth. Depending on your traffic figures and hosting plan, the money saved might even be enough to offset the cost of the service each year.

Further Resources

The Font-as-Service
A great post from i love typography comparing Typekit, Fontdeck and Typotheque.

The Direction Forward with Web Fonts
A post from Molecular Voices that covers a wide variety of web font options, including webfont services, standards, and proposals (like .webfont and ZOT).

Web Font Services Join Fray as .webfont Format Gains Support
A post from Ars Technica about webfont services and proposals.

The Future of Web Font Embedding
An older post from Clagnut on embedding webfonts.

Testing Web Fonts
An excellent post from movito about Typekit, Typotheque and WOFF.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing . She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.