Close
Tel: 0800 084 3086
0800 084 3086

Using interactive content to save space within a website

26th February 2018 By Matt Ainsworth
Using interactive content to save space within a website
Using interactive content to save space within a website

Using interactive content to save space within a website

26th February 2018 By Matt Ainsworth
When given the challenge of designing and developing a website, thinking about how content will appear on the page is key. Here, we discuss everything you need to know about using interactive content to save space, without impacting organic rankings…

Many websites are content heavy and often, clients end up adding a lot more (or less) content than they initially anticipated. Digital agencies, such as ourselves, often use Lorem Ipsum (Latin dummy text) during the design and development process to act as a placeholder for the ‘real’ text that will be used later on. Using Latin text allows a client to focus on the aesthetics of the design, rather than focusing on text.

In instances where you’ve got a lot of content, you’re challenged with keeping the design clean and minimal, yet allowing relevant content to be visible which is vital for SEO and user experience. In these cases there are a number of techniques you can use to both show and hide content in an elegant way without impacting conversion rates or organic rankings.

Accordions

An accordion menu is a vertically stacked list of titles that can be clicked to reveal or hide content associated with them. It’s an alternate method of having a lot of titles and content stacked on top of each other, which would make the page very long.

Using a combination of HTML, CSS and jQuery, they can look great and work smoothly, adding interactivity to your website.

See the Pen Kolodo Accordion by Matthew Ainsworth (@matt_kolodo) on CodePen.

Tabs

Using tabs to hide and show content is another effective method, we’ve talked about this in a previous blog article which you can read here.

These work brilliantly across a wide range of websites, especially within eCommerce stores. Product pages, for example, house all sorts of information including descriptions, FAQs, delivery information, reviews and more. All of these are of equal importance, so to prioritise one over the other vertically doesn’t make sense. All of this information needs to be high up the page and compact so it’s easily readable by the user and seen as important by search engines.

See the Pen Cool CSS & jQuery Tabs by Matthew Ainsworth (@matt_kolodo) on CodePen.

Making content scalable

When developing as website, it’s important to think about scalability. When more content is added to websites in the future using a CMS such as WordPress, the content could end up being a lot larger or smaller than first thought, causing disparity between the design and the website itself.

Here are a few ways you can tackle this issue to ensure your website is ready for growth:

  • Having images scale alongside content sections (as below).
  • Centering elements regardless of height using this method
  • Limiting the character count set for titles
  • Making text more concise to fit in with the design

In this website for one of our clients, the image grows and shrinks in height alongside the text block, allowing for a variety of content lengths.

If you’re looking to speak to our experts with regards to updating a current website, or would like a quote on a new website project, give us a call on 0800 084 3086 or email hello@kolodo.com today.

More from our journal

This is where we talk about our love for digital, our clients and our industry. View all »

Contact us

Speak to our team