Do Not Adjust Your Browser

If you noticed that the site is slightly different than when you were last here, don’t worry, it is. I did a bit of work over the weekend to add some subtle design ideas that I had rolling around through my head. Not the least of these was the NN4 fix that I implemented. Read on to see how I handled this relic of a browser and how it added to my overall site design.

I think I’m only just starting to “get” HTML. It was only until very recently that I realized how absolutely critical it was that the web is, ultimately, a text-based medium. Those are pretty loaded words because they express the problems–and implied solutions–of cross-platform web design, the function of web tools such as search engines, and even of accessibility. To put it succintly, “it’s the content, stupid” never rang a bell for me until I actually tried to develop a well-designed website.

What in the world am I on about? Well, take for example my struggle with Netscape Navigator 4. This browser, as many noted in their comments, is just evil when it comes to develop a site using CSS. When I pulled up kennsarah.net, the fonts were askew, the borders were pixels off of where they should be, and the entire right-column of our site was rendered–I kid you not–underneath the left column. I figured that I couldn’t be the only one experiencing these difficulties (and I’m not), but the reason that a lot of this goes unnoticed is that the majority of the sites on the Internet are using design techniques (such as embedded tables) that are circa 1996. The markup on these sites looks like garbage, but you’d never know or care if you were using anything later than a version 4 Internet Explorer or Netscape browser. However, if you use a text browser or–more importantly–a text reader, you’d know that these other sites just can’t cater to people with disabilities, or people who are using other mediums for web browsing such as cell phones or PDAs.

I’m rambling now. Other people have made this point better than I am, but the point is this: websites are about content first, design second. If you place limitations on how your web page can be experienced, than you alienate a potential readership. Now, does that mean that a site should look like garbage? No: my site hardly looks any different today than it did on Friday to anyone using a post-version 4 browser. It’s the markup underneath that changed to accomodate the larger readership. I improved the site in such a way that my original design has been retained, while at the same time allowing the site to be used by a wider audience.

The next logical question to ask is, “But, who will look at your site as only text?!” Well, there are people that do (for their own reasons). If there weren’t, you wouldn’t be able to download the latest version of the Lynx browser. More importantly, though, is that Google looks at web sites in text-only mode. Google doesn’t see graphics (beyond their title and alt attributes), and it can’t understand Flash. I was flipping through the introduction pages of students in my Senior Project class, and one peer had posted a link to his corporate site. I clicked through. Not only did I get one of those annoying “are you HTML or Flash?” menus on the homepage, but when I went to the Flash site I discovered that the entire site–from graphics to text–was entirely embedded in Flash. Search engines can’t read that, and so his potential clientele who are using search engines to find businesses never know his site exists.

“So what were the changes?!” The first one I’ll start with is, really, the first step to thinking outside the box when it comes to markup design. I have external stylesheets on my site, and, rather than use the standard <stylesheet type="text/css" src="styles-site.css">, I used this:

<style type=”text/css”>
   @import url(“http://www.kennsarah.net/styles-site.css”);
</style>

This techique is valid for referring to external stylesheets in post-version 4 browsers, but NN4 doesn’t understand it. It effectually removes the style from the markup from Netscape 4 so you can see what your site would look like in a browser that doesn’t support stylesheets, such as a PDA browser. By making this change to the site, I decided that any browser that doesn’t sufficiently support CSS should just get the raw markup. Some would argue that this doesn’t really answer to the question of accessibility–the site doesn’t look broken anymore, but it sure doesn’t look great, either. My rationale for that decision was that if the user is still using NN4, then I’ll make it readable and navigable, but I’m not going to design an entirely new site in tables just for a browser that is rapidly on the decline.

Once stylesheets were removed, I noticed some interesting things about my site. First, the columns rendered in such a way that the left column was on the top of the page, the blog content in the middle, and the right column at the end. This, I figured, doesn’t make a lot of sense: the main blog content should be placed at the top. To do that, I just moved it to the top of my markup (you can view the source to see what I’m talking about). I also noticed that some text mini-headers (such as those under our links section: friends, family, etc.) showed up as plain text and made the links harder to read. It occurred to me that I could use the <h1> through <h5> tags on my site to distinguish the headers in the markup. Wow, what a grand idea–that tag has only been around since ’96.

I was actually getting into this–the site was looking more and more navigable on my Palm, Netscape 4, and a text-browser as I continued to tweak the HTML. I went a step further: <hr> tags are used in markup to draw horizontal lines. this would be useful in further distinguishing the columns when looking at the site in text- or markup-only. The difficulty was that I didn’t want any of the changes I made in markup to negatively affect the site when viewed with style. The solution was to include the <hr> tags at the bottom of each column, but to make their stylesheet property hidden with this code:

hr {
   visibility: hidden;
}

Now, when a user is looking at the site with style, the <hr> tags are hidden, but when someone looks at it without style, the <hr> tags draw the horizontal lines like they’re supposed to.

One final thing I did add, though, was that if a user is looking at the site without CSS, I wanted to let them know that the site doesn’t normally look that plain. So, in my page footer, I added a reference to this bit of code that checks to see if the stylesheets are enabled. If they are not, the JavaScript writes a little upgrade-reminder message:

function CheckStyle ()
{
   if (document.styleSheets == null)
      document.write(“By the way, this site looks much better in a standards compliant browser.”);
}

That’s it. Next time you get really, really bored, make sure to check out the site in text-only mode.