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
Wesley Picotte
1,531 PointsMobile First CSS Questions
I have two questions regarding the notion of building up to desktop styles.
First, I've observed sites that include styles at the top of the HTML document. Not inline, but as a stylesheet within the head section. Is this a best practice for setting global styles used in a mobile-first design?
Second, (more of a process observation and question), setting global styles is probably easiest when viewing a page at a desktop screen width, since at this scale it's easier to see how a page's various elements work together proportionally.
My question, given this assumption, is whether it's a common practice to write styles for the desktop and to then re-factor the stylesheet for a mobile-first approach.
This may not be the most efficient workflow, and perhaps workflow simply boils down to experience level. I've designed responsive sites, but not following the mobile-first approach shown here, and foresee that working on the desktop first would be the easiest way to get global rules right.
Thoughts?
3 Answers
Justin Hunter
Courses Plus Student 11,484 PointsHi Wes, good questions! I can't come close to professing to be an expert, but I can tell you with certainty that building for mobile first is not yet the norm. It will be and should have already been. I just read something that said 1 in 8 major websites is responsive. That's not a lot at all considering the technology has been around since about 2010.
For the stylesheet in the head question, that is not the general practice anymore. External stylesheets are the general practice. As far as designing up, I don't think a ton of people do this yet, but they should. It's easy enough to create your design in sketches and mockups for each device you'd like to see it on. From there you know what the desktop view will look like even if you are working on the mobile view first.
Ying Jie Wong
7,120 PointsI think it depends on how your site will be structured as well. If it's meant to be a responsive site or a separate mobile site...
You may read: http://www.google.com/think/multiscreen/whitepaper-multiscreenconsumer.html
When coding global styles, I find it easiest to think of coding in modules . This particular e-book changed my paradigm about coding: http://smacss.com/
Wesley Picotte
1,531 PointsThanks Ying Jie Wong. I'm far more versed in site and / or online business strategy than I am CSS, and in this instance am asking strictly about a single domain website that includes responsive design.
Thanks for the CSS ebook -- I'll check it out.
Wesley Picotte
1,531 PointsWesley Picotte
1,531 PointsGood stats on mobile-first. Agreed that it will become the best practice.
To be clear regarding my question about the stylesheet, I'm talking about global styles only, which is obviously a subset of all styles, and not suggesting that this would or should replace an external stylesheet. I'm belabouring the point, though, because it's something I see with relative regularity on sites that seem to have a very high production value.