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
Jay Valentine
Courses Plus Student 4,389 PointsWhy get rid of the 'extra content'
Right, in the full window there is primary content, secondary content div, and an extra content div, but when the media query is applied for smaller devices for phones etc, the extra content is removed? i dont understand why you would remove the extra content for mobile devices? surely that content is still part of the page otherwise it wouldnt be there in the first place? i'm thinking in terms of a real project now not templates? can anyone explain
Laura Kyle
19,794 PointsHey James, absolutely! I haven't done too much freelancing, I'm more interested in working for startups. However I'm always up for chatting about design and development! @LauraNKyle <--My twitter, has my website (and contact info).
Jay Valentine
Courses Plus Student 4,389 PointsAwh right i see i see, thanks i'll give you a follow now!
3 Answers
Jeff Lemay
14,268 PointsOn mobile, you only want to provide the user with the most necessary/important information. Since mobile users have "short attention spans" and they can only view a small section of info at a time, you remove any extraneous sections of content.
With desktops, you have so much more real estate to work with and users are more likely to stay on your page longer. You have the ability to include in-depth details, stuff that the user doesn't have to read but can if they want to learn everything about you.
Of course you don't actually have to remove any content for mobile users, and you could even add additional content for mobile if that fit your situation.
Laura Kyle
19,794 PointsHey there! Whenever I design for clients, removing information as the viewport decreases is fairly common. I usually try to remove images, but sometimes written content that isn't necessary gets the axe.
Because with mobile you have a much smaller space in which to display all of your content. In order to keep the pages from being unreasonably large, or looking crowded, often you have to pick and choose which content needs to stay and which needs to go.
When I first started, that surprised me too. I mean, isn't all info kind of vital to a website? However as you go along, you'll realize that there is nothing wrong with narrowing things down. What I try to remember is... who is most likely to be viewing the site on mobile? If it's a restaurant or cafe, there is a good chance that someone is checking it out on their phone either to decide whether it's the place for them, or where the location is. So though I may remove some content from mobile, I will also make content important to that scenario (such as contact information and the menu) quite visible.
I hope this helps!
Andrew Stelmach
12,583 PointsWell, first of all, what elements to include on different screen sizes is a design decision. The fact that it's called 'extra content' implies less importance, especially when you take into account that they take a mobile-first approach.
When designing a website, I think it's safe to say that most designers take a mobile-first approach, designing the site for narrow viewports - typically the various divs are stacked one on top of the other, because of the limited width.
They then apply media queries to ADD elements and reposition elements as the viewport becomes wider.
I noticed that you said the extra content is 'taken away' on smaller viewports. This is subtly different to a mobile-first way of thinking. A mobile-first approach makes the site great on smaller viewports first, then makes changes (often adding elements you could go without - 'extra content') as the viewport gets wider.
They say in the tutorials that this is easier from a programming point of view than designing a large web page first and then adjusting it for smaller viewports. Having had some experience designing pages now, I can definitely vouch for this.
There is also the fact that mobile browsing is becoming more common than desktop browsing, so a mobile-first approach means that you are designing for mobiles, well..... "first"?!
A mobile-first approach also forces you to think about what the most important things to include on the page are, often forcing you to prioritise the order of the content as the user scrolls. This helps you to evaluate the website's priorities in your mind.
There are a few good articles written about this by prominent designers if you google around.
Hope that helps.
Jay Valentine
Courses Plus Student 4,389 PointsJay Valentine
Courses Plus Student 4,389 PointsHey Laura, thanks for the reply! i appreciate the depth! is there anyway i can contact you in regards to Freelancing questions and things that i have, before i get started on this path!? :)