WEBSTANDARDS Archives

August 2011

WEBSTANDARDS@LISTS.UMN.EDU

Options: Use Monospaced Font
Show HTML Part by Default
Condense Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Content-Type:
multipart/alternative; boundary=0016e649c4be68f8b404ab475193
Sender:
UofMN Web Standards <[log in to unmask]>
Subject:
From:
Peter Wiringa <[log in to unmask]>
Date:
Wed, 24 Aug 2011 16:51:43 -0500
In-Reply-To:
MIME-Version:
1.0
Reply-To:
UofMN Web Standards <[log in to unmask]>
Parts/Attachments:
text/plain (5 kB) , text/html (7 kB)
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<http://www1.umn.edu/prod/fragments/ur_common/assets/img/homesite-sprited.png>.
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.
:)

-pete

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.
> http://drydock.cehd.umn.edu/fsos/
>
> 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.
>
> -Dan
>
>
> 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 <http://html5boilerplate.com/> (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<http://www.alistapart.com/articles/responsive-web-design/>
>>       ?
>>    - 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
> www.cehd.umn.edu
>
>


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


ATOM RSS1 RSS2