skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

New Websites and Where to Start

May 17th, 2010 by Erick Beck

Last week we mentioned to Brand Council that we are beginning to look at retooling the university website.  Kendra and several others responded that they would also be starting redesigns soon and asked that we post some of our research regarding browser sizes, best practices, and such.

First of all, read through the Web Style Guide on this site.  We put this together as part of the redesign we did on the www.tamu.edu site a few years ago, and most of it is still valid. Also take advantage of the Brand Guide, local copies of the HTML and CSS validators, and the web accessibility website.

Page Layout

From a purely philosophical standpoint fluid or elastic layouts are preferable to static, fixed-width, designs. That being said, fixed-width is easier both to code and to design. We were stubborn with the last design and created a relative-width page out of principle, but I’ve never been happy with that floating square next to the Flash spotlight. This time we are going to bite the bullet and go back to a fixed-width layout so that we don’t get that random padding.

Page Width

Since we are decided on fixed width, the next question was to decide on what width to use. As conservative as I am on these matters, even I will concede that the days of coding to 600×800 are over. Our analytics show that the most common resolution is 1280×800, but with 1024×768 still making up 20% of the traffic. We are therefore taking that as our base, minus a bit to account for padding and the scroll bar.

HTML Specification

We will be using xhtml 1.0 strict for our templates. I like the clean formatting that the strict specification forces upon developers. It makes for better, more valid, and more accessible code. HTML 4 is in my opinion too old and leads to too sloppy of a code to be adequate. While I am excited about the semantic structure that HTML 5 promises, it is still several years from being a viable alternative. Running a comparison of current browsers, only Safari and Chrome even come close to supporting the full set of features, and IE 8 is miserable (http://html5test.com/)

Cascading Style Sheets

It should be a given by now that page layout should be done in CSS and not by HTML tables. I still see sites introduced on campus every day, though, that ignore this rule. All modern browsers support CSS 2 pretty well, even IE-7/8 if you allow for conditional comments and a few hacks. Browser support for CSS 3 isn’t complete, but is growing quickly. Most of the elements in CSS 3 are also what I would call aesthetic enhancements rather than layout elements, so you can easily add them into your site if you want and they will degrade relatively gracefully on browsers that don’t support them.

Browser Version
I’ve previously written about browser support. Not much has changed except for the usage numbers for each browser version. IE 6 is currently down to about 7% of users. We will continue to offer only limited support, making sure that content is visible but making no guarantee that the site looks or behaves the same as with modern browsers. IE 7 is generally supportable with conditional comments and CSS hacks, and since it still makes up 30% of users we do need to offer better support for it.

Use of Flash

The slide show feature is too popular among designers to completely eliminate. That being said, we need to therefore look at the best way of building the feature. Flash is evil. I fought hard to keep it off the current site but lost. (Note, this does not conflict with my assertion that the iPhone/iPad is fundamentally broken as an Internet device because it does not support Flash. As unfortunate as it may be, Flash is simply too pervasive for a platform not to support it.) As mentioned above, HTML 5 is not ready for general purpose sites, so that is not an option. Fortunately jQuery and other tools have blossomed in the last couple of years to the point that they can fill the need. For every Flash slide show application that you can find on the Internet there is a complimentary javascript option. The benefit of this method is that is much more friendly to accessibly enhancement technologies such as screen readers. Yes, and iPhone/iPad owners can see it as well.

Navigation

Traditional left-column navigation is still the norm, but design is getting more sophisticated and navigation is being better integrated into the site. The one thing I will say – DO NOT try to get fancy and make your navigation out of Flash or any sort of javascript function. You’re just asking for your entire site to break if every viewer doesn’t have whatever technology you built it in. Never assume that anything is 100% pervasive besides plain ol’ HTML.

File Sizes

Hardly anyone accesses the web over dialup modems today, so we don’t have to be as draconian as we used to be on file sizes. Nevertheless, creating a page with 100KB of javascript plus another 50 images plus all your HTML is probably overkill as well. Pick your battles in standing up for doing it right, but know that you can compromise on bigger things than we’ve been able to do in the past.

Site Audience

As always, know your audience and design your site with them in mind. What is important for an incoming freshman and what is important for a current faculty member are often quite far apart. The primary audience for the university website is decidedly external, mainly potential students and parents. We have already started tailoring content on the current site to meet those expectations, but the new site will go much further in that direction.

News and Events

News and events will continue to be a big part of the university front page. We actively encourage the various university offices to submit information. We do, however, only accept it in specific manners. In order to get news stories on the front page, simply provide us with a valid RSS feed. We can then add those into the system and select articles for inclusion. For events, we only add events from the university calendar. Any campus organization is free to set up a departmental calendar in the system and submit events. If you do not have one please contact us at webmaster@tamu.edu and we’ll get you set up.

Templates

We do not, and will not mandate a central template for all of campus. I’m probably butchering the wording, but popular usability expert Jared Spool argues that there is no evidence that using templates does anything besides make your pages look the same. In other words, the concept of conformity is vastly overrated. We instead encourage you to build to the “Aggie Family” of page looks.

Mobile

Without a doubt, mobile is the wave of the future. Right now we don’t get a lot of traffic to www.tamu.edu from mobile devices, but it admittedly isn’t very mobile friendly. We have had several people ask about mobile sites, so it is important to include here. On principle, I’m not going to revert back to the days of the browser wars where we sniff for every device and throw a different template. We have therefore made a conscious decision to keep the content of our mobile site separate and distinct from that of www.tamu.edu. We look at what services someone on a mobile device might want, and it is generally different from somebody sitting down at a desktop computer. So what then of the main site? How do we make it friendlier for mobile viewing if that is what they want to see? A 950px wide fixed width page presents problems on a phone. Ideally we could have a separate site backed by a CMS that would let us keep the same content in two different looks. We don’t have such a solution, though, so we need to look at more realistic solutions. For the time being that simply means making sure to produce clean HTML that wraps gracefully and avoiding technologies not accessible through phones. John and I are hoping to present on mobile this summer, I’ll post more details and suggestions here once we get our thoughts together for that.

That’s more than enough for now, but to do justice you could easily write a book on the matter. If you think of anything else you’d like to see addressed add it as a comment here, and I’ll do the same.

Tags: , ,

Monday, May 17th, 2010 Style Guide, www.tamu.edu
Share this article

2 Comments to New Websites and Where to Start

  1. Alright one more question has came up already – Microformats. I’ve written about how we’ve used them before (http://webmaster.tamu.edu/2008/10/14/microformats-are-mighty-big/) but we have never followed up in any great detail.

    This is actually a troublesome topic because they have become popular, but strictly speaking they misuse HTML tags. HTML5 might solve the problem, but as mentioned it’s a ways away. In general microformats like hcard are fine as they are well formed spans and divs. Others like hcalendar, though, are non-semantic in that they use HTML tags to hold content for which they were not designed (for example using to contain date information.) Also, since browser support has lagged, their usefulness is somewhat limited.

    We therefore encourage the use of microformats where they make sense, but will be selective in where we push for their use.

  2. Erick on May 17th, 2010
  3. […] New Websites and Where to Start | Aggie Webmasters (tags: webstyleguide webstrategy) […]

  4. links for 2010-05-28 « innovations in higher education on May 28th, 2010

Leave a comment

Categories

Archives