Hi Dan,

Glad to get some more feedback and ideas, thanks.

We've heard from a few others off list and compartmentalizing the header/footer has certainly come up, and a high CSS specificity like you suggest seems to be the [only good?] way to go.

I agree that we oughtta stick to the gradient image for the background in the header/footer. Once we get to the templates if we find there's enough benefit to using Modernizr instead of the basic html5shim we could try a .cssgradients/.no-cssgradients approach, but that's for another day.

Thinking of images, any concerns with the use of CSS sprites? We might even work the bg gradient in; even at 320px wide (logo width), removing the http request and realizing the total size savings of combining images might suggest it. We didn't include that gradient for the new homepage, but did combine other images. If we throw that in and redo the search button we might be able to ship the new headers and footers with a single image, which seems kind of appealing. :)


On Wed, Aug 24, 2011 at 2:03 PM, Dan Sagisser <[log in to unmask]> wrote:
So... here is my 2 cents.

I should be able to drop it into a page, and have it work, and not break anything else on the site... no matter how someone wrote it.

I'd accomplish this be using really specific IDs, and don't assume tags won't be used again, don't assume CSS Reset being there or not.  Maybe the header tag will be used again, maybe it won't.

So for example, put the U of M header in a <header id="umnheader"> and style things like buttons, and search in the css as [header#umnheader a {}] for a link, for example.  This will ensure both overriding other styles for the header, and not not messing up other code which isn't as specific as it could be. 

Other thoughts..
-Aim for a small file size too... so the background color should either be a repeating 1 px wide image... or use the CSS3 gradient... (though I would recommend the image) and make the logos and buttons PNGs.
-Keep the campus links outside of the header tag, it allows those links to blend with the baground easier, and keeps them out of borders surrounding the actual page.

This is an HTML5 page with CSS3 and a rewritten header.  I know it doesn't meet all the criteria I laid out above, I just made it to work in CEHD, but I thought it might help.

Thanks for doing this Peter, we appreciate it!  Thanks for asking for input too, it means a lot!

I'm replying to the list because I suspect other people might have better ways to do some of this than me.


On Mon, Aug 22, 2011 at 1:55 PM, Peter Wiringa <[log in to unmask]> wrote:
Hi All,

University Relations is getting back to updating the standard headers and footers for U websites, which will then be rolled into an updated version of the web templates. We'll be using HTML5 and CSS3 (very sparingly for the headers/footers, given the design). Since most or all of you have had some experience with the U's header and footer, or full-fledged templates, we'd like to get some input on your experiences with the current setup so we can improve on it while also figuring out what the big wants and needs are.

Note that the standard appearance of the headers and footers won't be changing, though keep in mind that you have flexibility in background colors for the header and footer and some flexibility in link styles/states. For the moment we'd like to keep this primarily focused on the header and footer and from there move on to the templates.

Some notes and questions:
  • We'd like to standardize the header/footer code and keep it in sync with the templates.
  • We'd like to use HTML5 Boilerplate (HTML5BP) with the templates, and possibly as a starting point for the header and footer itself. This would imply a standard CSS reset (now "normalization" in HTML5 Boilerplate 2). You could use another reset in addition to what's out there if you were so inclined, or replace the standard reset (normalize) with your own preference if it maintains consistent rendering. Whaddaya think?
  • What options, if any, are you interested in for site widths? 960 has been our standard and we expect will continue to be, for now.
    • Are their other widths that would be useful? (i.e. 974 for YUI grids)
    • Fluid width (non-responsive)?
    • Responsive?
  • What else?
    • Biggest desire?
    • Distribution? SCM users (Git or SVN)? Would a public repo be helpful for anyone, in addition to straight downloads? It'd certainly be helpful for UR as we make changes over time, but would it be helpful for you?
All of this is open for now and we'd like to know what would be useful before we dive in. Throw it out here for discussion, or off-list to [log in to unmask]. We'd like to keep this at a high level for now.

Also, there are some HTML5 elements in the new header and footer for the home page, but pay no attention to the coding itself, that's certainly going to change. That said, if you've taken a stab at redoing the U's header and footer in HTML5 yourself we'd love to see your approach.

Peter Wiringa, Electronic Communications Specialist
University Relations, University of Minnesota
[log in to unmask]

Dan Sagisser
Information Architect and Project Manager
College of Education and Human Development
Phone: 612-626-1325

Peter Wiringa, Electronic Communications Specialist
University Relations, University of Minnesota
[log in to unmask]