Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

3. Contextual Layout

Contextual selectors allow you to change how content is displayed according to where it is placed in the page. By using the contextual selector method, you can define multiple definitions for the same rule. Then, depending on the parent element you place the selector in, the appearance can be radically different.

This has implications that are not always immediately apparent, allowing you to move entire content modules around within your page structure to partially or completely alter their appearance—without changing one character of the code.

If all your pages are hard-coded, this technique will not be particularly effective, but if you’re creating Web pages from a template using server-side technology such as PHP, JSP, or ASP, it allows you to simply change the layout logic to deliver the exact layout you want without having to maintain different code bases for each version.

Although they use the exact same HTML code, the appearance of the module is completely different when placed in Column A versus Column B.

EXAMPLE:

http://www.webbedenvironments.com/dhtml_css_advanced/examples/contextualLayout

  • + Share This
  • 🔖 Save To Your Account