Mojo Motors’ Responsive Redesign With Fireworks: UX And Interaction Design

Advertisement

Thanks to strong mobile Web adoption worldwide, we have seen the launch of even more responsive designs in 2012 and 2013. Most of these have been in the publishing category, but lately we are starting to see complex transactional websites, such as Currys UK1, take a brave step into this new world.

For very well thought out reasons, Mojo Motors2 (a startup created in 2010 to provide shoppers with a better way to buy used cars) also just launched the first responsive website in the automotive market space.

When I joined Mojo Motors in May 2012 as head of UX, it had only a desktop website — but 21% of its total Web traffic was already coming from mobile devices. Of that number, 64% were from iOS devices and 34% from Android devices. It was quite clear to me that we had to think carefully about our mobile strategy when redesigning the new website. After carefully assessing the situation, we ended up adopting the responsive design3 approach, for the following reasons:

  • We were planning to redesign the entire website from scratch.
  • Our content lends itself well to this approach, and we did not have to deal with ads like our competitors.
  • A large number of our users were already viewing, sharing and linking to retargeting emails on mobile devices.
  • It was the fastest point of entry to mobile for us, and the cost of development, management and maintenance was lower compared to building separate websites and native mobile apps alongside a desktop website.
  • Our UX and development teams are very small, agile and nimble — a key ingredient to helping a small startup such as ours get a minimum viable product to market quickly.

In this article, I’ll shed some light on the whole process and on how Adobe Fireworks fit into it.

mojo-front_mini

Our Design Process And Adobe Fireworks

As any team that has taken on a responsive design project recently will tell you, the process is different and challenging, and it stretches the limits of what traditional Web design tools such as Photoshop, Fireworks and OmniGraffle are capable of accomplishing. So, to get things done, our design team adopted a hybrid approach of designing in visual tools and directly in the browser. For us, Adobe Fireworks became the workhorse visual tool that we depended on to get things done.

I’ll share the whole process that we used to craft our responsive website and the role that Adobe Fireworks played in it. To keep the content easy to digest while still providing enough detail, I will present it in two separate articles:

  1. Part 1: UX and interaction design stage;
  2. Part 2: Visual design and front-end development stage.

UX And Interaction Design

In this first article, I’ll share our interaction design process, the role of Adobe Fireworks and some of the other design tools that helped us bring our vision to life.

Research

Naturally, we began the process by doing user research to understand how people engaged with our non-responsive website. Armed with this information, we came up with design principles, product principles, personas, scenarios and so on to help us determine and prioritize the project’s requirements.

We came away from this process with a core set of features that would provide a consistent user experience across all platforms. The key for us was to quickly go through discovery so that we could move into the iterative design process.

Designing From the Content Out

We decided earlier in the project that we would adopt a content-first4 approach by allowing the website’s content to shape the grid’s structure and layouts.

Why? On a responsive website, you have very little control over content because it scales across varying device widths — and because users explicitly zoom the viewport. In addition, some content, such as images, video and ads, can wreak havoc on the layout and affect overall performance. Identifying the different types of content, their value to users and the constraints they present early on is important. It will help you to avoid headaches later on in the process.

Mojo motors search and details page image5

The old Mojo Motors website, showing photo placement. (Large version6)

In our project, the image dimensions, aspect ratios and placement drove the overall layout because these needed to be flexible. The reason is that, on most automotive marketplace websites such as ours, car photos are one of the primary drivers of the user’s initial engagement, next to the selling price. Furthermore, these photos are typically consumed from a feed in formats and sizes that are uploaded directly to the dealer’s system.

Another thing we decided up front was to use real content wherever we could and to avoid placeholder copy like “Lorem Ipsum” and image placeholders with unknown dimensions. We were able to rise to this challenge early on by engaging our copywriter as soon as we identified missing copy throughout the project.

Breakpoints and Grids

Before diving deep into design exploration, we knew that determining the screen widths we would support was important. For us, a healthy range between 320 and 1024 pixels was practical, based on our analytics data. We settled on three major breakpoints to support desktop and the most popular mobile and tablet device resolutions of current users. But this is not always optimal — why?

Because device specifications frequently change, as in the case of the recent taller iPhone 5 (which would be wider in landscape orientation). To mitigate this, we planned to introduce minor breakpoints and even adjust our three breakpoints as needed later during the HTML prototyping iteration stages.

Mojo motors final responsive grids7

Mojo Motors’ responsive grids, via the Gridset app. (Large version8)

To aid in the creation of our grids, I played with a bunch of responsive grid systems from the endless choices of frameworks in the wild. We narrowed our choice to Gridset9, by Mark Boulton’s team, and Gridpak10, by the good folks at Erskine. Both of these apps provide a grid image file for designing in Fireworks (or Photoshop) and an HTML framework for prototyping.

One of the factors that influenced our choice of grids was the need to accommodate the “vehicle listing module” image across breakpoints. Because we had sketched out the mobile “vehicle listing module” first, we wanted to find opportunities for reuse as we scaled up to the desktop.

In the end, we went with a 12-column grid for the desktop, a 12-column grid for tablets, and a 6-column grid for mobile in portrait orientation, via Gridset. This grid choice enabled us to reuse the module from the mobile layout proportionally across the three main breakpoints. For instance, the mobile and desktop modules are exactly the same dimensions, except that we display three modules side by side for desktop.

Sketching Mobile First

I can’t stress enough how important it is to resist the urge to jump into your favorite visual tool during the initial phase of generating ideas! Trust me, this stuff is hard enough — the last thing you need to worry about at this point is setting up the technical layouts and pixel perfection. So, if you must, work in your favorite wireframing tool — just solve the problem at hand.

For me, making a few sketches of the website’s key pages at the three major breakpoints — starting with the mobile layouts and working my way up to the desktop version — and then iterating between them made sense. I personally found designing for mobile first11 to be an effective way to identify problems and resolve constraints presented by touch and small-screen devices.

Initial sketches for mobile screens
Initial sketches for mobile screens.

To aid in creating your layouts, you might want to consider the Responsive Design Sketchbook12 by App Sketchbook, or the Dot Grid Book13 by Behance.

Creating Wireframes And Prototypes

Before discussing in more detail why we used Adobe Fireworks in our project, I’d like to be clear that I find the endless debates about which design tool is better and whether to just code the darn thing to be fruitless banter.

In the end, a good designer is a creative problem-solver, and the tools are just a means to an end. Remember that users and clients don’t really care what tool we’ve used to create the final product. With that out of the way, I will focus the rest of these articles on why Adobe Fireworks made sense for our project.

High-Fidelity Wireframes in Fireworks

The great thing about creating products at a startup is that you have no external client, so you can avoid artifacts that do nothing to move the ball forward. On the other hand, the clock is winding down as your competitor tries to get the next best thing out before you can launch yours. With this in the back of my mind, the choice of using Adobe Fireworks came down to speed, familiarity and capabilities.

Hi-fidelity homepage wireframes for desktop, tablet and smartphones
High-fidelity home page wireframes for desktop, tablet and smartphones.

Because we needed to create a clickable prototype for user testing quickly, we decided to skip lo-fi wireframes and go straight from sketches to high-fidelity grayscale wireframes. Below are a few other reasons why we used Fireworks to create wireframes:

  1. Compared to other tools I had considered, Fireworks has the best vector and bitmap features suitable for creating both low- and high-fidelity wireframes, detailed visual UI designs and clickable prototypes, without having to switch between multiple tools.
  2. It offers a built-in set of symbol libraries, suitable for functionality that made our work quicker.
  3. The native Fireworks PNG file format is at least three to five times smaller than a comparable Photoshop PSD file and is easily sharable with stakeholders without requiring any software other than a browser or simple image viewer.
  4. The Pages and States features work really well for creating multi-screen layouts within a single file.
  5. I was in the process of hiring the rest of my team when the design phase began, and I needed to work pretty quickly.

Multi-Page vs. Multi-Breakpoint File Set-Up

In the past, I would have advocated setting up a single file with multiple pages and a master page for this project. But due to the constraints of creating responsive layouts, I decided that using the Pages functionality for different breakpoints of the same page was more efficient. I found this to be the best way to quickly switch between breakpoints during the iterative process. This method also allowed us to keep the file sizes small and made it easy for my team to share files and work concurrently on different screens.

Adobe Fireworks Pages panel

Adobe Fireworks Pages panel (example)

Adobe Fireworks Pages panel (example)
The Pages panel in Adobe Fireworks is used for different screen sizes of the same page.

Adobe Fireworks Layers panel
The Layers panel in Adobe Fireworks is used to manage layout elements.

Adobe Fireworks States panel

Adobe Fireworks States panel (example)

Adobe Fireworks States panel image (example)
The States panel in Adobe Fireworks is used to show different states of the same screen.

The other benefit was that we could still use the States panel to document interaction states associated with each breakpoint independently. The final file structure consisted of a “Page” for each breakpoint, a Web layer, a grid layer and other layers for the website’s content. In our template file, the grid layer was placed between the content and Web layer, as shown.

Creating Reusable Modular Elements Using Symbols

In a design like this, thinking in terms of modular reusable components that can be converted to symbols is really helpful. Doing this saves a lot of time and makes it easy to update as you iterate.

One element that benefited from this approach was the car listing module. As illustrated below, it is composed of a few different elements, including a photo with a non-destructible saturation filter applied, heart and camera icons from the library, as well as styled text. Elements such as headers, branding, navigation and footers are good candidates for symbol conversion as well.

To create a symbol in Fireworks, all you have to do is select the objects and go to Modify → Symbol → Convert to Symbol, or just right-click on the selection and choose “Convert to Symbol.”

Car-Listing module
Car-listing module symbol.

Another neat thing about the symbols feature is its nesting capability. You can include symbols inside a module that you want to convert to a symbol using the same process as above. We took advantage of this feature to make it easy to vary the listing photo and flags during prototyping and in preparation for user testing.

Creating a unique module to show a different car or flag was as simple as swapping the embedded symbol within the new main symbol variation. To do this, follow these steps:

  1. Select a copy of the main symbol and go to Modify → Symbol → Break Apart.
  2. While it’s still selected, save it as a new symbol variation.
  3. Double-click the new symbol to enter symbol-editing mode. Then, select the embedded symbol to update.
  4. Go to Modify → Symbol → Swap Symbol in the menu bar, choose the replacement symbol from the “Swap symbol” dialogue box, and you are done.

Symbol swapping illustration
Photo symbols embedded into car listing module symbol

Symbol swapping process
Swapping embedded photo symbols to create other similar modules.

Visual Scaling During Design and Live View

Another thing that is quite disorienting when creating mobile screens is mapping resolutions as you lay things out on your large monitor. Without careful planning or knowledge of best practices for things like touch target sizes and legible text sizes, you could end up creating layouts that are hard to use.

One tool that I cannot live without and I highly recommend is the Live View App14. It is available for the Mac, iPhone and iPad. All you have to do is place the app window over your Fireworks layout and it will let you see how things scale on a real device such as an iPhone or iPad.

Preparing and Sharing Wireframes for Design Review

Clear and frequent communication between stakeholders, developers and designers was essential to the successful completion of our project. It ensured that everyone understood the implications of design decisions and were able to ask questions.

To prepare screens for our design reviews, we just exported Fireworks PNG files directly from Fireworks into a folder. During the review, we simply dragged the PNGs into multiple tabs of the browser and discussed things. I personally prefer this method of testing desktop screens because the width of the wireframes is rendered closest to how a user would see them (compared to testing with PDF files).

“Export Responsive Prototype” Extension to the Rescue

While the method described above also worked for showing mobile and tablet screens, it was sometimes difficult for the team to visualize the scale, context and fixed viewport constraints of real devices. This is where the Export Responsive Prototype15 extension for Fireworks (by Matt Stow16) came in handy.

Creating the quick prototype using the existing wireframe file was really easy. The first thing I needed to do was define which areas of the wireframe would be fixed width and which would be flexible widths using slices. By default, areas that have not been given slices are converted to percentage-based widths. To make a sliced area fixed width or absolutely positioned left, right or center, I assigned keywords in the “Target” attribute of the Property Inspector (PI) panel (or Properties panel). Note that slices without “Target” keyword assignments are also converted to percentage-based widths.

Visualizing responsive design wireframes using Fireworks extension
Visualizing responsive design wireframes using Fireworks extension.

Assigning attributes in the Property Inspector panel
Slices are assigned “Target” attributes in the PI panel.

Once I was done setting up the file, all I had to do was go to Commands → Prototype → Export Responsive Prototype and export as “HTML and Images” files using the default settings. These files were then uploaded to a Web sharing folder on my computer or a Web server where it could be hosted. Next, we shared the URL with everyone, and from there anyone could view the mockup on any desktop, smartphone or tablet browser. For more details on using the extension, watch the screencast17 on YouTube.


A screencast by Matt Stow that explains this workflow.

Exported prototype files in finder window
“HTML and Images” exported files.

Note: The prototype that is created is not a responsive HTML production framework. It is only illustrative and to be used during the wireframe review process.

To keep the distraction down in a larger group, you could also mirror your iPhone or iPad onto a projection screen using Reflector18.

Projecting mobile screen using Reflector app
Projecting a mobile screen using the Reflector app.

Creating the Prototype for User Testing

Putting together a clickable prototype in Fireworks is easy and flexible because Fireworks will accept almost any graphic file format and all HTML embeds such as videos, maps and social plugins.

For us, the first step was to plan the scenarios and determine what screens would be needed to simulate the tasks that we are asking our users to perform. In our case, we used some of the wireframes that we created and modified existing screenshots for others.

To complete the prototype, each existing wireframe and screenshot was imported as a page into a new Fireworks file and given an appropriate page name. Making edits to screenshots was a snap with the help of the bitmap tools, the vector tools and the “Fill with background19” command (by John Dunning20). Using these, we removed elements before compositing to reflect our own data.

Once assembled, all we needed to do was add hotspots to each page and select a destination from the PI panel. On some pages, elements were added to the States panel to simulate things like hover states.

(You can check “Creating Interactive Prototypes With Adobe Fireworks21” by André Reinegger and “Interaction Design and Rapid Prototyping With Fireworks22” by David Hogue for more in-depth exploration of the prototyping features available in Fireworks.)

Finalizing the prototype just required exporting the file using the “HTML and Images” option, and the project was ready to be hosted on the testing machine.

Note: The purpose of the prototypes at this stage was to test the website’s flow and structure. As such, we opted for this method to export separate non-responsive prototypes for each breakpoint to get initial feedback quickly. You may also decide just to use an HTML prototype framework such as Bootstrap23 or Foundation24 if your timeline and resources allow it — we opted for the quickest way to maintain our project’s velocity.

In The Next Article

Well, that’s it for this article. I know that so many workflow options are out there, which you may want to consider when designing responsively. I hope some of the ideas and workflows discussed in this article will come in handy and inspire you to consider Adobe Fireworks for your next project.

In the next article in this series, I will share our transition from the UX and interaction design phase of the project to the visual design and front-end development iterative cycle. Stay tuned!

Note: Even with the recent announcement by Adobe that it no longer plans to add new features to Fireworks25, the tool is still very powerful and offers some of the best UI design features. Also, since Adobe plans to continue to sell Fireworks (version CS6) and provide updates to support the next major releases of both Mac OS X and Windows, it is still worthwhile considering Fireworks for your next project, because of its workflow efficiency, lightweight file size and many other advantages.

Further Reading and Resources

(mb al ea)

Footnotes

  1. 1 http://www.currys.co.uk/gbuk/
  2. 2 http://www.mojomotors.com
  3. 3 http://www.alistapart.com/articles/responsive-web-design/
  4. 4 http://www.lukew.com/ff/entry.asp?1598
  5. 5 http://fireworks.smashingmagazine.com/wp-content/uploads/2013/04/old_mojosite-large_mini.jpg
  6. 6 http://fireworks.smashingmagazine.com/wp-content/uploads/2013/04/old_mojosite-large.jpg
  7. 7 http://fireworks.smashingmagazine.com/wp-content/uploads/2013/04/mojogridset-large_mini.png
  8. 8 http://fireworks.smashingmagazine.com/wp-content/uploads/2013/04/mojogridset-large.png
  9. 9 https://gridsetapp.com
  10. 10 http://gridpak.com
  11. 11 http://www.abookapart.com/products/mobile-first
  12. 12 http://appsketchbook.com/products/responsive-design-sketchbook
  13. 13 http://www.creativesoutfitter.com/product/34/dot-grid-book
  14. 14 http://www.zambetti.com/projects/liveview/
  15. 15 http://mattstow.com/export-responsive-prototype.html
  16. 16 http://twitter.com/stowball
  17. 17 http://www.youtube.com/watch?feature=player_embedded&v=Y3RO0SKPpJ8#!
  18. 18 https://www.reflectorapp.com/
  19. 19 http://johndunning.com/fireworks/about/FillWithBackground
  20. 20 http://twitter.com/fwextensions
  21. 21 http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  22. 22 http://www.adobe.com/devnet/fireworks/articles/atv_fw_interaction_design.html
  23. 23 http://twitter.github.com/bootstrap/
  24. 24 http://foundation.zurb.com/
  25. 25 http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html
  26. 26 http://www.alistapart.com/articles/the-infinite-grid/
  27. 27 http://www.abookapart.com/products/content-strategy-for-mobile
  28. 28 http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  29. 29 http://fireworks.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  30. 30 http://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html
  31. 31 http://www.lukew.com/ff/entry.asp?1514
  32. 32 http://bradfrost.github.com/this-is-responsive/index.html
  33. 33 http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

↑ Back to topShare on Twitter

Olawale is a User Experience Designer and Digital Strategist with over 13 years experience leading, designing and developing standards based digital, web and mobile interactive products. He was Head of UX at Mojo Motors in 2012. Prior to Mojo Motors, he served as the User Experience Lead for Comcast mobile work for digital agency HUGE.

He is currently Principal, User Experience at @WalmartLabs. He is very passionate about mobile and multi-channel content consumption.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thanks for this very very useful resource! I’m practically following it to the word :)

  2. 2

    Wow. Simply wow! Guess this is why there are so many sites but people keep coming back to Smashing Magazine for the quality and depth of the articles.

    I hope Adobe decides to continue working on Fireworks (not that they worked much ;) )

  3. 7

    Can you tell us what break points you decided to use? I am just starting on a responsive design project and am trying to determine what breakpoints I should use, so I am curious which ones you settled on.

    • 8

      Olawale Oladunni

      August 27, 2013 4:15 am

      The breakpoints we used at the time were 320, 480, 600, 768 and 1024px. However, I would recommend determining your major breakpoints based on your content and minor breakpoints for tweaking while iterating the design in the browser. Also consider how layouts at different viewport orientation of the same breakpoints may need differ.

      For some recent thinking on breakpoints read the following articles:

      http://alistapart.com/article/designing-for-breakpoints
      http://adactio.com/journal/6044/
      http://www.markboulton.co.uk/journal/theinbetween

      • 9

        Oh I misunderstood from your article. There you mentioned three breakpoints from 320 to 1024. Didn’t realize you meant 3 extras between those.

        I had a question as for the footer. Why did you decide on keeping it long on the mobile version? I work as the UX at a real estate data company and we constantly deal with this issue with dynamic content. Footer has been a mystery to me as to it’s purpose on a mobile site.

  4. 10

    Yeah, but your design is totally ***. Maybe you should have spent more time on the design and not this article.

    • 11

      Some random dude

      August 26, 2013 5:37 am

      And your stupid comment is even more boring, you uncreative Anon individual. Maybe you should have spent more time reading books instead of playing those stultifying games you play.

    • 12

      Michel Bozgounov

      August 26, 2013 6:42 am

      Dear anonymous visitor [Anon],

      Please keep in mind that we try to keep the tone of comments here polite. And SPAM or hateful comments are usually deleted. :)

      Sincerely, your Fireworks S.M. editor,
      –Michel

    • 13

      What “Anon” probably could have said more eloquently is that the layout is rendering poorly at certain screensizes… specifically the vehicle detail pages at phone landscape / small tablet level.

      Text gets squished and is breaking out of boxes, some too-tight margins, etc. But hey, I’m sure that’ll get worked out.

      • 14

        I actually agree, I don’t like leaving negative comments – however if the site is featured here on Smashing Magazine you would expect it to be flawless, but at certain sizes the layout goes screwy, the tabs don’t line up correctly, text wraps horribly onto multiple lines, content boxes get all squished up together etc etc all of this I saw just on one page – the detail page about a car. The theory is sound but the implementation isn’t quite there yet, sorry.

        • 15

          Olawale Oladunni

          August 27, 2013 3:20 am

          @Matthew and @Les. Thanks for the useful feedback about the broken layouts at certain breakpoints. The site was actually launched last year right around the time the iPhone 5 came out. It’s quite possible that some of the iterative optimizations implemented over time may have broken some things.

          I am no longer at the company, but will make sure the fine folks at Mojo Motors get this feedback.

  5. 16

    Are there any alternatives to Fireworks on PC?

    I’ve tried to adopt Sketch on my Mac – but at work we use PC’s and I really want something that is similar to Sketch and Fireworks.

    • 17

      Michel Bozgounov

      August 26, 2013 6:45 am

      As far as I know, Sketch for Mac is a really promising alternative to Fireworks on the Mac. Unfortunately, for Windows OS, Fireworks seems to have no alternative, for now… :-(

      I am looking for alternatives on Windows, too, but have found none so far. Good news is that Fireworks CS6 will be around for quite some time, it seems, and meanwhile we can hope that someone will invent a good replacement for it. (Of course, I don’t count Photoshop or Illustrator here, since they are no real alternatives to Fireworks, which is a really dedicated screen/UI design tool.)

    • 18

      Fireworks has been around for a very long time, and is for both Mac and PC.

    • 19

      Apparently, Adobe is actually working on a replacement for Fireworks. I had initially assumed they were planning on bloating Photoshop even more for that purpose.

      Not sure why they couldn’t just continue to develop Fireworks instead of starting over again. Maybe there was something in the codebase that was limiting it.

      At any rate, I love my FW, even if it has a few aggravations.

      • 20

        I assume it’s because FIreworks is a throwback to the days when MacroMedia and Adobe where competitors. Having since acquired all their products, and managed to abandon a few of them over the years, I assume they’ll want to begin development of their own product. Said product is very late to the game, and I would have loved for illustrator to have Flash controls, and Fireworks to work more like Illustrator. The Macromedia layouts are garbage IMO. I welcome a new adobe product. I hope they don’t maintain the old MacroMedia layouts, color pickers, and object/bezier/pen states.

        • 21

          The Macromedia layouts were the only thing that kept me using Adobe products. It’s pure agony for me to open Photoshop/Illustrator/InDesign. I hope one day I can work quite happily with just Pixelmator/Sketch/??? One can always hope.

  6. 22

    Experience is the mother of all teachers. Thanks for this real world project.

  7. 23

    Here’s another great example of an e-commerce website if people want to get a feel of how some major players in the apparel industry are starting to adapt.

    http://www.missme.com

  8. 24

    Am I the only one who expected something about ellislab.com/mojomotor after reading the title?

  9. 25

    The process is really interesting and has given me a lot to think about. That said the design is broken in a number of places. The Take a tour now link seems tacked on and doesn’t conform to the grid. You can see a gallery here of the behavior I’m seeing http://imgur.com/a/EJIih

    Additionally the find a used car form jumps around erratically and when it settles at the mobile size it doesn’t follow any of the grid.

    I shared this article with a number of designers because the flow and process is very good but it hurts the credibility for the design to feel so unfinished from a user perspective. With these elements worked out I think it’ll be a very nice design and user experience.

    • 26

      Olawale Oladunni

      August 27, 2013 4:27 am

      @Dan, thanks for your feedback on the article. I will pass your comments along to the guys at Mojo Motors.

  10. 27

    Fantastic article! Nothing is more informative than seeing the working process – kudos on sharing this valuable information with us!

    And to “ANON”, did you think this was an article about visual design? Maybe you should have spent more time reading the article and not just looking at the images like a typical mouth-breather. Know what I am saying?

  11. 28

    Thank you for you article – it was a great read.

    Did you know though that Apple’s Xcode package comes with an iOS simulator? This let’s you view your prototypes on your Mac as if you were viewing them on an iPad or iPhone. Pretty much all the functionality that exists on the actual devices (e.g. switching to landscape) is also available on the simulator.

    • 29

      Olawale Oladunni

      August 27, 2013 4:35 am

      @Michiel, We actually used the iOS Simulator also, but found that testing on real devices to be better for observing how things would work. The simulator was also unable to provide a good read on performance under varying bandwidth and connectivity conditions.

  12. 30

    Very well structered and methological artical of a structered working process. I usually use Axure for prototype (testing UX flows for IT development) and PhotoShop for 1:1 mock ups (selling ideas to stake holders or product owners), but i’m convinced to give Fireworks a test run.

  13. 31

    Brilliant!

    Thank you very much for this article! It looks like you had quite a challenging task but i think you have handled it very well! It certainly has given me quite a bit to think about!

    As the others have pointed out – there are some discrepancies in the build. One that i noticed is in the execution of the media queries – when the browser is re-sized below approximately 354px the media query breaks. You might want to take a look at your mobile media queries and write one specific for devices below 320px.

  14. 32

    I found it a good read and it provided a nice insight in to the mindset of the team. refreshing to see the choice for responsive web before App.

    I think Adobe is focusing more on in-browser tools so you can create your artwork in Photoshop/Illustrator and let the browser tool build the (initial) UX/UI. Google “Adobe Edge Reflow” to see what I’m talking about. This way you can set the break points for the liquid design and visually build the entire thing.

    (I’m not saying this is better than doing your own programming, but it sure does feels a much better fit than FireWorks, at least for me).

  15. 33
  16. 34

    Frustrating to see a site like Smashing posting articles regarding software that has been discontinued. Not saying there isn’t good to be had out of this article but new designers/developers should be made aware to not waste time learning how to use Fireworks…

    • 35

      Michel Bozgounov

      August 28, 2013 1:44 am

      @Joe Conlin:

      While Fireworks is no longer actively developed, it is still being sold and supported by Adobe. Fireworks is also quite a mature product that works on both latest Mac OS X and Windows OS. What’s more, it has also no real alternatives as of today (at least in the Windows world; on the Mac side, Sketch is quite promising but still has not all of the Fw features). So I see no problem to publish articles about Fireworks.

      Also, if you would have read attentively Olawale’s article, you would have noticed that it is more about the workflow rather than the apps being used. That’s why it is so valuable, IMHO. But, of course, it’s much easier to say “See! Fireworks is old, so this article is not useful!”. ;-)

    • 36

      Fireworks, although it has been unwisely discontinued, is still the best software for designing web pages. Learning it is still relevant for the next few years, and the skills will be mostly transferable to whatever replaces it. If there were a real alternative, I’d have already have switched to it.

  17. 37

    I actually used FW CS6 to build a basic website for the first time back in July. First time I ever used the program and found it very useful. I like this article. Thanks!

    @Joe. It’s not the product that one uses, it’s the results.

    If a Concept artist can create work on PS7, what would be the great leap for them to use PS CS6? More bells and whistles? More add-ons? Could be beneficial but not necessary because the CA has adapted to the tools of his/her trade.

    Same goes for website building. It’s about results, not pumping up the next great program that will be obsolete in a year or less.

  18. 38
  19. 39

    Wow thank you for a great article on Fireworks even after so many have given up on it. I learned web design on Fireworks and have no plans to stop using it any time soon so thanks again for the very informative article.

  20. 40

    Great Article.
    Adobe please give some love to Fireworks. I switched from Photoshop to Fireworks to do all my digital stuff 6 years ago. This is best decision I made.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top