Elastic web design and content strategy
What is elastic web design?
Elastic design (aka ‘adaptive layout’ or ‘responsive design’) in web building means that your website’s structure changes into the most optimal display according to the device used to visit it. Or simply put: one website to fit all screen sizes.
To accomplish this, responsive design uses a feature of the latest version of CSS (CSS3), called ‘media queries’. That’s a method to query which kind of media is connecting to your site in order to offer the most suitable interface possible.
But an elastic design isn’t limited to layout changes. Media queries allow the implementation of some very precise fine-tuning as pages reshape themselves. Some examples? You can increase the target area on links for smaller screens, which makes them comply better with touch devices. You can selectively show or hide elements that might enhance a page’s navigation. You can even practice responsive typesetting to gradually alter the size and leading of your text, optimizing the reading experience in accordance with the display.
So, why is all this important? If you’ve ever been involved in the process of creating separate sites for desktop, mobile phone, tablet, etc.,… you’ll know it can be a drag. It’s no fun developing and maintaining multiple websites that are basically offering the same content. But if you only have to design and develop for one site, things suddenly become a lot more efficient.
Have a look at the new EmailGarage site we recently designed and developed according to responsive design principles. Check out how good it looks on a laptop, tablet, and mobile phone. Notice that, although the design and layout look different on each device, the content and the url are identical.
How responsive design impacts content
Right now, the conversation about responsive design is mainly fed by designers and developers. And those discussions are primarily about technical and aesthetic matters. But lets not forget it relates to content, too.
The point of using an adaptive layout approach is to allow the same content to work across multiple devices. This can make our job easier, because we don’t have to update content in multiple places.
Lets have a closer look at the most common three pitfalls of web content as we go from a desktop to a small device:
The content shifts - This the most obvious change in content when we look at a responsive design. As the screen gets smaller, columns become narrower, allowing text to become larger and more readable. Sidebars and other secondary content blocks move from the side to below the main column(s). Rows shift from three images to two or, in extreme cases, even just one. The main advantage is that visitors don’t have to expand and move around a site on a smaller device. When done properly, it can make the reading experience much more enjoyable and efficient.
The content gets hidden - Content that would otherwise take too long to skim by scrolling or just doesn’t fit well in the layout might get hidden. It is however shown when a visitor performs a specific action, like clicking a button or activating a drop-down.
The content gets removed - Although the general consensus is that removing content is a no-go, you often see this happen when specific mobile sites are built (and it’s very tempting for the sake of graphics, reduced scrolling, lowered page load time, etc). But this can’t be a designer’s and/or developer’s decision, especially not when creating one website for all screens. Enter the content strategist.
Don’t underestimate the role of your content strategist
As we developed the EmailGarage website and created different layouts for different screen sizes, a lot of decisions needed to be made about what should happen to the content across different screen sizes. Should this piece of content shift? Become hidden? Disappear altogether? Should this portion go above or below that one? It all became clear that this is not a decision to leave to designers or developers.
Responsive design, Progressive enrichment, Mobile first, … these and other technical orientations, where content can take different forms across media and devices, are a new challenge to content strategists. The content you create needs to be flexible too. The traditional one-size-fits-all content document will not be good enough anymore.
The web, and how consumers use it, will continue to evolve significantly. Meaning web designers and content strategists will have to work closely together in order to anticipate these changes and offer the best user experience possible.
- The whitepaper we published last year “Mobile presence: what’s your flavor”. In this document, we outline 5 different flavors of mobile presence.
- Everbody wins with CSS3's progressive enrichment