Dynamic Wireframes Make Mobile Responsive Web Design Easier

Dynamic wire frames are simple, working web pages where we can work out essential content and mobile-responsive design decisions.

Once upon a time, we would meet with the client and organize their site map. Then we created wire frames – Simple line drawings that showed where each piece of content went. The last thing we want is to find out that an important call to action or form has been missed after visual design has started. Or even worse, after the test site has been coded.

Only then would we jump into visual design, where we would work out color and type choices, along with graphic elements and photography.

Web Design Gets More Complex

Now, as development and mobile needs becomes more complex, we have found that our developers were spending too much time making design decisions in order to interpret static designs to this new, fluid environment.

Enter dynamic wire frames. These are working HTML files where we can work out essential responsiveness issues.

A Demonstration

Here is an example of a wire frame from a recent project. If you’re on a full size computer, try changing the size of your browser window. You should be able to watch the layout and type sizes change with different resolutions.

It’s not sexy, but that’s not the point. The fonts, colors, etc. aren’t final, or even interim. They’re just a quick thumbnail sketch to show you what content you’ll see.

Ease Web Site Development

This important tool avoids problems during development of a web site because it means that the developer won’t have to do something they never want to do: Make design decisions. And they won’t have to do something you never want them to do: Charge more. With wire frames, they spend less time on to getting responsive right.

Better still, it cuts down on our design time because we don’t have to create drawings for each of three or four device sizes, or screen resolutions.

Mobile First

We work from a mobile-first standpoint. This means that we start with the mobile screen size and get message in the right priority. Then we move on to tablet and then desktop resolutions, adding enhancements as we go. Dynamic wireframes give us the a great sandbox to try things out before making a change means growing the project scope.

Optimize for Mobile

We can optimize for lower load speeds and memory of mobile devices by delivering enhanced information to the desktop user. That’s a good thing to test here, too. Try changing the window width of the demo again and watch how the last product box in the page appears and disappears when you change from mobile to tablet width.