Design and Components
The visual design of NREL.gov reflects the brand attributes of the lab—unbiased, scientific, authentic, trustworthy, and authoritative. Flat, clean design; square corners; professional photography; intuitive interface; contrasting color palette; and clean typography support NREL's brand at each level of NREL.gov.
The NREL.gov design philosophy centers on five objectives: mobile first, responsive, reusable components, touchability, and accessibility.
Mobile First
The first concepts for the NREL.gov design were focused on the smallest screen width. The content, navigation, and interface elements work for all screen sizes and follow the principles of Luke Wroblewski's "Mobile First" approach. This ensures that only the most important elements are included at the beginning and that those elements are available for all screen sizes.
Responsive
The three characteristics of a responsive site are media queries, flexible images, and fluid grids. NREL.gov leverages the Bootstrap framework to incorporate all three of these characteristics:
- Media queries: define x-small, small, medium, and large screen sizes
- Flexible images: resize to adapt to screen widths, including @2x images for retina screens
- Fluid grids: adapt to screen sizes and are the foundation for equally adaptable components.
Reusable Components
Components are the content building blocks that create a dynamic and engaging user experience on NREL.gov. Components can be reused easily or with small adaptations for specific content. Media blocks have been configured for maximum impact to users and for digestability of the content. By mixing and matching components within the various available grids, pages can be built to accommodate and organize content.
Touchability
NREL.gov is future-friendly and usable across devices. Increasingly, screens both large and small are also touch-enabled, and, therefore, interactive components are big enough to touch on all screen sizes.
Generally, 40 px is the minimum size used for touch controls, meaning all form elements are a minimum of 40 px tall. Other items, such as links, have a smaller touch area, so minimizing the number of links in paragraphs of text or lists is ideal. Increased touchability also comes from full component media blocks linking out rather than single words or phrases within the block.
Accessibility
NREL.gov strives to meet the requirements of Section 508 of the Rehabilitation Act. Section 508 requires that all federal agencies make their electronic and information technologies accessible to people with physical, sensory, or cognitive disabilities. In practice, this means web content should be provided in a way that is accessible to all visitors, no matter how they access the site. For more information, visit Section 508.gov.
Section 508 mandates how information is conveyed through color, contrast, design of tables, accessing on-page links, and more. The NREL.gov responsive design templates include the following section 508-related functionality:
- Persons using a screen reader are able to skip repetitive navigation links
- Color contrast for all elements are defined in the main style sheet (e.g. navigation, titles, fonts/background)
- All elements in the base template are accessible via a keyboard.
Code from the component library was created to be 508-compliant, including data tables and keyboard accessibility for accordions. Accessible placeholder code for other elements and components is provided, and the person adding the content will be required to insert appropriate text for photos, icons, multimedia, and form elements.
See the following guidance for some of the most common tasks related to Section 508:
Writing text versions for videos and animations
Share
