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
Alexander de la Garza
11,095 PointsHow to decide, mobile first or Desktop view first,
Good day,
One of the main questions I have had while watching the CSS classes, is how do i decide if I want to use a mobile first approach or a desktop first approach for my medias queries?
the obvious answer is which ever one takes less work or less code,
however, as a starting student, I don't know the difference or what factors to consider, so what questions should I be asking myself when choosing my approach?
when asking the question, which answer will suggest desktop or which will suggest mobile?
what factors are critical to my decision?
thanks for your time,
2 Answers
Ali M Malik
33,293 PointsJust to add to what Adam said. Mobile first forces you to focus on content hierarchy, which is good practice for designing good websites. Also just as Adam said, it makes more sense to expand the design than condense it. This way you serve the base css to mobile phones so it loads faster and then add more css as the device gets bigger. This makes your site perform much better.
Though one thing to pay attention to is that mobile first sites will appear broken on ie6, ie7 and ie8. It will show the mobile version on the desktop because media queries aren't supported. Just something to keep in mind. Check if many of your users are ancient -as are some of my client's customers- so you might need to create an ie specific stylesheet and add it in a conditional link. Or you may use a javascript library like Respond.js to force it to work on on ie6, ie7 and ie8.
Hope this helps.
Adam Moore
21,956 PointsFrom what I understand, there are two main reasons (among many other reasons) to go mobile-first. The first is the idea that going from simple to complex (mobile to desktop) is easier to change and make decisions upon than going from complex to simple, which may include deciding which elements you may need to hide (due to space and importance for the overall purpose of the site). Also, I feel like it is easier to expand my design and layout than to attempt to condense it. From mobile to desktop, the content may simply be too spaced out; from desktop to mobile, it may require lots of manipulation to get the layout and sizes to become comfortable and enjoyable to navigate on a smaller screen.
The second, and in my opinion, the most important, is that the trend in technology is that people more and more are accessing sites from mobile devices, expecting to (if not already have) surpass the number of users who access from a desktop site. Therefore, creating a mobile-first site would serve to take this current and upcoming trend into consideration when building a site. Along the same lines as this trend, if a mobile site is built first, and if users are more likely to look at it on their mobile devices, it might help in making the whole process go faster as far as publication, if, in fact, the more widely-used devices used to access a site are the first to have a site designed for that experience.
This is just what I have heard and my own opinion. However, I also firmly believe that, whatever works best for you in terms of writing the best code, for the best user experience, in the most efficient way possible,... you should do what works for you!