skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

design

CSS3: A Revolution in the Making

It isn’t often that I radically change my opinion about anything web related.  I’ve been doing this for so long that I’ve always been able to adapt and adopt new concepts incrementally.  That mindset was completely shattered this week when I finally took a real in-depth look at the cutting edge of CSS3.

I have been watching its development for a while, but never paid it serious attention because without standardized browser support I knew it wouldn’t be anything we could implement.  Maintaining the main university site means making it accessible to the masses, which in turn means coding to a quite low common denominator.  The nature of the sites we work on precludes us from using all the bells and whistles that can be put onto a site catering to a more sophisticated user base.  Most of my thoughts of CSS3 were therefore that it was basically nice, but mostly aesthetic, improvements that could be incorporated into sites — visible to the more advanced browsers and gracefully degrading on browsers that don’t support the technology.  This philosophy is nicely summed up by the webmasters from Wayne State University.

What I’ve seen in the last few days, though, convinces me that I was vastly underestimating the importance of the HTML5/CSS3 combination.  While it admittedly isn’t here yet, I’m now firmly convinced that it will make modern web development (and developers if we don’t learn and adapt) obsolete.   The introduction of CSS2 was problematic to a lot of developers because it forced a break from our traditional linear chain of thinking and implementation.  CSS3 is going to go way past that. Even imagining what can be done with the technology is going to require a new way of thinking, and to be among the leaders that thinking will have to be way outside the box.

As a quick demonstration, take a look at some of the online demos at the WebDesignerWall blog.  (You’ll need Safari or Chrome to get the full effects.)  These are admittedly isolated demos that serve as proofs of concept rather than elements for a live website, but they show that base HTML/CSS can take the place of a lot of the jquery that is seen as leading edge today.  The line between application design and web design is going to get even more blurred as we are able to do more and more with basic styling.  The gap between designers and developers is also going to narrow, as both are going to have to have an increased understanding of the other’s area of expertise in order to do their own job.

Maybe I’m late to the party in this realization, but when I look at the state of so much web development today that barely scratches the surface of CSS2, I can’t help but think that a lot of developers are going to be in for a rude awakening.  It might take a few more years, but we are going to experience a complete paradigm shift, and we need to start getting ready for it now.

Tags: ,

Tuesday, June 8th, 2010 CSS No Comments

New Websites and Where to Start

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 2 Comments

Website design must equal website strategy

Recent studies on the use of university websites by prospective students are causing us as website administrators to rethink our websites, the goals we have for them, and the process we go through in posting them.  All of us tend to have a 2-4 year cycle that we go through, after which we judge our website “old” and therefore due for a redesign.  Too often this redesign means just updating the templates and maybe <gasp> retooling the site navigation just a little.  Not a lot though, we all know we have to have those same generic audience-based links at the top of the page.  Unfortunately, while we might spend a year or more on this process, in the past little attention was usually paid to content.  In all too many cases the new template was simply buckled onto the old content, without even a basic sweep being done for stale links.

This changed somewhat as the web became a more important tool that more people were using.  The shift from getting information in paper catalogs to getting it on the web is long past.  Most of us have recognized this and placed a renewed emphasis on making sure we have the most up to date content (“stale, incorrect, content is worse than no content!”) and have even thought deeply about making sure all the content a prospective student, who most web offices will now tell you is their primary audience, might want to know is front-loaded and easy to find.

But is our design process actually producing something that this group actually cares about? Did anybody even ask how our primary audience might be using the site?

One recent university site redesign puts thing in a slightly new light:

Aha moment?
I had a big one during the planning phase. We held some focus groups with students where were trying to understand what they want and need most from their university web site. I learned that students don’t primarily view web sites as a place to get information, but rather as a destination to get things done. Their expectations of what they should be able to do on a university web site are extremely high. It goes beyond their desire for it to look good and be consistent in its navigation.     [emphasis mine]

http://www.mstonerblog.com/index.php/blog/comments/524/proust_questionnaire_nancy_prater_ball_state_university/

This observation has been more and more often repeated in the conferences I have attended.  Design, navigation, and usefull information are important, but they are not enough.  Incoming students are looking for a seamless experience where they can go online, get the information they need — say for qualifying for a scholarship — and then be able to apply that information all in one trip. This means websites can no longer be simple information silos; they must instead exist in a truly interconnected web of online resources.

This type of cohesion is difficult in small schools where there is a unified control over the web presence.  How will we manage with the size and decentralization that we experience here at Texas A&M?  Cooperation, I think, must be the key.  More thoughts on how that might be accomplished in later posts.

Tags: , ,

Wednesday, December 9th, 2009 Future Projects, www.tamu.edu 3 Comments

Categories

Archives