(Back to beginning of series)

Part 3: Site Architecture Design

Now that I had the majority of the HTML and CSS down, I had more to figure out about how to implement the various features (like image gallery, news,and mailing list). Should I write my own, or should I use existing tools? What language should I use? What database system? Which pages should be static, which dynamic? The process of building he site was all about efficiency: getting the most done, using the best tools, in the least amount of time. That would allow me to focus as much time as possible in my before my deadline towards the things that will make a difference: site design, usability, and the the use of the features on the site.

I came with the conclusion that I could, and should, develop most of the data management using external tools. Spending time re-inventing the wheel and rebuilding tools that already have dedicated teams would be wasteful, especially when they all had some sort of hook (mostly RSS feeds) that I could just pull into the site. I was familiar with all the 3rd party tools I needed, so I was already comfortable with using them and knew they had the features that I needed. I came up with:

• Google Apps for email and calendar
  • Here’s a good tutorial. It was a little messy at first, but it gives you an iframe (the only standards-breaking thing on the site… thanks, Goog) that you can just drop in.
• Picasa for photo gallery
  • I chose Picasa for a few reasons, the largest of which was the integration of the Google Apps account. While there’s no “Picasa” section of Google Apps, I could use the account I set up to minimize the logins I’m using, now that I’m using four tools. I used the RSS feed to export to the image gallery and to make an image gallery  RSS link on the home page.
• WordPress for dynamic pages and news
  • The reason I used WordPress, and I didn’t just slap together my own editor, was the WCM Page Feeder plugin. It allows you to serve individual WordPress pages as an RSS feed. This means that I could use WP’s superior news-serving tools along with their page editing tools with very simple integration. I also added an RSS link to the home page, for news.
• Pommo for mailing list management
  • I tried out a few tools, and found this to be the easiest to set up. Makes adding an email form pretty simple, manages everything for me. Another several hours saved to these guys. Here’s some credit

I also used a couple 3rd party PHP Libraries so that I could hook all of this lovliness together:

• Simplepie RSS Reader
  • Note: I had to switch my WordPress RSS feeds over to Atom, even though SP claims it can read the RSS 2.0 standard. This was a simple checkbox in the “Writing” section of the WordPress settings.
• phpmailer for mail functions
  • A little messy to set up to go through Google Apps mail. I had to set these settings in class.phpmailer.php in order to connect without errors. Once you have this part right, though, you’re good to go. I’ll go into more detail about this in the next article.

Once all of these tools were in place, it was a simple matter of dumping their content, using Simplepie, into my template. I’ll talk about the actual hooking up of everything, and setting up the custom code I did write, in the next article.

Part 2: Site UI Design / HTML Structure

When I first picked up the project, I had a few things to consider: what requirements do I have, and once I had those, how would I display these feature in a neat manner, and what technologies would I use to implement them. The requirements part came out pretty easily, after a couple of phone conversations:

• Calendar of events
• Photo Gallery
• News section
• A few generic pages
• Email mailing list
• Misc. vital information (times open, address, that sort of thing)

And now I needed to put together some kind of design. I had recently finished reading a few usability books, so I was feeling pretty good about putting some of these ideas to work. I knew that people coming to the website were probably going for directions, a phone number, or hours of operation, so I put high priority on these being visible and easy to use (such as a Google Maps link for the address). I also wanted to entice people to explore other areas, so I added some photos from the photo gallery towards the top of the page. Finally, I included elements from all the page- just little teasers- across the front page, such as a small calendar of events, news block, and a blurb and picture about their restaurant. Now, I had a home page with all the information a user needs, quickly and at the top, while encouraging visitors to browse a little and check out the gallery and other pages for even more information.

With this sketched out on paper, it was time to actually write out the HTML. I came up with a structure similar to my HTML5 Template (and in fact, it’s what I based my template off of.) I wanted to use the new semantic HTML5 elements and attributes, such as example text on textboxes:

<input type="text" name="Email" id="email" maxlength="60" placeholder="email@youraddress.com" />

I used the help of a jQuery Watermark plugin to help style the textboxes as well, since few browsers actually pay attention to the placeholder attribute yet. Further HTML5 inclusions were sections for the individual blocks of text, an aside for the side column, header, footer, and nav elements. Besides the HTML5, I also implemented a link tag for the news RSS feed:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.waterfordfamilybowl.com/wordpress/index.php/feed/" />

This allows browsers and whatever happens to crawl your site to say “hey, there’s an RSS feed here” and allow users to easily pick up the news RSS feed. You’ll notice it in FireFox, IE, and Chrome if you have an extension installed.

Waterford Family Bowl website (www.waterfordfamilybowl.com)

A little while ago, my aunt approached me- she needed a website for her bowling alley. “Sure,” I said. “Let’s go over what you want and we’ll build something that works for you.”  In the back of my mind, I was thinking “awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?”

The site’s now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com (still waiting on a little alternate content ). I’m going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, WordPress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like “The Design of Everyday Things” and “Don’t Make Me Think”, and I’ll explain how and where these came into play.   The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

1. Intro to series
2. Design - architecturally and graphically
3. Implementation of WordPress, Picasa, etc.
4. “Contact Us”, finishing touches
5. Google Analytics and Google Webmaster Tools overviews
6. Wrap-up (maybe?)

More Google loving! This time, it’s a plugin for Firebug (the best tool in the world for developers- get it now) that Google created, called Page Speed. Here’s the breakdown, and here’s why it rocks.
Page Speed analyzes your code, running the same checks that Google uses for their own sites- checking for things like unoptimized images, un-gzipped code, slow CSS, uncompressed Javascript, and more; and then it delivers you a neat little report, which you can then use as a checklist of things to fix. Page Speed allowed me to cut over half a meg from the page requests from one of the projects I was working on; kind of a big deal. Even if you think your application is amazing, there’s a small chance that a quick 20-second test can tell you something that’ll save you bandwidth, and by extension, money. Saving money is good, and saving your visitors time and bandwidth is great.
Check it out, and revel in the awesomeness.

(skip down a little further if you don’t need an introduction to Google Analytics.)

I love Google Analytics. In fact, I’m a big fan of Google as a whole, and I do the majority of my work using Google Docs, Calendar, and Gmail (online collaboration! oh, and free) and Google Analytics is a beautiful tool for businesses, whether their website‘s primary focus is online sales or just a small info-about-my-business site. If you don’t have some kind of tracking, you’re missing out on very important information; GA is a good place to start. Anybody can put GA into their website, and everybody should put something in.

The way GA works is by dropping a snippet of Javascript into your page; this javascript runs a series of tests against the visitor’s browser, checking screen resolution, flash capabilities, seeing if the user is unique, watching the user’s path through the website, checking the user’s location, and much, much more (all collected anonymously). This is all put into an interface where you can see the data collected and organized. However, AJAX applications don’t function as normal websites- you don’t get a new page hit every time you fire off an UpdatePanel, because it’s not a full page refresh. So, we need to do a little trickery to get things to work the way we want them to.

(you can start reading again if you skipped earlier.)

If you have the Google Analytics in the host page (whether the aspx page, or more likely, the master page), then you have to register a client script block that calls the trackpageview method. If you use jQuery, it’ll look something like:

ScriptManager.RegisterClientScriptBlock(UpdatePanelID, typeof(UpdatePanel), "uniqueIdentifierString", "$(document).ready(function(){ pageTracker._trackPageview('/pagename'); });", true);

If you’re not using jQuery, you’ll have to do a little more work to attach to the window’s onload event, but it’s pretty similar.
What you’re doing is registering a script block to execute when the UpdatePanel updates (because it won’t execute JS returned in the text), and using the pageTracker object (that the GA code you copied when you first set up GA on your site created) to force a pageview for a page you define. For my applications, I generally use something like “/dataentry/guestbook/edit” or “/dataentry/guestbook/delete” so that I can easily track guestbook views, as well as edits / deletes. It’s both a way to track controls you load via AJAX, and a cheap shot at logging (not perfect data, though, so you’re still best off doing all of your own logging on events, of course.)

The official Google help doc on the subject is also here: http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55519