8/11/05: Web Site Re-Design
Under the Hood
If you're curious how all of this works, take a look at the main style sheet for Mahugh.com in the scrolling window on this page. It's relatively simple CSS, but you can see how specific tags are "styled" to look a certain way, and then that look applies to all use of that tag throughout the web site.
Mahugh.com has been through many revisions since it came on-line back in 1996. Most of those revisions were to add content that I wanted to share with others. A few of them were to play around with concepts that were new to me at the time, such as frames or JavaScript.
As a logical consequence of this ad-hoc approach to maintaining my web site, the underlying HTML had grown pretty complicated. Each page was a combination of content, formatting (in the form of HTML tags), and code (JavaScript), and the entire site had become a great example of 1-tier software development. That's not a good thing.
But with this latest revision, all of that has changed. Mahugh.com now has web pages that contain pure content: semantic markup and the actual text and images, and nothing more. The formatting information — font types and sizes, colors, positions, backgrounds, transitions, hover effects — is now contained in separate style sheets that use CSS (Cascading Style Sheets) syntax.
Usability/Flexibility/Compatibility
One of the benefits of using CSS is that you can design pages so that they render in a reasonable fashion on any browser, at any (reasonable) resolution, with any user-selected font size. I've allowed for this in general on Mahugh.com with a few exceptions. Since my primary focus here is photographs, I haven't done much to allow for text-only browsers, and I also haven't allowed for very low resolution.
Sample Code: main.css style sheet
/* main.css - main style sheet for Mahugh.com */
/* Copyright (c) 2005 Doug Mahugh. */
* {
margin: 0;
padding: 0;
}
a:link {
color: #3FA9A5;
}
a:visited {
color: 103080;
}
a.thumb {
display: block;
width: 116px;
height: 116px;
border: 6px solid #FFFFFF;
}
a.thumb:hover {
border: 6px solid #3FA9A5;
}
a.thumb_small {
display: block;
width: 59px;
height: 59px;
margin: -4px;
border: 6px solid #FFFFFF;
}
a.thumb_small:hover {
border: 6px solid #3FA9A5;
}
body {
font-family: Palatino Linotype, Garamond, serif;
font-size: .8em;
margin: 0px 0px 0px 0px;
}
.copyright-text {
font-size: 7pt;
font-family: Arial, sans-serif;
color: #3FA9A5;
}
div.thumbfloat {
float: left;
padding: 6px;
}
div#cssexample {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #3FA9A5;
background-color: #EEE;
padding: 8px;}
div#header-left {
position: absolute;
left: 50px;
top: 0px;
z-index: 100;
}
div#header-right {
position: absolute;
left: 650px;
top: 10px;
z-index: 100;
width: 240px;
text-align: right;
height: 50px;
vertical-align: middle;
font-family: Arial, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #3FA9A5;
}
div#maincontent {
position: absolute;
left: 250px;
top: 50px;
width: 640px;
z-index: 100;
padding-bottom: 1em;
}
div#maincontent h1 {
font-size: 1.2em;
font-family: Arial, sans-serif;
margin-bottom: .2em;
padding-bottom: .2em;
padding-left: .5em;
padding-top: .2em;
margin-top: 1.5em;
background: #3FA9A5;
background-image: url("../images/gradient.jpg");
color: #FFFFFF;
}
div#maincontent h2 {
font-size: 1.1em;
font-family: Arial, sans-serif;
margin-top: .5em;
margin-bottom: .2em;
color: #102080;
}
div#maincontent hr {
color: #3FA9A5;
height: 1px;
}
div#navbuttons {
position: absolute;
left: 20px;
top: 166px;
z-index: 300;
width: 180px;
}
div#navbuttons2 {
position: absolute;
left: 20px;
top: 128px;
z-index: 300;
width: 180px;
}
div#navigation {
position: absolute;
left: 50px;
top: 50px;
z-index: 100;
width: 180px;
background: #3FA9A5;
}
div#navigation a {
display: block;
text-align: left;
padding: 0px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none;
color: #3FA9A5;
background: #FFFFFF;
}
div#navigation a span {
display: none;
}
div#navigation a:hover {
color: white;
background: #3FA9A5;
}
div#navigation a:hover span {
display: block;
padding: 5px;
margin: 10px;
z-index: 100;
font-size: .9em;
color: #3FA9A5;
background: white;
text-align: left;
position: absolute;
top: 150px;
left: -5px;
width: 180px;
}
div#navigation h1 {
font-size: 1.2em;
font-family: Arial, sans-serif;
margin-bottom: .2em;
padding-bottom: .2em;
padding-left: .5em;
padding-top: .2em;
margin-top: .5em;
background: #3FA9A5;
background-image: url("../images/gradient.jpg");
color: #FFFFFF;
}
div.rightfloat {
float: right;
color: #000000;
width: 220px;
text-align: center;
background: url(../images/shadowalpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.rightfloat div {
background: none !important;
background: url(../images/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.rightfloat p {
color: #002020;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 1em;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
div#sidebar {
position: absolute;
left: 50px;
top: 250px;
z-index: 100;
width: 200px;
padding-right: 20px;
}
div#sidebar2 {
position: absolute;
left: 20px;
top: 250px;
z-index: 100;
width: 180px;
padding-right: 20px;
}
img#logo {
vertical-align: text-top;
align: left;
}
img#sectionlogo {
position: absolute;
top: 37px;
left: 50px;
border: 0px;
z-index: 200;
}
p {
margin-top: .2em;
text-indent: 2em;
}
p.lead {
text-indent: 0;
margin-top: 1em;
}
p.lead:first-letter {
font-size: 200%; float: left;
}
span.linklabel {
width: 110px;
color: #000000;
}
One nice consequence of going to CSS is that there is no longer any JavaScript on the site, so all the little user-interface details (mouse-rollover behavior, etc.) work perfectly on browsers that have JavaScript disabled due to security concerns. This is a growing issue for the web, and it isn't going to go away.
Another rapidly changing aspect of the web is the move to more small handlheld devices. CSS helps address this as well. For example, I could (and will, soon) add a style sheet for PDAs, allowing visitors to surf through Mahugh.com in an interface that is optimized for the hand-held format. This will require no changes to the content, and no changes to the HTML pages themselves.
Performance
Since there is just one style sheet on Mahugh.com for most of the pages, that style sheet loads once and remains cached in your PC's local memory while you browse the site. The pages themselves are much smaller because of the lack of presentation-related markup (view source to check it out), so they load very quickly.
Ease of Maintenance
This is the main reason I switched to the CSS approach, frankly. I want to put new content here on a regular basis, and I want to make it very quick and easy for me to do so. Now I don't have to think about HTML at all in order to add content — just throw the images and/or text in a file, add a few tags to indicate which styles apply, and I'm done. New content will automatically share the look and feel of existing content as defined in the style sheet, and I can change the look of the entire site by simply modifying a single style sheet in the future.
CSS Best Practices
This web site isn't an example of CSS best practices yet, but I want to get there eventually. For now, I've eliminated lots of repeated line breaks (BR tags used for positioning) and non-breakable spaces, and I've eliminated all use of tables for layout and positioning. I've also eliminated the concept of coding color and position information from all the HTML code in general as described above (with the exception of some stuff in the Archives section which I didn't bother to go back and redesign). But I'm not really a graphic designer, and I haven't done much to polish up the design details. If you want to see what's possible with CSS, check out www.CssZenGarden.com.