More Space - Less Content

The Importance Of "White" Space

Whitespace is probably the most important yet least understood element that make up a great web layout. It creates harmony and balance in a page design. It should be used to lead the visitor from one element to another.
The web designer's main goal is to make the page look simple and uncluttered and deliver the information in a clear and easy to find way.
Be Professional
The use of whitespace separates good design from not-so-good and down right bad. The professional knows the value of white space - the "less-than-professional" wants to fill every inch of it with content!
Whitespace should not be considered as "blank" space but as the element of design that enables the objects on the page to exist. It is the space that both separates and balances the items.
A layout overcrowded with text and images creates confusion and the message often gets lost.
Less Is More
When a web page showcases a number of items or topics, it's important to place them in well defined areas and not give visitors info overload. Too much text will cause most visitors to space out and look elsewhere.
Use a good heading to hook them in and a few well chosen keywords to describe the product or service.
Hide & Seek
Using a "load more" function not only clears the clutter and simplifies the design but allows the visitor to interact with the content in a positive way.

Show More Grid Row Layout

Show More Grid Row Layout

As you can see from the image to the left, Mickey put a lot of thought into designing this widget.
The layout consists of an HTML5 <figure> and an <article> side by side in separate columns with a "Show More" <article> appearing below on click.

Show More

This section appears when the icon tab is clicked. The tab has a chevron down icon when this section is closed and a chevron up when it is open. The tab colors and background can be changed.
This section has a heading, text and an optional CTA style link which can be configured to open internal or external pages with a new window option.

EverWeb Widgets
Show More Grid Row Layout

Layout Switch

When several of these widgets are stacked, the layout can be made by switching the position of the first two elements.

Open & Close

The widget uses a jQuery plugin to enable the amimated open/close function. When viewed on the EverWeb ddesign canvas, the "more" section is open. It is then closed prior to publishing by checking a box.
Note that any item can be open on page load if required simply by leaving the box unchecked. When several of these items are placed on a page, the opened one will close when another is opened.
Proportions
The <figure> and the <article> beside it are vertically centered in the grid. Their relative widths can be changed by entering different values for the number of fractional units they occupy.
If both items are to be equal in width, the controls for "Left Column" and "Right Column" should be left at the default value of 1.
In this example, the left column is set to 3 and the right column to 2 so that the text occupies 3/5 or 60% of the width and the image 2/5 or 40%.

Grid Widgets
Show More Grid Row Layout

Responsive Action

When viewed on mobile touch devices, the image becomes full width and the text positions itself below it.
The breakpoint at which this happens is selected from a drop down in the widget settings.

Media Queries

A media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
In responsive design, side by side items can't just stay like that as the browser/device window width is decreased - otherwise they would become too small to view properly.
A breakpoint is added via a media query to change the layout when the available width is equal to or less than the value set in the media query.
This widget only requires one breakpoint but more complex layouts can use several to change the layout for all the differrent device types.

EverWeb Widgets

EverWeb Widgets Blog
All Rights Reserved
© EverWeb Widgets -