Prototyping for mobile: Avoiding horizontal scroll in Axure prototypes

When I was first introduced to responsive web design, I was told that one of its great benefits is that you don’t have to scroll horizontally in a mobile browser. Taken literally, that may be a bit on the far side. But taken to mean that zooming and panning can be avoided, it is quite a fair statement. Nonetheless, one of my big grievances on responsive websites, is when pages can scroll sideways due to one single element, that is slightly (or greatly) wider than the viewport. When the page can wobble left and right, it holds for quite an unsteady scrolling experience. On top of unsteady scrolling, it also looks rather stupid, when scrolling right reveals a big chuck of white space anywhere else, but where this one element is peeking out.

thenextweb.com with horizontal overflow
This banner seen on thenextweb.com is almost two and a half times wider than the viewport, causing the page to scroll horizontally into a great chunk of white space.

I like building prototypes in Axure and, admittedly, I might be a bit too picky about my prototypes. When prototyping for mobile I usually want my prototypes to exactly match the width of my iPhone. To do this I draw pages that are exactly 320px wide. But here’s a thing that’s really been bothering me. When viewed on my iPhone, these pages can scroll ever so slightly left and right. Try this on an iPhone (or other 320px wide device).

The horizontal scrolling is caused by Axure rendering the page slightly wider than specified. Of course, one way to fix this is to tweak the CSS once it has been output from Axure. This has the downside, however, that you will have to redo these tweaks every time you rebuild your prototype in Axure. I wanted to figure out a solution, that would prevent Axure from building pages any wider than 320px.

The images below links to two pages that look the same, but on an iPhone the first page can scroll sideways, whereas the second page can’t. Get the Axure .rp-file for these prototypes.

Prototype that can scroll horizontally on an iPhonePrototype that can't scroll horizontally on an iPhone
The two pages look a like, but viewed on an iPhone, the first page (goo.gl/3pk2QY) can scroll horizontally, whereas the second page (goo.gl/EWKB2r) can’t.

One would asume the yellow header to be a 320px wide <div> with background-color: yellow. Actually it’s a PNG-image with a 3px transparent border, effectively making the image 326px wide, instead of the 320px specified. These extra pixels are what causes the page to overflow and thereby scroll horizontally. (Note: The extra pixels has to do with the way Axure draws borders around shapes).

The easiest way to avoid this overflow, is to wrap the image in a 320px wide <div> with overflow: hidden. Luckily, this is very easy to achieve in Axure. Converting the yellow rectangle to a dynamic panel effectively wraps it in a <div> with overflow: hidden. Unfortunately, this doesn’t fully do the trick. For some reason Axure renders dynamic panels 1px wider than you specify. So to make Axure render the dynamic panel to be exactly 320px wide, you can simply reduce its width to 319px.

With these little tweaks Axure will now build a prototype that cannot scroll horizontally on an iPhone (or other 320px wide device).

First convert the rectangle to a dynamic panelSecondly change the width to 319px
To make Axure output an elememt that is exactly 320px wide, firstly convert it to a dynamic panel, then set the width of this panel to 319px.

To sum up: Axure will output an element that is exactly 320px wide, if you do as follows:

  1. Draw an element that is 320px wide.
  2. Convert that element to a dynamic panel.
  3. Reduce the width of this dynamic panel to 319px.

Happy prototyping with less wobbling.