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

General Discussion

page/content structure

This post is a bit long winded so as to give you an idea of the site as a whole and building in a way that doesn't lock me in to any corners in the future. As more and more dynamic content comes in to play a back-end will be built so I'm not the only one managing content but for now assume 99% of the content is static.

I need help with page structure, where do you draw the line between like content to put it on its own page?

So I was asked to develop a little site for my Martial Arts School the site should be mobile friendly. Most of the content is static but I am a little stuck on taking the content and deciding was gets put on the same page.

For example, location and hours can go on the same page I am sure. Maybe some small module that tells whether the school is open on a given day (sometimes schedules don’t line up and we have to close in observance of a holiday, weather, or other schedule issue). What about an event module for showing an upcoming tournament or a belt test? Granted the last two are not static content, but would they all go on the same page? Or the main page which would be an overview page, maybe the occasional news post

Another example is the about page where there will be information on us as a school, our instructors, our federation (group of schools all under the same grand master) what to expect as far as class structure, history of the art itself. I’d hate to have all of that on separate pages because while manageable on a desktop or larger device is easy enough having all of those as separate pages with links in the navigation bar while keeping at least a 40px x 40px size touch area per link will fill up screen space quickly.

and then...

In the future in a later iteration, we’ll want to add a small store that they can sell some PPE (personal protective equipment), new Do Bak (uniform or Gi), maybe a monthly subscription so a user can pay for classes a month ahead.

Also as a junior instructor I know that it would be nice to have a way that students can sign in to class from the mobile or send a quick “can’t make it” message to my cell phone form the site. Because there have been a time or two where families go on vacation or the weather is unfavorable and I’ll show up to teach and no one will show up but never let me know so I spend an hour stretching and working on my own stuff waiting for someone to show up.

And allowing user registration so the student or parents of students can track their progress, and should be easy enough to tie in to an 'app' I have been wanting to build for the federation -- what is essentially a companion along side class time where a student can see whats required for their rank, see the textual information, audible commands, and even the videos. Or check their standing withing the federation, projected test dates etc.

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hi John, Thats not exactly a little site your talking about by the time you add all the features you mentioned. :)

First off I would decide on what would be useful when it comes to mobile, opening times, latest news, location would be important. Being able to let you know if they can't make it could be handled with a simple form maybe with pre defined check boxes, and you could have those sent to your mobile device.

For your needs a store would be more suited to larger screens only i think, as would a detailed page about instructors and the history.

If you were to build a mobile first and then use media queries to introduce more content for larger screens, that way you could include more information on tablets etc.

I would suggest wire framing the whole project to get a feel for how much and which type of content would go on various pages, I would say if its related and relevant keep it on the same page, its better to scroll through a page than to be clicking link after link.

In comparison to the 1000+ page sites I have to build at work, this site is relatively small. However it also shouldn't look like a power point presentation, and IE8 is not the target audience. (sometimes I really do loath work.) You know I have always had a problem with mobile first designs. I can go from a desktop and remove what I don't need but I find it so difficult to change a mobile layout to a desktop layout.

Also while this may need its own topic, I was interested in 'app hooking' for example lets say I have an interactive map on my page and a user clicks on it on a desktop, it should load maps.google.com but if they are on an android phone that link should route to their Google Maps app (or default map app). Like wise if they are on iOS it should launch their default map app. I experimented with this some time back with custom URI for Facebook like fb://url.tld/user_profile and it worked the web browser would launch the app rather than the mobile site, but it was no dice on desktops as the browser didn't know how to interpret that. Any thoughts

I am really hoping to do a navigation bar something like this mock-up I made. where on desktop it would expand out and function something more along the lines of the bootstrap default navbar but on mobile the drop downs display like this onclick (example location/schedule) display dropdown (list items schedule and location) the current page link underlined in red the master section darkens and those links stay open until you click on a list with a different sub menu. I've spent all day hacking away at this to no avail.

Mockup of a simple navigation

I am still absolutely stumped by this.