NCAA Football Road to Glory

NCAA Football Road to Glory

  • graphic, layout design
  • XHTML/CSS coding
  • WordPress-theme creation
  • jQuery-plugin integration
  • WordPress-plugin integration
  • W3C-validation (HTML 5, CSS 2.1)
  • cross-browser testing (Chrome, Firefox, Internet Explorer 7+, Opera, Safari)

NCAA Road to Glory site

Notes

This hobby project is an overhaul of a WordPress site that I’d done last year. Besides making the theme better-looking and more user-friendly, I’ve made publishing content more convenient. I’ve had to duplicate the previous site entry-by-entry, but posting entries has been less time-consuming for the newer site. Better still, I can re-use this template for similar hobby projects.

Slider, Colorbox

The entries, where applicable, use the Nivo Slider and Colorbox plugins for the jQuery framework. The Colorbox plugin uses some of the new YouTube embedded-player parameters; more specifically, I use parameters that affect the embedded player’s border colour and auto-play.

NCAA Football Road to Glory, slider

NCAA Football Road to Glory, colorbox

Custom Fields, WordPress Functions

Most of the entries have the same type of content. So, I’ve used WordPress custom fields to take the entry-specific values for various components of a typical entry. These aspects are the number of photos in the entry’s slideshow, the shared filename-prefix of the photos in said slideshow, the labels for any ColorBox links, and the unique IDs of the YouTube videos that play from said ColorBox links. Another entry-specific custom field that I use is the entry’s preview image, if applicable.

The HTML code for the Nivo Slider and ColorBox windows is placed within the theme’s relevant template files. I’ve written PHP functions based on the the_meta() function to process the custom-field values and display them accordingly. This method is a lot more efficient than copying and pasting chunks of HTML code into each page or post entry.

Grid Pages

The archive and search-results pages are based on the ever-useful 960-pixel grid concept. For the archive/category pages, the Custom Query String plugin by Matt Read is used to show all posts in the category and in chronological order. The preview images are custom-field values as mentioned.

NCAA Football Road to Glory, grid

Typography

I’ve spent time studying the classic principles of typography. For this site, I’ve used font-sizes based on the classic scale to create an obvious visual hierarchy, which helps to direct the user’s scanning flow. The measure of the text column, ie the number of characters per line, is mainly dictated by the 640×360 width of the photos. Despite their narrow width, the entries are still readable and, in my view, resemble the layout of a newspaper.

Vertical rhythm is an overlooked aspect of web design. Basically, it involves making text conform to invisible, horizontal lines that are uniformly spaced apart from each other. Imagine a lined sheet of paper with handwriting that doesn’t overlap any of the lines, except where the handwriting is larger than the vertical spacing.

Achieving vertical-rhythm requires a lot calculating, but it’s rewarding. The height of HTML elements and the vertical distances among them need to be multiples of your chosen line-height. Assuming that you’re using non-pixel units, every different font size needs to have a calculated line-height that is the non-pixel equivalent to the universal line-height. The same is true for the top- and bottom-margins of each font-size.

NCAA Football Road to Glory, vertical rhythm

Usability

Clickable elements should stand out from non-clickable elements. Furthermore, elements that behave the same way should look the same way, and vice versa. You’d be surprised by how many designers ignore these principles.

For this site, all text links are enclosed in a box and have the same bold, small-caps typeface. If the text is in a blue box, then the link leads a new page. If the text is in a yellow box, then the link leads to content that shows in the current page. This styling consistency makes the site user-friendly because it classically conditions the user and then reinforces his/her conditioning. In other words, the consistency allows the user to form expectations, based on appearance, of how certain elements behave. The user has a positive experience because this predictability is maintained throughout the site.

NCAA Football Road to Glory, clickable elements

Tables

The tables have alternating styles among the rows. The shaded backgrounds of every other row within a table make the entire table more readable.

NCAA Football Road to Glory, table rows

Photos

NCAA Football 10 lets the player take screenshots within the games. Honestly, I’ve had fun pretending to be a sports photographer.

NCAA Football Road to Glory, photos

Comments are closed.