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
Todd Squitieri
8,001 PointsBest Method for Fully Responsive CSS
Barring the basic foundation lessons on media queries, if you had to choose and watch CSS Foundations and CSS Layout Techniques all over again to solidify your knowledge of how to make a fully-responsive website, which one particular lesson would you watch again?
There was a lot mentioned about CSS (Flex-boxes, displaying columns as tables, grid systems) and there are just so many directions I could go with this that I'm a bit intimidated to begin that first step.
Is there any popular method (i.e. grid system, flexbox, display tables) for making websites fully responsive? If I had to go back and re-watch a video, which one would you recommend that I watch over again to learn best-practices in building a fully responsive and fluid website?
A bit of context--I'm trying to build a blog for a friend who uses iPhone 5 exclusively (no Desktops for her, thank you), and any advice would be much appreciated!
Thanks so much in advance,
Todd
9 Answers
Jerilyn P
8,788 PointsI would stick with media queries. I think this is the most modern preferred method. (Displaying grid systems as HTML tables is something you can and should still do for certain uses, but generally using CSS is considered better practice now). I don't know what lesson number that is but you should be able to find it based on the titles!
I would of course make the website able to work on a desktop as well as on a phone or tablet, in case other people want to look at it sometime.
Alex Kidston
6,985 PointsPS Responsive design proved a challenge for me on my recent projects - I ended up working desktop first and then customising media queries specifically for iPhone & iPad - here's a link for a media query dimensions resource:
http://stephen.io/mediaqueries/#
Also, a trial membership (free) on Browserstack OR using XCode's built in iOS emulator is a must...
:-)
Todd Squitieri
8,001 PointsThanks so much for the replies! @Alex Hedley: Thank you so much for this link, Alex! You know, I'm trying to build a responsive site from scratch, and it's really giving me a huge headache. I'm actually thinking of opening up another thread just so that I can troubleshoot some of these ridiculous problems that I am having. But I digress...
I think focusing on media queries is definitely the way to go. I'm overwhelmed as it is just trying to get the correct screen resolutions right without having to worry about the twelve grids or the tables that I have to create.
Thanks so much again, Jerilyn and Alex. I appreciate the feedback!
Todd Squitieri
8,001 PointsOh my god, Alex! I didn't even see that last comment you made with the link to the media query dimensions!
I can't believe how helpful that link is!! Haha! Thank you so much!
Not to be negative, but I'm surprised the folks at Treehouse haven't included such a link in any of the class notes for the section on Media Queries. It would take away a lot of stress students have about this material... I'm guessing.
I find myself watching Guil's Media Queries tutorial over and over and over again. It's so difficult for me to wrap my head around, and yet it's SO crucial nowadays. When I first started coding back in the 1990s, you could just make a website with tables and be satisfied that most Netscape and Internet Explorer Desktop users would enjoy the full functionality of your website. Well, those days are clearly over and adaptability is the name of the game for most webmasters.
Needless to say, I very much appreciate you sharing your experience and providing this link which is now a bookmark and will be frequently referred to as I continue practicing this media query stuff.
Thanks so much, Alex!
-T
Alex Kidston
6,985 PointsI found the video entitled Understanding Grids the best - Guil goes through basic grid code that finishes with a workable template which helped me a lot!
Have fun :-)
Alex Kidston
6,985 PointsAll good, Todd - yes, the media query concept seems easy enough in theory but in practise it takes a bit of getting used to. I really like the idea of mobile first design BUT it didn't seem to fit with some of my design projects so I had to do some research on how best to get a good mobile site alongside a workable desktop version...
All best & good luck!
Alex
Todd Squitieri
8,001 PointsInteresting, Alex! I would be very interested in seeing a sample of your websites, particularly the ones you said you had some difficulty with making responsive and mobile-first.
The link that Guil provides in the tutorials is okay, but I'm curious about what other people are doing.
Anyway, thanks for the reply! Appreciate it!
Sincerely,
-Todd
Alex Kidston
6,985 PointsHi again - here's my most recent project for a client who's yet to go live, pending product printing:
http://www.alexkidston.com/SMSweb/index.html
As I said, this site was desktop first and then I applied media queries based on the link that I posted previously - it's not perfect but the site does seem to behave the way that I want it to on all platforms - incidentally, the Browserstack option is essential to check regarding browser support as well...
Best,
Alex
Todd Squitieri
8,001 PointsAlex, thank you for sharing your website with me! I really like your design and the fluidity you've put into it. That you made it first as a desktop website and converted it into mobile is impressive, I think, given the amount of media queries you have to code into your text editor. This is exactly what i'm going for, for myself. My goal is to be able to make a website just like yours from memory (obviously excluding the normalization coding that you can just download). I'm getting there, but having the resources you've provided in this thread will definitely make things a lot easier.
I'm thinking that I'll probably save my free trial of Browserstack for one of those emergency situations when I desperately need to make a super-awesome website for someone. But will definitely have the resource in my bookmarks for future reference!
Anyway, thanks again, Alex, for sharing! I really appreciate it!
Sincerely,
Todd
Harry Beckwith
13,452 PointsAwesome link Alex for the various device sizes in media queries, really useful.
Responsive design is fairly new to me and i have also been testing out ways that would work best. I have watched the grid videos by Guil, but at this stage i am going to test out working mobile first then building up. I created a nice site on a pc screen, then tried to responsively scale down to other devices, but seemed like a ridiculous amount of work was needed to look great on other devices.
View @ http://harryjbeckwith.co.uk/onetone/
I have another website which i have created which is fully responsive, i built this one from desktop then responsively designed in down to meet smaller devices.
view @ http://harryjbeckwith.co.uk/Amanda/
Would you say the best technique would be to build from mobile first?
Thank you,
Harry
Alex Kidston
6,985 PointsHi Harry - checked out the links, nice work. From reading online, I think that the best approach is to keep mobile always in mind, but to start from desktop - for me that ensures that the content & functionality starts full and then scales back to suit different viewing platforms. I'm sure that mobile first works well for some but I didn't find the end result as satisfactory...
Regarding the Amanda page you posted, while the image is resizing nicely in Chrome, the menu and text are becoming jumbled as I resize the browser. The media queries I referred to really helped me to sort this out as I introduced breakpoints, the first breaking the menu into two rows, the second letting each menu item display block...here's a sample page that I drew up for a client that encapsulates the approaches I've mentioned:
http://www.alexkidston.com/SMSweb/
This page actually has a specific media query breakdown for smartphones / tablets so try viewing it in iOS for additional functionality...
Keep coding & Happy New Year!
Alex
Unsubscribed User
4,513 PointsAnother good tool that i have been using is the google Developer tools, and their is a button that looks like a phone on the left side you can choose how your website will look like on what device. Just as another tool for your development needs its has all the iphone models in their as well.
-Good luck
Harry Beckwith
13,452 PointsIn regards to responsive conversion or even creating a new responsive website, i would highly recommend using the bootstrap frame work. It has been created by twitter and is free to download and use. I have created this website for a local tennis club using the bootstrap frame work. You can view it here http://www.rayleighlawn.co.uk/
The bootstrap framework is free to download and there are loads of tutorials @ http://getbootstrap.com/.
=)