Ethan Gardner Web Design

Javascript Namespace Strategy for Large Applications

Thu, 19 Jan 2012 09:45 -0500

According to the HTTP Archive, the average site serves 14 JavaScript files. With more reliance on 3rd party code, it is increasingly more important to protect the code you write from being interfered with by other code used on your site or application.

Namespacing is the common sense way to do this and a practice that I employ on all my projects, both work and personal. This article demonstrates my approach to structuring namespaces in JavaScript for larger applications.

What is a Namespace?

A namespace is a wrapper for a group of related features or modules which is used to provide an intuitive structure to a larger-scale architecture. Think of how you might shop on Amazon. There is a sporting goods department, books, apparel. All of these are categories of items that are classified in some way.

The best way to illustrate how this works in a programming scenario is to take a look at JavaScript libraries and frameworks. All JS libraries use namespaces, but take slightly different approaches.

BBC’s Glow

The Glow framework uses an IIFE to check to see if there is a Glow namespace in the global object (window if the code is running in the browser), and if it has not been defined before, it is created.

// From Glow 2.0 Alpha
(function() {
    // there can be only one
    if (window.Glow) { return; }
    window.Glow = true;

    window.Glow = function(version, opts) { 
        // configures Glow namespace in the window object
    }

    // rest of the library goes here...
})();

jQuery

jQuery sets up a local copy of the jQuery variable and returns the local copy to the global scope:

// From jQuery 1.7
var jQuery = (function() {

    // Define a local copy of jQuery
    var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // more configuration code...
    return jQuery;
})();

YUI

YUI considers namespacing to be so important, they included a helper function in their library to allow developers to easily create their own namespaces.

// From YUI 3. The Y namespace is implied for brevity
namespace: function() {
    var a = arguments, o, i = 0, j, d, arg;

    for (; i < a.length; i++) {
        o = this; //Reset base object per argument or it will get reused from the last
        arg = a[i];
        if (arg.indexOf(PERIOD) > -1) { //Skip this if no "." is present
            d = arg.split(PERIOD);
            for (j = (d[0] == 'YAHOO') ? 1 : 0; j < d.length; j++) {
                o[d[j]] = o[d[j]] || {};
                o = o[d[j]];
            }
        } else {
            o[arg] = o[arg] || {};
            o = o[arg]; //Reset base object to the new object so it's returned
        }
    }
    return o;
}

Structuring a Larger Application

Depending on the size of a site, having a complex architecture might be overkill, but basic provisions for a namespace are helpful to identify code, especially when you are revisiting the site a few months later for maintenance. A basic namespace can be created by:

var MYNS = window.MYNS || {};

Typically, the larger the application, the more important it is to keep code organized. I have found that grouping related features together is the best way to structure a large application.

For example, MooTools has an Element class that provides many helper features for element manipulation and traversal. Child objects like Element.Style are used to extend the parent object. Animation is controlled by the FX class which has subclasses to extend the core features as well. This same modular approach can be applied to application development for related components such as user-interface elements.

// Create the MYNS.UI object to act as a container for 
// all user interface features
MYNS.UI = MYNS.UI || {};

MYNS.UI.tabs = function (){
    // methods, variables, and other code goes here
}

MYNS.UI.modal = function (){
    // methods, variables, and other code goes here
}

MYNS.UI.tooltip = function (){
    // methods, variables, and other code goes here
}

Then the same principle can be applied for data models elsewhere in the application:

MYNS.models = MYNS.models || {};

MYNS.models.pages = function(){
    // methods, variables, and other code goes here
}

MYNS.models.authors = function(){
    // methods, variables, and other code goes here
}

As a general rule, I try to avoid going more than 3 levels deep to avoid excessive look-ups up the prototype/scope chain. This limits any performance detriment if there is a function or variable in higher up the scope chain that my code needs to access.

Additional Benefits of Namespacing

Namespacing your code this way can also help take the guess work out of file naming and directory structure. For example, we could use this same convention and put all of our UI components in a file called UI.js and all our models in a file called models.js. We could then use a build tool like Ant or Phing to combine the files into one larger file at build time before deploying to a production server.

Conclusion

As the amount of 3rd party JavaScript used in web pages increases, developers need to pay added attention to protecting their code from outside interference. Using a namespace is a simple way to help guard against variables being overwritten and provides added benefits of helping with code organization.

jQuery Icon Menu

Thu, 10 Nov 2011 09:21 -0500

As designers and developers, we are continually challenged with ways to display large amounts information. In this age of content, the amount of information to display can easily lead to clutter if you aren’t careful.

In a previous post, I described how to make an accordion menu using jQuery UI and Wordpress without a plugin. Today we’ll look at another helpful design pattern in the form of an icon menu and produce the effect in about 20 lines of jQuery.

What is an Icon Menu

Welie.com defines an icon menu as a design pattern that allows “users to select a menu item by selecting an image and display the label in a fixed location.” This is another useful tool to display information in a compact space since the labels are usually not shown by default. The image below is probably my favorite use of an icon menu that I’ve seen in the wild.

We’ll use jQuery and the ScrollTo jQuery plugin to write code that does the following:

Degrades gracefully when JavaScript is disabled.
Open one icon item assigned at random.
Only one icon can be opened at a time.
Scroll to the open item and distinguish it from the others.

Structure the Markup

Since this project involves manipulating HTML based on user interaction, I craft my HTML before I even start to think about the JavaScript. The key is that we have each menu item is its own list item, and each list item contains a <div> for the icons and another one for the details.

Style with CSS

Once the HTML is in place, I begin working on the CSS. This needs to look nice with JavaScript turned off, and CSS is the crucial step to pulling that off.

Make the Icon Menu Interactive with jQuery

Now, we just need to bring it all together with jQuery so only one item is expanded at a time and the items scroll on-click thanks the the ScrollTo plugin.

Conclusion

With about 20 lines of JavaScript, we can put the icon menu to use. We’ve only scratched the surface with what the icon menu can do in a very simple, isolated instance.

Create a SQLite3 Database from a Spreadsheet

Wed, 19 Oct 2011 12:30 -0500

Recently, I needed to create a pre-populated SQLite database that will be distributed with an application I’m developing. I tried to use a visual interface initially, but I quickly hit a wall when doing the import due to the size of the database.

Since local databases are frequently used in mobile applications and offline web applications, I thought it would be good to cover how to create a SQLite database from the command line and share some helpful hints I stumbled upon along the way.

Clean the Data

In an ideal world, you’d be able to start creating the database and schema right away. Most of the time, there needs to be some degree of data formatting before doing that. A spreadsheet is a much less rigid format than SQL, so the data that is being imported into the SQLite database needs to constrain to what SQLite allows. While writing this article, I was working with a TSV (tab delimited) file that was exported from a report in a web application. Don’t open the file in Excel. Use a plain text editor such as notepad instead. Here are the steps I followed:

Remove illegal characters and replace spaces with underscores in headers (i.e. “email address” needs to become “email_address”.
Cut column headers out of the data file and put them in a separate text file. Replace the separators so they are comma separated (you’ll use these later).
All blank lines at the top and bottom of the file need to be removed.

Install SQLite

Normally, I develop everything on a Windows computer, but for this task, I prefer the Linux command line. On my development machine, I have VMWare Player running the current release of Ubuntu (11.10 at the time of this writing). It takes some time to download and perform the set up initially, but it is irreplaceable when you really need it. The best part is everything you need is free.

On Ubuntu, you need to first install SQLite3. To do this, run the following command from the terminal:

sudo apt-get install sqlite3

Create the Database

Once sqlite3 is installed, type the following from the command line:

sqlite3 mydatabase

This command will start sqlite and create a database called “mydatabase” if it doesn’t exist already. Then create the table by running:

create table app_data(paste in column headers in CSV format from step #2 of “Clean the Data”);

This creates a table called “app_data”. You can confirm this by running .tables from the terminal. There are a couple of things to note. First, even if you are working with a tab or pipe delimited file, the column headers have to be entered in CSV format in the create table command. Second, anything that is a true SQL command needs to get terminated by a semicolon (;), while specific SQLite commands do not, just as you saw with the .tables command. The SQLite-specific commands begin with a period.

We are almost ready to import the contents of our file. First, set the separator. The default is pipe (|) delimited. I mentioned before that my file is tab delimited, so I need to run .separator \t to set it to the tab character. You can confirm the separator by running .show.

Now we’re ready to do the import and can run:

.import filename.csv app_data

This imports the contents of “filename.csv” into the app_data table in the database.

Conclusion

SQLite is being distributed with many mobile applications and and is also used in desktop browsers for offline web applications. You can certainly create and populate a SQLite database using your favorite programming language. This is simply a quick alternative that is language agnostic.

Add a jQuery UI Accordion Widget Area to a Wordpress Theme

Wed, 12 Oct 2011 00:30 -0500

Yahoo describes the accordion as a design pattern “that provides access to a large number of links or other selectable items in a constrained space.” If you are displaying a large amount of information and want to group them into logical sections, the accordion design pattern can be quite useful. This pattern has even more application in mobile web applications.

Today, we’ll look at how to create a jQuery UI-enabled accordion widget area for the popular Wordpress CMS.

Include jQuery and jQuery UI

There are a bunch of articles describing the proper way to include jQuery in a Wordpress theme by using wp_enqueue_script(). By adding a few lines to the theme’s functions.php file, the JavaScript files are referenced and loaded in the wp_head() portion of the Wordpress theme.

If you’d rather load the JavaScript files in the footer for performance reasons, you can also use a parameter in the wp_enqueue_script() function which will load the scripts in the wp_footer() function as described in the codex.

Create the Sidebar Structure

In order to use jQuery UI’s accordion, the structure that the markup needs is very specific.

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

The important thing to note is that Wordpress wraps all widgets in a <div> tag, so you are halfway there already. The <h3> and <a> tags can be added in the functions.php file which will take care of the rest of the structure:

Load the Sidebar and Call it in the Wordpress Theme

Next, we want to load the widget area to a sidebar file such as sidebar.php.

Then load the sidebar in the page template. The accordion is then displayed on the front-end of the WP theme by adding <?php get_sidebar('accordion-widgets'); ?> in the appropriate file(s). Usually, this will be added to page.php and/or index.php.

Final Steps

The last steps are to instantiate the accordion in the theme JavaScript file and then reference the script file and the jQuery UI CSS skin in the theme’s header.php file with <script> and <link> tags respectively. The <script> tag should go after the wp_head() function to make sure all necessary dependencies are loaded before the accordion is invoked. After that, you should have a functional accordion widget area. The only caveat with this technique is that all the widgets need to have a title in the Wordpress backend, otherwise the markup required by jQuery UI’s accordion won’t be met.

Conclusion

With a few minutes of work, this useful feature can be added to any Wordpress theme. To see everything in action, you can download the example Wordpress child theme from Github. The child theme is based on the TwentyEleven theme that ships with WP3.2, so it is probably best to download the file and activate it on a local install for development or testing purposes.

Momentum CSS Updated: Rewritten and Re-released

Tue, 13 Sep 2011 10:30 -0500

Back in 2008, I released a CSS helper file that had semantic names, helper classes, and common patterns that I identified in sites that I’ve developed. The initial release of Momentum was assembled for my own use, but I also hoped that others might find it useful or at least see the value in using standard naming conventions when working with a team of people.

With the release of similar files such as HTML5 Boilerplate and Bootstrap, it inspired me to revisit Momentum to see what I could improve and how I could adapt it to the projects I work on currently.

Download from Github

New Objectives

One thing I was trying illustrate with the 2008 release was that when you work with a team of people, especially in an agency-type setting, it is important to adhere to a certain set of naming conventions.

The result of not adhering to naming conventions can lead to “spaghetti maintenance.” What I mean by this is if you manage multiple sites and on one site the header is called #branding, on another it is called #header, and on another it is called #masthead, you introduce additional maintenance overhead if things are harder to find and also the potential for code bloat if the unused selectors are being left in the stylesheet.

With the adoption of HTML5, this is less of a concern since there are now semantic element names that are part of the emerging standard. I still feel that this is a valid point, even though I left my naming conventions out of this release since I feel it should be up to the development team .

Agnostic and Open to Interpretation

The thing that was most important to me was being able to keep the file as abstract as possible so it has a lot of potential uses. Momentum is meant to be a lightweight CSS helper file, not a full-fledged grid framework. It makes no assumptions about server environment, site dimensions or JavaScript framework preference. The only thing Momentum includes that aside from the obvious CSS file are Sass files (scss) to extend the capabilities with mixins and allow colors to be assigned to variables.

Personally, I use the Sass files and feel like Momentum is the most useful that way, but you don’t have to use it. It works the same way if you compile the CSS file from SCSS or if you edit the CSS file directly. Sonspring just published a nice overview of Sass that can help you get started if you’ve never used it before.

Usage

Using Momentum is simple. All that needs to happen is just link to the static CSS file in the head of your HTML document. During development I suggest leaving the file uncompressed and then minifying and at the time of deployment or on the server.

If you are using the Sass files, make sure you are running sass --watch from the directory your project directory or set :load_paths in your Sass configuration so the imports work properly. In other words, if your files are in C:\Users\[user name]\Documents\project-name, make sure you cd into that directory as opposed to starting sass from your user directory.

Conclusion

This project is hosted on Github. If you find this useful, send me a note on twitter or leave a comment below. I always like to know when my work is appreciated.

Text Analysis and Natural Language Processing on the Semantic Web

Mon, 29 Aug 2011 11:45 -0500

Although Natural Language Processing (NLP) has been around since the 1950s in the computer science world, more and more uses for this powerful technology are being uncovered every day. Search engines like Google use NLP as one of the ways they extract meaning from web pages, Microsoft has a whole team of people working on NLP projects, and a number of universities have dedicated major resources working on the advancement of NLP, but what about everyone else?

NLP has many uses going beyond behemoth websites including uses for the enterprise, small business, and end users. In this article, we’ll be taking a look at some of these use cases and key players in the field.

What is Natural Language Processing?

At its core, Natural Language Processing involves a machine trying to extract meaning from real language by identifying mood and meaning, relationships, common patterns, and recognized terminology. Although the design of the algorithms is very advanced, the use cases don’t have to be.

Some practical applications are very accessible to most web developers, and several of the vendors listed below have showcases of official or user-submitted projects that use their service. Projects include:

Content Tagging and Suggestion
Social Media Analysis
Data Visualization
Geotagging
Mood Analysis
SEO
Content Discovery and Sharing

Get Started by Choosing a Service

Once you decide to use language processing, you need to work out the project requirements and the details of the implementation. Some services are better suited to certain tasks than others and all of the following are factors in the selection process:

Do you want a web service or command line tool?
What are you processing: text, documents, web pages?
What information do you want back from the analysis (i.e. keyword extraction, sentiment/mood analysis, etc)?

Web Services

For purposes of this article, I am outlining vendors that allow commercial use, offer a free subscription level, and also have premium subscriptions should your project move beyond a proof of concept.

Alchemy API

Diffbot

Extractiv

Open Calais

Repustate

Saplo

Zemanta

Command Line

Natural Language Tool Kit (Python)

Topia (Python)

Conclusion

Natural Language Processing is an up-and-coming technology that people are discovering new uses for every day, and if you understand a scripting language, you should have no problem working with Natural Language Processing technology. Most of the vendors even offer Software Development Kits (SDK) in languages such as PHP, JavaScript, Java, and Python to help you get started using their product in your web development projects.

Developing Mobile Web Sites the Easy Way

Fri, 29 Jul 2011 10:30 -0500

Recently, I launched a redesign of my website. Just like any redesign I’ve ever tackled, there were several objectives: I switched Content Management Systems from Joomla! to Symphony CMS, updated my portfolio, and used the opportunity to update the look and feel to incorporate more of my design style. Perhaps most notably, the site now features a mobile version.

While everyone is starting to get a feel for how to approach their mobile strategy, I’d like to share how I approached it with this site so that others will benefit or be inspired to create their own mobile site.

The Logistics of a Mobile Web Approach

On the desktop version, my site features a large background image, decorative flourishes, and textures. At the time of this writing, the accepted best practice is to serve a mobile site that features fewer images, so the desktop version was not a suitable candidate to just use some CSS3 media queries to show the appropriate content to mobile devices. The reason is that media queries will actually just override the default image, after the image has been loaded, so the image will still be requested by the browser, even if it isn’t displayed. I also didn’t want to have the added complexity of serving the same content on multiple subdomains, so I opted to serve everything off of the same domain.

In order to create a mobile version of my site, I am using the same markup for both pages, and loading deciding which CSS file to load based using a simple toggle in the footer of my site. All the toggle does is load the current page with a query string value, which in turn sets a cookie stating whether the user chose to view the desktop or mobile site. I am not doing any type of user agent detection.

Separating Site Styles for Mobile and Desktop

Once I decided how I was going to structure the mobile and desktop version, I had to put my plan into action. I am using the Session Monster extension for Symphony which parses the query string and sets a cookie accordingly, but you could easily write something similar with any programming language or find a comparable extension if you are using another CMS such as Wordpress or Joomla! The key is to make sure it uses a server-side language in case the user has JavaScript disabled.

The actual site presentation works by loading a base stylesheet which contains a CSS reset, font declarations, colors, button styles, and anything else that can be applied globally. In the HTML template, there is a conditional statement that checks the cookie and serves a second stylesheet. The mobile stylesheet is pretty bare-bones to keep load times quick, and the desktop version is decked out with all the bells and whistles.

Performance Implications

I realize this technique requires a separate HTTP request, but I was aiming for a happy balance of maintainability and common-sense caching. The base stylesheet is under 25kb which means it will even be cached by the older iOS devices, and since the desktop version is served by default, the base stylesheet will already be cached when the user switches to the mobile version. If every bit of optimization counted, I could write a git hook to minify the CSS files before they are deployed or mininfy manually.

I am serving the same JavaScript files for both desktop and web, using Google’s Ajax CDN for the MooTools library and then gzipping the plugin files using PHP. I am also using HTML5 localstorage to cache site UI components for even more performance gains. While this might not be the final implementation of the performance tweaks, overall I’m pleased with the results.

Conclusion

Mobile web traffic is on the rise and it isn’t going away any time soon. Although I haven’t adopted a “mobile first” school of thought just yet, it is definitely on my mind with all of the projects I’ve been working on. By using these techniques, you can see it isn’t too hard to introduce a mobile strategy to a new site or with a little work, retrofit an existing one with a mobile theme.

Create a Twitter Analytics Dashboard with YQL and PHP

Tue, 29 Jun 2010 00:00 -0500

There are many reasons to monitor the performance of multiple Twitter accounts. If you maintain more than one site or blog, chances are you have multiple Twitter accounts that correspond to each contributing author, site, or product. Perhaps you want to keep tabs on how your account stacks up against your competitors. Having a birds’ eye view of how each account is performing can be a great time-saver, but unfortunately there is no easy way to keep track of how your accounts are engaging others.

Today, I’ll show you an easy way to create your own “dashboard” tool to get an at-a-glance view of multiple Twitter accounts using PHP and the Yahoo Query Language (YQL).

What is YQL?

YQL is a tool from Yahoo that can create an API from virtually anything on the web. The YQL Console allows a developer to retrieve data from Yahoo’s web services or any of the user-contributed “community tables” for a growing number of popular sites including Yelp, Facebook, and, in our case, Twitter. The best part of YQL is that the results of each query are returned in XML or JSON, so web developers can use their programming language of choice to develop applications.

There are a number of resources available for learning YQL. The best tutorial I have found on YQL in order to get you started is a live demo from Yahoo Developer Evangelist, Christian Heilmann.

Getting the Twitter Information

The data was generated by using a combination of the twitter.user.profile community table and query.multi to compile the results for the numerous Twitter accounts into one request. The URL of the JSON result was then reverse engineered, spliced, and then reassembled using PHP. Each request could have been hard coded instead of looping through an array, but ultimately adding the extra step to include the array makes the code more readable and maintainable. Here is the relevant code used to produce the sample.

Demo

Where Do We Go From Here

A touch of jQuery was added using the fantastic tablesorter plugin to allow users to sort by number of followers/following. One suggestion would be to create a form to accept account names submitted by a user to allow for event more flexibility, but that is beyond the scope of this article. Other possibilities include connecting this information to a database so historical data with date ranges can be collected over time, adding an export utility to download a CSV file of the data, or using a chart API to provide more visual data.

Conclusion

The best tools solve problems and APIs are a great way to leverage data from other sources. Using YQL gives developers access to 800 data tables from some of the most popular and useful sites on the internet. YQL is effective because it allows developers to rapidly create solutions using their programming language of choice and has the potential to save a tremendous amount of time.

Design a Web-Friendly Restaurant Menu with XSL:Part One

Wed, 07 Apr 2010 00:00 -0500

With XML being published by nearly all dynamic websites, social media applications, APIs, and its many uses in enterprise-level content delivery systems, now is a great time to learn basic XSL. At its core, the eXtensible Stylesheet Language (XSL) provides a means of formatting XML documents to display in a different and often more practical fashion.

In the last post, I gave an overview of why you should use XSL. This is first in a series of three hands-on tutorials where we’ll build on that knowledge and start using XSL in conjunction with XML to transform the result into HTML to display on a restaurant web site.

Start with XML

The first step of using XSL is to get the XML so you know how the content is structured. This is like the process of using CSS to format HTML. Without knowing how the HTML is structured, it would be very difficult, if not impossible, to write efficient CSS.

For illustration purposes, we will write our restaurant menu in XML for this tutorial, but often you’ll be using XML that has been generated by a RSS feed or Content Management System. If you are authoring your own XML, think about the structure that you need to lay things out logically.

Why use XML?

Don’t get me wrong, I love JSON, but XML is still very prevalent and readily available from many sources. Sometimes it is the only format available. A restaurant menu, like the one we are creating in this tutorial, is a great application for XML because the data that is stored isn’t sensitive information and has a uniform structure. Our menu will be structured as follows:

Once you have the menu items in this format, it is time to make the XML display in a way that won’t scare off the average customer. We’ll use some simple XSL functions to make it happen. First, we need to insert a link in our XML file to load the XSL. This works very similarly to inserting an external stylesheet with the link tag in HTML. Here is what our XML looks like:

menu—this is the root of the document also known as the document element. This is the equivalent to the html tag for a web page.

section—our menu will contain 4 different categories of item (Appetizers, Soup and Salads, Main Courses, and Desserts). The section name will be displayed as an attrubute
summary—descriptive copy for the section.

item—this is a container for the individual menu items

title—this is the name of the menu item (i.e. “Pork Tenderloin”)
description—the details of the menu item
price—the cost of the menu item
img—an optional image for the menu item
options—upgrades or optional toppings. Examples frequently include add cheese, bacon, chicken, etc.
category—additional information such as low-fat item, heart-healthy, gluten-free, etc

Formatting the XML with XSL

For the next part, we style the XML with XSL. The way I prefer to work is to keep the XML open in a separate tab in my code editor so I can see what I need to transform against. The rest of the tutorial will deal directly with the XSL file and include a ton comments so you can follow along. The comments pertain to the line immediately preceding it in the code. We’ll go through the code block by block. Our first step is to insert the XML declaration and the xsl:stylesheet code.

Now, we’ll create the template that controls the markup for the menu section and section summary. Notice that this is called by the self-closing tag that was pointed out in the previous code block.

Lastly, we need to create the template that is being called to create the actual markup for the individual menu items and close our stylesheet tag that was opened on the second line of the file.

Demo Download

Conclusion

Hopefully this hands-on introduction was gentle enough to get started with XSL. Right now, this is rendering as XML that is formatted as HTML and styled with CSS. If additional parsing is needed, you can always load the XML and XSL files with nearly any pre-processed language and render it to HTML on the server.

Using XSLT in Web Design: A Plain-Language Overview

Wed, 23 Sep 2009 00:00 -0500

Extensible Stylesheet Language (XSL) is a powerful technology often treated like a misfit by the design community. The fact is XSL isn’t that difficult to learn, makes websites faster, offers many ways to format content, and makes working with XML data easy.

Many XSL tutorials are either too technical, make too many assumptions about prior knowledge of the technology, or don’t have an obvious practical application. In this introduction, I hope to change that by presenting a plain-language overview of XSL, how it differs from CSS, and lay the groundwork for a 3-part tutorial where we’ll use XSL in a real-world situation.

What is XSL?

XSL is a set of three different languages used to format XML.

XSL Transformations (XSLT): Contains different rules for formatting XML. XSLT is the most important part of XSL.
XML Path Language (XPath): Selects different items (nodes) in the XML document to be styled by XSLT. XPath selectors are like a souped-up version of classes and ids in CSS files.
XSL-Formatting Objects (XSL-FO): Formats XML data for display in a variety of different media. XSL-FO makes it possible to take the same XML data and create one version for print, one for screen, or even turn the XML into a document format such as PDF.

For this series of articles, we’ll only be dealing with XSLT and XPath, and the tutorials will be geared towards creating a website as opposed to making a desktop widget or other application.

Similarities to CSS

In order to better understand XSL, it is helpful to compare it to a different kind of stylesheet which you may already know, Cascading Style Sheets. XSL and CSS have several traits in common.

Both CSS and XSL require a markup document in order to do anything.
Both use selectors to apply formatting.
It is possible to “call” or import another document from inside a stylesheet.

Differences from CSS

Aside from the similarities listed above, CSS and XSL are quite different.

CSS is for presentational formatting. XSL is for data formatting.
XSL is less forgiving. If there are errors, no output will be rendered.
XSL selectors are much more robust. Variables and functions are supported like a traditional programming language.

Why Use XSL?

The best roundup of XSL and the reason I became interested in XSL is a SXSW 2007 presentation, “Why XSLT is Sexy,” (audio, slides). In the presentation, they detail many reasons to use XSL, and I have listed a few of the key points with some of my own findings.

Freedom of data

Virtually every programming language supports XSL including PHP, Java, C#. This gives developers the freedom to work in their programming language of choice. Transformations can be applied either on the server or on the client since all modern browsers support XSL. Best of all, data formatting can easily be modified or re-purposed.

It is Extremely Fast

XSLT uses the XML parser which is much faster than the parser used for HTML (SGML). According to the previously mentioned SXSW presentation, the XML parser is up to 20-times faster than the SGML variety. XML won’t render if it is not properly formed, so the XML parser doesn’t need to accommodate mismatched or unclosed tags like HTML can have.

Makes Working with APIs Easy

The two most common APIs for web services, REST and SOAP, are both XML formats. Using XSL creates the possibility of making your own applications and takes the sting out of displaying data received from popular web services.

It Will Be an Integral Part of the Semantic Web

The semantic web features additional information about website content embedded in the code. The most common example is the meta keywords and description, but with the continued development of microformats and RDFa, the potential to include semantic metadata goes much deeper. With XSL, it is possible to extract this semantic data and use it in other ways like adding someone’s contact information to your address book.

Extended metadata is becoming increasingly important since key players like Google and Yahoo are including richer information in their search results and much of this data is fueled by RDFa or microformats. Using XSL allows a consistent way to add metadata to your content.

Learning XSL

The easiest way to learn XSL is to use it in real-world situation. In the next 3 posts, I’ll be creating restaurant menu with XML, render it with XSL and PHP, and enhancing the interface with MooTools. Here is a brief rundown of the items we will cover:

Part I – Creating the XML and XSL

Create an XML file that will be appropriate for a restaurant menu
XSL function overview
Apply Basic XSL to render HTML

Part II – Format

Structure the XSL so it will be easily maintainable in the future.
Load XML and XSL using PHP.

Part III – Enhance

Add semantic markup via XSL using the GoodRelations RDF vocabulary.
Enhance the interface with Mootools.

If this overview piqued your interest on the subject of XSL, I hope you’ll consider joining me for the next steps where you’ll be able to see this powerful technology in action.

Getting Inspiration from Art and the Outdoors

Sun, 09 Aug 2009 00:00 -0500

To keep creative work from becoming homogenized, it is important to have discovery and research as part of the design process for each project. Generating fresh ideas can be challenging when you design all day, but as designers, we need to keep innovating to overcome the client’s marketing challenges.

For many people the first and only stop for design ideas are CSS galleries, but stepping outside the norm can deliver unique and original design results. In this post, we’ll look at how art and life experience can be adapted to produce two unique web design elements with a nature theme.

Working with Art as Inspiration

Art is the proverbial “road less traveled” compared to CSS Design galleries that are commonly used by designers. For some, it might be hard to translate a loosely structured piece of art into a polished design, but using art is an exercise to develop a new way of thinking and add another technique to your arsenal.

How Art Can Be Translated to Web Design

Artists are masters at directing attention to the intended subject, and you should take advantage of their understanding of composition by thinking about how similar techniques might be applied on the web. In web design, the intended subject is the call-to-action, which conveys the purpose of the page. The call-to-action is usually a registration button, contact button, or the add to cart and checkout buttons of an E-commerce site.

The following chiaroscuro painting by Gerrit Van Honthorst uses a high amount of contrast between light and dark areas. The light source and the vivid colors of the woman in blue make her the focal point, even though she is in the background of the painting.

In order to translate this technique to a web element, a color photo was converted to black and white and adjusted to achieve high contrast. A blur was applied to the trees and carefully masked, while selective color helps draw the viewer’s eye to the bright orange button, despite the text “Save the planet” being much set in larger type.

Four Tips for Working with Art

Do Your Homework on the Client

Designing is visual communication, and if you don’t ask the right questions, you’ll never know what the client wants to communicate to their customers. Feedback from the client should be the fuel for making design decisions based on the type of inspiration you choose.

Choose Appropriate Works

Relate the mood of a piece to the client’s desired look and choose works that are appropriate to their brand. The best part about art there is something to suit every taste from conservative, classic, and elegant to edgy, bold, and sheik.

Look at Different Mediums and Sources

Evaluating different forms of art will help you to develop your own style. Don’t limit yourself to one style, artist, or media. Be diverse. Paintings, photography, sculpture, fashion, cinematography, tattoos and music can get the creative juices flowing.

Keeping it Organized

Organizing your inspiration is the key to working efficiently. For me, delicious is the hub for all my bookmarks, including inspiration. In order to quickly browse through the bookmarks, I created a Yahoo Pipe to make thumbnails of links based on the thumbnail your delicious links pipe.

Do Something to Ignite Passion

Staring at a screen can take its toll and we all need a break from time to time. Yes, I am suggesting that you get away from the computer and do something memorable. You do have hobbies and interests away from the computer, right?

How Life Experience Can Be Translated to Web Design

The skillset of a designer is pretty standard. On the other hand, life experiences and personal interests are completely individualized and can be used to set your work apart. For me, fishing in a stream somewhere, playing music, or experiencing other cultures through travel ignites a passion and gives me the energy to do my best work.

How Personal Experience Can Be Translated to Web Design

I have a profound interest in the outdoors, adventure travel, and conservation. While at the the Cincinnati Zoo, I stopped by the Mexican Wolf exhibit, one of my favorite animals at the zoo, to take a picture.

When I took the picture, I was about 8-feet away from these wonderful animals and had been observing them for 20 minutes. I used this experience to design another “save the planet’ banner. I kept the wolf in the illustration to further illustrate the theme and to stay true to my experience.

Conclusion

As you can tell from the two examples produced as part of this post, the type of inspiration we seek as designers can greatly influence the outcome the final product. Supplementing inspiration gained from design galleries with art, life experience, and nature can help refine ideas into something unique and original. While it can be more challenging to translate abstract ideas into web design, it is always worth the extra effort to design something that you are proud of and will help your client achieve their goals.

Wolfram Alpha for Web Designers

Mon, 22 Jun 2009 00:00 -0500

With Twitter, Google Wave, and Opera Unite, there has been a lot of recent talk regarding the future of the web. You may have also heard of Wolfram Alpha, a non-traditional search engine capable of complex calculations and conversions, as part of the “future” discussion.

With all the hype, I decided to check Wolfram Alpha out myself. Initially, I struggled to find a use for the data, but as I spent more time exploring the possibilities, I came across some useful ways it can be used for producing web sites and general business purposes.

Design & Development Uses

There are two ways that I can see using Wolfram Alpha. The first is to use its features to help develop websites, produce design materials, and build applications.

Working with Color

I have written about generating color schemes from scratch in a previous post, but Wolfram Alpha tells you more about a color than you’d ever want to know. Do a simple search for a color in virtually any format, and you are presented with a color swatch, the nearest named color values, and a table of possible color schemes.

HTML Entity Look-up

We all know special characters have to be encoded to maintain valid markup, and Wolfram Alpha can help you. While Left Logic still has the best HTML entity look-up I have used, it is been down on multiple occasions. The search for HTML entities works both ways on Wolfram Alpha. You can either enter the character name such as “ampersand” or its corresponding encoded value if you want to do a reverse look-up.

Calculate Download Time

Unfortunately, not everyone has a high-speed internet connection. As developers we have a responsibility to keep site speed manageable for our users. Simply input the page size with the connection speed, and the numbers are crunched for you.

Domain Information and Geolocation

A search on a domain name turns up the registering host’s name and location, approximate traffic numbers and ranking, page size, and an interesting visualization of the HTML hierarchy for the page. The visualization has a table with color-coded labels, but unfortunately, the image is so small you can’t really distinguish the colors.

Perhaps more useful, is the ability to retrieve the geolocation of an IP address. This has a range of possibilities for building web apps using the API.

The API

Wolfram Alpha also includes a well-documented REST API for developers. The documentation is an easy read since it is only a 12-page PDF. The search results are delivered in XML format which can easily be manipulated to display as HTML.

While I don’t think it will be commonplace to implement on an average website, the API certainly has application for specialized uses for science and computation since it harnesses the powerful Mathematica engine.

Paper Sizes

In addition to the web related uses, Wolfram Alpha can also be useful for print work by giving the dimensions of multiple paper formats as a quick reference.

General Business Uses

The second way Wolfram Alpha can be used in day-to-day work is for more general business purposes.

Time and Date

Most modern businesses have clients in a different state, territory, or country. Need to find out what time it is in your client’s location? Simply type in two cities and you’re given the time in each city, along with the distance, air travel time, and populations of each city.

Wolfram Alpha also includes a range of calendar features that you can use for invoicing purposes or general knowledge such as calculating the date 30 days from now or checking the dates of national holidays.

Conversions and Dimensions

Just about any type of conversion you want can be computed with Wolfram Alpha. Need to know how to convert pounds to kilograms for international shipments? No problem. Wolfram Alpha can also do currency conversions to help you declare a value for the shipment as well.

What Will Wolfram Alpha Contribute to Search?

Experimental search technologies are continually hitting the market or in development. Everything from semantic web, real-time search, and social search is being discussed right now. I don’t think Wolfram Alpha will ever replace Google, but if it succeeds, I think other search engines will be pushed to include a higher level of visualization on results pages and explore the market for niche search.

The true power of this alternative search engine is in its computational ability and attractive results. This article only scratches the surface of what can be accomplished with Wolfram Alpha, and I have discovered the more time you spend with it, the more useful it is.

Use PHP to Gzip and Optimize CSS Files

Thu, 14 May 2009 00:00 -0500

If you have been following the best practices for website optimization published by Yahoo’s Exceptional Performance team, you know the importance that using gzip to compress files and making fewer HTTP requests can have on website speed.

While doing some research, I came across a number of powerful techniques that uses PHP to optimize CSS files. By combining these techniques, I was able to achieve some impressive enhancements resulting in a 71% reduction in the size of my CSS files.

The Technique

It’s a combination of 3 techniques actually. All the techniques are covered in more detail over at Cats Who Code, but here is a quick rundown of what I like and dislike about each one.

Paul Stamatiou Method

I like the error checking in Paul Stamatiou’s method for two reasons: 1) it checks to see if the zlib extension is loaded and 2) the gzip compression. I don’t like that you have to rename your CSS files with a PHP extension which causes my IDE to highlight the syntax as PHP rather than CSS and that the snippet has to go in all CSS files.

Perishable Press Method

In Perishable Press’ technique, I like the gzip compression and the cache checking. Again, I don’t like that you have to rename the CSS files with a PHP extension and that the snippet has to go in all of CSS files.

Reinhold Weber Method

Reinhold Weber’s technique combines all the CSS files into one file via includes before sending it to the browser, does not require you to rename your CSS files with PHP extension, and strips comment out by removes comments.

The downside is that the regex that removes all the whitespace caused some issues with CSS shorthand and makes it harder to use Firebug to troubleshoot layout issues since the entire content of the CSS file resides on line 1.

My Modified Technique

To put this to use, create a file called styles.php in the same folder as your CSS files.

Paste in the following code:

You will then need to update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created.

The Results

As you can see from the image below, the 2 CSS files were output as 1 file and the size went from 11.2KB to 3.2KB. The comments were also removed from the file, but whitespace was retained to aid troubleshooting if there are any layout issues.

This technique is a powerful and simple way to reduce page download size and speed up your site that will work with most PHP installations, even those on shared hosting that don’t have mod_deflate turned on in their Apache configuration. I’ll definitely put this method to use on my redesigned site which will debut later this month and begin using it as part of my standard process for all new projects.

Photoshop Color Workflow Using HSB

Sun, 15 Mar 2009 00:00 -0500

More than any other element of design, color has psychological underpinnings which makes it difficult to master. Learning the fundamentals of color theory is the basis for more advanced work and the reason why color is such an important part of design.

Recently, I have been focusing on the mechanics of design and have developed a streamlined system of creating color schemes and integrating them into the workflow in Photoshop.

Color Properties and Their Application in Photoshop

Most web designers are probably comfortable working with RGB or Hexadecimal color values, but working with hue, saturation, and brightness (HSB) values can provide a more intuitive means of working with color since it is more similar to other mediums.

Hue: The name of a pure color. A hue in Photoshop is indicated by its position (in degrees) on the color wheel. The higher the slider on the color bar goes, the further around the color wheel you go.
Saturation: The intensity or dullness of a hue. A fully saturated hue in Photoshop will have a S-value of 100%.
Brightness: The luminosity (lightness or darkness) of a hue. In Photoshop, brighter colors will have a higher B-value.

Understanding the Color Wheel and Color Harmonies

The color wheel is the most important tool to understanding color harmony. Position on the color wheel is indicated by degrees. Every color harmony will have a base hue to serve as the common element between other colors.

To come up with color schemes, start with your base color indicated by H0 in the example below, and perform a simple calculation addition, subtraction, and absolute value.

Complementary: a two-color combination consisting of a base color (H0) and another color (H1) that is 180 degrees apart from H0 on the color wheel.
- formula: H1 = |(H0 + 180 degrees) - 360 degrees|
Split Complementary: A three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 150 degrees and 210 degrees apart from H0 respectively.
- formula: H1 = |(H0 + 150 degrees) - 360 degrees|
- formula: H2 = |(H0 + 210 degrees) - 360 degrees|
Triadic: A three-color combination that consists of a base color (H0) and two colors (H1 and H2) that are 120 degrees and 240 degrees apart from H0 respectively.
- formula: H1 = |(H0 + 120 degrees) - 360 degrees|
- formula: H2 = |(H0 + 240 degrees) - 360 degrees|
Tetradic: A four-color combination that consists of a base color (H0) and three colors (H1, H2, and H3) that are 90 degrees, 180 degrees, and 270 degrees apart from H0 respectively.
- formula: H1 = |(H0 + 90 degrees) - 360 degrees|
- formula: H2 = |(H0 + 180 degrees) - 360 degrees|
- formula: H3 = |(H0 + 270 degrees) - 360 degrees|
Analagous: a combination consisting of a base color (H0) and one or more adjacent colors (30 degrees apart) on the color wheel.
- formula: H1 = |(H0 + 30 degrees) - 360 degrees|
- formula: H2 = |(H0 + 60 degrees) - 360 degrees|
- formula: H3 = |(H0 + 90 degrees) - 360 degrees|
Monochrome: a color scheme based off the base color. Variations in shade or tint are achieved by changing the S-value and/or the B-value for your base color.

Putting it All Together

As a practical example, I am going to walk you through the creation of a split-complementary color scheme for one of my upcoming projects. To get started, open up a new Photoshop file. I am going to work with a base color with a hue value of 256.

Create Colored Shapes

Use the rectangular marquee tool to make a selection, and fill it with the selected color on a new layer.

The three colors I have chosen are:

H: 256, S: 39, B: 7 (#0d0b12)
H: 106, S: 94, B: 20 (#0e3303)
H: 46, S: 17, B: 88 (#e0d7ba)

Create Additional Colors for Visual Interest

Trying to spread 3 colors across an entire site would be boring, so I am going to add some auxiliary colors to give more options for experimentation.

My additional colors are as follows along with the reasons why I am chose to incorporate into my theme:

H: 236, S: 90, B: 50 (#0d2880) – Analogous to color #1 above.
H: 136, S: 34, B: 39 (#41634a) – Analogous to color #2 above.
H: 76. S: 96, B: 46 (#577505) – Analogous to color #2 above.
H: 46, S: 92, B: 98 (#fac313) – This is a chroma variation from color #3, meaning that the H-values are the same, but the variance comes from the change in saturation and brightness.

Tint and Shade

The final step for generating some additional colors is to create tint and shade variations by adding white and black layers respectively and set them to a low opacity. In the example, I created two white layers and two black layers, set the opacity to 20%, and overlapped them to achieve two layers of shade and two layers of tint. An area in the middle was left open for the original colors to show through without being altered.

These colors can be used as a guideline for anything in the design: backgrounds, navigation, headlines, copy.

Create a Custom Set of Swatches

Now that the colors have been solidified for the design, we could easily leave the colors saved in their own psd and just keep two documents open during the design process or import the layers into the main design file. Fortunately, there is a more streamlined way to work.

Step 1 – Convert the Image Mode to Indexed Color

In Photoshop, go to Image > Mode > Indexed Color. Select OK at the prompt to merge visible layers and discard the hidden ones which will result in one flat file.

Set the palette to “Exact” and select OK.

Step 2 – View and Save the Color Table

Now that the image is in Indexed Color mode, go to Image > Mode > Color Table to save this color palette.

Step 3 – Import the Color Table to the Swatch

Go to the Swatches Window and select either “Load Swatches” or “Replace Swatches.” Find the folder where you saved the color table in step 2, change the file type drop down to “Color Table (*.ACT),” and open your file.

Download the color table

Conclusion

Revisiting the fundamentals of color theory allows you to really think about the technique involved and will improve your understanding as well. There are certainly other methods of creating color schemes, but the ability to generate color schemes from scratch allows a greater ability to explain choices as a designer which could lead to more creative solutions for clients and take your designs to the next level.

Moo-doo: A Mootools Voodoo Doll

Tue, 24 Feb 2009 00:00 -0500

With many Americans looking for full-time work due to the state of the economy (myself included), frustration seems to be running high. One of the important things to me has been taking the time to learn new skills and further develop the existing ones. No doubt, I will come out of this recession stronger as a professional with more to offer to a potential employer than ever.

Given that today is Mardi Gras, I have cooked up an absolutely ridiculous example while experimenting with Mootools’ Drag.Move class: A Mootools Voodoo Doll.

Resources for This Project

While creating this project, I used the following resources.

Momentum CSS Framework
Alpha Transparency in PNG-8 Images Without Using Fireworks
Mootools Official Documentation
Drag, Drop, Lock by David Walsh
30 Days of Mootools by consider: open

Alpha Transparency in PNG-8 Images Without Using Fireworks

Fri, 13 Feb 2009 00:00 -0500

Web designers are starting to discover that 8-bit PNG files can be used to achieve semi-transparency (alpha transparency) that will gracefully degrade in IE6. Most of the posts around the web focus on using Adobe Fireworks to achieve semi-transparency, but what about the rest of us that don’t use Fireworks?

Today, I’ll demonstrate an alternative technique to show you how to achieve alpha transparency in PNG-8 images without having to shell out the cash for Adobe Fireworks.

Why Use PNG Instead of GIF?

GIF files only support binary transparency meaning that either a pixel is either fully opaque or fully transparent. On the other hand, PNG (pronounced “ping”) files support semi-transparent pixels and also offer a reduction in size over GIF files when using the 8-bit variety. The benefit of this can be summed up by this simple equation:

Smaller Images = Less Time Downloading = Faster Site

Both PNG-8 and GIF files are limited to 256-colors. Aside from the speed benefit, PNG-8 files can contain semi-transparency in modern browsers (Firefox, Opera, IE7+, Chrome, and Safari) and do not require CSS hacks or Javascript to implement.

Before We Continue

Before we continue, you’ll need to download your free copy of pngquant and install using the instructions below.

Windows Users

Download pngquant.
Drag the .exe file over to your C:\Windows\System32 folder.

Mac Users

Download a pre-made executable. OR

Download pngquant.
Follow the instructions to compile and install from the source.

Producing and Saving the PNG Image

Open up your image editing program. For the purpose of demonstration, I’m using Photoshop, but you could also achieve the same result by using GIMP.

Step 1

Create a new document (Ctrl + N).

I am only using the text tool for this demonstration, but you could (and should) do this with your approved design file when you slice up your PSD.

Step 2

The file I created has 3 text layers. I set the opacity to 60% for the layer containing the text “semitransparent” and gave all the layers an ugly outer glow.

Step 3

Save the file for web (Alt + Shift + Ctrl + S) and select PNG-24 from the drop-down.

A PNG-24 file, sometimes called PNG-32, actually consists of 8-bit color for each of the red, green, and blue channels plus another 8-bits for the alpha channel which contains the transparency information.

Converting to PNG-8

If you were to implement the image as is, you would see light gray for the transparent pixels when viewed in IE6.

I’m using IETester to test how the image would render in IE6 on the left. The right side is a screenshot of Firefox and shows how modern browsers would display the image.

Step 1

First, place any PNG-24 files that you would like to covert in a folder and drag it to a convenient location. I placed my folder, called “ui,” in the C drive root.

It is best to put the file in a location that doesn’t contain spaces and is close to the root folder to save some typing in subsequent steps.

Step 2

Now we need to convert the image to 8-bit by using pngquant which we downloaded earlier. Open up the command prompt on a PC (Start > Run > cmd) or Terminal on a Mac (Applications > Utilities).

Step 3

At the prompt type in pngquant (number of colors) pathtofile\filename.png. In my case, I am optimizing a file called semitransparent.png inside of the ui folder and am optimizing to 8-bit which equates to 256-colors, so I’d type pngquant 256 c:\ui\semitransparent.png and press enter.

Pngquant creates a copy of the file and will append -fs8 to the end of the file name. This file is ready to use.

The Result

Here is the updated screenshot.

IE6 will degrade the image gracefully and only render the fully opaque pixels. It does not have the outer glow or the word “semitransparent” because that layer was set to 60% opacity in Photoshop. Firefox and other modern browsers will render the alpha transparency as it should.

More About Pngquant

Pngquant is capable of optimizing a whole folder full of images at a time. All you have to do is use the wildcard selector (“*”) instead of specifying a file name. If I had wanted to do the entire contents of the “ui” folder in the example above, I would use pngquant 256 c:\ui\*.png in the command line.

Other Options

Pngquant has other options for optimizing files. To see an available list of options, simply type in “pngquant” in the command line.

Don’t Like the Command Line?

Windows users can download Manfred, a free pngquant GUI for even easier optimizations.

Make it Even Faster

Once you have converted your PNG-24 images to PNG-8, you can run the images through Smush.it for even greater speed and performance benefits, or a host of other optimizations which I detailed in my website optimization series.

More Developments

At the time of this writing, npngquant, a new version of pngquant which promises better performance and more intelligent optimizations is available over at SourceForge. In testing for this article, I found it to be buggy and hence did not include instructions for it. I am hopeful the kinks get worked out quickly since it looks to have some noteworthy improvements over the original pngquant detailed in this article.

Conclusion

There are many creative possibilities when using transparency on the web which we are just now starting to explore. The methods shown can put this technique in your design toolbox, even if you don’t use Fireworks and will hopefully assist you with coming up with inspiring designs.

25 Awesome Examples of Outdoor Industry Web Design

Fri, 30 Jan 2009 00:00 -0500

In 2008, the outdoor industry posted a growth of 18% in online sales. For businesses in the industry, it is more important than ever to provide target customers with a great website and capitalize on the favorable market conditions.

Though many smaller operations won’t have the budget of the industry’s big-guns, attaining a successful and attractive website is well within reach, even for independent retailers and outfitters. Here are some tips and shining examples of outdoor industry websites that will hopefully help industry professionals with their website in ‘09.

Understand the Purpose of Your Website

The decision of which company or product to choose, like many other purchasing decisions, is made online. Those who hire outdoor industry service providers or go on excursions are often from areas outside of the guide’s operating market. Think about what you are asking someone to do when they visit your website: solicit information something that can cost hundreds or even thousands of dollars based on your web presence alone.

Take Me Fishing

Take Me Fishing is a site to provide information on fish habitat, instructional techniques, and inspire people to share fishing with others. Bonus points for woodgrain.

SmartWool

The purpose of this site is to provide information on active outdoor apparel which will hopefully lead to customer purchases through the website or authorized dealer.

Tarpon Lodge and Resort

The Tarpon Lodge website provides rates and information for people looking for an outdoor vacation. The design is well executed and the logo placement is really good, however the music can put off some people (like me).

What You Are Really Selling?

The most important part of servicing a niche market is to truly understand what the target customer is after, so what does someone in the outdoor industry truly sell? The answer is probably more broad than you think. Adventure, relaxation, and challenge are things you’d experience while backpacking, climbing, skiing, fishing, or rafting, but they can all be tied together in one common theme: lifestyle.

Singita Game Reserves

Singita Game Reserves uses an upscale design to attract affluent customers. The packages they offer can cost thousands of dollars per day for their African wildlife retreats.

The Circumference

Life Experiences are the central message of this attractive travel and adventure site.

Bring the Outdoors Online

When it comes to the outdoor industry, there is the expectation of an active, healthy lifestyle that is the backbone of the industry itself.

One of the best ways to convey this is to bring the elements you’d encounter while out in the field to the site design. If you own an adventure lodge, make sure your site captures a rustic feeling of excitement. Have a mountain adventure company? Take the opportunity to incorporate elements from the mountain such as the colors, trail markers, or topographic maps.

Outdoor Italia

Outdoor Italia bases their whole design off of elements that you would see while in the field.

66 North

66 North features a topographic map of Iceland in their background.

Whistler Blackcomb

Snow on the ski report feature is meant to simulate a marker that you would find at the top of a run.

Micato Safaris

In any other situation, the animal print would conjure up images of 80’s hair metal, but it works well for this site. I like the typography on this site, but I wish they were using web standards.

Don’t Skimp on Photography

Outdoor sports and hobbies take place in the most beautiful settings our planet has to offer, so there is no excuse for having lackluster photography. One of my favorite things as a designer is when a client provides me with a bunch high-resolution of action and still shots to use in the site design, and having good photography can really add polish to a design.

The North Face

The North Face uses the natural environment for the backdrop of their website.

Notes from the Road

Notes from the Road features great photography from around the world. Too bad they aren’t using web standards for their site.

Illustrations Can Work Too

Hand drawn or illustrated web designs are very popular lately. These are great when you service multiple markets and don’t want to seem partial or if photography is not available.

Adventure Drop

Adventure Drop has a great illustration incorporating many types of outdoor sports.

Arizona Marinas—Pleasant Harbor

Sometimes illustration can provide a way to break a cliché. Pretty much every marina has a standard photo of a boat. Illustration is used to set this marina apart from the rest.

Natural Colors

Web design can be an extension of your business and it is all about creating an experience. Many land-based companies make effective use of earth-tone colors, while water-based companies make great use of blues and sunny accent colors.

Turneffe Resort

A nice balance of texture and color.

Ocean Kayaks

Effective use of water as a texture and brighter colors to accent the design.

Destination Leavenworth

Woodland chalets and real estate that does a nice job of giving a woodsy vibe.

Glacier Bay Lodge & Tours

Anyone who has been on a glacier knows how beautiful the striking blue of the “old ice’ can be and the Glacier Bay site plays off of that color palette.

Rough Up the Design

Just as you can use some of the elements of that occur in the wild, you can also use some of the textures. Nature is full of fantastic textures and patterns, so why not use them to make your site come to life?

Sinister Bikes

Dark colors really make the tire treads in the site background stand out while a nice texture is obtained in the content area of the design.

Professional Tasmanian Arborists

Not over the top on texture, just enough to give the design a little edge while maintaining it’s elegance.

Leatherman

Gear companies usually have excellent websites and this is no exception. I have had their Wave multi-tool in my tacklebox for almost 10 years and it is just as rugged as their website.

Dynastar

This design is a hybrid with a number of different things like the textured background, patterned header, rugged sidebar on the right and decorative flourishes on the left. All the elements work harmoniously and make this site stand out.

Keep It Clean

Sometimes the best way to stand out is to use whitespace and execute well. This is the opposite approach to the large photo background or rugged textures, but is also a very effective technique, especially when going for a broad, gender-neutral appeal.

andBEYOND

I love this site, especially the sumi-e style logo and sense of rhythm that is established by the layout.

Trails

This design requires a spot for advertising, e-commerce, promotions, membership, and a lot of information, so a clean design is absolutely necessary.

Butterfield & Robinson

Another minimalistic site that is very well executed. The thin lines that divide the page into segments give an added sense of elegance.

REI

A clean layout that is well-suited for the large amount of e-commerce and travel information that this site provides.

Conclusion

Too often, a website is looked at as an expense rather than an investment, and a good web design can elevate a business to the next level by capitalizing on market growth. Any time you go after a niche market, it is best to understand the goals and unique challenges that a business faces. This is true for both the outdoor industry professionals or the web designers who serve that industry.

Website Optimization Guide: Part Three

Mon, 12 Jan 2009 00:00 -0500

Front end development is a quickly growing field, especially among the forward-thinking companies poised to lead the industry into the future. In parts one and two of the website optimization series, we looked at front end and server side optimizations.

Today, we’ll dive a little more into the front end, look at some helpful tools to assist with website optimization, and wrap up the final article in the series with a complimentary check list to keep track of your own optimizations.

Make It Work for the User

Bottom line—your website needs to work for the user’s intended purpose. Though testing typically is looked at as an afterthought by typical businesses, it is has serious ramifications on maximizing ROI. Testing could be as simple as having another “set of eyes” review the site or as intensive as hiring a renown usability consulting firm such as Nielsen Norman Group or Adaptive Path.

As far usability assurance is concerned, you should do the following at the very minimum:

Make It Easy to Navigate

Users develop habits while browsing a site. Since they’ll get used to looking in the same spot for certain elements, persistent, intuitive navigation is an essential part of effective design. Navigation should be well organized broken up into relevant sections.

Use Progressive Enhancement

Make sure the page still functions with JavaScript disabled as some users prefer to browse this way, are looking at your site on a mobile device, or are mandated by network administrators.

Make Sure the Design Looks Right in Multiple Browsers

Testing layout integrity in multiple browsers ensures a seamless experience for all users. The site should look more or less the same in all major browsers. Personally, I let the data in my site analytics dictate which browsers to support for my site and use it as a baseline for other sites that I do as well. Based on the data in my site analytics, I can see that visitors to my site use a multitude of browsers and I test all my sites in IE6+, Firefox, Opera 9, Safari, and Google Chrome. If you don’t have a suite of test machines for all of these different browsers, don’t worry. There are a number of free services such as Browser Shots or premium services like Litmus to help you out.

Follow Yahoo’s Advice

No other company has contributed as much to the field of front end development and website performance in recent past as Yahoo. In the last year or so, the Exceptional Performance Team at Yahoo have published a list of best practices for website performance, YSlow! to measure the results, and discussed website performance at length. Although I don’t follow their recommendations to the letter, I would suggest to anyone interested in front end web development to head on over to their developer network and subscribe to their feed, and for anyone who is interested in maximizing their ROI to find a developer who is well-read on their research.

Serve JS Frameworks from Google or Yahoo

Javascript frameworks have become indispensable tools for development and rapidly enhancing the user experience, however these files tend to be rather large in size. As part of the Ajax API, you can serve Mootools, JQuery, and YUI from Google’s servers to save bandwidth. YUI is unique because it can also be served from the Yahoo servers along with its optional components.

Some people aren’t willing to sacrifice the control of hosting their own frameworks, but offloading the hosting of these files has a large advantage because it can be cached. If someone visits a site that is already using a Google hosted framework, they won’t have to download it again on your site which will ultimately make your site load faster.

Reduce the Size of Images

Image optimization can be taken further than using the save for web feature in Photoshop. Every byte shaved off of an image file can improve performance and can potentially reduce the amount you need to spend on hosting. In a recent article, Graphic Rating looked at the amount of bandwidth that top sites could save with further image optimization. Again, Yahoo has also contributed some groundbreaking information on reducing image sizes, and two of their developers have released a tool to help facilitate image optimization.

Adhere to Good Design Principles

Good design is not a substitute for a functional website with great content, but it does act as a major part of the successful website equation. The graphic appeal of a website is like packaging for a physical product and is a recognizable part of a brand. If your site a design is ugly, you better offer a fantastic service and pack it with value to the user à la Craigslist. A professional-quality design will establish trust with it’s viewers, leave a lasting impression with visitors, and can even help you gain positive exposure through web design. Certain design practices such as prominent placement of the call-to-action, use of whitespace, and grid-based layout can help guide your visitors and maximize your site’s usability.

Conclusion

What have we learned? The web is evolving, there is new research being conducted every day, and new platforms such as mobile devices that businesses should not ignore. In short, every aspect of a website can be optimized in some fashion. The on-site optimizations lay the foundation for search engines and visitors. While the on-page optimizations are being performed, it is time to head to external domains to start marketing, networking, and building links with other sites. Be sure to download the pdf to give you a quick reference guide for the articles in the series.

Website Optimization Guide: Part Two

Mon, 22 Dec 2008 00:00 -0500

Successful websites are constantly evaluated for performance and usability. Before you start building links with other domains, you should make sure that your website is in working properly in order to get the most benefit.

In part one of our website optimization guide, we focused on front-end performance techniques. Today, we’ll look at some other optimizations that pertain more site’s overall construction and dealing with external files such as PDFs.

Missed Part One?

Be sure to read the first article on website optimization so you don’t miss anything.

Separate Content from Presentation

Separating content from presentation is the cornerstone of web standards. In lay-person’s terms, this means that pages are segmented into two different sections, the relevant text (HTML) and the visual formatting (CSS).

Sites that use this approach will load faster and are more meaningful to search engines since it content can be organized in an optimal fashion.
Standards-compliant sites are accessible to all users regardless of physical or cognitive disabilities. In a 2006 lawsuit, Target was sued for ignoring these principles.
Sites that separate markup from presentation will experience lower maintenance costs since articles can be reused and adjusted with minimal effort. This is especially handy when it comes time to redesign.
Your site is done incorrectly if you don’t use web standards! This isn’t my opinion, it is the standard spec set by the W3C, the professional organization for web development languages.
And many more reasons

Add Metadata

Adding metadata, especially descriptions, to your pages can really help performance in search engines. This provides an overview of the content to search engines and the user since the description shows up on the SERP. Meta keywords are less important than descriptions, but can still be beneficial if you avoid the temptation to overload a page with keywords (called keyword stuffing) and stick to 4-8 well targeted terms. For some quick keyword ideas, it is a good idea to run the article through Google’s Keyword Tool prior to publishing.

Use Semantic Coding

Just as metadata can be used to provide meaning to the document content, semantic naming conventions provide additional meaning through the HTML code. This can be achieved by using things such as the title attribute on images and giving meaningful names to classes and ids.

Semantic naming allows for intuitive development, easier maintenance, and it can provide an enhanced browsing experience through microformats, a meaningful set of markup that allows the user to extract additional data from a page.

Use Friendly URL Rewriting

The way this works is to take an unfriendly URL such as http://www.example.com/index.php?p=50a and provide instruction to the server to give the URL a more user-friendly format such as http://www.example.com/contact. URL rewriting is beneficial to both humans and search engines because it is easier to read addresses that take advantage of this technique. Many sites using a CMS will have this option available to manage URL rewriting for their pages in the admin back-end, but the same option is available through the .htaccess file in Apache in cases where the CMS won’t allow updating or it is a unique scenario such as a marketing promotion that requires special handling.

One particularly useful example is to redirect the non-www version of a site (http://example.com) to the www version (http://www.example.com) by putting the following in your .htaccess file:

#redirects non-www to www
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

This helps prevent any duplicate content issues if Google happens to index both www and non-www versions of the site and prevents any ensuing penalty in rankings.

Use Robots.txt to Help Guide Search Engines

Robots (aka searchbots, crawlers, or spiders) are the automated programs that search engines send out looking for content to add to their index. Robots.txt is a plain-text file located in the root folder containing instructions for search engines on which directories to crawl. This isn’t a surefire way to keep pages out of search engine’s index, but it is a helpful way to offer some guidance.

A search engine will want to crawl through every directory by default, but greater control can be obtained by creating your own file to guide a searchbot to the most relevant content. On this site, I use a robots.txt file to restrict access to CSS, Javascript, or other folders containing modules for my Joomla CMS because I’d rather have search engines look at my blog articles, site pages, uploaded documents, and images. These files can be quite limited in scope as is the case with my robots.txt, or quite extensive such as the Whitehouse.gov file. UPDATE: during the redesign that took place during the Obama administration, the Whitehouse has changed their robots.txt file. You can view the old version at Pastebin.

Create an XML site map

Where robots.txt is like a compass, an XML Sitemap is like GPS for the site architecture. Sitemaps give search engines a list of URL to crawl. Other helpful information such as the importance of a page in the site structure and how often the page is modified can also be included.

Best of all, it is super easy to generate a sitemap and then update it continually as you add more pages to the site architecture.

Optimize Documents

Sometimes it is necessary to provide a file that can be downloaded file for offline use. Search engines index many document formats so these documents can be optimized for human users and search engines just as it can with HTML content. In order to get started, you need to think of everything a document will do and what it contains.

File Format

PDF is the format of choice. The only reason you’d want to use another format is if the file contains some sort of interactivity such as embedded multimedia, transition, or is a form that can’t be replicated as a PDF. Whatever format is used, it is best to give documents meaningful file names just as you would with images. Ideally, the name should include a keyword and be hyphenated if the file name has several words.

File Size

While many people have high speed connections, there are still people with dial-up, and not everyone is willing to download a 79MB file. Documents with large file sizes should be broken up into several parts or zipped up at the very least. If you are using a PDF, Acrobat has a “Fast Web Preview” option that should be used for anything offered online.

Metadata

Most electronic document formats will allow you to enter metadata just as you can with HTML pages. Including metadata for files posted online can help site performance in search engines, especially if you are trying to rank for content located inside of a PDF.

Conclusion

As you can see, there are many adjustments that can be made to get your website performing better with users and search engines. In the next and final post of this series, we’ll look at some aesthetic principles, experience-driven optimizations, and provide a checklist for you to keep track of your own progress.

Website Optimization Guide: Part One

Fri, 12 Dec 2008 00:00 -0500

A recent study has shown that a half-second increase in download time can result in a 20% loss of traffic. With so much competition in the marketplace, it is becoming increasingly more important to optimize website content.

Website optimization is an up-and-coming field and is a natural fit for someone with front-end development experience. Over the next series of posts, I will examine ways to improve the performance of websites in terms of speed, usability, and on-page SEO.

Title Tags

Meaningful title tags are just as important to humans as they are to search engines. Well-crafted page titles benefit the user by giving information about the page content on the search engine results pages (SERPs). Page titles should preferably contain at least two of these three components: the site URL, the company name, and an overview of the content be unique for each page on a site.

Good Title Text:
Amazon.com: Kindle: Amazon’s Wireless Reading Device: Kindle Store
Bad Title Text:
Apple

Keep in mind that search engines place limits of about 65 characters for page titles on the SERPs, so it best to use that as a guideline when writing.

Relevant content

Readers on the web have a short attention span, so it is best to keep copy short and concise. Copy that is to-the-point will not only be more relevant to human visitors, but it will also help earn high placement in long-tail search results, the most qualified and targeted traffic a search engine will send to your site. Don’t be afraid to use images, headings, and bullets, as this helps make content scannable and allows the user to information more quickly.

Descriptive Anchor Text

Search engines weigh link text more heavily than they do for regular paragraph text, so it makes sense to use descriptive text here as well. Any time “click here” is used for anchor text is a wasted opportunity.

I’m not an Internet historian, but I would imagine “click here” got started because someone in the marketing department thought the user needed a call to action. Calls to action are a good thing, however, “click here” doesn’t describe the link contents and loses all sense of context when printed. “Click here” also gives no benefit for search engine since it is competing with 1.4 billion results pages any time it is used.

Good Anchor Text:
The best values in LCD and plasma TVs
Bad Anchor Text:
Click here

Proper Use of Headings, Strong, and Em Elements

Headings (h1–h6), strong, and em tags are all elements that are given greater importance by the search engines. From a user standpoint, they help to create a visual hierarchy and focus attention on the more important pieces of a work.

Generally, the h1 element should only be used once per page, the h2 element should be used three times or less, and h3–h6 should comprise the subheadings, pull quotes and other featured content areas. I have seen people wrap their whole page in a heading tag. Do not do this! It can actually do more harm than good.

Strong and em elements are a little different since they are meant to display inline with other text and should be used on a discretionary basis. It is interesting to note that screen readers do not emphasize the strong or em tag, but the search engines do take these elements into account.

Use Image Replacement Techniques for Graphic Headings

Most text on a page should use a web-safe font, but some instances dictate the use of a different typeface for headings, tag lines, slogans, and logos. In the past, many people have just inserted a sourced image, which can be detrimental to page performance and accessibility.

In cases that require a non-safe typeface, the best solution is to use an image replacement technique so the text remains accessible to users and easily-interpreted by search engines. There are three techniques that I suggest depending on the application.

Facelift Image Replacement (FLIR):

This uses a combination of PHP and Javascript to render a font and replace a block of text with an image file.

Pros:
Requires no additional software. Works over multi-colored, gradient, or textured backgrounds. Can degrade gracefully with images off through use of the detect images plugin.
Cons:
Requires Javascript. Causes a brief flicker while the text is being replaced with an image. Only for use with PHP sites. Can’t do hover states if the image is a link.

Scalable Inman Flash Replacement (sIFR)

A replacement technique that embeds a typeface in a .swf file and writes text dynamically using Javascript. You used to need Flash to do this, but now there is a free tool to convert fonts to Flash.

Pros:

Degrades gracefully with images and/or Javascript turned off. Can have a hover state for links. Doesn’t break when text is resized in IE6 and below.
Cons:

Requires Javascript and Flash Player plugin. Text blocks show up blank until the rest of the page is done loading. Only works on solid color backgrounds.

CSS Image Replacement

There are many different techniques for CSS image replacement. The technique I am detailing is the Dave Shea enhancement of the Leahy/Langridge method.

Pros:

Works with images off. No flicker or delayed loading. Images in the CSS files can be made into a sprite resulting in reduced load on the client and server. Doesn’t rely on Javascript.
Cons:

No hover state if the image is a link. Only works on solid color backgrounds. Amount of text is limited to what can be covered up by the image. Can be time consuming if there are a lot of text that need to be replaced.

Use Alt Text for Images

You can’t have valid markup without using alt text for images, so the reasons why people skip this step are completely lost on me. The alt attribute improves accessibility by adding an alternate description for people who use screen readers or browse with images turned off.

Adding alt text for images is also a great time to get more content in front of search engines. Search engines have a voracious appetite for content, and since image search is the second fastest growing forms of vertical search on the net, it is a win-win scenario for the site owner. Using carefully crafted alt text can drive large amounts of traffic to a site which has huge potential for conversions.

Conclusion

Though the performance enhancements are typically more measurable for larger sites, anyone can benefit from these techniques. In the subsequent articles, I will look at more client-side optimizations as well as some techniques on the server, and finish it all off with a free PDF checklist for you to keep track of your own optimizations.