A "content first" strategy reduces the risk of bumping into problems in webproject. Our expert tips on content strategy, structure and challenges.
Subscribe to our blog
When we look at the modern Web, we see a great variation in devices used for browsing. Those devices have various input methods (e.g. touch or voice), different screen sizes, etc. However, the difference not only lies in the range of devices used to consume digital content. A web browser is just one of the applications suitable for consuming content.
Content is like water
Gone are the days when the web was contained in our desktop and laptop computers. Today it flows through a sea of unique devices each with their own opportunities and limitations.
- Luke Wroblewski, 2013
Next to that, technologies like RSS or applications like Pocket or Instapaper are available which can pull content from various sources and present it in a specific way depending on the medium (e.g. tablet, smartphone, e-reader or classic paper). Furthermore, mobile apps need content too in most cases.
A good question to ask is whether our content is ready to be presented in all these various scenario's. A distinction can be made as follows:
- Content presented on a website under our own control
- Content which is pulled out to be presented by a third party
These scenario's depend on one key element, which is structured content. When content is carefully structured, we can more easily present it in different ways or expose it to external services. In both cases, tools and best practices are available which can help.
You need to be thinking more about relationships and priorities than about locations and sizes"
- Sara Wachter Boettcher, March 2012
When talking about content structuring and modeling, we often think about the placement of different pieces of content and their size. However, it is more convenient to think in terms of relationships and priorities because these parameters take into account the semantics behind content, which allow us to make more informed decisions about page structure.
Imagine building a responsive website and looking at it through a smaller viewport (e.g. smartphone). It is important that e.g. call to action buttons are placed in a proper position. Mostly they are located in a sidebar which traditionally moves to the bottom of the page when browsing through a smaller viewport (e.g. by using media queries). That's not an optimal position for a CTA button: in most cases it should be located more to the top of the page for all users (desktop, tablet, etc.). A good decision can be made though when we reckon with the semantics of the various elements on the page.
Actually, we make use of some nice tools at Amplexor to help our customers structure and manage their content: our beloved Content Management Systems!
Content type challenges
Text is the most simple type of content in a sense that it can easily flow into different containers. Yet, there are various content types which are more difficult to present in a flexible way, especially on smaller screens. The sections below highlight some of these content types.
Image display size can be set relatively easy by using CSS width or max-width properties. The biggest challenge however is image filesize. Images can get quiet large, which should be no problem for today's broadband connections, but mobile devices on the other hand mostly do not have such fast connections.
Several solutions are at hand here:
- Simply do not use large images: use images with a maximum width of e.g. 320px
- Use different image source files for different screen sizes: server-side components are necessary to automatically resize images ("Responsive Images" technique)
- Same as (2) + cropping to make sure the subject of the image is more visible. Greatest challenge here is to allow content editors to decide upon the different images to load for the various screen sizes
- Use vector graphics
Next to bandwidth issues, there is also the issue of pixel density. Some displays nowadays (e.g. Apple Retina display), have a higher pixel density. An extra effort can be done to make images look very sharp on these displays by serving them up in higher quality.
The actual selection of the correct image can be done using various techniques:
- CSS: use media queries with different image sources (only useful for background images)
- htaccess files: rewrite image URLs upon request
- Use AJAX to serve up the correct image
Two important remarks:
- These techniques are very difficult of not impossible to implement when inserting images using a rich text editor
- Make sure that the smallest images are always the default
Data tables tend to get very wide which imposes a visibility problem on smaller screens. Below is an example of a data table from the Kinepolis website:
Various solutions are at hand to display this data on smaller screens:
- Hide certain columns for certain screen sizes (bad practice in general as it contradicts the principles of One Web)
- Replace the table with a chart (if possible for the given data)
- Transform the table (e.g. horizontal -> vertical)
- Create a scrolling table
Practical examples can be found here.
A lot of navigation patterns are available, and some resources are worth exploring.
For the Kinepolis project, we replaced the big fold-down menus with a menu list which can be popped open with a click:
- A "content first" strategy reduces the risk of bumping into problems further on in the project
- You need content that can "go places"
- Some content may need to be thrown out (irrelevant content)
- For this to work out, a good content strategy is needed
- Content structure is very important
- Rich text is (once again) a PITA
- Get and use representative content when developing and testing a solution
About the author
Jan Lemmens is a DXM and ECM Consultant at Amplexor, based in Belgium. As an enthusiast for platform-independent design and open source technology, Jan focuses in architecting and building innovative, cost-effective and user-friendly solutions for Enterprise customers. He has been responsible for several successful Drupal API and architecture projects.