Skip navigation
mbowles201fw
Currently Being Moderated

Mobile First Design - Responsive Web Design

Feb 21, 2012 8:42 AM

Tags: #cs5 #web #fireworks

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?

 
Replies
  • Currently Being Moderated
    Feb 23, 2012 4:06 PM   in reply to mbowles201fw

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points