Mobile Third

When it comes to responsive web design, most experts suggest mobile first. As a designer, I am having a hard time visualizing the layout with the content-out approach, especially for large, complex sites.

I am in the the process of redesigning George Mason Law site and facing a few challenges. The new design has to work with and response to the existing contents, which being added and updated through MODX. The navigation and the drop-down menus need to stay intact. If I started out with just the structure, the menus would get in the way and the image slideshow has to be left out as well. I simply can’t see how the site look from the bottom to the top, particularly if I wanted to design the layout on the grid.

I began the design based a 960 grid. I drop in the slideshow, which will be handled by responsive image approach later, and style the page as closed to the finish site on a large screen. The next step is to save a copy of the stylesheet and create a blank one. I am using HTML5 Boilerplate; therefore, I just need to remove the primary styles.

Now I am back with a bare bone design then I worked on the print stylesheet second to get it out of the way. With two stylesheets side by side, I just cut and paste from the finished file to the new file as I see fit beginning from 320px and up.

One of the advantages of starting small first is that I don’t have to declare the max width. Even though I started out with 960px, I could go up further if I wanted to and the layout will response properly. I know it is a big extra step that I took, but it really does help me see the picture. Do designers feel the same way or is it just me?