WEBSTANDARDS Archives

UofMN Web Standards

WEBSTANDARDS@LISTS.UMN.EDU

Options: Use Forum View

Use Proportional Font
Show HTML Part by Default
Show All Mail Headers

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

Print Reply
Subject:
From:
Garrett Kuchta <[log in to unmask]>
Reply To:
UofMN Web Standards <[log in to unmask]>
Date:
Wed, 24 Aug 2011 16:55:33 -0500
Content-Type:
text/plain
Parts/Attachments:
text/plain (135 lines)
And just to note, if any of these CSS templates will be including
images from a central asset server, the reduced HTTP overhead of CSS
sprites will make the system admins very happy.

Cheers,

Garrett

On Wed, Aug 24, 2011 at 4:51 PM, Peter Wiringa <[log in to unmask]> wrote:
> 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. :)
> -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 (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
>> www.cehd.umn.edu
>>
>
>
>
> --
> Peter Wiringa, Electronic Communications Specialist
> University Relations, University of Minnesota
> [log in to unmask]
>

ATOM RSS1 RSS2