Responsive Design with ProtoShare

ProtoShare, with its multiple designs per page and view on device mobile capability, is uniquely positioned as a prototyping tool to help you accelerate your Responsive Design projects. This article will discuss what Responsive Design is, and how ProtoShare can help you do it effectively.

Responsive Web Design

First, what is Responsive Design? Well, there are many responsive JavaScript frameworks, led by Twitter’s Bootstrap, that tend to define Responsive by the enabling technology:

• Media queries to set CSS styles based on what screen size is accessing the website
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

But defining Responsive based on the implementing technology is a mistake. Technologies are means to an end. I prefer the thinking of future friendly. Device capabilities and screen sizes are evolving and will continue to change. Responsive is a technology that allows you to build sites that will continue to work well during this evolution.

If you define Responsive as designing and developing websites in such a way that they provide a high-quality user experience on a wide and growing range of devices, then Responsive Design is the next big thing, and it’s going to be around for a long time.

Mobile First

OK, so if Responsive is the next big thing, why mobile first?

I’ll point you to the authoritative article by Luke Wroblewski, but to summarize: Mobile is growing incredibly fast; mobile forces you to focus on what’s important; mobile expands your capabilities ( with things like GPS, device orientation etc. ).

Mobile-First Responsive Design with ProtoShare

How does prototyping fit in with Mobile-First Responsive Design? One important point about Responsive: It’s more work than just designing a website. You can’t just design a desktop site, build it with a Responsive framework and expect great results. The basics of UX have not changed. You have to pay attention to the user experience.

Given that UX still matters, our basic Responsive philosophy is “prototype the breakpoints“. Here are the steps we recommend when doing Responsive Design with ProtoShare:

1) Start by prototyping one of your mobile breakpoints. As you build this, focus on the experience you want small screen users to have. Iterate on this. Get it as close to complete as possible.

2) Duplicate the design and rearrange elements to make the next larger size. Using ProtoShare’s multiple designs per page, you can view these side by side. Annotate intended experience differences between this breakpoint and the previous breakpoint.

3) Rinse and repeat.

How many breakpoints do you need to prototype? It really depends – how many are there that had substantive differences? In my experience, the minimum is usually two. The first is small screen mobile, which almost always needs different navigation from even small tablet sizes, and the second is “desktop” ( which is often very similar to tablet ). By starting with a mobile screen, prototyping and getting the experience right, and then moving on to larger breakpoints, you can really highlight the important differences between device experiences.

Some people lean toward just doing the prototyping in HTML in a Responsive framework. The reason I think this is usually a mistake is that you’re then putting the technology, as opposed to the user experience, in the driver’s seat. Prototype to get the experience right, then use the technology to implement the vision.

ProtoShare’s Multiple Designs Per Page

Because of ProtoShare’s multiple designs per page function, you can build out and experience the different breakpoints as you go. You can compare breakpoints side by side to highlight and discuss differences. As we saw above, you can view the various breakpoints on the target device.

If you use a consistent naming standard ( as above 960 Wide, 320 Wide ) for the design, you can use ProtoShare’s browse by name function in the Review interface to browse through a set of prototypes.

Summing Up

Designing for Responsive requires effort. Don’t expect the technology to solve your UX problems for you. By starting with mobile, prototyping the breakpoints, and iterating through the prototypes, you will get better results, eliminate expensive rework and create a shared understanding with your team. Read “Should You Go Responsive” for more information.

Are you using ProtoShare with Responsive? Drop us a line and let us know what you’re up to!