• The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
• Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
• Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

Related Concepts

Audience and Device Aware (ADA)

Audience and Device Aware is an approach aimed at ensuring that a site is optimised to deliver what a user wants and that works effectively on the device being used to access the site. Unlike Responsive web design (RWD), which crafts a site visually for a range of devices, ADA aims to reflect the many different elements that enhance and impact on the performance and usability of a site. The predominant application for the ADA approach is for mobile and smaller screen devices. The principle truly sees the adoption of a “mobile first” strategy and focuses on the performance of a site and value that it delivers to a user and the business.

Mobile First

“Mobile first”, unobtrusive JavaScript, and progressive enhancement (strategies for when a new site design is being considered) are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site, and enhance it for smart phones and PCs—rather than try graceful degradation to make a complex, image-heavy site work on the most basic mobile phones.

Progress Bar

The Progress Bar shortcode can be used to show the current status of a task. Below is an example this shortcode in use.

This shortcode includes a customization options for the accent color, label and status percentage. Any number of Percentage Bars can be added in series or by itself.

Accordion

The Progress Bar shortcode can be used to display secondary content which can be shown or hidden via user input. Below is an example this shortcode in use.

This shortcode includes a customization options for the title and its default state (open or closed). Any number of Accordions can be added in series or by itself.

Button

The Button shortcode can be used to display call to action type buttons. Below is an example this shortcode in use.

These buttons can be set to three different sizes of Standard, Large, and Extra Large. They can also contain a FontAwesome icon as demonstrated below.

As well as inline, these buttons can be set to block or centered. A centered button is idle for CTA (Call-to-Action) uses. A button link can also be set to open within a new tab, opposed to the active tab. Below is an example of a centered button.

This shortcode includes a customization options for the label, icons, accent color, size, and button style (rounded corners etc.). Any number of Buttons can be added in series or by itself.

Status Message

The Status Message shortcode can be used to display notifications. Below is an example this shortcode in use.

This shortcode includes a customization options for the title, associated icon, and notification style (Error, Success, Info etc). Any number of Status Messages can be added in series or by itself.

Annotation

The Annotation shortcode can be used to annotate text to images, text, tables, and other content types. Below is an example this shortcode in use.

Annotation Title

Annotation Text

This shortcode includes a customization options for the title, and annotation message. Any number of Status Messages can be added in series or by itself.

Block & Pull Quote

The Block Quote and Pull Quote shortcodes can be for easy access to quote formatting. Below is an example of these shortcodes in use with some dummy contents.

I don’t believe you have to be better than everybody else. I believe you have to be better than you ever thought you could be.

— Ken Venturi

Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus tellus quis lorem.

Columns

The Columns shortcode can be used to split the single contents column into multiple columns. Below is an example this shortcode in use.

Two Columns

Four Columns

Six Columns

Tabs

The Tabs shortcode can be used to display related secondary content into tabbed containers. Below is an example this shortcode in use.

This shortcode includes a customization options for the title and its contents. Any number of Tabs can be added to a single container, and multiple containers can be used throughout the post or page.

Full Width Block

The Full Width shortcode can be used to display content with its width filling the availble space. Below is an example this shortcode in use.

This shortcode is primarily designed for images – but does provide support for other content types which would take advantage of the increased space.

Content Embeds

In addition to the included shortcodes, Severn fully supports the WordPress third-party service embeds, such as Twitter, Youtube, Vimeo, Facebook etc. More information on these embeds and their usage can be found within the WordPress documentation.