Tags filed under ‘css’
I’m pleased to announce that another of my long-term projects has launched: the latest redesign of the University of Texas School of Law website. This was the first major refactoring of the information architecture, HTML, and user interface of the site since 2003, and is a significant departure from the visual refresh of 2005. (My other major project was the new UT Law Events Calendar, which launched on the same day — it’s been a busy summer!)
The UT Law site holds anywhere between 3500-6000 pages (depending on how you want to define a “page”) spread amongst dozens of departments and organizations, with very little of the content in a CMS of any kind, and it’s accompanied by a dozen or more in-house custom applications written in three or four different programming languages, so this major change to the code was quite an undertaking. After consulting with our stakeholders, conducting some user testing, and evaluating other top-tier sites, I began the redesign with the intention that we’d need a great foundation to build off of, while retaining enough visual familiarity to the old site to not confuse our users needlessly.
Highlights for this project:
- Brand new HTML5-based templates using clean, semantic markup with hooks for a flexible (but optional) grid-based CSS layout system
- Completely redeveloped visual design, color scheme, and branding, with improved typography and layout
- Newly designed universal UT Law header and footer, improving usability while taking up less vertical real estate
- Standardized look-and-feel for internal law school departments and organizations, along with cleaner information architecture (many URLs have been shortened considerably)
- Easier navigation through simplified, consolidated landing pages
- Google Custom Search Engine integration available across the entire site, letting users search without leaving the UT Law site
- Google Analytics’ new asynchronous code now site-wide, including subdomains, with dual tracking to forward stats on to the main campus Development office
- Lighter HTML, smarter handling of cacheable resources, and browser throughput performance tricks give end users much snappier page load times (who loves image spriting? I do!)
- Universal use of UTF-8 for better foreign language and other specialty character encoding support
Much work remains, however: the content across the site is currently being reevaluated as part of this project, and we will be working hand-in-hand with each department to ensure that the offerings are up-to-date, relevant, better organized, and more media-rich (where appropriate). Also, the homepage is a temporary placeholder while we work with our communications office to develop new material and focus this Fall semester.
Many thanks go out to my supervisor Mark Gunn, teammates Austin Kleon, John Croslin, Brian Borowicz, and awesome student worker Laura Davila for helping with the porting and making sure that everything looked as snazzy as possible for the launch date!
For the past six months my co-worker John Croslin and I have been hammering away at this project, and it’s finally launched: the new University of Texas School of Law Events Calendar. After comparing many popular (and not-so-popular) open source and commercial calendaring projects, it was determined that none of them fully met UT Law’s specific needs and infrastructure, so we tried to figure out which features worked best in each, and started from scratch.
On the surface, the public view has all of the trappings of a fairly generic calendar (grid + list views, date-based navigation, multiple “calendars”, iCalendar downloads), but behind the scenes there’s a fairly impressive feature set. A quick list of what’s going on:
- Entire system designed and built from the ground up, using cross-browser-friendly HTML, CSS, and a dash of jQuery
- Object-oriented PHP with an Oracle backend (which is what we’re running now, but it could be modified easily to use MySQL or PostgreSQL instead)
- Custom workflow routing that hooks into our faculty / staff / student directories and makes efficient use of our special events and media services departments’ resources (if an event requires catering the system notifies our Special Events department for approval, student-submitted events are first screened by the Student Affairs Office, etc.)
- Recurring events are possible with more flexibility than what’s found in Outlook: you can edit most of an event’s details without requiring the removal of the whole series, and you can choose whether changes affect only the single occurrence, if changes ripple forward, or if the changes ripple to all sibling events in the series
- Integration with our Exchange server via Exchange Web Services to provide room availability (free/tentative/busy) info to users when creating new events, to help with room selection
- “Pretty” permalinks that are navigable for all calendar views (for example /calendar/today/ lists the current day’s events, /calendar/2010/08/ displays August, 2010, in a monthly grid view, /calendar/2010/08/faculty-events/ narrows that further to faculty-specific events, etc., and using the date navigation controls doesn’t kick users out of the specific view)
- Coming real soon: iCal/RSS feeds, embeddable calendar widgets, better Exchange integration, mobile views, and more
One week in, it’s already shaping up to be a very useful resource for our users. We might have the code available as an open source download at some point, especially if there’s interest in adapting or extending it. If you’re looking for something right now, you might be interested in the great work being done with UNL Events Publisher and Bedework, two open source projects I took inspiration from. Otherwise, feel free to take a look at what’s happening at UT Law!
Freshened up my personal blog and portfolio site for 2009. While similar to the transitional look and content that you’ve seen for the past couple of years, this theme has been hand re-written from scratch and features many advancements over the old style. The entire site is better integrated through WordPress than ever before using features newly available in WP 2.7.1 (gravatars, per-post styles, threaded comments, etc), a handful of customized plugins, subtle jQuery enhancements, and Subversion to tie it all together on the backend. I’ve also moved to a new domain after about ten years of being at asnorwood.com. All of the old links should still point to the right place (or get you pretty close), but let me know if you find something missing.
The bulk of the improvements are behind-the-scenes, but I can at least say that the following changes make my life easier and me happier:
- Uploading new portfolio work is much more straightforward.
No more need for a separate gallery plugin!
- The category and link organization is more sensible! Tags, too!
- Better error-handling — hopefully you won’t end up 404 Not Found, but you at
least have a sporting chance of getting unstuck now!
- The search engine optimization (I hate that term) seems to be working
already, too. Thanks, Google!
- The search form pulls up better, more accurate results!
All of this tech stuff is secondary, of course, and I’m still trying to decide how best to balance the blog entries between my different interests. Maybe I’ll eventually split off into two or more distinct sites to keep things from rambling together. I’d also like to figure out a better way to incorporate the side-channel links (currently I’m using del.icio.us) and scrap-collecting elements (I love Tumblr for gathering quotes and other detritus, but not sure how best to tie that content in with my main site). Being nearly the fifteenth anniversary of my first website, you’d think I’d have this all figured out by now!
What do you think? What would you change?
Today sees a new homepage for the University of Texas School of Law. This iteration is more of a realign than a redesign as the decision was made to keep our interior pages intact while we continue a long-term look at our branding and online presence. The biggest design challenge was creating something cleaner and more useful for our visitors while retaining most of the same content and enough of the previous design to tie it in comfortably with our current site’s look-and-feel.
The new version emphasizes our communication pieces, changing the rotating banner graphic into something more dynamic: the accompanying text is now HTML-based and will link to richer features similar to our Clinical Education stories. Our previous 75×75 pixel highlight buttons (which themselves were reduced from the intricate 200×140 highlight graphics of two years ago) have been folded into our general News list to help simplify the page. The navigational links were dramatically reorganized to make the hierarchy clearer and more contextual. Everything’s still there, it’s just been reshuffled.
Make it pretty
The goal aesthetically was to reduce the homepage’s clutter and to make the information presented more visually balanced. I designed the old homepage, so I’m to blame! To accommodate the larger banner graphic I increased the width of the site to 840 pixels, and then subdivided that width into a five-column layout. The typography is much more consistent, and care was taken to align the text vertically on a baseline grid. The colors are lifted from the previous version but greatly toned down — far less orange, no more crazy orange-stripe-gradient thing, and a nice white background with some subtle color at the top. Still feels like UT, but doesn’t scream it, and the new design continues to match our internal pages.
Behind the scenes
I’ve shifted the site from Transitional to XHTML 1.0 Strict and have made greater use of XML for the maintenance of the feature stories and news items. The layout and typography are all still handled with plain CSS: if you strip away the stylesheet, you’ll find that the homepage is semantic, streamlined, and very navigable with screenreaders or other assistive technologies. Text can be adjusted in the browser to just about any size without breaking the layout. We’re also sporting a bit of hCard markup so that folks can easily scrape our contact and location info into more useful formats.
Hopefully the refresh is just what we need to help carry us along until the sitewide redesign. I think the updated technology and cleaner look will do a lot for us, and it should help increase our visibility as one of the top-ranked law schools. If you have any comments about the design or about site refreshes, I’d love to hear them.
“If the swift moment I entreat:
Tarry a while! You are so fair!
Then forge the shackles to my feet,
Then I will gladly perish there!
Then let them toll the passing-bell,
Then of your servitude be free,
The clock may stop, its hands fall still,
And time be over then for me!”
— “Faust,” Norton Critical Edition, lines 1699 – 1706
The above lines are from Goethe’s story about the scholar Dr. Faust and his famous bargain. The scholar promises his soul to the devil in exchange for earthly knowledge and power, on the condition that his life will be forfeit only when he experiences a moment that he wishes would persist. What does this have to do with Internet Explorer 8? It’s a tortured and overblown metaphor to be sure, but for some reason this week’s developments in the world of web development reminded me of this fable.
If you haven’t already, start off with this article from A List Apart and perhaps move along to Eric Meyer’s analysis of the news. These articles appeared almost simultaneously with a post on the IEBlog about the scheme. To grossly summarize, the IE team has worked out a deal with some of the major players in the web standards scene and representatives of the browser makers to introduce a new <meta> tag allowing developers to target specific browser implementations. They argue that this move will help prevent complaints of new browser versions “breaking the web” when they are released to the public.
This news seems to have come as quite a surprise, with heated discussion (mostly negative as far as I can tell, and at times sadly mean-spirited) breaking out in the usual forums. Molly Holzschlag provides the most level-headed analysis I’ve read so far, and alludes to the secretive, NDA-protected discussions that led up to this decision. Even Ars Technica and El Reg have weighed in on the issue.
The contemptible part of the new specification is that it’s designed to allow sites to lock into a current implementation, and Microsoft has made the decision that the default rendering engine for pages lacking this meta tag will be IE7 (not IE8, the browser that’s introducing this feature, or the more sensible default of “latest version”!). The implications of this are that future versions of IE (and other major browsers?) will contain emulation code allowing it to switch back to a previous engine at will so that sites will always look and act the same as the designer intended, quirks and all. If you have IE10 and look at a page lacking the proper meta tag, it will use IE7 to display the page. I guess that means IE8 won’t pass the Acid2 test by default? What does that even mean?
In my humble, semi-educated opinion, this could be a major setback to the web standards movement and to the speedier development of better web technologies (and things already move at a glacial pace in the web world). We’ve been taught for years that the road to enlightenment was paved with progressive enhancement and future-proofing, and this goes against that grain. I find the idea disquieting too for its other more pragmatic implications — how will this actually be implementable? I was relieved to find in a post by Robert O’Callahan, a coder who works on Firefox, that he was puzzled by many of the same questions I was having. Won’t this increase dramatically the footprint of each successive browser release? And I’ve used emulators of all kinds in the past, and they simply aren’t perfect.
Will this end web development as we know it, or kill the open standards movement? No, of course not. But it’s confusing enough and sudden enough that it’s not surprising that more than a few people are upset by the news. Maybe I’ll warm up to it when I hear more specifics about how this will actually work in the real world, but for now I’m highly skeptical.
Update: The debate continues, with two further articles from A List Apart. The first, “They Shoot Browsers, Don’t They?” by Jeremy Keith makes the case that a good beta version of IE8 would go along way towards making the case for one side of the other, depending on how its display holds up on the current web. I’d have to agree, and I’m glad to see ALA giving a contrary opinion some space, after the articles from last month caused such an uproar. Having said that, Zeldman’s “Version Targeting: Threat or Menace?” fans the flames a bit as he tries to make his case again in favor of the default opt-in method. This time it’s revealed that major DOM scripting changes are the root cause of Microsoft’s concern, which I don’t think was mentioned previously. The argument doesn’t seem to stick, at least based on the response the article’s drawn. I still stand by my view that this is a pretty bad deal, and one that’s only intended to help Microsoft’s short-term financial interests. Check out the commentary on these two articles, though, for a handful or other good opinions. Even though there doesn’t seem to be much traction, public discourse is always welcome.