SiteGenesis Responsive Design

Zoom

The SiteGenesis zoom functionality checks for viewport size and disables zoom with viewports less than 960px. For IE8 and IE9 browsers, use matchMedia polyfill (https://github.com/paulirish/matchMedia.js/).

HTML5

These HTML features are implemented in SiteGenesis:

• Structural, semantic document outline (for example, header, nav, and footer)
• Data tag attributes (data-image-src=”path”)
• Graceful handling/fallback on browsers that don't support HTML5

These HTML features are available but not implemented:

• Geo-locatation
• Video and audio support
• Local storage
• New/refined semantic elements (for example, figure, new form controls, article, and aside)
• SVG graphics rendering
• Web Workers (background js scripts)

Semantically Accurate Markup

Proper semantics let page content be accurately represented, converting the current web of unstructured documents into a web of data. Developers need to understand the markup requirements, and choose tags carefully. Some examples/pitfalls:

• Don't use <strong> to make something bold. The <strong> tag is intended to show content that is of strong importance. When this tag is applied, search engines and screen readers will add weight to the content, which might not be what you want.
• Headings outline the document, and relate it to other content. Do not use <h1>,<h2>,<h3> tags for appearance only. These tags should only be used to mark content that starts true sections of content.
• Use lists. When marking up a list of content such as links (nav), products, options, or any related content, use <UL>,<OL>,<DL> tags.
• Use tables for tabular data and not for layout.

Screen Reader (Accessibility)

SiteGenesis supports Screen Reader (WCAG, WAI, Section 508) as follows:

• Level 1 compliant
• Level 2 & 3 compliance depends on changes in rules