A thoughtful new website design for Poems to Go

One of the reasons for accepting a project with a lower than average budget was to prove that, in the right hands, small businesses can benefit from thoughtful design without it costing the Earth.

Above—This thoughtful new website design and visual identity for Poems to Go was accomplished in just two weeks.

Every now and again, I receive a call or an email from someone with a tale to tell. It’s often a familiar one—especially if you’ve worked in client services for a long time like I have—and involves a failed website, an ambitious owner, and plans to transform a business. These stories often end with, “But we have a very tight budget.”

Above—The Poems to Go website before my redesign.

I’m not normally a sucker for a hard luck story, but when the owner of Poems to Go called to tell me how she wanted to rekindle her small poem writing business, I genuinely wanted to help her. At the same time I wanted to show how—in experienced hands—small businesses can benefit from thoughtful design without it costing the Earth.

Above—Getting foundations right early in the design process can speed it up dramatically, saving valuable time and a client’s money along with it.

A service which focusses on the written word suggests that beautiful typography—type which encourages people to read—should be the foundation for my new design. Typographic designs also need layouts which further improve the reading experience, and often an uncomplicated palette of colours.

Getting the foundations right

Most small business websites have a simple structure and need only a small number of layout variations for their pages. Getting these right early in the design process can speed it up dramatically, saving valuable time and a client’s money along with it. My new design for Poems to Go needed just four page variations, plus a few extra layout modules for specific types of content.


Tip: If a client’s concatenated their business name like Poems to Go, add either a thin space &#8201 (typically ⅕ or ⅙ of an em in width) or hair space &#8202 (thinner than a thin space) entity between each word.

Unicode HTML Result
None PoemstoGo
Full space Poems to Go
Thin space     Poems to Go
Hair space     Poems to Go

A grid brings cohesion to a composition. It helps people understand stories by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it. They define the position of valuable information or a call to action. A thoughtfully chosen grid leads to a wealth of creative possibilities and any number of exciting designs.

Some of the most inspiring and interesting layouts come when you combine two or more grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas—stacked on top of each other—or overlap each other to form what are known as compound grids.

Given the simplicity of Poems to Go, I chose a 4+3 compound grid where I laid a four-column grid over a one with three columns. By combining these two simple grids, I created an energetic 3|1|2|2|1|3 column rhythm which is full of movement.

Left—4+3 compound grid. Middle— Box wireframes. Right— Revealing the flexibility of this type of grid.

When a client’s budget is limited, time must be balanced between creative and technical. Fortunately, modern CSS layout properties including CSS Grid, Flexbox, and Multi-column Layout make technical implementation much easier, which in turn allows the time saved to be used on creative.

I started my technical development by defining foundation styles using CSS Custom Properties. These are similar to Sass variables but require no processing and can be changed using Media Queries or Javascript. My boilerplate CSS Custom Properties include variables for:

:root {
--font-family: 'Playfair Display', serif;
--font-weight: 400;
--font-size: 1.05rem;
--color-background: #fefdef;
--color-text-default: #2b2b2b;
--border-width: 1px;
--spacing: .75rem;
--duration-immediately: .1s; }

My CSS Custom Properties boilerplate, used for Poems to Go, is free for you to use in your projects.

Above—A new logo mark, colour palette, and iconography to refresh the brand’s visual identity.

Developing layouts with CSS Grid

CSS Grid, plus thoughtful, art-directed content offers us the best chance yet of making websites which are better at communicating with our audiences. Thankfully, it’s also incredibly simple for developers to learn. To simplify developing layouts for Poems to Go, I chose to first define my 4+3 compound grid as a CSS Custom Property:

:root {
--grid-64: 3fr 1fr 2fr 2fr 1fr 3fr;
--grid-gap: 4vw; }

Then, I applied that compound grid to a collection of layouts which I named after famous poets:

.austin {
display: grid;
grid-template-columns: var(--grid-64);
grid-column-gap: var(--grid-gap);
align-items: end; }

.austin > div {
grid-column: span 3; }

.byron { … }
.eliot { … }
.heaney { … }
.keats { … }
.shelley { … }
.tennison { … }
.wordsworth { … }
.yeats { … }

At present, there’s no way for elements to inherit columns from outside their parent (subgrids). However, it is possible to make any element into a grid container, even when it’s part of another grid. This is precisely how I accomplished the grid of stationery available to buy on the order page:

<div class="stationery">
<label>
<img src="stationery.jpg" alt="">
<input type="radio">
<span>Balloons</span>
</label>
…
</div>

.stationery {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: var(--spacing);
grid-row-gap: var(--spacing); }
Above—This design feels a world apart from current trends, but perfectly suits the Poems to Go brand.

Developing components with Flexbox

In atomic web design, navigation links, images and captions, and search inputs and buttons are called molecules and organisms. While Grid is ideal for implementing art-directed layouts, Flexible Box Layout (Flexbox) is often better suited to developing these molecules and organisms.

Flexbox is the perfect choice for laying out form inputs like the ones on the Poems to Go order page. When a viewport width exceeds 48em, these inputs flex to form two columns:

@media screen and (min-width : 48em) {

.form__cols {
display: flex; }

.form__cols > div {
flex: 1; }

.form__cols > div:not(:last-child) {
margin-right: var(--grid-gap); }
}

Goals accomplished

One of the reasons for accepting a project with a lower than average budget was to prove that, in experienced hands, small businesses can benefit from thoughtful design without it costing the Earth. Our work for Poems to Go took just two weeks, including integration of the new design with a Statamic CMS and deployment of the website to the client’s host server.

The result is a contemporary design with a classic feel; one which feels a world apart from current design trends, but perfectly suits the Poems to Go brand. Their new website is appealing, easy for customers to use, responsive, and blazingly fast, thanks to its minimal markup and efficient CSS. It achieves a fast 95/100 speed on desktop and 90/100 on mobile.

We wish Poems to Go every success with this new website and are confident it will improve their business as they’d planned.


Availability

I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from May 2019

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel
Gwaenysgor
Flintshire, North Wales
LL18 6EJ, UK