Ampersand Conference 2015- Friday 13th November • Brighton

Modern Layouts: Getting Out of Our Ruts- Jen Simmons • Notes by Sarah Evans

Back to all talks
Listen to the talk

Rut No.1

Standard layout with the sidebar which occasionally changes location.

An example of a standard layout
A classic website layout.

Rut No.2

Single page websites with 'panes' instead of pages - "Buy our product - we are unique"

An example of a standard layout
A classic website layout.

The hardest part is changing our thinking not the CSS

We already have the tools to be experimental:

CSS Shapes

.shape { shape-outside: circle(); shape-outside: ellipse(); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); }
A layout made with CSS shapes
CSS Shapes in action.

Useful information can be found here.

Viewport Units

Fonts resizing using viewport width
A font styled with vw changing size.

Useful information can be found here.

Flexbox

Useful information can be found here.

CSS Grids

Useful information can be found here.

There's a world of graphic design older than the web

Print is not the web and therefore shouldn't be treated the same, however we need to go back to experimental print layout and learn to apply these principles to create unique websites.

Back to all talks