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
Joseph Torres
6,282 PointsLayout Anatomy and Structure Question
Hello all, I have a question about Layout Anatomy and Structure. I'm redesigning my friends hardwood flooring website. I have done the navbar, the hero image, headline and sub-headline, and the click to action button. I see many websites have below that the features or benefits section, an about us section, services section, gallery section and so forth. My first question is if there is a preferred order of the sections or a best practice? My second question is while folks have these section on the home page, they'll still have an about us, services, benefits in the navbar as well and Im not sure if that is just to elaborate on whats on the home page or what. Can someone please help me with this because it's slowing down my progress. Is there a book that can help me with this? Thank you so much.
2 Answers
Aaron Loften
12,864 PointsHonestly, every site does it different.
When speaking of the main content area... There is no standard as far as what should be where and what is or isnt acceptable as far as order of section and layout.
Generally, the most common thing I've seen is a header with a logo, navigation, and if needed - account/sign up spot(but I try to avoid account stuff). Then, a main content area with a hero or featured section. There is a hug dispute online with whether or not a slider/rotator matters. Then some links to some of the most popular portions of the site that could drive revenue like product galleries. Followed by a footer containing some of the more legal links and maybe some contact info and social linkage. Its okay to also have your nav here but dont bloat the footer.
No matter what you hear, including from me, its all subjective and you probably shouldnt listen too much.
The best way to learn layout is to start by finding a competitor and copy their layout a little as far as sections are concerned while applying your own style to it. They have already put in a lot of research to this and I dont think it is bad to do so. The only way to get into what is trending is to start by using what is being used. Dont copy code, just look at what they do and try to replicate the idea a little.
Also, make it as simple for the user as possible to get to your end goal....the product. The smaller the number of steps, the better. Avoid duplicating info. Also, look into SEO(search engine optimization). It will change your layout and continuously update what you have going on. It will show you how to place content in a way to improve your user numbers.
But again, there is no right answer for this question youve posted and it is completely subject....so....find something you like and start from there. :)
Joseph Torres
6,282 PointsThank you so much, this is another beast in of itself. Any good books or references on this?
Aaron Loften
12,864 PointsNot really. I like to stick to following sites like css tricks, seeing how Amazon, Walmart, and other chains do things.
I think the most helpful thing Ive seen has been the html and css basics courses here on team treehouse. I retake them every now and then to make sure Im where I need to be and make sure no new info has appeared. They have been really helpful and helping me see layouts and such.
Maybe just sit down with your client/friend and ask them what their most important features of the site are and try to ONLY showcase those on the home page.
Also, no matter what you do, consider using google analytics or something like that. Then you can get an idea of what pages matter after multiple customers go to the website and where they spent most of their time.
Itll help you to see what changes you make matter, though heavy traffic is important to getting faster results.
Joseph Torres
6,282 PointsJoseph Torres
6,282 PointsThank you so much for the home page advice, definitely liberating I tell you. What about the navbar that has links to same sections on the home? I have seen this in action when using scrollspy in Bootstrap however that's not a;ways the case. For instance, they'll be a short synopsis of an about us or services and then it will have links to about us or services to a different page. This is where I'm lost? Are those pages more detailed info?
Aaron Loften
12,864 PointsAaron Loften
12,864 PointsGood question. :)
Those pages that link to a specific portion of the current page the user is on can be tricky. I reserve that functionality for two types of pages...
Pages that are long and might need only a quick reference(like a dictionary page with multiple terms or maybe a video game page with "hot links/anchor links" to the different levels of the game.
Modern web sites that have most of their web site content on the homepage and do not have much content to display. Usually, its a way to look like a site has more depth. Like if you sell a product thats easy to understand and you dont know what to display, you may have links to help a user drop up and down the slides to get somewhere fast and if you do that with a fixed header(stays at the top of the browser as you scroll) then it helps it to look fancy and on purpose. I try to avoid this approach.
In general, I try not to link to content on the same page unless the first scenario I mentioned pops up. It's another subjective thing, but when have you used that and been like "Thank God there was a link to send me to this section that was two scrolls down the page?"
When using ANY feature on your site(ANY FEATURE AT ALL)...ask yourself one question....does this benefit the user?
If the answer is yes, then you have your answer. :)