Michael P. Gilbert

Site Launch: Linde Lee, Inc.

michael — Tue, 09 Mar 2010 05:15:06 +0000

I’m always eager to dive into a project that presents a new, or otherwise unique, challenge. In this case, Mark Reeves at Reeves Design House created a visual design based on a grid of ten rectangular boxes — consistent across the whole site. This might seem fairly simple, but from a coding standpoint it can be tricky. It’s a balancing act between absolutely positioning multiple content boxes and ensuring that the content can grow vertically without disrupting the grid system. One more tricky requirement from the client: Can it be built in such a way that “non-techies” can maintain the content? Sure, why not! So, this site is another fine example of using WordPress as a CMS. I’m continually amazed how far we can stretch a simple blogging system to the limit in order to provide a client-friendly solution to a common problem in an extremely short amount of time. Take a look at the Linde Lee, Inc. site and have a look around. The site includes some great photos of their showroom at the historic Dallas Market Center just north of downtown Dallas.

Site Launch: Dr. Karsan, Facial Plastic Surgeon

michael — Thu, 04 Feb 2010 04:43:42 +0000

I’m excited to announce the launch of a site for Dr. Karsan, a facial plastic surgeon in the Dallas area. It’s a pretty straightforward site built with PHP, XHTML, CSS, and JavaScript. It’s clean, functional, usable, and accessible. Yet another beautiful design by Mark Reeves at Reeves Design House. Take a look at the Dr. Karsan site and see what you think.

Site Launch: Fun with WordPress as a CMS

michael — Tue, 29 Sep 2009 21:05:35 +0000

Over the past several months I’ve been working with Glide Design — an Austin-based web site design firm — on a number of interesting projects. We’ve been building the sites with WordPress which is a great solution for a lightweight CMS. I’ve had a lot of fun working on these projects and learning as much as I can about how to extend WordPress into more than just a simple blogging system. They’re not only easy to build but clients also appreciate the simplicity of the admin interface which allows them to maintain their own site content. The following three sites are a sample of the projects I’ve been working on recently. Each one had its own fun challenges and rewarding learning opportunities. Check out Triton Custom Homes, Urban Moto Shop, and Water to Thrive.

What is Ajax (and what is it not)? Part 3 of 3

michael — Thu, 17 Sep 2009 06:08:01 +0000

This is the third post (of three) discussing the topic of Ajax. If you haven’t already done so, you might want to go back and read Part 1 (general introduction, definitions, and history) and Part 2 (development sandbox with examples). Now that I’ve covered the basics of Ajax and implemented some demos, I’d like to address the issue of Ajax accessibility. Does the use of Ajax necessarily exclude people with disabilities? Does Ajax cause a roadblock for search engines (search engine optimization) and mobile devices? Are there ways to improve the accessibility of Ajax and JavaScript-enhanced websites?

As I’m writing this, I’m wondering what kinds of accessibility concerns there are in the sandbox demos I included in Part 2 of this series. Did you notice some issues as you were trying out the demos? Perhaps I’ll have to put them to the test in a more formal manner… but that’s a task for another day (and another blog post). In this post I’d like to discuss some general accessibility issues and possible solutions that are available to web developers today. It’s by no means an exhaustive list or a definitive hands-on guide, but hopefully it’s a good starting point for further research.

Simple Interactions

I think the first point that needs to be made is that Ajax, by definition, requires the use of JavaScript. Even if you’re not making a call back to the server using the XMLHttpRequest object, JavaScript is a key component in many websites today using an increasing number of animated browser effects. That’s not a bad thing by itself. But what if JavaScript is disabled or not available? For instance, some mobile devices have limited, if any, JavaScript support. Some screen readers have better JavaScript support than others. Search engines are unable to follow JavaScript constructed links, so search engine optimization strategies could be hindered. For all of these cases, developers need to provide an alternate means of reaching the website’s content. However, creating two different versions of the same content can be a maintenance nightmare as well as an expensive development option. What if there was a better way? Let’s take a look at some alternatives that might offer some assistance to web developers.

Creating New Scripting Habits

Before we get into the more complex Ajax examples, let’s start with the simpler methods, such as JavaScript enhanced links. In a book called Bulletproof Ajax, Jeremy Keith presents a new method which I find very useful. He calls it hijax and it is built on the idea that you can “hijack” regular links, through the use of DOM scripting, to add an unobtrusive behavior layer to your web pages. Without this layer, the links still work as expected, but if JavaScript is available, the user gets an enhanced experience. Jeremy encourages us to avoid bad habits of the past where we used scripting methods that caused accessibility issues. Here are two methods in particular to avoid:

Using the JavaScript pseudo-protocol:

1	contextual help

Using a fake link:

1	contextual help

A better method uses a real link with some added scripting. If JavaScript is unavailable, the link still works:

1	contextual help

But, we still have some inline JavaScript and that’s not always the best way to go. Here’s where things get exciting. How about creating a normal link and add a CSS class that can be “hijacked” by a simple JavaScript function?

Here’s the HTML code:

1	contextual help

…and here’s the JavaScript function to go along with it:

function doPopups() {
  if (document.getElementsByTagName) {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
      if (links[i].className.match("help")) {
        links[i].onclick = function() {
          window.open(this.getAttribute("href"));
          return false;
        };
      }
    }
  }
}

See how that works? The doPopups function creates an array of all the links on the page and then adds an onclick event (the popup window) for any links that have a class of help. This is a very simplified example of Jeremy’s hijax concept. There are additional recommendations for dealing with data retrieved via the XMLHttpRequest object which are more appropriate for true Ajax development methods. I encourage you to check out his excellent books, Bulletproof Ajax and DOM Scripting for additional details.

More Complex Interactions

When it comes to more complex Ajax methods, the subject of accessibility becomes even more important. Some Ajax techniques dynamically add new content to the page in a way that might not be obvious to the casual observer (or completely hidden in the background and therefore invisible to the user). This situation becomes critical for screen reader users since they may not get any sort of notification when the page has been updated and therefore the screen reader may not read the information. Imagine how frustrating it would be to fill out a form and receive no feedback about potential errors. You click the submit button and it just returns you to the form. In order for dynamic page updates to be accessible, there needs to be a way of effectively notifying the user so that they can read the new content.

Accessible Rich Internet Applications (WAI-ARIA)

There’s so much more that can be done to make Ajax (and other complex scripted interactions) more accessible. The Web Accessibility Initiative is currently developing a specification called Accessible Rich Internet Applications (WAI-ARIA) that enables web developers to create web applications in a more accessible way.

Keyboard Navigation

Being able to navigate a website using the keyboard alone (without the aid of a mouse) is an essential requirement for basic accessibility. By default, only links and form elements can receive focus (make it available for user interaction). Try it out for yourself and you’ll see what I mean. Start at the top of a web page and press the Tab key several times to “focus” links and form elements as you go down the page. However, a dynamically displayed error message, for example, wouldn’t be focusable for keyboard-only and screen reader users. Therefore it would likely be missed altogether. WAI-ARIA helps alleviate this problem by enabling all visible elements to be focusable by extending the tabindex attribute in HTML.

Roles, States, and Properties

WAI-ARIA provides the role attribute to help define widgets (sliders, tree menus, etc.) and page structure (sections, navigation, etc.). See the full list of roles available. Additional information about how a user can interact with a widget can be provided with WAI-ARIA’s states and properties. See the full list of states and properties available.

Live Regions

Areas of a web page that will change dynamically using Ajax can be specified as live regions. Live regions provide a mechanism for notifying the assistive device (such as a screen reader) that new or updated content is available on the page and how the user should be notified about the content. The WAI-ARIA specification provides additional information on live regions.

Additional WAI-ARIA Resources

I’ve included only a few of the many features available with WAI-ARIA. Here are some additional references available for further reading.

What is Ajax (and what is it not)? Part 2 of 3

michael — Mon, 14 Sep 2009 02:48:41 +0000

This is the second post (of three) discussing the topic of Ajax. In case you haven’t already done so, you might want to read Part 1. It’s not essential, but it will provide some general context and a roadmap of the three blog posts.

Now that I’ve covered the basics about what Ajax is and is not, I’d like to spend some time playing around with some actual Ajax code. I’ll go ahead and say up front that there’s not much original here. I’m not professing to be an expert Ajax programmer (or hard-core JavaScript programmer, for that matter). Using a home improvement analogy, I’m not trying to build my own hammer, screwdriver, or copper tubing from scratch; I’m holding the tools in my own hands and trying them out to see what each can do. In other words, I’m exploring the use of readily available Ajax and other JavaScript components in my own server environment.

I’m a firm believer that if you want to better understand something, it’s important to take it apart and try it out for yourself. I encourage you to do the same thing… if one of the following demos catches your eye, go read more about it on the original site and create your own demo on your site. Style it up, make some changes, and have fun. I’ve provided links to all the original sites for easy reference.

Enough discussion already… here are some Ajax (and Ajax-like) demos for your enjoyment.

What is Ajax (and what is it not)? Part 1 of 3

michael — Sun, 30 Aug 2009 01:05:02 +0000

Lately I’ve noticed a huge variance in the usage of the term Ajax. So I’ve decided to take some time to explore the topic and share my findings in a few blog posts. In this first post, I’d like to share some info from the original blog post that defined and popularized the new interaction design approach. I’ll include some historical details, various definitions, and even a few technical bits and pieces thrown in for good measure.

In the next post, I’m going to create a development sandbox to jump in and have fun implementing some popular examples in a controlled environment. I’m hoping to create a repository for my own future use as well as document competency in this area of web development. I’m not planning to reinvent the wheel here… there are a ton of great resources already available. I’m going to poke around and see what’s out there and then put together my own simple demos. Admittedly, some of the demos will be true Ajax (according to the original definition) and some will follow the more general purpose definition which I’ll call “animation effects” created with a combination of JavaScript, CSS, and other technologies. There are some great JavaScript frameworks, such as jQuery, Prototype, YUI, and Dojo, that dramatically simplify Ajax (and pseudo-Ajax) development. I’ll include a variety of examples using some of those frameworks as well.

In the last post, I’d like to explore the topic of Ajax accessibility. Is it true that Ajax creates websites that can’t be accessed by people with disabilities? Does Ajax hurt your website’s search engine ranking? Can Ajax be implemented in an accessible way? I’m not completely sure, but I’m hoping to find out! The Web Accessibility Initiative has created a development suite called Accessible Rich Internet Applications (WAI-ARIA) to help with accessible Ajax solutions. I’m really excited about ARIA’s possibilities, so I’ll spend some time exploring it as well.

Before we get into the specifics, let’s go back to the beginning, in early 2005, and examine Ajax’s humble beginnings. As described in Jesse James Garrett’s original article Ajax: A New Approach to Web Applications, Ajax isn’t a downloadable component, browser plugin, or desktop application add-on. It’s a term used to describe “several technologies, each flourishing in its own right, coming together in powerful new ways.” Originally, Ajax was shorthand for “Asynchronous JavaScript + XML”. Soon after, it became apparent that it doesn’t necessarily need to include XML.

Ajax includes a few key ingredients:

standards-based presentation (XHTML, CSS)
dynamic display and interaction (Document Object Model)
data interchange and manipulation (XML, XSLT)
asynchronous data retrieval (XMLHttpRequest, also called XHR)
JavaScript to bring everything together

It’s the fourth item, asynchronous data retrieval, that makes it truly unique and exciting. Here’s an easier way to think about it: “grabbing data from the server and displaying it on the web page without refreshing the browser.” It’s a more seamless approach to present content to the viewer since everything else in the browser window stays put while a small area updates per the viewer’s mouse click or key press. You may have experienced this before without knowing that it used Ajax. Some popular websites that include extensive use of Ajax include Google Maps, Flickr, and Gmail.

Using the less strict definition — not including the hidden round trip to the server — you may have seen things like accordion navigation, sortable tables, fading yellow highlights, and photo galleries. They don’t necessarily use Ajax, but I’m including them here since they’re so prevalent in web development today. I think you know what I mean… that ubiquitous “Web 2.0″ look and feel on many social networking sites (including the glossy, lickable buttons and child-friendly rounded corners).

I think that’s enough introduction on Ajax for now. In the next post we’ll take a closer look at some individual Ajax elements and how they can be used to enhance a website.

WordPress as a Multilingual CMS Using WPML

michael — Mon, 27 Jul 2009 23:20:37 +0000

I’ve been working on a site that requires both English and Spanish content. The user interface elements, such as the primary navigation, copyright statement, and form labels, need to be bilingual as well. The client needs the ability to update all of the content (and write new blog entries) themselves, so early on I decided to use WordPress. I’d read that WordPress can handle multilingual sites, but I wasn’t clear on how that worked exactly. Also, I don’t speak Spanish – which means I can’t provide my own translations – so I needed a solution for that as well. I considered using something like Google’s Language Tools for little things like labels, but I’ve always been suspicious about whether I’m using the preferred form of translated bits of text like “Search” and “Older Entries” and many others.

After much research and a few hours of experimentation, I decided to use a WordPress plugin called WPML by OnTheGoSystems, a small digital photography software development group located in Las Vegas. I was immediately impressed with the amount of documentation that’s available for WPML (which I believe simply stands for “WordPress Multilingual”). I especially like the Roadmap, Getting Started Guide, and a nice argument for using WordPress as a CMS.

After installing the plugin, I set English as the default language and added Spanish as an alternate. WPML can handle multiple languages on a single site (thus the name). The WPML site itself is available in several languages: English, Chinese, German, Japanese, and Spanish – all selectable from any page on the entire site. Did I mention I was impressed? After setting the site’s languages, I set how they would be displayed: 1) different languages in directories (http://domain.com/ - English, http://domain.com/es/ - Spanish), 2) a different domain per language, or 3) a language name added as a parameter (http://domain.com?lang=es - Spanish). In order to provide the site visitor a mechanism for choosing a language, a dropdown language switcher can be added with a single line of PHP code, inserted into the WordPress theme (). The language switcher can be customized using the Custom Language Switcher Guide.

The next step was perhaps the most interesting for me. It involves localizing the WordPress theme. In other words, all the strings of text, such as all the labels for the comment form, need to be translated and made available for WordPress (and the WPML plugin) to display dynamically upon request by the language switcher. This task involves several parts: 1) collecting the texts to be translated, 2) translating the texts, and 3) making the texts available to WordPress. That second part, translating the texts, involves creating a .po (or “Portable Object”) file for each translated language. Each string of text gets paired with its corresponding translation. Additional information is available on the WordPress Theme Localization page.

This multilingual site has been a wonderful project so far. Hopefully I can make it available soon for everyone to see. I’d definitely be interested in working on additional multilingual projects in the future.

Be sure to check out the WPML Blog for additional items of interest as well as news updates.

Site Launch: Life Content

michael — Thu, 23 Jul 2009 21:18:35 +0000

Once in a while a project comes along that makes you stop and think about how you’ve been doing things for a while. This project is like that. There’s nothing really revolutionary about it – a typical webzine created with WordPress and a few plugins – but it did provide some interesting opportunities to dive deeper into the inner workings of using WordPress as a CMS. The fantastic (and incredibly flexible) visual design was created by Mark at Reeves Design House. This was a truly collaborative effort where we both explored that fun question “what if we did it like this” from start to finish. I should also give thanks for a receptive client who was willing to let us explore a bit while we tried to figure things out as we went along. Such a rare and exciting environment for any designer/developer.

Here are a few of the WordPress plugins we’re using: Ad-minister, Advanced Search, Category Icons, and cforms II.

Take a look at the Life Content site. It’s in its infancy, as far as content goes, so be sure to check back often to see how it grows in the next few months. Subscribe to the RSS feed to track its progress in your favorite feed reader.

WordPress as a CMS

michael — Sat, 04 Jul 2009 22:25:10 +0000

I’ve been using WordPress for a little over a year now. Like most people, I’ve always thought of it as a simple blogging system… and that’s about it. It works really great for blogs (like this one), but a few months ago I used it to build a job listings site for one of my clients. Ever since that time I looked for additional creative uses for WordPress. Recently, I’ve been exploring the idea of using WordPress as a general purpose content management system (CMS). I’ve done a bunch of research, reading, and experimenting over the past few months. In this post I’d like to document some of my findings: sites of interest, handy documentation bookmarks, useful plugins, etc.

But before I get into the specifics, let’s back up and cover some basics…

What is a Content Management System (CMS)?

As stated on Wikipedia, a content management system is “a computer application used to manage work flow needed to collaboratively create, edit, review, index, search, publish and archive various kinds of digital media and electronic text.” In practical terms, a CMS gives content managers (representatives from a company often called “authors,” “editors,” and “contributors”) the ability to add and update a site’s content in an easy to use environment, typically using a visual editor instead of dealing with the code directly. It also provides a system of managing links, publishing dates, approvals, user feedback, and much more.

What does it mean to use WordPress as a CMS?

Don’t get me wrong… I don’t believe that WordPress is the best solution for all CMS projects. I think Drupal, Joomla, Plone, and several others are fine choices for complex database-driven sites. What I like about WordPress is its simplicity. Sometimes I need a quick and easy solution for building a site that can be managed by non-techie folks.

Basic Methods

Let’s take a look at some simple ways to use WordPress as a CMS. There’s an endless list of possibilities, but the following basic methods are the ones that I found most helpful when I was starting out. Please note that I’m linking directly to the original articles I read during my own learning process. I like to give credit where it’s due, but I’m also sharing some bookmarks in the process.

Read the Fine WordPress Documentation

Sometimes it’s best to slow down and read the actual documentation. I know… it’s not what you normally do. It may not even be something you enjoy doing. However, WordPress has some great resources, plus there’s an extremely active developer community to help out when things get a little confusing. Go ahead and give it a shot. Here are some good starting points.

Helpful Plugins

It’s difficult to compile a comprehensive list of plugins for WordPress. The following plugins should be a good start though, especially for using WordPress as a CMS. I’ve used most of them from time to time. I haven’t tried a few of them on production sites, but they’re worth noting for future reference.

Maintenance Mode/Landing Page: Adds a splash page to your blog that lets visitors know your blog is down for maintenance. It can also be used to develop a site directly on the live server while simultaneously displaying a “coming soon” landing page for non-logged in site visitors. Disable the plugin when you’re ready to go live.
WP-DB-Backup: WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.
WPML Multilingual CMS: WPML makes it easy to build full multilingual websites with WordPress. It integrates multilingual content management with robust navigation.
All in One SEO Pack: Optimizes your site for search engines. Despite its name, it doesn’t do everything for you automatically, but it does provide some useful control of your site’s SEO features.
ShareThis: The ShareThis WordPress plugin provides a simple way for users to add your post to many social bookmarking sites, or to send a link to your post via email, AIM, Facebook, Twitter and more.
cforms II: cforms is a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.
Advanced Search: Advanced Search provides a bunch of advanced search options to tune the search by using a much more effective search method: MySQL’s fulltext search. It can be either used as a full-blown form on a dedicated page or it can be used in the sidebar as a lightweight form.
Category Icons: Assigns icons to categories and displays one or more icons in front of your post title or wherever you want.
Search Everything: Search Everything increases the ability of the default WordPress search, including: search categories, tags, pages, and much more.
Breadcrumb NavXT: This plugin generates locational breadcrumb trails. These breadcrumb trails are highly customizable to suit the needs of just about any blog.
Dagon Design Sitemap Generator: This plugin is a true sitemap generator which is highly customizable from its own options page in the WordPress admin panel.
Google Analytics for WordPress: The Google Analytics for WordPress plugin automatically tracks and segments all outbound links from within posts, comment author links, links within comments, blogroll links and downloads.
FD Feedburner: This plugin redirects the main feed and optionally the comments feed to Feedburner.com. It does this seamlessly without the need to modify templates, setup new hidden feeds, modify .htaccess files, or asking users to migrate to a new feed.
TubePress: TubePress displays YouTube galleries in your posts, pages, and/or sidebar.
SlidePress: The SlidePress plugin makes publishing rich photo and video content a breeze. After helping create your SlideshowPro slideshow, SlidePress manages embedding the presentation within the posts or pages of your site.
NextGen Gallery: NextGEN Gallery is a full integrated image gallery plugin for WordPress with a Flash slideshow option.
del.icio.us for WordPress: del.icio.us for WordPress displays your latest del.icio.us bookmarks in your WordPress blog.
WP e-Commerce: The WP e-Commerce shopping cart plugin for WordPress is an elegant easy to use fully featured shopping cart application suitable for selling your products, services, and or fees online. WP e-Commerce is a Web 2.0 application designed with usability, aesthetics, and presentation in mind.
WP-Print: WP-Print provides a printer-friendly version of any blog post or page.
WP-Email: This plugin allows people to recommend/send your WordPress blog’s post/page to a friend.
WP-SWFObject: This plugin enable you to insert Flash movies into WordPress using the SWFObject library.

Site Launch: Atrium Biodiversity Information System

michael — Mon, 08 Jun 2009 17:21:59 +0000

For the past year or so I’ve had the pleasure of working with the great folks at the Botanical Research Institute of Texas (BRIT), based in Fort Worth, Texas. They’ve been building an online system to encourage sharing, collaboration, and publication in the biodiversity research community. In their own words, “Atrium is a technology platform for revolutionizing biodiversity information management by enabling researchers and organizations to share, synthesize, manage and publish biodiversity data in a collaborative, online environment. Atrium provides a broad range of tools for research organizations as well as an unparalleled, open-source framework based on industry standards which facilitates the development of powerful applications and tools for the biodiversity community.”

I worked with BRIT to improve the front-end code integrity, usability, and accessibility of the system. It’s an extremely complex system with over 325 PHP-based templates. It was a wonderful opportunity and I enjoyed every minute of my small contribution to the huge project. The majority of the site requires registration, but several sections are available to the general public. Take a look at the Atrium Biodiversity Information System.