Accordion Web Content: The Good, The Bad, and What We Recommend

It is so nice to be back to writing the Caught in the Web Consulting blog after a wonderful summer.

Our team spent lots of time with family, friends, at the beach, in local pools, visiting numerous museums, day trips around Virginia and Philadelphia, grilling out, and continuing to offer digital strategy, design, and support to our wonderful clients including The PLAY Project, Harris & Harris Wealth (led by the amazing Zaneilia Harris!)The Childhood League Center, the Long-Term Solution Services Center (an outstanding collaboration between our client, LeadingAge and the University of Massachusetts, Boston). We are so excited about these projects, and look forward to sharing them in the ‘Our Projects’ section of on our website.

Recently, a client asked me about accordions and whether or not it is a best practice to utilize them on their new website (we are providing design and content strategy for their effort).   A website accordion is a web treatment that vertically stacks list of headers that can be clicked to reveal/ expand or hide/collapse content associated with them.

When determining whether or not to use an accordion for any of our clients’ website projects; we first review all of their content to determine if it can be used (and if the functionality [typically content management system] will allow it) with carousels, polls, etc. instead of solely presenting passages of content within accordions.

Here are the pros, cons, and what we recommend for using accordions for content on your website.

The Good

  • Accordions are definitely idea for growing mobile audiences as users can have an upfront sense of the information they find available.  Similar to hamburger menus that collapse and reveal navigation; audiences have become accustomed to this type of functionality, as well as read more drop downs (blogs) are more commonly using this treatment). On small screens, people often stop scrolling before reaching the end of an extremely long page. Collapsing the information is a better alternative as it reduce excessive scrolling.
  • One of the main reasons we implement accordions in so many of our clients’ web treatments is to allow mobile-first visitors to have control over their content path so that they can decide whether to expand or defer it for later, giving them the choice of what to read and what to ignore.
  • Accordions are most ideal when the audience only requires a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
  • Also, accordions should be seen as a way to present support information. Key, required/must have content should never be placed in a content. Make sure that it is always readily available, visible to users as they are picking their path.

The Cons

  • Accordions become problematic when they become a substitution for overall best practices for content length. Accordions are quickly abandoned when users realize that they are just a dumping ground for long passages of content.
  • Accordions are not the most print-friendly content on the web. When printed, accordions do not automatically expand all of the content. If your audience tends to lean towards desktop usage, I would suggest that a statement is positioned above the accordions that offers a brief explanation on using the expand-all icons to display content before printing.
  • Any keywords that are only nestled in accordions will not display in search results. It is important to ensure that any keywords that are specific to the accordion content are added as overall keywords throughout the page and website. Otherwise, they will not display in search results.  We do know that Google™ is working with an array of developers to find solutions to this.

What we recommend

So, should you use accordions in your website content? It really depends on what your analytics show, or how your audience engages with your website.  If you have a mobile-heavy audience, we definitely suggest the implementation of accordions. If you have a more desktop-heavy audience, focus on brevity of content.   Relevant, strong content is more important than length, any day.

We believe that the best approach (and one that your audience will appreciate) is to provide a strong but natural, balanced mix of content genres and methods for displaying content for improved user experience.

Please contact Caught in the Web Consulting to discuss how we can help you determine when accordions do and do not make sense for your content.

While we began our blog by talking about all of the fun we had this summer, we cannot ignore some of the very troubling and tragic events that occurred.  The barring of transgender Americans who want to serve their country and are willing to give the ultimate sacrifice. Dreamers or ‘DACA’ participants who are often in the early stages of their education, careers, and are frequently breadwinners for their families; who now must live in fear of deportation for no fault or wrongdoing of their own.  The horrifying events in Charlottesville, Virginia that led to an unforgivable day of hate, rage, violence, and death.   And sadly, the extreme devastation caused by Hurricane Harvey that have left many without their homes, basic supplies, and has left at least 70 people dead as of the time we write this blog.

The point of our blog is not to be political. But we can’t ignore what is going on in our world. And some issues are not left or right. They are a matter of basic human rights, decency, and morality. Discrimination is wrong. Bigotry and hate should never be tolerated. And in times of natural disasters, non-partisan, non-biased support is vital. We stand with and for love of all people, no matter where they come from, look like, who they choose to love, or what they believe in.

Our amazing designer is based out of Houston, TX and somehow, kept a positive outlook and continued to serve clients in unimaginable conditions. 

If you would like to give a donation to support good, honest charities that are helping families impacted by the hurricane, please visit this website.

Please share our post!
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someone

Leave a reply