Web layout

Organize web content to create focus and clarity.

The web offers a broad canvas to create experiences that allow people to engage with their energy data. Clear layouts allow people to comprehend and navigate through information quickly. These principles and guidelines show how to create intuitive and engaging web layouts.

Principles

A few key guidelines for creating visually pleasing and easy to understand web pages.

Create focus

    ++Give content space to breathe, and reduce elements on the screen.

    --Visual clutter makes information hard to process and frustrating to interact with.

Use hierarchy

    ++Creating emphasis on a web page makes it easy to understand the importance of information.

    --Lack of hierarchy muddles understanding of different types of content.

Guide the eye

    ++Grouping content allows people to smoothly move through content.

    --Scattered layouts make people search all over the page for what they need.

Web elements

Opower’s web pages generally share a few consistent elements and layout guidelines. While these elements may not appear in every page, they help give consistency to Opower’s content.

Navigation
Use straightforward, non-technical labels to help people find what they’re looking for.
Headline
Open the page with a primary heading that explains the content of the page at a glance.
Body
Shows graphs, tips, and other information users should read about. Use alternating colors to break up the content into visually distinct sections.
Call to action
This is the primary action—don’t include more than one. Provide a next step for people to act on after reading information.
Footer
Includes information about the utility like contact, legal disclosure, help, and copyright.

Web grid

Opattern’s grid creates a set of rules to structure content in a consistent, easy to understand format. Opattern’s grid is built on Foundation. The default grid is 12 columns on a desktop screen and can stack vertically on smaller screen sizes.

12 columns
Basic grid

Vertical stack
Small screens

Layout Patterns

While a 12-column grid provides plenty of flexibility, we typically constrain our layouts to a few grid formations that best fit Opower’s content:

Alternating rows

Big and Little

Triplets

How to use the grid

You can create a grid by using Foundation’s grid classes in your markup, or by using Sass grid mixins in your stylesheet. The following example builds a grid with HTML classes (no extra CSS required):

HTML

<div class="row">
    <div class="large-3 columns">...</div>
    <div class="large-9 columns">...</div>
</div>

The example below creates the exact same grid layout, but with semantic classes and Sass mixins.

Sass

.widget {
    @include grid-row();
    .widget-aside {
        @include grid-column(3);
    }
    .widget-main {
        @include grid-column(9);
    }
}

HTML

<div class="widget">
    <div class="widget-aside">
        <p>Widget aside content</p>
    </div>
    <div class="widget-main">
        <p>Widget main content</p>
    </div>
</div>

For more guidance on using Foundation’s grid, head over to the Foundation documentation.