Who You Calling A Jesse?

I have been on thing about figuring out coding patterns in HTML. Since I did the UW CLF back in 2004, I have been thinking about a macro-format for content generated on higher education web sites. Any CSS framework uses some abstract naming convention now—so I guess what I have been looking at is a “blueprint” that works specifically for higher ed.

What I did today was grab the code structure from about 10 higher ed web sites (three each from the UK, US, and Canada plus one more). It is just amazing how different HTML can be. Most sites are similar design wise, they have very similar content, and they supposedly trying to provide the same type of experience to the exact same audience.

Only three had Microformats on them, one had errors, and all are ‘valid’ HTML/XHTML. Good and bad ;) Well time for a break then on to more research and maybe even some prototyping. You can call what I am researching is a possible Macroformat for higher ed…

Today I finally uploaded an updated version of UW’s International website. It was a long time coming and its design is a collaboration between Matt Regehr in Graphics and myself. Matt did the heavy lifting design wise, I just offered some CSS skills and general design direction. Kevin Paxman from Graphics also offered some help.

The layout is very close to the original design for UW’s Common Look and Feel—before it was stripped down to bare bones and had a template scheme to make it easy applied to it. With it being wider (900px vs 680px) we took the opportunity to place the navigation further up the page and highlight the sub navigation better. The div class naming isn’t following convention (yet) but it was a bit of a rush between vacation schedules, content being agreed to, and the design coming to life.

I think it is a big improvement over the previous site that was based on the much older standard I developed in 2001. Hope people like it ;)

Internet Explorer 7 has reached release candidate status which I think means it is pretty much done beyond any show stoppers that might appear. You really should have a copy of the latest build and you really should be testing because they will be forcing it on IE 6 users as a high priority update so it will likely have a large user base relatively quickly.

The IE team was nice enough to give everyone a list of things fixed, things yet to fix, and what isn’t fixed. Dave Shea points out that it is only a matter of time until we start to see the new bugs appearing and I imagine it is probably best you get testing your stuff in it now otherwise you could have some late nights ahead of you in the near future. He has a good point, get testing and document the quirks you see.

As far as UW goes, I have had a poke around with the latest IE 7 and I don’t see anything major or even minor. There were some reports of printing issues with the last beta of IE 7 but I can print any UW page just fine on Windows XP SP2 and IE 7 RC1. If you see anything though please let me know (a comment on this thread works).

Personally I hope IE 7 rids us of IE 6 much faster that IE 6 has removed IE 5.5. Maybe I speak too soon but IE 7 will make web folks jobs a lot easier…

Cool visualization of the UW home page and a way to test out the new XML-RPC addition to textpattern.

I have been working on the not-so-secret revamp of CPA pages and general news pages over the past couple of weeks. Due to the content layout this has meant some creative CSS and diving into fonts.

I have also been playing around with some XHTML/CSS and DWT for a DevNet article. The test page is pretty cool (to me) as I have achieved the same CLF-dwt-like behavior but with floats instead of absolutely positioned elements. How I managed that will have to wait until the article is published (or you can look at the source code).

As I have been working on both things I have been asking myself: Why do we need so many directories in web sites? The goal with the CPA site is to flatten our pages, get you to the content faster… in a couple weeks you can judge how I did. But every couple of hours I seem to be asking myself – “what was I thinking when I stuck [insert directory name or file here] there.”

So back to the CSS, how many annoying things have you run into with CLF CSS? I have two things that are really driving me nuts (I created the stuff too):

• UW3col.css is defining font-size: 80% in the #primarycontent, why? It should be in UWblank.css.
• too many #secondnavarea and #secondnav control in UWblank.css – it should be in UW3col.css.

…and I have a couple XHTML complaints:

• Navigation should be brought into #primarycontarea and floated
• #pagecontainer should have always been there

If I changed those, the CSS would be much better. The XHTML changes would be huge actually… I can’t believe how smooth that template works that I made for DevNet. It has been a year since I built the template, I am much better with CSS now. What do you find annoying with the CSS and XHTML of the CLF?

If you are using templates in Dreamweaver MX 2004, you happen to link to CSS in your template using @import url("css/custom.css");, and you want the relative css/ to remain untouched because you have CSS directories in each of your sub-directories then you need the solution posted below. Same problem exists for server side includes (SSI), images, and a couple other tags.

Update: with the update 8.01 for Dreamweaver the issue is now sort of fixed – read the technote. It’s not a bad solution for the apparent problem but keep in mind the 8.01 update changes your default you may have gotten use to. If you haven’t got used to it, check out the technote and get the update. Read on for description of the problem 8.01 fixes…

In Dreamweaver 8 there appears to be is a fix for a template problem that had DW MX 2004 not managing links properly but this fix causes problems for those that took advantage of the problem behavior in Dreamweaver MX/2004. This problem will likely effect at least a couple large sites at UW and goes beyond CSS to annoy your relative links in includes (PHP, ASP, CFM, JSP, etc), images, and more.

Stephanie has an explanation of the problem on her site. We spent the better part of the afternoon on this ;)

For includes

Without using template parameters:

Simply change double quotes to single quotes for include file path – only works for ASP and .NET templates
For example: <!--#include file='include.inc' -->.

Use template expression:
PHP: <?php include("@@('include.inc')@@"); ?>CFM: <cfinclude template="@@('include.inc')@@"> JSP: <%@include file="@@('include.inc')@@" %> ASP & .NET: <!--#include file="@@('include.inc')@@" -->

(Note: include.inc is the real file path, not template parameters, so it has to be quoted.)

Using template parameters:

Create a template parameter in head section of the template:
<!-- TemplateParam name="inc_url_param" type="text" value='file="include.inc"' -->
(NOTE: the parameter has “text” type) Change the include in the template to:
<!--#include @@(inc_url_param)@@ -->

For other dependent files like CSS, IMAGE, and LINK (‘A’ TAG)

Without using template parameters, change the css link or image tag to:

<link href="@@('styles.css')@@" rel="stylesheet" type="text/css" /> @import url("@@('styles.css')@@"); <img src="@@('image.gif')@@" /> <a href="@@('link.htm')@@">link text</a>

(Note: styles.css, image.gif and link.htm are the real file paths, not template parameters, so they should be quoted.)

Using template parameters:

Create template parameters in head section of the template:
<!-- TemplateParam name="img_url_param" type="text" value="image.gif" --><!-- TemplateParam name="css_url_param" type="text" value="styles.css" -->
(NOTE: the parameter has “text” type) Change the css link and img tag in the template to:
<link href="@@(css_url_param)@@" rel="stylesheet" type="text/css" /> @import url("@@(css_url_param)@@"); <img src="@@(img_url_param)@@" />

There have been an awful lot of error 404’s reported on CLF based pages. If you look at your log files, you will notice they are look a little like:

/url(\"css/UWprint.css\")%20print

What appears to be calling it is:

<style type="text/css">
@import url("/css/UWprint.css") print;
</style>

Which comes just after the IE 6 conditional comment. So that is why that calling print CSS with the above style call doesn’t work in IE 6.

Chris Gray in the Library has come up with a JS based fix:

<!--[if IE 6]>
<style type="text/css" media="print">
@import url("/css/UWprint.css");
</style>
<![endif]-->
<script type="text/javascript">
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.") != -1));
if (!is_ie6) {
document.write('<style type="text/css">');
document.write('@import url("/css/UWprint.css") print;');
document.write('<\/style>');}
</script>


This problem has been reported in the certain CSS lists already with no real fix but to call your CSS a different way. I suppose it is just another IE bug. I tend to look at as a Fact of Life (FOL) that as long as I know its there, won’t really concern me. Or should it?

A while back now I wrote about centering the easy way where I used some position:relative and margin: 0 auto; in the body tag to get the effect. There were more changes required of course. The changes were made to the central CSS last week and they didn’t cause too many problems actually (yay). There was of course a couple of problems:

• Anything above the doctype will cause IE quirks mode and thus mess up your CSS – this would have caused problems before (cascade rules not being honored in tables, etc) as well but they weren’t as obvious,
• Not calling the central CSS and having your own copy. That is understandable given DW not rendering the CSS unless it is local. Just remember to update your local CSS.
• Page shift brought on by the appearance of the browser scroll bar in the right.

Then of course there was a really strange problem that was seen with most pre-1.0 versions of the XHTML. A span was missing or in the wrong spot:

<span class="none"><a href="#content">Skip to the content of the web site.</a></span>

This does nothing but for some reason influenced the cascade. Symptoms were the right and left navigation margins for placement were aligned with the #contentbar in IE 6. To me this suggests a problem with the CSS but I am not sure what do about it.

Really the CSS way of centering using the body tag is a hack that is kinda dirty. The cleanest way to center pages is with a page container or centering each piece of the larger puzzle. Navigation would still require a wrapper so really there is no proper way to do it without adding in some HTML that I know of.

Well after some delay the usability study that we used to guide some of our changes to the home page in May is now available in PDF format along with the executive summary is available in HTML (most will likely just want to read that anyway).

The study did not have as many participants as we would have liked and nor did it look at the external audiences. But it did offer up some guidance on changes to the home page and how they effected peoples work flow.

Take a look at the report and let me know what you think. We are working on another study that will look at both external and internal audiences in the fall. The goal is to make this a regular exercise and maybe even expand it. “Test early, test often” is echoed in the usability world… ;)

But I also believe that usability has more to do with accessibility than even the WAI guidelines. Why? Well what good is a technically accessible web site if no one can use it? I wouldn’t suggest the WAI is not useful, just that I think usability is an extremely important piece of the puzzle.

On that note, Derek Featherstone will be at UW next Friday talking about Accessibility. Take a moment to sign-up, it is open to all members of the UW community.

Warning: this post is simply a rant. I have been working on two changes to the CLF CSS: one for centering, another for a ‘document’ layout. The first is what is really starting to annoy me. Why? Well that absolutely positioned right column is why.

It appears that IE is padding things ever so subtly different so that the absolute position doesn’t hold. I have tried a couple things and it is just more frustrating than anything. Could be the heat getting to me though. Anyone have a good resource for absolute positioning IE hacks? I could just call in a conditional CSS file just for IE, but the point here is to find a pure CSS solution.

Anyway, there is a test site:

• Center the page – took it down.

No documentation as yet – writing it may help figure things out. Check it out in IE and FF. It is all valid code at least.

As part of an ongoing process to improve the usability and accessibility of the UW home page, I met with two students on Friday that rely upon adaptive technology to navigate the web. There were three main topics discussed:

1. The UW home page was updated recently, have you noticed any improvements?
2. General web browsing: how do you navigate the web, what do you like about web sites, what don’t you like?
3. Do you have specific issues with the adaptive technology you rely upon?

What struck me right away was the response to the first question – “I don’t use UW web pages because they are so bad.” I then asked what makes them so bad? “JAWS reads everything so it is hard to use anything.” I also received comments about the menus all being in javascript which are useless to JAWS. The other student uses ‘text zoom’ to access pages but remarked the drop downs were frustrating because “If I just moved the mouse a little bit in the wrong place I had to start over again.”

I had some idea how bad things were, I have gone through pages with JAWS and watched one of the students navigate with it. What I really had no idea about is how these students blame JAWS not the web developer yet they do not complain. I wonder how many others out there have problems with web pages and don’t complain?

I suggested to the students that they take a look at the new UW web pages and get back to me. That will be posted. I also let them know that at the bottom of UW web pages is a ‘feedback’ link. If they have a problem with any content (PDF’s, and Word Docs included) they should complain. I know its hard for web folks to separate the whinge from the constructive complaint, but web folks on campus should pay attention to their feedback. If you run into a problem you can’t figure out a solution to please email me.

We did talk about other things and I have a few ideas and features to implement for the home page. There was a request for something like the Zoom Layout Joe Clark talked about at the @media 2005 conference and has recently received a lot of blog attention. As well as a contrast switching option. Just sketching out how to implement these ideas.

Oddly enough, last week saw a massive blog outpour of accessibility talk. Notable posts include the formation of the Accessibility Task Force,ATF task list by Joe,Veerle’s point of view, and the role of government in web accessibility.

I had a great lesson in simplicity this week thanks to the centering of UW pages in the CLF issue. For the UW home page I used the technique described on Maxdesign. What this technique requires is a div#container for it to work. This is great but when it comes to the XTHML/CSS that runs the CLF this requires a number of changes that include:

• modify body tag to center text
• insert container div to CSS and XHTML
• modify right nav values
• modify #uwlogo values
• some other thing I can’t recall

In order for it to work on your CLF based pages you would need to:

• insert a div tag below the body and close it before /body
• update your template if you didn’t use server side includes

Well after yesterday’s session, Kevin Paxman (Graphics) emails me:

Maybe I’m missing something…but this worked for me as far as I could tell, with 5 minutes of testing in PCIE 6 and Firefox…

 
body {
 margin: 0 auto;
 position: relative;
}

Then the rest of the position: absolute’s can stay. I didn’t fiddle with PCIE<6, but it should degrade to left aligned gracefully, or you could text-align: center the body and text-align: left the necessary DIVs?

Guess what? It works. AHS and others have implemented this in their custom.css and it works like a charm. So what is the workflow now?

For Web Ops:

• insert margin and position elements to UWblank.css

For you:

• nothing.

Wow. Lesson learned, simple solutions often are the best. Now I am not entirely sure why that works for UW CLF based pages. I would think it was too simple, something must be wrong. But it works.

One thing: Watch the tags above your doctype – they throw IE into quirks mode and that is bad. So please make sure no tags come above the doctype.

Another thing: Some on a certain mail list have asked why position:relative in the body tag? Because if I don’t the UW logo will float to the left. The code is valid though.

Yet another thing: Seems Dreamweaver and Contribute don’t like this technique. Working a solution for those tools.

The Beta site has gone live over the weekend so now you likely have already seen the changes. Obvious layout changes are the search in the top, no drop down menus, and a more detailed footer which are all inline with the CLF. Some other layout changes include page centering, strong headlines, and a little background colouring on paragraphs.

CSS Changes

First off, you may notice that I refer to different CSS. Why? Well I made a few minor adjustments for centering (left nav over a bit, bigger, and lower) and I wasn’t sure if that should just be custom or an actual change to the ‘UWblank.css.’ I think offering up some v2p0 will give you chance to test your pages. But there are some other things I needed to fix:

bugs from bug fixes

Wow is this an annoying bug. There are a few workarounds, but what I have done is add this line:

* html ul li a {height:1em;}

This should take care of the problem for future ul’s used for navigation but it opens up a new one. The fix is posted on the forum.

Page centre/er

This one is causing some discussion in places. What I did was insert a ‘pagecontainer’ div at the top of the document that encases the entire site. Then in the custom.css file i added:

#pagecontainer {
position:absolute;
width: 760px;
height:inherit;
right:50%;
margin:0 -380px 0 0;
}

This has the effect of centering the web page without much fuss. Neato. It does have some drawbacks though. Seems if you go at 640×480 resolution, the page gets cut off to the left. Now if you are using 640×480, I wonder how usable the internet or any applications are for you ;) but that shouldn’t matter. That needs to be fixed and it is on the list of fixes for final version in the fall.

One thing, if you are going with centering please know it is a pretty rough implementation.

Back to the content

Loads of people have noticed that the right navigation appears to be floating with text wrapped. Well that isn’t right navigation. Those links are as much part of the relevant content of the page as anything else. It does not appear anywhere else either, just that page. That is why it is different.

How about the home page right nav? Well that is a fluid column that will change regularly. It is the ‘flavour of the month’ club. So if you have something you want in there, let me know. We are going to changing out links as they come.

The rest of the content is a mix of what was there before and the ‘We’re Waterloo’ annual report that goes out yearly. The content based on the report will be updated when the report is.

On to beta 2?

Over the summer we will be doing some usability testing, some development, and listening to other feedback received. We expect to be done fiddling with the home page in the fall – then the cycle starts again ;)

I will be posting here thoughts, ideas, beta URL’s to new features, and links over the summer. So stay tuned. Keep those kind words and entertaining feedback submissions coming… I could right a book.

We in the middle of a three part series on some of the technology used on the beta version of the new UW home page. In this part I will over how scripting, both server side and client side, come together to make site production and maintenance better. This is all non-techie… and there is a sneak peak at the end.

Client side

This basically is the sIFR and the nifty corners mentioned in part 1. If you have visited their perspective web sites you have some idea of what they do. One is basically a javascript function that parses flash text, trick the browser, and allows the web developer to offer up fonts that people don’t have on their computer.

The second just tells the browser to use a bunch of CSS classes that result in a nice rounded corner on a box. This saves the developer/designer from putting in a lot of tags to achieve the same effect.

Of course there is also the CSS files but we will talk about those in Part 3.

Server side

All the pages are PHP or forced to behave like PHP with .htaccess. This is so two main features work properly: the ‘Graphics made’ PHP search and the PHP includes.

I think that deserves a good diagram so hold on in regards to that. Basically there are four includes: header, right nav, and footer. There is also one that calls in the nifty javascript. These are all set up so I don’t have to update the Dreameaver template to update those parts of the site. The only things I have to update the .dwt file for are left navigation changes (and I don’t plan on making too many) and include changes. Oh and CSS calls, lets not forget about those.

The PHP includes have a huge advantage for me over your typical SSI’s – I can use them across servers and domains. CPA has files scattered over several domains and servers. Some are official UW pages, some are just CPA related, some are ‘other’ but over the years they have been scattered. But we are talking pages that have had the same file names for 13 years in a couple cases. I am not moving them ;)

The search is probably the heaviest server side script with this page but that is not saying much, for now it just pulls the google results so they appear locally. In the future we would like to build on that script and have tabs that allow you to initiate the same search but in a different domain just with one click. No typing. Look for that in the final version 5.0.

In the next part I will go over some of the major CSS changes and layout tweaks. Maybe even have textpattern here include some images… Ok for now, take a look a screen shot of the new and old UW home page side by side. Smart folks will find the Beta page from there.

It is May 1st and some people that read this blog or talk to me fairly regularly are expecting a new home page for UW today. Well you will have to wait a bit longer for that, but you can get a sneak peak of it soon – if you haven’t already. You will have to guess the URL ;)

The following is an explanation on the key parts of the beta site that have stirred soem discussion in regards to the code. I have broken it into three parts. Part 1 is about scripting, Part 2 about how the scripting brings it together, and Part 3 overall page layout (CSS and navigation).

…and the first question anyone that looks at the code asks is:

You are using javascript, I thought that is not accessible?

Providing the navigation and/or content so that it is reliant on javascript to be accessed is not accessible, enhancing the appearance of the web site is just fine. Responsible use of scripting languages is what is required. There are many advantages to using JS but for the beta version of the home page I used it simply to enhance the visual appearance using sIFR and Nifty Corners.

sIFR

The website carries a better explanation of what the scripting is so I won’t go into that but why did I use it? Well the current bare bones template offers up the age the old .jpg or .gif of the font that no one has. Have you look at that in a handheld? It was fine with images turned off but handhelds like Blackberries scale the image to its screen. Then of course is the issue of creating a different title for any number of sites you have to work on. If a committee changes your mind, back to Fireworks.

By replacing the text with a flash text version that has the proper font I don’t have to use Fireworks again to make a title bar, or use the Graphics PHP image generator. I just type in the text and there we go. Plus it looks good on a handheld. It was a bit of work setting it up but I am fairly confident the time savings can be passed on to whoever wants to use it.

Nifty Corners

Again, the website can explain what it is better than I can but why did I use it? Well simply for visual effect while ensuring that the code was not effected. It is as easy as adding one line of code to the JS for the div or class name and you have rounded corners and even a border. No it isn’t as refined looking as an image technique but it leaves you without having a case of divitis to achieve a similar effect.

By the time the final version of the home page roles around maybe nifty corners will offer up a way to plug in your images.

Next, Part II – bringing the page together and adding some features with server side scripting.

Just posting some bugs I came up against today while working on the new home page… on this lovely spring day.

Negative Margins

I am putting together content for the home page draft, I put in a h1 but the first h1 is really off. All others are OK though. I do some digging, check the code, stick borders around stuff and notice an oditty. So I bug a certain Ottawa Alumni and then we sort of narrow it down to h1 and h2. Then I get pointed to the negative margins bug. Seems the #primarycontent h1 and #primarycontent h2 have a negative margin value in UWblank.css.

This will cause you problems. Not sure the fix other than getting rid of the negative margin value in UWblank.css. It is still there on the production version.. my development version doesn’t have it anymore. You could try resetting the #primarycontent h1 and h2 in your custom CSS. Sorry to inflict a bug fix upon the masses ;)

Whitespace in the code and in the browser

I hate this one, I mean hatewhitespace on lists in IE… oh my goodness. – the options are in the comments of that post. I went with: * html ul li a {height:1em;} in my custom CSS file and all is well.

PHP includes, relative links, and DW templates

This one required a URL be created. What I have done is broken the template for the homepage into serveral includes for the header, footer, and right nav. This is great, DW will manage my relative links to the PHP includes as long as they aren’t in the ‘Templates’ directory. Which is a huge annoyance – when including PHP in your template make sure the extension is .dwt.php and the stuff you include is not in your ‘Templates’ directory.

But what also happens is the relative links inside an included chunk of html does not get managed. No biggie, I can ../../ the link and all should be good. Well no cause that puts it back to the root of the site or development box (pole). So I got IST to create a URL and everything works. When in production that include will have a proper full URL referencing stuff but for testing I just needed it to work. Grr.

Next post: devising a site plan with the new CLF ;)

Oddly enough there are a lot of articles popping up that support the idea of simple site design with effective use of graphics and content organization is a good thing™. Here are a few for you:

• CSS Zen Garden—an Eyetools eyetracking analysis – just amazing to see in pretty pictures that the same content presented in a fixed width with effective design is easier to read.
• Guidelines For An Uncomplicated Web – nice set of ideas to keep in the back of your mind.
• Web Page Headlines – Keep them Clear and Simple – given the #contentbar and emphasis on headlines in the CLF, worth a read.
• Writing effective ALT text for images
• Ten Best Intranets of 2005 – not external web sites, but some interesting points about how usability testing plays a role. What I particularly like is that they designed for 1024×768. Too bad we can’t ;)

I will try and keep posting useful links that may help you move your site into the new UW Common Look and Feel. Hope it helps.

…and unrelated to the CLF… Stop the Pendulum: I Want to Get Off – in response to the two Gerry McGovern articles I linked to yesterday. In it is a very good closing point about web site management: ”…it’s way past overdue to acknowledge that complicated problems require more subtle, complex, and often hybrid solutions.“

After a long year and a half of development UW finally has a new Common Look and Feel to follow. This is just a short ‘yeah it has been announced.’ Also I would like to point people to the information sessions listed on UW’s Web Developers site for more information. Those that read this site might be particularly interested in the more technical sessions on Wednesday and Thursday afternoon of this week in MC 2009.

You can comment away on here about the new look or go to the forum and discuss it there.