Jump to content


Photo

Use of Accordion Elements


  • Please log in to reply
34 replies to this topic

#1 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 08 September 2017 - 11:24 AM

Hi guys,

I'm new here, so first and foremost: hello!

Since 2003 I have been running my hobby site, called Wildlife Online, which contains natural history info about British wildlife (where I'm based). Over the years the content has grown significantly and last year I decided it was about time to upgrade my site to a compliant (WordPress) platform. The previous versions of the site were built (by me) in FrontPage (>cringe<) and later in Expression Web. It's been years since I've done any web building and have never been particularly competent at it (hence the use of the aforementioned software), so I hired a web designer to build the framework so I could work on the content. Now she's handed the site over and I've finished revising the content I've started migrating it to the new site. Most of it's straightforward(ish), even for me, but I'm after some advice on using accordion layouts.

As my main articles are pretty long, I've split out some further subjects that warrant more detailed discussion into a series of questions and answers. At the moment, the structure on the new site uses an accordion element, clicking each question to drop down the answer. I'm wondering, though, whether there's a better way of doing this, or splitting it up? Here's what I mean:

Currently my QA section on foxes is split across two different pages, each pretty long:

Fox QA 1
Fox QA 2

The content is going into the following structure on the WordPress site:

WordPress Fox QA

I'm worried the amount of content on here might be too great for the accordion to manage. Any thoughts on the best approach? Should I try and split the pages?

Thanks for your time.
Cheers,
Marc. 

 



#2 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,091 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 08 September 2017 - 12:33 PM

Welcome mate, damn you got a lot of content, Kudos :D

 

For my two-pence worth I would seriously consider a restructure over using an accordion. Your current site has all that gorgeous content in one big page, however I would consider a restructure to the following sorts of paths using dynamic urls, something WordPress handles quite well (i'm told).

 

  • Home > Questions & Answers
    /questions_answers.html change to /questions_answers/ or /qa/ and keep the list under headings and current sections.
  • Home > Questions & Answers > Foxes
    /qa/foxes/ a feeder page with an introduction about foxes, how comes you know so much about them and a list of all fox Q&A which each click to their own page.
  • Home > Questions & Answers > Foxes > Are Foxes native to Britain?
    /qa/foxes/are-foxes-native-to-britain with the content from /questions_answers_foxes.html#native

This will teach both the search engines and visitors a hierarchy when combined with breadcrumbs. So visitor asks the search engine "Are foxes native to Britain?" and the search engine knows there is an article on "Wildlife Online" in a section all about "Foxes" which answers if "Foxes are native to Britain". With breadcrumbs showing the visitor can also transverse to find out more about Foxes, or transverse again to find out what other wildlife you have a Q&A on. 

 

Secondly it gives visitors a chance to cite your article direct rather linking to a massive page of all Q&A about Foxes. You can also fine tune the meta and open graph data to the specific question and answer rather than a bit about everything as a whole.


Edited by BrowserBugs, 08 September 2017 - 12:34 PM.


#3 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 08 September 2017 - 04:56 PM

Thanks BrowserBugs; for the welcome and the excellent suggestion.  I'm glad I asked now, before I started copying over the text!

 

When I was first looking at moving the site to WordPress I did contemplate splitting the QAs into individual pages (without having really given any thought to a structure); but wondered whether increasing the page count significantly (from 8 or 9 to 70) would be an issue.  From what you say it sounds like it's actually the better approach and it's certainly a more logical way to progress.

 

My web designer suggested the accordion layout for the sections of my main articles too (e.g. for Red fox).  If I do this for all the articles, along with the QAs, it pushes the page number above 200.

 

Many thanks again for your help.

Cheers,

Marc.



#4 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 09 September 2017 - 06:23 PM

No, don't use an accordion.

 

200 pages is good 600 pages is better. Don't every worry about having too many pages, focus on really great internal linking and people will quite happily navigate from one page to another.

 

I'd not use the hide and reveal on the any of the QA/FAQ pages. Just make the whole page visible all the time, people will scroll down to the bit they want to read.

 

PS: the WP install you have is very slow - dumping all the fancy features will speed things up a lot and make the site much more user friendly and simpler to use.



#5 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 10 September 2017 - 03:07 PM

Thanks for the reassurance, fisicx.  I've been making a start today restructuring the pages as you and BrowserBugs have suggested, but it's really slow going because the CMS editor doesn't seem to work properly, so I can't modify the size or colour of the fonts without going into the code (which I'm very uncomfortable doing being a novice at all this).  Whenever I click on the option for font or colour (indeed any of the editor options with a dropdown) I can't see anything.  The arrow against the button just changes from up to down, but no list is displayed (see below).  I've not heard back from the web designer, but I suspect it's an issue with the editor (CMSMasters Content Composer) because the same thing happens in Chrome, Edge, Firefox and IE11 on three different computers (two different networks).

 

cms_editor_error.png

 

Regarding the speed of the site, my web designer mentioned before she handed it over that she'd disabled everything she could and that was as fast as she could get it.  The suggestion was that I need to upgrade my hosting package once I go live.

 

Cheers,
Marc.



#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 10 September 2017 - 03:38 PM

Don't try to change font sizes or colours. The idea behind a CMS is it's all done in the CSS. So just dump the content in the pages or posts and sort out the styling later.

 

I can help you with this if you want.

 

Don't use a composer plugin to build your pages - this always ends in tears. Keep it really simple and just use the WP editor.

 

And don't use the gallery thing either - just put the images in a new page/post and make them as large as you can.

 

As to page load speed - there are a while bunch of scripts loaded that you don't need. Getting rid of these will help.

 

Give me a call if you need help. Number is on the site in my signatiure

 

PS: not actually sure what you site designer actually did. All they seem to have done is install a $59 theme: https://themeforest....s-theme/8497776


Edited by fisicx, 10 September 2017 - 03:41 PM.


#7 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 10 September 2017 - 04:00 PM

Thanks again fisicx, and for the offer of additional phone help.  I'm making slow progress but will keep your number to hand, particularly when it comes to trying to disable some of this stuff.

 

I've been using the content composer mainly because I want the site to have some visual appeal and that's the only way I seem able to achieve it.  It is a bit of a nightmare though, so I will have a look at the default WP editor.

 

The designer installed the theme and created some of the initial structure, albeit that I've redesigned several of the pages to get rid of the toggle/tab components.  She also did some modifications at my request, such as adding the search box and turning off comments on the main pages, although I have a feeling you're going to say they're not particularly complicated things to do.



#8 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 10 September 2017 - 04:10 PM

The visual appeal comes from the theme not how you compose the pages.

 

There are thousands of free themes you can switch between - eventually you will find one you like. But in reality - nobody but you cares what the site looks like. Your visitors are only on the site because they want your content not because it looks nice.

 

Keep it simple, that way it will look good on a phone, tablet and desktop.

 

And enabling and disabling features can be easily done in the dashboard. Comments for example is all managed in the Settings > Discussion.

 

So just focus on the content for now. And make sure you keep the pages and posts properly organised. It's much better to plan the site structure before adding any content.



#9 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 10 September 2017 - 04:44 PM

Some sage advice, fiscix - thanks.  I agree largely with what you're saying, although as a photographer I do care about the general appearance of the site, even if my audience is less interested.  I take your point, though, and will put the next few days into adding the content as simply as possible rather than wrestling with the design.  I've already mapped out the structure based on the previous advice on this thread, so will work to that.

 

I appreciate your time.

 

Cheers,
Marc.



#10 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 10 September 2017 - 05:02 PM

You are correct, the appearance does matter to a certain extent but the simpler the layout the easier it is for people to appreciate the imagery.

 

For example, this is one of my test sites: http://imagesofplaces.co.uk/

 

Or this page for the car club I belong to: http://wftr.co.uk/eire-turas-2017/

 

No modals, no popups, no fancy overlays. The focus is the images.

 

Or imagine this sort of thing for introducing the species profiles: https://onepage.aeri...support-topics/ No unnecessary animation or lazy load like you currently have



#11 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 10 September 2017 - 07:10 PM

I particularly like the layout of the test image site - much cleaner and simpler.  I have removed the animation from the three 'pick box' pages.

 

Is it simple enough to change themes once the content is up?

 

Cheers,
Marc.



#12 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 11 September 2017 - 05:44 AM

Yes, you can install multiple themes, preview and switch between them in seconds.



#13 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 11 September 2017 - 06:21 AM

Great, thanks fiscix.  I spent most of yesterday evening sorting out the structure and have done the first QA following BrowserBug's suggestion:

 

Why do badgers have striped faces?

 

The only thing I'm struggling with at the moment is not using the Content Composer (as sucky as it generally is) because my designer created templates containing the header and footer (sidebar) configuration so the pages look consistent.  Assuming I actually need to use these, as these were built using the CC, using the default editor means I have to work between blocks of code:

 

default_editor.png

 

Cheers,
Marc.



#14 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 11 September 2017 - 07:05 AM

And that's going to bite you in backside long term.

 

Headers, footers and sidebars are all widgets. They should never be part of the page/post content.

 

Delete the blocks of code (you don't need them), disable the composer and just use the default page template.



#15 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 11 September 2017 - 11:26 AM

Okay, so when I create a new page (without selecting the template my designer created) with only the default WP editor active, I get this:

 

Test Page

 

The same menu appears at the bottom, just without the background colour/image.  The footer now appears to be being managed by the "theme options" section.  Is this the correct approach?  (I like the idea of having that section at the bottom to hold the blog posts, search, etc., freeing up space in the menu at the top.)

​Cheers,
Marc.



#16 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,091 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 11 September 2017 - 12:43 PM

I'm no WordPress expert but a single header and footer which gets pulled in is much easier to manage than adding one via the post. A post should be essentially code free, else if you decide to change the menu you'd need to edit every page again just to do it. 



#17 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 11 September 2017 - 02:26 PM

Yes, that makes sense.  I was hoping there might be a way to add a background colour to the footer as was done with the widget in the main page code, but it doesn't seem to be an option in the theme's menu configuration.  I guess that could be theme-specific, though.

 

Anyway, I'll persevere with the content upload and structure now and worry about tweaking the appearance later.

 

Cheers,

​Marc.



#18 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 11 September 2017 - 04:41 PM

Colours, backgrounds, images and so on are all theme dependent.

 

But you are on the right track with the exception that the font size is way too small. But again, this is theme dependent. Ideally the font size and page wqidth should be adjusted to ger 12-14 words per line. You are around the 20 words per line mark.



#19 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 11 September 2017 - 07:52 PM

Thanks.  I did wonder about the font size.  I changed it to 16px, because that's what I'd read most web browsers default to.  This isn't well replicated between browsers, though.  In Chrome changing the font size in the theme config makes little appreciable difference to how the page renders, while it is significantly different in edge:

 

Chrome:

 

chrome.png

 

Edge:

 

edge.png

 

Page: Q: Do foxes and badgers bury their dead?

 

A font size of 16px looks comfortable to me, but I notice it's still well above the requirement you suggest.  Making it any larger would look odd, I think, so presumably the only option is to reduce the width, thereby lengthening the pages?

 

Cheers,

Marc.chrome.png



#20 dap

dap

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,426 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 12 September 2017 - 04:24 AM

are you sure you don't have any zoom applied in edge or the default text size set to something other than medium? that pages renders exactly the same for me in latest chrome and edge and firefox. and as fisicxpoints out it is all about the line length (the "measure") i.e. around 12-14 words per line. no need to worry at all if the pages get longer if it means the maximum comfortable reading experience. generous white space i.e. padding around elements - space between text and images for example - helps too



#21 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 12 September 2017 - 05:07 AM

How are you changing the font size?

 

To make sitewide changes you should be editing the CSS (Dashboard > Themes > Editor)

 

I'd also break the content up into smaller paragraphs and add headings as this makes it much easier to read. You can also cross link between pages, on your fox page for example you mention badgers - you could link to the badger page (wordpress makes it really easy to do this). 



#22 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 12 September 2017 - 05:17 AM

Thanks dap.  It turned out to be a cache issue.  Clearing the browsing data resolved it.

 

I'm changing the font size in the theme editor, fisicx, so it is being applied across all the pages.  Thanks of the additional suggestions, I'll have a look at those.

 

Cheers,
Marc.


Edited by mbaldw, 12 September 2017 - 05:20 AM.


#23 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 12 September 2017 - 08:03 AM

The use of pixels font sizes may cause problems.

 

Try using percentage or em/rem sizes that way the font sizes will adjust to browser settings.

 

However, you can fiddle with this once you have finished adding all the content and maybe chosen a different theme.



#24 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 12 September 2017 - 08:48 AM

Thanks fisicx.  I didn't notice an option for rem/em in the theme settings, but will have a look once the content's up.  Two more questions, though:

 

1. Is the word spacing along the line (i.e. max 14 words) something I should be able to set within the theme config?  I've yet to find anything that looks right for doing this, but that could be a reflection of the chosen theme as much as my lack of knowledge.

 

2. Do you have any recommendations for the long natural history articles in terms of their formatting?  The red fox article, for example, is 155 pages without images.  Do you think I'm best keeping this as a single (long) page?  Or should this be split into its respective sections as I'm doing with the QAs?

 

Many thanks....again!

 

p.s. You'll be pleased to know that I'm away for a few days from Thursday, offering you guys some respite :yahoo:



#25 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,091 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 12 September 2017 - 09:24 AM

Just to throw in a helping hand check out http://pxtoem.com/ ... great for working out px to em to % to pt font sizes :D



#26 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 13 September 2017 - 02:12 PM

Thanks for that BrowserBugs - very helpful.  Since doing this I've found myself noticing text size and spacing on website I visit, never having apparently paid attention before!

 

Do you have an opinion on a structure for the very long articles?  Single page, or structured more like you proposed for the QAs?  The accordion idea has been binned :D

 

Cheers,
​Marc.



#27 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 13 September 2017 - 05:02 PM

Wordpress can break long pages up into smaller chunks if you have the right code in the theme.

 

On your 'page.php' theme check if ypu have:  <?php wp_link_pages(); ?>

 

There are loads of way to structure the site so it might be worth stopping for a bit and do some planning. Give me a call as I've got some ideas to bounce off you.



#28 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 13 September 2017 - 05:47 PM

Thanks fisicx, will do.  I'm about to head out so it would either need to be late this evening (i.e. ~21:30) or Sunday.  Does either work better for you?

 

Cheers,
Marc.



#29 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 13 September 2017 - 05:58 PM

Sunday is better



#30 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted 13 September 2017 - 06:20 PM

Works for me.  It'll be during the (hopefully early, depending on the traffic home) afternoon, so let me know if any time in particular works better for you.

 

I've had a look on your profile and can't see a number.  Not sure if it's because I'm new so have some restrictions on my account until I've made 25 posts.

 

Cheers,

Marc.



#31 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 13 September 2017 - 06:30 PM

https://aerin.co.uk/contact-me/



#32 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,091 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 14 September 2017 - 08:11 AM

Thanks for that BrowserBugs - very helpful.  Since doing this I've found myself noticing text size and spacing on website I visit, never having apparently paid attention before!

 

Do you have an opinion on a structure for the very long articles?  Single page, or structured more like you proposed for the QAs?  The accordion idea has been binned :D

 

Cheers,
​Marc.

 

Here's the beginners guide to SEO by Moz. I'm citing this as they have done a good job with structure using chapters, see https://moz.com/beginners-guide-to-seo. This method might be good for long articles with clear sections.

 

Edit: If you're breaking the content over multiple pages then you really need to understand rel="next" and rel="prev", see https://support.goog.../answer/1663744


Edited by BrowserBugs, 14 September 2017 - 08:15 AM.


#33 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 309 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 18 September 2017 - 03:09 AM

I'm looking forward to seeing how your site looks when it's done. Yes, you have tons of content and I like the way it's easy to find and quickly research.

Even an old website hobbyist like me can see that the original yellow buttons were quite old school, yet grouped conveniently, easy to understand and quite welcoming to click on. With that in mind, I think that the main headings text (Home - Wildlife Articles, etc.) in your latest iteration could be a touch bigger and more enticing. (I'm not sure if that blue is going to work.) Congrats to the content. The photos are great too.


Edited by Grant Barker, 18 September 2017 - 03:10 AM.


#34 mbaldw

mbaldw

    Forum Newcomer

  • Members
  • Pip
  • 16 posts

Posted Yesterday, 09:22 AM

Thanks Grant.  I suspect you're right about the colours.  The menu has also started screwing up (hanging at the top all of a sudden), so at the moment I'm just working on uploading the content and will then sort out the theme.

 

While I'm at it, does anyone know why the table about one-third of the way down this page isn't central, despite the code suggesting it should be?

 

QA on Deer Antlers

 

Cheers,
Marc.



#35 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,466 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted Yesterday, 12:01 PM

To centrally align a table you need to edit the CSS:

table {
    margin: 0 auto;
}

And don't fix the width either or it won't work on a small screen.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users