Zoom layouts

Joe Clark’s presentation notes from @media 2005.

In most cases, there are limits to how big you can zoom a Web page before it becomes unreadable:

  • The space between lines, called leading or linespacing or line-height, might not scale along with the fonts, so that lines of text will overlap
  • Your nice carefully-crafted layout may have boxes or table cells or divs that are too narrow to hold the text. Sometimes they’ll be too narrow to hold a single word – maybe not in English, but certainly in German or Finnish
  • Or all those structures might also be too short
  • The right-hand side of the Web page might zoom off the edge of the screen.

Part of the solution to the problems Joe brings up is to design pages with flexible line-length.

See it in action on this site; increase or decrease text size, and watch the column width expand or contract. Also included (for browsers that understand it) is a min-width rule on the main content area.

Semantics, Styles Sheets, and Style Guides

In the following article David Shea discusses the concept of a style guide for clients. The Markup Guide can be found here:
http://mezzoblue.com/downloads/markupguide/

Who Cares about Semantics Anyway? On semantic markup, conveying its usage to those who generally don’t need to care, and a reusable markup guide for your enjoyment.

“Just educate your clients”, you may think. I hope you understand why this doesn’t always work. As an analogy, compare and contrast these situations:
  1. You just built a site for a plumbing company, complete with a CMS. You tell them to make sure to use <ol> elements for parts lists, and <h2> elements for product names on their respective pages. 6 months from now, you check the site and find a ton of <br /> elements to separate the list items, and headers in <font size="5"> tags. D’oh.
  2. In exchange for your work on the site, the plumbing company gives you some advice on your kitchen remodeling. They suggest copper pipes for your water lines running through the exterior walls, with a small length of flexible CPVC inside the house. You decide to go all CPVC because it’s slightly cheaper. 6 months later, your pipes burst during a particularly cold winter night. D’oh.

In both cases, a little bit of education goes a long way. In both cases, the client needs to take a little initiative of their own to ensure higher quality. In both cases, there will be people looking for shortcuts who simply won’t take the advice of the expert.

It brings up an interesting issue—I think we should discuss whether we’ll need such a guide when a CMS is in place. Most users won’t see any HTML, but they will need to know how to select styles, and which styles are appropriate for which bits of content.

On another note, I’ve had an idea kicking around in my head that we should have a basic document containing dummy text for viewing how style sheets handle all the various elements that get used in our sites (from paragraphs to definition lists.) I’ve wanted to create such a document, but just haven’t worked it in yet. It’s something to help with maintenance, but also to help with design to see if any elements need tweaking. I know having a default style sheet, or a specific list of elements to include will make sure everything has a style, but I’m looking for other issues: how nested elements look, and how multiple elements on a page look together.

Take this page for example. It contains many, many nested lists. As long as the styles for ul or li aren’t too complex the nested lists won’t need extra consideration. But if you’ve tweaked the list styles (padding and margins and such) it might look funny when there are nested lists. Another issue is what happens when there are many headers on a page. Most pages just have the title and a sub-header, so just h1 and h2. But what happens when a document requires more sub-sections, like h1, h2, h3, and h4. How do these look on the same page?

Actually, I asked for such a style guide from N+S for the Admissions site and was told it was far too complicated to create quickly. (??? but if they have a style sheet wouldn’t it be easy to set-up a page that tells us what the styles should be on an end-page verses a section home page?)

For future discussion.