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!
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
Mayur Pande
Courses Plus Student 11,711 PointsHow would you approach this design in mobile view
I found this website design and I really like, and would like to design something similar. However I have noticed it is not responsive. My question is how would someone approach designing this kind of style with a mobile-first approach? Would you simply put the middle div with all the nav bar and info in a block design in mobile view?
1 Answer
Erik Nuber
20,629 PointsIt is an interesting looking site but, was not designed well for changing the view at all. I simply decreased the screen size and the background photo gets small and a grey background appears.
As you suggest to make this mobile first, I would likely change the layout of the middle area. Put the logo to the top, with the nav bar moved to the top followed by the thin white rule they have.
From there you would have a choice of either putting the photo that appears on the left that is small with the larger text after this and moving the secondary navigation below that or laying it out with the secondary navigation below the top level navigation.
I would then take the larger graphic that appear and put that next followed by the RDT News text that appears on the left below that.
It is all preference for how someone would like there materials presented.
It isn't just mobile approach though, at smaller screen widths, the background photo I would think needs to disappear until a certain screen width, otherwise it is distracting and doesn't look quite right.
Mayur Pande
Courses Plus Student 11,711 PointsMayur Pande
Courses Plus Student 11,711 PointsThanks will give it a go. I was going to try the vertical nav-bar design as they have done, but as you are suggesting I will put it horizontally. I did try to make it vertical but it wasn't working out.