Design: Responsive Design

One of the best ways to make your mobile app or Web site pretty—but also inconsistent and unusable—is to begin by drawing the user interface (UI).

However, starting with problems, user needs, and audience definitions, then defining the data structure and information architecture is a pretty well-defined approach that many UX designers and product teams believe in and try to follow. Still, too many go from there straight to user-interface designs. That’s still too big a jump and leaves too much to chance, gut instinct, default framework behaviors, and nitpicking reviews.

Instead, to understand and define an app or Web site’s information design, we first need to create a box diagram, or box model. Read More

Sitting around a table in Hamburg with three German Axure trainers from Ax-Stream, our three-day mission was to design a new Axure training course focusing on Responsive Web Design (RWD) using Axure 7’s adaptive features. Our goal was to produce an initial course design that we could pilot test with our other Axure trainers across Europe. More on that later!

We were working with an early beta version of Axure 7. Axure had asked us to review their new adaptive features and provide feedback regarding necessary improvements for its final release. In my prior discussions with Axure CEO, Victor Hsu, he had briefed me that Axure 7 would better address adaptive Web design than full RWD. For example, in keeping with earlier versions of Axure, there would be no support for liquid layouts, specifying positions and dimensions of Axure’s widgets—what some might call screen objects or components—using percentage values, or dynamic reflowing of text within widgets as the parent window gets resized. Read More

This is a sample chapter from Luke Wroblewski’s book Mobile First. 2011, A Book Apart.

Chapter 7: Layout

Appropriate adaptations of how we think about organization, actions, and input on the desktop take what we know about Web design and make it usable on mobile. But how do we ensure it’s also usable across the wide range of mobile devices available now and in the coming months—not to mention years?

• Come to terms with the fact that mobile is going to change at a breakneck pace for the foreseeable future.
• Let mobile browsers know you are creating designs that fit them.
• Be flexible, fluid, and responsive in your layouts.
• Know where to sketch the lines between device experiences.
• Reduce to the minimum amount necessary. Read More