SiteGenesis Responsive Design
SiteGenesis provides the screen resolution modes for responsive web design (RWD):
- Small - viewport < 480px
- Medium - 480px < viewport < 768px
- Large - 768px < viewport < 960px
- Standard - viewport >= 960px
The following features were implemented in SiteGenesis to support RWD:
- HTML5 - see section below
- Semantically accurate markup - see section below
- Enhanced SEO capabilities - include updated site content structure and document outline
- Screen reader (accessibility) - see section below
- Optimized style sheets
- Layout specific style sheets – based on screen size
- Streamlined JavaScript that takes advantage of the latest methodologies
You can enable or disable RWD in SiteGenesis via Business Manager site preferences. See Configuring Storefront Preferences.
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