Axure's worth in responsive design

Question

I'm just wondering on the wider audience views on how worthy using prototype tool Axure is when designing a responsive site.

I have project where the deliverable is a responsive site. However, I'm just wondering whether the site design should be tackled using Axure to prototype the site in the first place. Or go from sketchy and the UX & front end dev teams working very closely and collaboratively.

My reservation in using Axure first (or any prototyping tool) is that you can make the content, layout and structure do whatever you want. However using HTML markup there would certain constraints and considerations. These issues cannot be wholly captured in a prototyping tool but would be in HTML mark up.

Obviously there's some more pros and cons, I would just like to hear what you fellow UXer's have to say on the subject.

Answer 1

If you are going to be building a responsive site then the chances are that you are going to use Twitter Bootstrap or some other framework for the job.

Therefore, you can block out all of your prototypes in static HTML with Bootstrap CSS/JS in the . You can even hook up the buttons if you want to do a walk through, the buttons loading up the next static page.

At every step of the way you can see if it works on a real browser. Or a real phone.

Once you have everything blocked out with standard Bootstrap fonts/colours/spacing you then actually have something. You know you can code it and you know you can style it up. You can also work on the testing with every change you make, say that fancy font breaks the input box alignment then you can nip the problem in the bud, not have it there to trip you up later.

Plus the time you spend learning how to do things the Twitter Bootstrap way, e.g. getting modals to work, getting forms to line up properly is not time wasted. By contrast, time spent in Axure takes you away from learning the useful stuff.

Answer 2

Or go from sketchy and the UX & front end dev teams working very closely and collaboratively.

Always choose that option when available.

Wait, let me rephrase that.

Always choose that option when available!!!

There, that's better. :)

The only time NOT to go that route is if you simply don't have any front end developer skillsets on staff to help. In that case, sure, something like Axure can help.

But the catch with responsive design is that it is not taking 3 separate 'designs' and then making them work as one HTML document, but rather taking one HTML document and making work as 3 separate designs.

The problems I run into when trying to translate PSD or Axure type deliverables into responsive HTML is that the person that put them together simply doesn't understand the underlying logic that goes into the HTML and CSS. For example, In PhotoShop it's easy to flip the image and text based on screen size, but that may not translate logically to the CSS.

So, to answer the question: The value in Axure is that it can help a UX team that does not have any in-house front end prototyping resources communicate to a client what a responsive web page may look like.

Answer 3

All answers here been beautifully written about the Axure's worth in responsive design. I'd like to address the more fundamental aspect of how to communicate your design once you've figured out how you want your wireframes to respond to the various breakpoints (responsive design) for which you've decided to optimize and here comes Axure to rescue.

As a developer its too much effort re-sizing browser everytime, check in different browsers and versions, different platforms etc, also Axure 7.0 includes an automated way to prototype for responsive design called "Adaptive Views". which allows to focus less on making the prototype work and more on the design.

Setting up adaptive views is easy: you either use pre-set breakpoints or customize them yourself. You place the content in the "base" view, which can either be your widest view or your most narrow, depending on where you want to start.

other points that makes me go with Axure

• allows designers to create very advanced interactive prototypes quickly and without any knowledge of front-end coding
• prototype very complex websites, iPhone apps, iPad apps, 10ftUI (ten foot user interfaces) for set top boxes and connected TVs
• incredible team collaboration
• has a SVN client built into its core so team members can check pages and master widgets in/out
• Axure exports to HTML, and can run in any browser without the end-user needing to install a special viewer applications
• it makes user testing super easy
• unmoderated remote user testing with services like usertesting.com

The other part of the communication piece is recognizing that you can't and shouldn't perfectly prototype every bit of your design. Get the main ideas down and start coding. Once that happens, as long as you have an open and regular dialogue with the developers, you can address the numerous little issues that come up that you didn't account for in your design or that you thought would be easier to implement than they were. It's often much easier to tweak in the development environment than trying to figure it out in a prototyping tool.

Answer 4

Unless you are planning to build/test a prototype that has to be responsive, I'd actually recommend against using the built-in adaptive views functionality in Axure 7 -- I have found it more frustrating than helpful. I've been doing work on a responsive site and what we've netted out with as the best approach is to do flat wireframes of a mobile view and tablet (768px) view and then quickly move to an actual HTML build with creative -- focusing on just those 2 sizes has allowed us to scale to larger breakpoints with the assumption that larger sizes will essentially "stretch" while maintaining proportions (although in some cases we've needed additional tweaking at 1024+).

The flat Axure wires have proven useful for giving an initial sense of structure. If you are working in a small team with excellent front-end developer skills, you could probably skip the Axure step and go right from sketches, but in our case we have a very large team that needs a little bit more documentation up front and this serves as a good reference.

Answer 5

I used e.g. gumby to implement responsive layout. With the webframe in axure, you can easily include online content into your axure prototype. Depends on your needs, mind that you can run into troubles when it comes to cross interaction between an axure functionality and javascript.

Answer 6

I use Axure also for responsive websites. Although I must say to simulate the actual website I would not recommend it. It doesn't really make sense for me to implement all the interactions, as the developer has to do it again anyway. What I do is I mostly plan for 960 and certain screens that are more difficult I add a mobile view. We use the axure wireframes (low fi) as a discussion tool, also with the client, as it is really quick to get an idea of the page, without actually "designing" or coding it. When the client agrees to the basic functionality and content we show it in the actual design. So Axure for me is more of a tool to start a discussion, without getting into the "I actually like blue more than red stuff". I really love invision for fast prototyping, as it takes 2 minutes to make a prototype, if the designs are ready.

So: Axure: Low fi Wireframes (No color, not too designed), show functionality and maybe content. Write down certain specifics for developers.

Invision: Fast prototyping with design screens.

To simulate responsive behaviour I would always recommend a "real" prototype as mentioned before.

Answer 7

"(...)using Axure first (...) you can make the content, layout and structure do whatever you want."

Actually, you can do whatever you want not only in Axure but also in a tool like Sketch, Photoshop or any other design tool. The fact that the tool doesn't offer the possibilities to mimic the interactions doesn't mean that they are not planned/designed by the designer. Simply, instead of making the clickable prototype, she is designing multiple states of the screen to depict the interaction. I guess it is even more remote from the real thing. So Axure doesn't really introduce any additional risk in this area. And the fact that the UX Designer designs something that is not technically feasible is completely another problem - probably related to any or both of these:

• Your UX Designer doesn't understand the platform s/he is working with. Some training should help.
• Communication between UX and other departments doesn't work. If the designer consults and shares the initial sketches with devs, then the problems like this should occur very often.

And last but not least - clickable prototypes bring a lot of value when user testing the product.