1 Reply Latest reply on Feb 23, 2012 4:06 PM by groove25

    Mobile First Design - Responsive Web Design


      Anyone using Fireworks for this?  I know you can do nice web prototyping, with export of CSS, etc... but does it produce a mobile first css?

        • 1. Re: Mobile First Design - Responsive Web Design
          groove25 Level 4

          I'm not sure there is such a thing as "mobile first css". To me, the phrase "mobile first" represents a shift in thinking—an acknowledgement that most traditional "desktop"-style websites don't function all that well in a mobile, small-device context, yet this is an increasingly popular means for browsing the web. So the idea is to design with the mobile experience in mind: simplifying layout, placing useful content first (instead of navigation), following user interface guidelines, and basically embracing the unique constraints and capabilities of mobile devices compared to desktop/laptop. It's as much about strategy as it is design.


          "Responsive web design" refers to the practice of making your site adaptable across a range of device or window sizes. This typically involves translating any fixed sizes in your design to percentages, so that the layout (and/or images) responds fluidly to changes in the browser window size. You'll start with an optimum layout—whether it's for a desktop browser or a mobile device—and see where the layout breaks or becomes awkward as you stretch or narrow the browser window. The points where the design breaks are the points you'll address in the CSS with new rules or an alternative layout. This is where media queries come in: they allow you to specify additional and/or alternative CSS rules based on factors such as browser or device width.


          I imagine that designing for mobile in Fireworks can work just like designing for any other context; you'll start with a specific layout size in mind, and go from there. Making your design responsive could be more complex. You could at least start experimenting using a calculator and a text editor. Convert any fixed width in your design's CSS file to a percentage by dividing it by the total layout size (e.g., 960px), and then replace that total size with a percentage as well (e.g., 100%). Then see how the layout behaves as you resize the browser window.