Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial

Richard Nicholls
1,301 PointsSpreading content over multiple pages or have just one big page for main content?
So as the title states. I am making a website selling vehicle paint kits. Should I build one page for all of makes of vehicle so that one page is content rich or should I have separate pages for each vehicle manufacturer, optimising each page separately? The first option would make a huge page with 40 or 50 images but the second option gives lots of extra pages? Any advice would be great thanks
7 Answers

Craig Watson
27,930 PointsHi Richard,
For me it would all depends on usability from what you are saying, how many user/visitors could you loose if they find it annoying to scroll down for ages potentially missing what they are looking for or getting bored.
A well thought through set of questions to get to where they want to be might be better leading them to one page with only the info they require :)
I know that is what id want as a visitor, endless scrolling is a pain.
If you are making this using PHP or WordPress should be relatively easy to get going :)
Craig

Richard Nicholls
1,301 PointsThanks Craig, yes I agree and I am making this with just html, css and a bit of javascript but I am very much a beginner. Is there not a way of adding some code so that when a user clicks of their vehicle name/badge they could be taken to a certain section of the big page option to avoid scrolling? I am sure I have seen it somewhere. That way the single page theory would work but my head is saying multiple pages each optimised individually

Craig Watson
27,930 PointsYes you can use something like a scroll spy, here is a pen of mine with that very thing,
You could always adapt this so on the smaller screens the affix on the right slides in from the side as a pop out menu rather than on my example it just disappears for the sake of the example :)
The above is probably the faster of the two to build and you cant really risk finding a way to use javascript to load page data in case someone has javascript turned off.
Will you be using a framework to build the site like Bootstrap / Foundation?
Craig

Craig Watson
27,930 PointsI have just thought you could do this quite simply with a dropdown from a main navbar, if you wanted me to set up an example on CodePen I could do that for you today ?
Craig

Richard Nicholls
1,301 PointsYeah if it's no trouble to you. I want to use a navigation drop down like you have there for mobile devices. I am very very new to javascript though so the script just looks alien to me at the moment

Craig Watson
27,930 PointsNo trouble at all Richard :)
Would you be able to give me a quick example of how the categories would need to be set up for the dropdown.
For example:
<!-- Main Nav Link -->
<!-- Make -->
<!-- Make -->
<!-- Model -->
<!-- Model -->
<!-- Model -->
<!--Spec -->
<!--Spec -->
<!-- Make -->
Just so I know how may level deep the ul elements need to go really.
I will set it up on a workspace so you can see the exact code used and files loaded etc. :)
Regards Craig

Richard Nicholls
1,301 PointsTo be honest I would just like to use that for a navigation for the mobile size screen. Where the navigation buttons disappear when the screen is narrow. At the moment the navigation menu is hidden when viewed on a mobile. That way I could see how you did it and then play with it myself. A really good way for me to learn it too.

Craig Watson
27,930 PointsNo problem Richard that's fine :)

Craig Watson
27,930 PointsHi Richard,
Have a quick look at this it is responsive for all screen sizes. If this is something that would work let me know and I can give you a little more info on how I got there to set you off on your own :)
Craig

Richard Nicholls
1,301 PointsLooks great on mobile but the link wont show me anything on the desktop version. I only have a free account on codepen maybe its that

Craig Watson
27,930 PointsHi Richard,
I had made the pens private thinking if you had the link it would be fine, but I realize now only I could view them ...
It has been made public again and I've got a few changes to make from a little research I did last night :)
Craig

Craig Watson
27,930 PointsIf you get chance Richard here is a new pen with new dropdown styles and functionality.
This works really well on both large and small screens as it goes full width in the nav on mobiles. I will continue to clean up the code and make it more readable :)
Craig

Richard Nicholls
1,301 PointsThanks Craig, only just had a chance to look at this and it looks pretty amazing. Far too complex for me at my level but I have saved it and will come back to it over time and hopefully it will make more sense as time goes by. How long have you been doing this for out of curiousity?

Craig Watson
27,930 PointsHi Richard :)
It did get a little bit complex to be truthful, when trying to make the dropdown as user friendly as possible it became anti developer friendly lol.
But as you say it is there for reference in the future if you come to need something of that nature.
You dont have yo do it that way of course you could use a standard hover trigger on some nested lists to :)
If you get stuck with anything dont hesitate to give me a shout!
About 10 months I think I have been using treehouse now Richard, I am just working on my own site to get up and running hopefully doing some freelance work and a little blogging which will be interesting.
In that time on treehouse the main thing I have done so far in a WordPress Plugin here, it was a great learning curve between the plugin itself, the site and getting to know github.
If you have any more questions every feel free to ask :)
Craig

Richard Nicholls
1,301 PointsYeah for now I just need 4 or 5 li items to display across the width of the screen on a large screen and collapse to 1 button on mobile. I have just started the javascript on the front end developer track and with your code it won't be long before I can do it. Thanks again and good luck with your projects. Rich