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
Aleksandrs Karevs
Courses Plus Student 11,178 PointsDesigning Responsive Website in Sketch 3 with Fluid Grid in Mind.
Hi everyone,
I am somewhat confused with this whole "fluid grid" topic and one of the things I don't quite understand is how to use the grid when creating a high fidelity mockups in Photoshop or Sketch 3 (I am using Sketch).
I have designed a first page (this is how it looks: http://d.pr/i/159gb ) for the logistics company website and now I would like to turn it into HTML & CSS document. When I started to code this first page I have stumbled across a problem – "what is the best approach for turning pixel based mockup into a responsive website". I've been told that I need to design my website using fluid grids, and so I've checked the Masterclass on Fluid grids here at Teamtreehouse. It sort of gave me an idea on how to go about designing responsive website, but at the same time it made me even more confused because in the Fluid grid workshop, Nick Pettit was creating high fidelity mockups with the photoshop grid in place. All his elements on the page were aligned to grid (all elements were either 2 columns wide or 3 columns wide etc). In my high fidelity mockup ( http://d.pr/i/18SCC ) I don't have it this way. Some of my elements span across more than 1 column like this button for instance: http://d.pr/i/1jimi , does it mean that I have to redesign my mockup to make sure that all the elements are either 1 column, 2 column or 3 column wide? Or is my mockup perfectly fine and I can still continue to code it using HTML & CSS & JavaScript?
Any advice would be highly appreciated because I am totally confused with this topic and don't know what to do – redesign my mockups to align it to the chosen grid or continue to code it ignoring this grid all at once.
Thank you very much in advance.
4 Answers
Sander de Wijs
Courses Plus Student 22,267 PointsOk, say you wanted to make the button or other elements half the width of the screen. Then I would use four columns in your photoshop grid for mobile layout. Make the button 2 columns wide so it spans columns 2 and 3.
In ZURB Foundation you can use a special column class to create the offset. In this case it would be 'small-6 small-offset-3 columns'. Again, if you design in HTML/CSS you work with a 12 columns layout. It's explained in detail at http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html
I don't think making elements smaller than half the screen on mobile is very useful so you should be good with four columns.
Aleksandrs Karevs
Courses Plus Student 11,178 PointsNick Pettit I would be very thankful if you could provide your point of view on this subject. Thanks.
Nick Pettit
Treehouse TeacherI try to avoid high fidelity mockups completely. Thoughts are here: http://blog.teamtreehouse.com/psd-to-html-is-dead
Sander de Wijs
Courses Plus Student 22,267 PointsHi Alexandrs, Most grid systems have a 12 column responsive layout. This gives you a more fine grained way to position elements on the page. Say for example you have a button that spans three columns of 12 on desktop. It would span 12 columns when viewed on mobile. Because all elements are stacked on top of each other on a small screen it's ok to make a button 'page wide'.
On a fluid layout that stays three columns no matter what, there's only so much you can do. But Nick demonstrated the principles of fluid design and that was the goal of the workshop I guess.
Aleksandrs Karevs
Courses Plus Student 11,178 PointsHi Sander,
Thanks for taking your time to reply to my question. I understand that desktop versions normally have a 12 column grid, what I don't understand however is how do I design a high fidelity mockup in photoshop or other graphical siftware using that 12 column grid? Should i still keep 12 columns in my mobile mockup? If so, these grids will become super thin and and stacked together. The width between desktop version and mobile version is a lot smaller. How do I handle it when designing in Photoshop to code afterwards?
Thanks.
Sander de Wijs
Courses Plus Student 22,267 PointsOk I understand the problem. A possible solution could be to use just one column eg. for mobile mock ups. For tablet use four columns, as long as you keep in mind that they represent 12 columns when you start creating the HTML and Css.
Aleksandrs Karevs
Courses Plus Student 11,178 PointsSander,
Could you please elaborate on the last part: "as long as you keep in mind that they represent 12 columns when you start creating the HTML and Css".
What if I don't want my call-to-action button to span across all 12 columns in mobile view? For instance I would like it to take up 1/3 of the screen on mobile device. In that case I need to use 3 column grid for my mobile mockup or how does it work?
I've just checked ZURB Foundation Grid documentation for the mobile phones (http://foundation.zurb.com/grid-3.html), and it says that on mobile devices the 12 column grid gets stacked on top of each other and so a 3 column grid, where each column equal to 4 columns in the desktop grid), thus 3 * 4 = 12. This makes a little more sense now, but is still somewhat confusing. Lets say I have decided to use this ZURB Foundation grid... how do I use it in my photoshop file to design my mockup to this grid? What would be my ideal process for setting up this grid to adapt my design to it and to make my life easier when coding my design using HTML & CSS?
Thanks
Aleksandrs Karevs
Courses Plus Student 11,178 PointsAleksandrs Karevs
Courses Plus Student 11,178 PointsSander,
Thank you so much for taking your time to assist me with this question. I think I understand it a bit better now. Will have a look into this ZURB documentation in a bit. As a beginner, I would like to code my website from the ground up without using any frameworks such as Foundation or Bootsrap, but I guess it is a good idea to use some sort of CSS grid, like Unsemantic or smth.
As far as I understood, in order to use Unsemantic (or other CSS grid), I need to replicate the chosen grid in my Photoshop file and start designing my layout with a given grid (instead of creating my own one).
I found this video to be quite useful: https://www.youtube.com/watch?v=YrhSCet6kYg , although, the author here only shows the Desktop mockup in Photoshop without showing the logic on how he has designed the mobile mockup. Will try to figure out that last part, but anyway, thanks for the help, much appreciated.