So the first thing you need to learn in order to start working on adding web designer to your other designer skills is that on the web the design is done using a language called CSS (or cascading style sheets) which determine how the content defined in the HTML is supposed to look.
Looking at the layout there is one thing that really bothers me. You have the white “sheet” lying there angled. When you now put your text into this sheet, the type(ing) will appear crooked, there will be more space on the left side towards the bottom than on the top, and vice versa for the right side.
Being visually inclined must also mean to get things done in a logical fashion 
That’s also something I’d take an axe to for another reason - the complete lack of dynamic height. Fixed height images behind your content is most always a miserable failure at future-proofing. SOMEDAY somebody is going to want to add content taller than that image. If you are using dynamic fonts (pt/em/%) on the content - which it appears you are - and fill it to the gills with text, load it on a large font/120dpi system and enjoy the content text blowing right past the bottom of your image. VERY much one of those “draw a pretty picture” moments without thinking about the behavior of the content likely to go into it.
Which is not to say the overall idea isn’t without merit - It’s very attractive - but I’d throw out the existing images to remaster a set to allow for dynamic height on the content area, images off graceful degradation, CSS off graceful degradation, no image maps, heading orders that make sense, etc, etc.
I have time later tonight or tomorrow morning I’ll toss together a rewrite to show what I mean by that - right now it’s using 150k of images for what I personally doubt should take more than 50k - maybe 70k once things like rollover effects are added. (and I WOULD add rollover effects).
Really it’s maybe ten to fifteen minutes to put that together.
– edit – also doesn’t help that by totalling 1024 it’s not even 1024 friendly. Remember, subtract 32px or more for scrollbar and browser chrome.
If you can, I’d be very appreciative. Thank you 
The assumption is that the pages will contain little information to begin with, but it is better to be safe than sorry.
Here’s how I’d approach that same basic layout idea:
http://www.cutcodedown.com/for_others/kp606/template.html
As you can see I got rid of that white part of the page being slanted and the texture on the folder so it’s now dynamic height. You can add content until blue in the face and it will auto expand to fit it. It also now has graceful degradation when you turn images off, some cute rollover effects, is 1024 friendly, and drops down to less than 50k for the entire template.
As with all my examples the directory:
http://www.cutcodedown.com/for_others/kp606
… is unlocked for easy access to the bits and pieces. Valid XHTML 1.0 Strict and would be valid CSS 2.1 if not for a couple browser specific properties (zoom, -moz). Tested working 100% in IE 6, 7 & 8, Opera 10.52, Firefox 2 and 3.6, and the latest flavors each of Saffy and Chrome. It is also functional in IE 5.5, though the hover effects on the sidebar are slightly broken appearance-wise due to IE 5’s lack of z-index. (It’s still usable)
To break it down for you, we’ll start in the markup. Follow along with the source.
*** HTML ***
We start off with a STRICT doctype. Tranny is for supporting old/outdated/outmoded/half-assed coding techniques using tags and attributes we aren’t even supposed to be using anymore, and there’s little legitimate reason to not be writing to STRICT.
You’ll notice the link for the CSS includes MEDIA types. Given the wildly different capabilities of various devices it’s a really good idea NOT to send any CSS to “all”. I left the hooks for the other two common sheets I design in there, just commented out.
div#pageWrapper - First div I most always have. If you are setting a fixed width, or designing 100% min-height, or a dozen other layout techniques having a DIV wrapping everything just makes life easier.
H1 - The first heading on the page, even when a logo, I try to use a HEADING tag for (who’d have thunk it!?!) - this way our heading order from a structural standpoint (what HTML is FOR) always makes sense, since all other heading tags on the page are by definition supposed to be subsections of that h1 (and are supposed to always come after it). I tossed in some nested spans and a small tag as presentational hooks so we can style it images off to look a lot like how it looks images on. The break tags assist with this, and also make it look nice when CSS is disabled/not-present/not wanted.
#mainMenu Just a simple flat list.
hr - You’ll see a few horizontal rules present. Those are for people viewing with CSS disabled to divide up the sections a bit more. We’ll hide those in the CSS.
div.contentTop is simply a empty sandbag for applying the top rounded corners and shadow.
div.contentSides is for the sides of that folder image.
ul#sideTabs - those sideways tabs on the left. I put them inside .contentSides since it’s going to be simplest to have their images overlap the background on .contentSides.
div Content - we’ll use this to make our white background box.
div.stickyPad - another image sandbag div. This time for that little piece of paper that says “college council”. We use a separate div for this so we can float it later, allowing our content to wrap around it.
h2 and p - just some placeholder content.
div.contentBottom - the sandbag for the bottom rounded corners.
div#footer - just the simple footer content.
… and that’s really all there is to the markup. You’ll notice my commenting style puts the comment BEFORE the closing element. Putting them inside the element avoids a couple IE rendering bugs that can occur when comments are placed in-between floats or in-between positioned content. The nastiest of those are the double-render and disappearing content bugs, but there are more subtle errors that can drive you nuts. You can also see I don’t waste time saying “end content” - of course it’s the end, that’s what </div> means!
*** CSS ***
Follow along with:
http://www.cutcodedown.com/for_others/kp606/screen.css
First thing I put in every CSS file I write is a simple reset to make sure all browsers start out with the same margins, padding and borders on the elements I use the most. There are larger resets, but they are a bit saggy around the midsection for my tastes. There are smaller resets, but they often break things like form elements causing more harm than good. This is the nice safe middle-ground.
hr - As mentioned, we hide the horizontal rules in the CSS.
body - the text-align is to center #pageWrapper in IE5, which incorrectly centers DIV on text-align and ignores margin:auto; - I set the default font up as 85% since that’s roughly 14px at 96dpi, 17px at 120dpi, 12px at 72dpi, or basically 10pt. WCAG says use %/em - who are we to argue. (when the W3C recommends something, it helps to pay attention). I ALWAYS declare the full condensed ‘font’ line with style and line-height when I change font size becuase you cannot trust the default line-height and the entire property is ignored in some browsers if you don’t declare at least ‘normal’.
For more info on font sizes, check out this little page I threw together on the subject.
http://battletech.hopto.org/html_tutorials/fontCompare/template.html
From there it’s just the background color.
#pageWrapper - I narrowed your width to the 1024 friendly 992px. I always allocate 32 px for scrollbar and browser chrome on my targets. Personally I’d consider opening it up to at least a semi-fluid layout, but I didn’t want to get too complicated on you by introducing things like sliding doors or eight corners under one roof.
The margin:0 auto is for standards compliant centering, I add the top/bottom padding here so we don’t have to even think about margin collapse, and the text-align sets things back to ‘normal’ after our IE 5.x centering.
h1 - the position:relative is to allow us to absolute position the nested nested span over our text for gilder-levin style image replacement. The overflow:hidden gives us float wrapping in standards browsers, and I toss the holly hack at it to get float wrapping in IE; AND to squash positioning bugs.
Rather than declare widths on most of our internal areas I prefer to use margin or padding to push things in, that way I don’t even have to think about the math to come up with the width. It also opens the door to making the layout semi-fluid or even fully fluid.
The padding plus all of our line heights totals up to the same height you had in your image. Since it had a flat color background we can then use a much smaller image and make the content to the right of the school logo show as actual text. From there it’s just fonts and colors. You’ll notice all fonts in the h1 and menu are declared in px - this is because if “120dpi” or other non-default metric users have the fonts auto-enlarge it will break the image interaction. Thankfully the smallest we’re going to be using is 16px, and it’s very unlikely anyone is going to get upset over that being too small.
h1 span - the outermost span is used to wrap the part of our text that gets floated to the left when CSS is present. The display:inline is a fix for IE incorrectly doubling margins on floats. Floats are inherently display:block and nothing you ever set for ‘display’ is supposed to be able to change that, but for some wierd reason in IE setting display:inline trips some wierd bit of code that fixes the margin bug.
The width forces proper wrapping to match the image, the margin pushes the text we’ll be showing over, and from there it’s just font size and centering.
h1 small - display:block forces it to obey the line-height declared in it and not the line-height of it’s parent. Then we just set the text smaller.
h1 span span - this is were we place this image:
http://www.cutcodedown.com/for_others/kp606/images/h1Logo.png
… over the text. By using a much smaller image the bandwidth savings are enormous. Absolute position it, set the width, set the height, assign the background. Pretty simple, and overwrites the text in our span. Images off (or things that don’t see images like search engines) the user sees the pretty styled text, images on they see the image.
#mainMenu - strip the bullets, I set the fixed height rather than mess with float wrapping, in this case it has the same effect. Again the margin to push it in instead of declaring a width. By using text-align and display:inline / inline-block on the lists contents we can center the menu text and just pad them apart evenly. The font-size declaration makes all browsers treat white-space between inlines pretty much the same way, and finally the background-color for images off and the image.
#mainMenu li - whenever possible I just set these to inline and then try to pretend they don’t exist. If you were to add dropdown menus, you would then be forced to do something more with them.
#mainMenu a - display:inline-block and it’s mozilla workarounds let us declare top/bottom padding on the anchors. That padding plus the line-height gives us our 36px height, while still allowing us to play with the positioning a bit. Strip the underlines, set the font size, set some color. Easy-peasy.
#mainMenu a:psuedo - the hover and active states we just change the color, change the background-color for images off users, and then I made a extra bit of image on the left side of mainMenu.png as a images hover state.
.contentTop,
.contentBottom - these share most of the same values, so I set them together. Float clearing is just a good idea, the IE font-size fix shouldn’t be neccessary given they are 32px tall, but better safe than sorry with Win7 letting users go to 192dpi, and they both share the same image for the background. “0 0” for background-position shows the upper left 32px tall area of our image:
http://www.cutcodedown.com/for_others/kp606/images/contentBorders.png
.contentBottom - sliding the background-position up 32px reveals the bottom left 32px of our 64px tall image.
.contentSides - the position:relative helps with any depth sorting issues, the overflow and width declarations being present just to provide float wrapping. Finally we apply that same background image, but we slide it left 992px to reveal teh right half which we tile on the Y axis. All three corner images in a dynamic height area stuffed into one small file.
#sideTabs - This just gets floated left so our content box can ride up next to it. Adding the display:inline fix stops an extra 2px oddity in IE6, but apart from that the wrapping UL is nothing fancy.
#sideTabs li - again, I just set these to inline and pretend they don’t exist. Makes IE7 behave.
* html #sideTabs li - IE6 needs ‘zoomfix’ - using zoom:1 to fix something that normal haslayout triggers does not, but this seems to break IE7 - so I had to stuff it behind the classic “* html” hack to target IE6/earlier only.
#sideTabs a - setting them to display:block puts them one atop the other, the z-index is there because, well, I’m going to overlap them with a negative margin. If you look at our image:
http://www.cutcodedown.com/for_others/kp606/images/sideTabs.png
You can see it’s designed to overlap for the hover states - that way we don’t need any of that alpha transparency nonsense. To do that we’ll have to do some z-index chicanery.
The overflow:hidden will chop off anything bigger than our wrapping anchor… We’ll use that in a second. From there it’s just color and stripping the underscore.
#sideTabs a:psuedos - the hover and active states we use z-index to make sure they layer over their siblings, and I use font-weight:bold for our images off users.
#sideTabs a span - just a bit of top padding separate from our height declaration for images off users, and a line-break that’s not present when CSS is disabled.
#sideTabs .buttonClass a - each of the buttons is slightly different from the others in terms of height and overlap. .forStudents a just gets a images off background-color, .forClubs a gets a negative top margin and a different color, .forOthers a being our most complex with a different negative top margin, a different height, and different colors.
#sideTabs b - our gilder-levin image replacements. Absolute position it over the parent anchor. Remember that overflow I set up for width? Here’s where it comes into play as we set it twice as wide - the width of our image, and the 200px of our tallest elements. This means we don’t have to specifiy the exact size twice.
#sideTabs .buttonClass b - each of them gets a different background position, sliding the image up to reveal each button’s ‘section’.
[b]#sideTabs a:psuedos b - when you hover all we have to do is slide the entire nested bold tag 64px to the left. This reveals the right half of our image with the excess again cut off by our overflow state. Doing it this way means we don’t have to restate the background-positions over again for each and every hover state. (which would be another ten to fifteen lines of CSS)
Content - the content is pretty simple. I set a min-height of 480px so that it will expand to at least the height of the side tabs. The margin is again to push it in from our side elements, and of course some padding to make it pretty. I added a border on the bottom and right edges just to make it a bit more ‘defined’.
* html Content - IE has no min-height, but will incorrectly treat height as such.
.stickyPad - Position:relative makes certain this element depth sorts over everything, fixing a bug in IE6/earlier. I float it right so that the content will wrap around this image… Which if you take a look at you’ll see I used ‘close enough anti-aliasing’ so that should something get wrapped to close/underneath it things won’t screw up. It also reduced the filesize 10%, so worth it.
http://www.cutcodedown.com/for_others/kp606/images/stickyPad.png
The negative right margin slides it out of our Content area and over the .contentSides as desired, which is why we need the display:inline to prevent IE margin doubling.
Content h2,
Content p - just some placeholder formatting for the content.
#footer - margin to push it in the same as the rest of the page (yers looked funny being the full wrapper width), then just padding, color and alignment.
Pretty simple, hope this helps or that you came away with something useful from it. The bandwidth savings and ease of updating the content it brings is usually worth the effort - particularly when it opens the door to all users and not just the perfect match of user agent. It does sacrifice a number of design elements as impractical, simple fact is if you care about doing a website right, a lot of stuff you can do in photoshop is just a really BAD idea when it comes time to build a website.
… if nothing else, the removal of over 110k of images is proof enough of that. Oh and if you are curious, yes, I redrew most of your images from scratch.
Thank you shadow! This is beautifully done.
…though, our differences as designers are very apparent to me at this point. You changed out the “College Council” word mark on top, which was set in Frutiger. This typeface is brand guideline numero 1, so it’s interesting to see how you prioritized it! But I’m saving the post to read through this information rigorously.
Are the files for these templates in your directory or should I use “View Source”?
I have sent you a PM as well.
That part looked like content that might change based on what section of the site you were on - so I put it as plain text - and since 99.9999% of users are not going to even HAVE frutiger installed, there’s no reason to design it for that… The part I left as a image on the other hand looks like something that would be fixed across all pages and has all sorts of fancy styling on it, so I left that as a image… but again, not being my content I was pretty much guessing as to what was what.
Was really assuming you’d have more content up there, which I’d slap into a div after the h1 and ride up into place with a negative margin.
Which to be brutally frank means jack in web design. Anyone tells you that typeface should be used on flow text elements they don’t know enough about web design to be making a brand guideline for the web.
As a rule of thumb trying to use any oddball fonts for large sections of text is a misearable /FAIL/ and should be avoided when possible. I’ll often allow it for small headers, buttons, and the logo replacement - but if it looks like content I try not to put it in an image. In general ‘relying’ on a font being available - ANY font, even the M$ core ones, is bad web design. All the different user agents under all the different OS will have different fonts available to them and usually NOT have your goofy custom font available - It’s something you get used to, or wash out on.
If that was meant to be part of the image for god knows what reason, just expand the h1Logo.png and the nested span to include it. (really, you are planning on more content up there, right?)
Though to be honest, I’ll be damned if I can tell 90% of sans-serif fonts apart. Usually the only people who can are the people who work in print, that seem to think everyone viewing their content is using a jewelers eyeglass on it… The people who zoom in 500% with their head 6" from the display… The most comfortable of viewing positions 
I come from a print background so I understand that thinking - the thing ‘designers’ often have trouble wrapping their heads around is the POINT of HTML is that the user agent’s capabilities are supposed to best determine the way to present content - NOT the designer. While presentation and design is possible, you have to restrict your desire to apply specific styling to EVERYTHING once you start figuring things like the capabilities of the target device, the variety of devices available, and accessibility guidelines like the WCAG into the mix.
You will want the files in the directory AND view source will get you the HTML for it.
An image (photography) will (likely) go inside the blue space. If not, I will leave it as is in all likelihood; it is bulky but again it conforms to guidelines which I respect. (Though there is this: http://www.emory.edu/admission/ [top right, nav bar] that i’d like to pursue which would offset the seeming uselessness of the blue space). I will need to expand the “Emory” wordmark to include CC in Frutiger. But I understand how you thought it better to do it otherwise. For the record, I never imagined that even a percent of the school (let alone the WWW) would have Frutiger for display text. So it would have all been kept in the images—like Syntax is kept in the side tabs.
I will post a few more questions. What you do at first that seems mysterious makes sense after I think about it for a few. But there are several things I’m not sure I understand. (All the negative margins, for example, are hard to process at first but make sense in context.)
EDIT: Nevermind, figure it out.
One question now: How were you able to lock the sticky note in; it can’t be highlighted or “Saved As”.
Though to be honest, I’ll be damned if I can tell 90% of sans-serif fonts apart. Usually the only people who can are the people who work in print, that seem to think everyone viewing their content is using a jewelers eyeglass on it… The people who zoom in 500% with their head 6" from the display… The most comfortable of viewing positions
Very true. The Arial/Helvetica debate probably hinges on the fact that they are so close to one another to the untrained eye, no?
But the fact of the matter is: through saturation alone is a brand achieved. It isn’t that a College Sophomore majoring in Biology will be able to recognize Frutiger (say versus, Helvetica.) What I would hope is that after 1000 unit signatures with Frutiger, the “rogue” one with Helvetica would look just a “wee bit” weird. I don’t expect the layperson to be able to recognize different fonts. But the marketing part of me (very, very, very small part of me) is pleased when he sees the raised eyebrow of an onlooker who says “I can’t put my finger on it but that “Office of Residence Life”… looks a bit off!”. Just as W3C has web standards, we have standards too. Some people may very well call doting over them “silly” but I believe that as the genitors of this content, we work with it enough to determine what is important and what isn’t. It says something about us as well. I suppose it’d be the equivalent of setting “ALT” tags for a website all about color (like kuler); maintaing standards is constant, not momentary.
Or at least… that’s my interpretation.
That appeared to be a presentational affectation and not in any way any form of content, so an IMG tag is completely inappropriate for it. (the same goes for all the border images).
Too often people put images that are not content in IMG tags - makes the CSS off version of the site look like ass.
Which is why it’s just a background-image on a floated div… As such it’s not going to have any of the options when you right click that an IMG tag would.
View the site with CSS disabled and you’ll see why I did this. If that image appeared before the H2 with CSS disabled, it would look like crap.
Web Design isn’t just about the perfect screen target, you have to keep in mind what it does when all your fancy graphics hung on the layout are not present as well.
Images off, CSS off, Javascript off - the page should slowly ‘degrade’ while remaining entirely functional. It’s called “graceful degradation” and the process for building a site with those capabilities is called “gradual enhancement”.
Which is why I do the semantic markup of my intended content first, THEN I make the layout with CSS adding extra div and span sandbags when/if needed for the layout, and THEN I go to the goofy paint program to make images to hang on it.
Oh, BTW, that admission page?
COMPLETELY broken on my machine thanks to the fixed height background. Content text chopped off by the footer, sidebar misplaced, nonsensical heading orders, non-semantic markup, fixed metric fonts…
STELLAR example of how not to write a website… as evidenced by the 21k of markup for 3k of content, annoying flash crap with no graceful fallback for people who want to tell you where to shove using flash like that (aka Opera users running with plugins disabled or FF users running flashblock), and validation errors showing markup that is inconsistent with the doctype.
Lemme guess, one of the professors wrote that page? In other words, everything I’ve come to expect from an educational institution… Now I’m not saying I consider a college education to be worthless in this regard… Oh, who are we kidding - 90%+ of college degrees in computer sciences aren’t worth as much as a sheet of bog roll.
Oh yes! Then that leads to question two: You can set multiple images as background across multiple divs? I think I knew this—what never occurred to me was to set a background in something other than body {}.
Lemme guess, one of the professors wrote that page?
adjusts glasses
One of the professoriate being let into marketing? I laugh at the mere thought!
Actually, a great deal of talk occurred around the creation and maintaining of the website. It is all very interesting, to say the least, but it is also very internal.
EDIT: On second thought, in the interest of confidentiality, I’ll just say it was indeed “political stuff.” (Google has betrayed me before <.< )
Pretty much as a loose rule of thumb, most every CSS property can be applied to most every CSS tag - as such you can hang a image on ANY element as a background. DIV’s are just the tip of the iceberg - if you look at my code I apply the h1logo.png as a background-image to the <span><br /></span> inside the h1, which is then absolute positioned over the images-off version of the text. Dive into the sidebar tabs, and you’ll see I’m actually absolute positioning an empty bold tag for those hover effects, and sliding the background-image around to reveal the appropriate bits.
When writing the markup and working with images, you should be asking yourself “Is this image part of the content, or is it presentation to make the content pretty” - if the former, use a IMG tag, if the latter, it should be a background in the CSS. Borders, dropshadows, image buttons that are used instead of text - these all belong in your CSS. MOST logo’s (but not all) I treat in the same way because in most cases they are little more than presentational affectations applied to some text.
Oh, I can imagine, especially if you have the classic “design” vs. “accessibility” argument going on… A lot of design/marketing folks don’t understand the mere concept of what the Internet is or more importantly how it works, so their decisions when it comes to things like websites can be humorous at best, absolute disasters at worst.
Doesn’t help things like the WCAG being written in engrish legalize making what it’s actually saying go “pow-zoom-phwee” over most people’s heads.
Of course, when people don’t even think about these things it’s how you end up with broken websites like that one in the first place. Hell, you had that for a website in the UK, they could theoretically fine you for it. (although accessibility laws have proven pretty toothless so far as the Internet goes)
Off Topic:
Oh wow Deathshadow. I have learned a lot from you in the past weeks. Thank you. When is your book coming out?