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.

Here’s what I use. Feel free to copy it and do whatever you want, it’s GPL v2 licensed. (zip file)

• The Html5 Shiv (conditionally for IE, of course.)
• The CSS is Richard Clark’s HTML5 Reset Stylesheet, plus some stub styles like image / text replacement for the h1.
• Whatever jQuery UI 1.8 theme (if applicable.. most of my sites use jQuery UI, so I added it to my template.)
• Conditionally, an IE stylesheet. I go ahead and lump IE 6+ into one bucket. This could be broken out into several stylesheets (per IE version), but I’ve found that using the reset sheet generally limits the amount of IE fixes I have to do, so there’s not much wasted download time at all for IE users. If your stylesheet gets too heavy, break it out at your discretion.
• Several IE conditional statements to build IE wrapper divs to make styling easier. If you’re including styles by version, you probably don’t need this. Also has the added benefit of fast browser version checks with jQuery.
• Header with heading, subheading. The h1 is a link sometimes, using css image/text replacement. I went back and forth on whether the page title or the site title should be an h1- and chose an h1 based on arguments on this blog post.
• Seperate nav. I almost put it with header- but I like keeping the header more pure for the logo/title and subheading.
• A div to wrap all of the content, and then a “maincontent” div. I haven’t found better names yet, so here you go. They’re not section elements, like most of the content is in- the structure is there strictly for styling reasons.
• An example section. I like giving it an id with the page title, so I can add in page-specific styles as needed.
  • The section’s header, and content, as is reccomended
• An aside, styled as a right-hand column with subsections
• A footer, with links (probably the same as the main links), and copyright information. I’ve used an address element to wrap the webmaster’s email. Semantics!
• Finally, jQuery 1.4.2 and jQuery UI 1.8 pulled from offsite sources (parallelize downloads, plus it’s likely cached from another site)

So, the idea was to get about an hour or two’s work done by simply opening up a file. I think I’ve accomplished this- anything extra I can remove, I can switch the left and right columns pretty easily (or add a third, or fourth), and I have some very basic styles down (just change those grays to something a little more colorful.) Be free, my template!

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?)

http://code.jquery.com/jquery-1.4.2.js

http://code.jquery.com/jquery-1.4.2.min.js (not really “minified” as much as “closure compiled”… can we get a verb for that?) The changelog isn’t up yet, but that’s generally the last thing to go (and hey, we snuck in the back door to grab the update anyway, right?) I imagine it’ll eventually find it’s way to their API page for 1.4.2.  I ran a quick diff; here’s some changes that I found notable from jQuery 1.4.1 to 1.4.2:

• Optimizations for the body selector
• A few changes to how arrays of elements selected are built, I’ll go with my gut and say that they’re optimizations too
• Trimming whitespace from JSON data responses, for good ol’ IE
• A more few various bugfixy-looking things, mostly targeting IE
• It looks like there was a lot done to the event-adding code; I think mostly internal changes. Probably more optimizations? I’ll leave it to Resig or someone to explain whenever the changelog comes out. A few (generally pretty deep) methods had some parameters changed, or were renamed (things like “jQuery.event.special.submit.remove” becoming “jQuery.event.special.submit.teardown”)
• A smattering of changes within “live” and “die” mostly centering around the usage of namespaces
• Blackberry browser bugfix concerning converting NodeLists to arrays
• jQuery.getText changed to jQuery.text
• Changes to caching fragments to help out WebKit and IE 6

I haven’t really dug too deeply in the jQuery core before, so I’m not totally qualified to give a whole lot more detail than that. I used SourceGear Diffmerge between 1.4.1 and 1.4.2 to find out what I found out.

Also, in related (and perhaps more official news),  the jQuery UI team released jQuery UI 1.8rc2 – which includes bugfixes in the already pretty stable 1.8rc1 (changelog). You can grab it:

http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc2.zip (development bundle)

http://labs.crimsondeviations.com/jquery-ui-1.8rc2-min.js (I threw it into a closure compiler, it seems the dev package doesn’t include a “minified” version.)

As of right now, I’m testing it in our application at MeM. Let’s see how things go!

I’ve always, for some reason, felt innately that PHP allowed me more control over my code than ASP.NET. My brain kept saying “but .NET is more organized! It compiles! It’s faster! It’s easier to write,” but my mind kept saying “PHP lets me do what I want how I want it… screw .NET!”

What I finally figured out was that I love C#, I even like the .NET framework, but I hate is, in fact, ASP.NET.

Every time I see an example of simple, elegant code, the most complex control on the page is a label or a panel. While the intentions behind FormView may be good, writing my own forms and hooking them up saves hundreds of lines (literally- I just refactored almost 800 lines of code into 150 by removing a formview) as well as reduces complexity and maintenance (now I no longer have to maintain view and edit and whatever other modes FormView has.) ASP.NET perhaps made sense in a day before OO principles and ORMs came into play; the controls were written for the same kind of people that use the drag-and-drop design mode. Easy to slap down haphazardly, not so easy to maintain.

We replaced every ASP.NET Ajax control we used anywhere (after I evangelized it, to my chagrin) with jQuery after about 6 months of use; while the controls did what we needed on the surface, underneath there was always some caveat, like the linked DropDowns needed web services, or the datepicker control had missing options… there was always something somewhere that I needed a bit of flexibility on that just wasn’t there, or was buggy. It seemed very odd for it to be out of beta in such a state. So, I ended up starting my own control library using jQuery, and now it’s easily extensible, easy to modify from the client, and I can control the markup.

Oh, and the markup… don’t get me started on the markup. Tables for everything. I can’t rearrange the otherwise useful Wizard control because it’s so static in its display.

So, I guess the point I’m trying to make is, that the longer I use .NET, the less and less I use the complex controls and the more I roll my own. Because it’s easier.
Kind of ironic.