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

HTML

Posted by sam devos
sam devos
3,644 Points

What is your Responsive Workflow ?

Hey , something i 've been wondering but how do you guys design responsive sites?

i'm buiding one for the first time so this is what i"ve done so far ;

  • creating a mobile first mockup in photoshop (so i sketched an iphone ,ipad,desktop)layout.

So whats next? do i have to build this first on a pixel grid en then covert it to percentages? because this is what i don't understand how you know what the percentages are gonna be if you start fluid imediatly?

Corey Baker
Corey Baker
4,890 Points

Content first. I (personally) think that you shouldn't pick your framework before you have what you're actually going to have on the site lined up first. The content will determine how many grids you need and where your site is going to break down.

This is a good book on it : RESPONSIVE DESIGN WORKFLOW

Bootstrap is pretty bomb....but it can be a little much if you're doing something simple.

2 Answers

henrikh
henrikh
3,666 Points
henrikh
henrikh
3,666 Points

Depends on how much time you wanna put in to it, or if you wanna do it all from scratch. If you wanna do something quick, i recommend you taking a look at bootstrap, http://getbootstrap.com/ ... Building responsive websites super fast!

Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

I also agree with Corey Baker. Look at all the content you have and what you plan to implement. If you want to do a wireframe, starting with mobile first and then building up to a desktop version is good starting point. If you hate using photoshop as a layout tool, illustrator is much more to the point and a bit more simple to use.

For myself, I've been using Foundation by Zurb because it allows me to go from building a layout straight into designing the site. It saves me the time you have to take to import your layout from illustrator or photoshop into a physical web world. Once I have my general frame up, with content in place, the site as far as structure is there. you can double check your break points because it's already prebuilt to be responsive and then you can start making it look nice with CSS. if you prepped yourself well, you can built a tailored version of the kit up front which will save you time in the back end reconfiguring everything to your preference.

check it out here: http://foundation.zurb.com/