This is Part 3 in a series about Responsive Design for Apps. Part 1 talks about why responsive design for apps is inevitable. Part 2 presents a case study in redesigning a desktop app to be responsive and the interfaces in Part 2 are instructive when comparing them to the screenshots in this post.
After working on the expense reimbursement form app, I realized that the end result was very similar to what Apple and Microsoft are doing in trying to provide a cohesive experience across devices.
Desktop operating systems are leading the way
One of the big shifts that both Apple and Microsoft have undertaken has been to incorporate the lessons that they’ve learned from mobile and start to apply them to their desktop operating systems.
The features of OS X Lion centered on innovation from iOS being taken “Back to the Mac” and Mountain Lion continued that trend.
While Apple has taken a gradual approach, Microsoft has made a radical shift by taking the design developed for Windows Phone 7, formerly called the Metro UI, and applying it to all devices.
We’re seeing how both Apple and Microsoft are reusing patterns across all their devices and how those patterns have their roots in the mobile design. As I mentioned in Responsive Design for Apps — Part 1, it is much easier to go from something designed for small screens and touch and adapt it to large screens with keyboard and mouse than it is to go in the opposite direction.
Let’s take a look at Apple’s Mail App as an example.
iPhone Mail App: Nested Doll Design Pattern
The iPhone’s Mail App uses what Rachel Hinman described as the nested doll design pattern in her book The Mobile Frontier: A Guide for Designing Mobile Experiences.
Rachel writes:
Mobile experiences that employ the nested doll pattern are all about funneling users to detailed content…It’s a pattern that has a strong sense of forward/back movement.
You can see pattern in action in this screenshot of the iPhone’s Mail App:
There are thousands of apps that use this same design pattern.
iPad Mail App: Bento Box
The Mail App on iPad uses a different design pattern—one that Rachel describes as the Bento Box pattern:
Just like a bento box from a Japanese restaurant, this pattern carves up the surface area of a mobile device’s screen into small compartments, each portion contributing to the overall experience. This pattern is a good way to express sets of information that are strongly related to each other, and it is more commonly used on tablets than smartphone experiences.
You can see how the selection of information on the left side of the screen affects what is visible on the right side in the example below:
One of the things to notice in the screenshot above is that the panel on the left is still acting like the nested doll pattern until an individual email is selected. Once a single email is selected, the details of the email show up on the right.
In fact, the left panel is almost exactly the same both in look and experience as the iPhone version of the app. The panel is even the same width as the iPhone screens. The only difference is that the panel has become taller to fit the size of the screen.
Looking at the Mail App in portrait orientation on the iPad finds a similar pattern:
Again, the nested dolls pattern exists, but is now operating inside a pull down menu instead of in a left panel. And again, the size of the panel is consistent with the width utilized on the iPhone, but the height has been adjusted to take advantage of the larger screen.
Mail App on Mac
I’m not sure what to call the design pattern on the Mac version of the Mail App. We can see the same patterns that we saw on iPhone and iPad have been extended to take advantage of the fact that there is more available screen real estate.
The mail accounts and folder screens have be combined into a single view on this screen. The nested doll pattern is gone. But the email list and view an email screens are almost exactly the same as what we saw on the iOS devices.
The similarities between all three versions of the apps are striking.
How different is the Mail App from a Responsive Design?
When I look at the way Apple’s Mail App uses the same elements across the different screen sizes, I see many similarities to responsive design. While the design is probably more accurately described as an adaptive layout because of the multiple fixed sizes, it seems pretty clear how the Mail App design could easily become responsive if necessary.
Were I to rebuild Apple’s Mail App as a responsive design, I would start with the mobile screens as modules. Then as the screen got bigger, I’d use something akin to the AJAX include pattern to bring more modules into view.
And in fact, this is what we have in mind for the expense reimbursement form that I discussed in Part 2. It starts with a nested doll pattern design pattern that shifts to a bento box pattern as the screen gets bigger.
The future of web design
I believe this is where we will be heading not only for apps, but also for web pages as well. We’re going to evolve beyond designing pages to building discrete building blocks (or modules) that are inherently responsive unto themselves. Then we’ll build systems and rules that define when and where those modules are pulled into the page and displayed.
This is one of the reasons why I think JavaScript UI frameworks will follow the lead of Apple and Microsoft and start to seek consistency between their mobile and desktop frameworks. If the widgets in these frameworks were designed to be responsive and accomodate different inputs, then they would be ideal building blocks for a responsive app.
How we build the systems to pull in the necessary building blocks will shift from project to project. I suspect many will use solutions like the aforementioned AJAX Include pattern to dynamically add modules to a page based on screen size and capabilities. But some may require device experiences or RESS-based solutions.
But regardless of the techniques used, I firmly believe we will be building apps that are responsive in nature. As Stephanie Rieger said, “choosing responsiveness, as a characteristic shouldn’t necessarily define the wider implementation approach”.
Responsiveness for apps is inevitable
When I look at the landscape of devices and the diversity within form factors, I find it inconceivable that even solutions built around delivering different code to different form factors won’t also find it important to be responsive.
The lines are blurring so quickly now that when we design web apps, we need to take into consideration how that app will respond to different screen sizes and inputs even if the app isn’t built exclusively using the three main technical pieces of responsive design (media queries, fluid grids and flexible images).
So it’s time to give up our collective hallucination and embrace the inherent nature of the web for apps as well as for pages.
These aren’t easy problems to solve and the implementation may require more than “pure” responsive design, but when we do take the time to think about our apps in a responsive manner, we build better, more future-friendly solutions for everyone.
Recently, I was tasked with helping a client determine if they could convert both their site and web apps to responsive design. In my Part 1 of this series, I outlined why it seems inevitable that the sorts of JavaScript UI frameworks that our client was using will eventually be responsive.
But it is one thing to say that you believe that JavaScript UI frameworks will eventually be responsive. It is another thing altogether to figure out what should be done with an existing app built to desktop UI conventions that would need to be made responsive.
Basically, it wouldn’t make sense for our client to bet their future on responsive design unless it could be demonstrated that the types of things they are building with these JavaScript UI frameworks could also be built in a responsive manner.
So I picked a web app that was representative of the way in which they’ve been using the Telerik widgets and decided to figure out how I would make it responsive.
Expense Reimbursement Form
The app that I chose is one that you might find on any large company’s intranet: a reimbursement form. Because this was an existing app, my goal was to find a way to keep the app as close to its original form as possible. If we were starting from scratch, we might find a different solution.
It’s also important to note that this isn’t the most complex application you’ll ever see. But it does represent the types of things they’re using the UI widgets for.
The Existing App
The existing app is designed around a couple of Telerik’s widgets: the TabStrip and Grid tools.
The app starts with a screen containing some instructions, tabs to switch to different areas of the expense report, and a total of the current report at the bottom.
Clicking on each individual tab takes you to a screen for that type of expense. The information collected for a mileage expense is different than the information that is collected for lodging. Each tab has a table showing the current list of expenses.
On this screen, you can begin to see the benefits that the developers are getting from the widgets. The grid widget is used to layout the table. It also makes the table sortable and selectable. Each row can be selected and then edited, copied or deleted. Behind the scenes, the grid widget is allowing the developers to retrieve JSON results and populate the table automatically.
If you select a row to edit or add a new expense, you get a modal with a web form. There is nothing terribly special about the form other than their use of some handy widgets for things like the date picker.
There are other screens for the app, but this is the core of the interaction. And while it may seem simple up front, the backend systems that this app integrates with are terribly complex so building it was no small feat.
How to convert this to a responsive design?
After finding that the majority of the JavaScript UI frameworks were not designed to support responsive design, I decided to try to figure out what they might do with something like the grid widget if it were built responsively.
I looked at the tabs and the tables and tried to figure out how to shrink them to fit on mobile.
And I got stuck. Gloriously stuck. Banging my head on the desk stuck.
Mobile first design
After a couple of hours of struggle to envision the app as responsive, I decided to give up on making the desktop app responsive. I was beginning to think that the people who say that web apps can’t be responsive were right.
I figured if I can’t make it responsive, I better figure out what the mobile version of the app should look like because that will be the next step.
Now I’ve seen a lot of people argue against mobile first design. Most recently, Henry Blodget called mobile first a dumb strategy. He wrote:
As a result, the prevailing wisdom is that companies should become:
- “Mobile Only” (just forget big screens, keyboards, and mice–they’re dead)
Or, at least,
- “Mobile First” (design everything for smartphones first and big screens as an afterthought)
Frankly, the only people who have ever argued that mobile first means that other form factors are an afterthought are people building straw man arguments and ignoring what mobile first actually says.
Luke Wroblewski’s mobile first arguments can be summarized simply as mobile is a huge opportunity, mobile has some capabilities that aren’t practical on other platforms, and the constraints of mobile cause you to focus and build better designs.
From my perspective, the opportunity on mobile should be obvious. Using the capabilities of mobile (like geolocation) are great enhancements. But the real power comes from designing the mobile interface first.
Every time I design the mobile interface first, I find that I learn things that make the wide screen version better. Embracing constraints, particularly in design, is tremendously powerful.
How do you apply mobile first design to a desktop app?
The most common complaint I’ve heard about mobile first design is that it sounds great if you don’t already have a desktop site or app, but not everyone has that luxury.
But even if you have an existing desktop design, mobile first thinking can be useful. That mindset is what helped me see how the reimbursement form could be retooled to be a responsive design.
After I got stuck, I decided to set aside the desktop app entirely and design the app for mobile. I wasn’t convinced that responsive design was going to work so I decided to assume that the mobile app would be a separate application. What would make a great experience for mobile?
To aid me, I used an iPad application called AppCooker to build mobile wireframes. I’ve become a big fan of this application because I can quickly build wireframes and simple prototypes of interactions. Plus, it is nice to get away from the keyboard and mouse and do actual work on an iPad.
While AppCooker works for me, it doesn’t matter what tool you use. A pencil and paper would work just as well. The point is to use the mobile design as a forcing function to make you think through what really matters.
A mobile reimbursement form
So I started designing a mobile app version of the reimbursement form. As I thought about the form, I realized that the desktop app didn’t feel much like a form. I wanted to put make it clear that this was something you are filling out and submitting.
I realized that the little summary table at the bottom of the desktop app was the core of the form. You add a bunch of expenses in each category, it totals it for you, and then you hit submit.
Designing it this way meant that another tenet of mobile design was being used. The content itself was the interface. Instead of using tabs to navigate, each row in the form both served to summarize the amount for that category as well as a link to go edit the expenses in that category.
With the home screen done, I had to figure out what someone would see when they went to edit an expense category. On desktop, each row in the grid had multiple columns of information. There wasn’t enough room for that level of detail on the smaller screen.
I had to think through what really mattered for these expenses. While all of the data being collected is important, what information would make it possible for someone using the app to quickly identify which expense was which and also determine how much they were being compensated.
In this case, the title of the expense, date of expense, miles traveled, and cost seemed like the most important things.
Again, seeing the details, editing or deleting each expense became easy. Tap on the expense to get to the details of that expense and act on them.
Now, these wireframes aren’t perfect. Looking at them a few months later, I can see things that I would love to change. But they serve their purpose. They describe how the reimbursement form could be done on mobile in an efficient manner.
Mobile interfaces map well to the desktop app
When I had finished with these wireframes, I woke my computer from sleep and decided to compare what I had done to the original application. I was surprised at how well the mobile app mapped to the original application.
The widget at the bottom of the screen that tracked the expense total had become the home screen of the mobile app. The tabs had been replaced by each row in the form.
The mileage screen was almost a direct comparison except with less information in each row. Also, instead of the less intuitive select a row and then hit buttons. Selecting a row took you to the detail page.
And of course the detail screen mapped almost directly to the expense modal on desktop. It also made it see the current values and edit them.
Once I saw how well mobile was mapping to desktop, I began to think that responsive design might be possible. Not only that, but I was beginning to believe the mobile interface was superior to the desktop one.
Rethinking the desktop version
At this point, I decided to take a look at what the desktop version might look like if it was influenced by the mobile version. My goal was to keep the grid widget in the design and minimize changes to the desktop functionality as much as possible.
I would be the first to admit that this interface feels off. It is because we’re mixing widgets that are part of the mobile UI framework with ones that are designed for the desktop framework. I think the app would feel more cohesive if we ditched the desktop widgets and focused on using the mobile widgets for all screen resolutions.
But for our purposes, the wireframe proved what we needed to see. It was possible for us to envision a design that could start with mobile screens and add functionality as the screen got larger. It was now possible for us to see how we might make apps responsive even if we weren’t exactly certain how we would handle converting the current application to a responsive design.
So how did the app turn out?
On the one hand, the exercise accomplished our goal. It was clear how responsive design could be applied to their applications. More importantly, we identified the process by which designers should think through how to convert existing apps.
For this particular app, the assessment was that it wouldn’t be worth making the current code base responsive. While we might be able to convert the Telerik-based app to be responsive, we know that Telerik’s framework has been declared end-of-life so it doesn’t make sense to invest time and money into a system that is deprecated.
Instead, the device detection will be used to route people on mobile devices to a mobile app. The mobile app will be built responsively. And when they are confident that the app works as expected, it will replace the desktop version.
In Part 3, I look at similar changes that are happening with native desktop apps and what we might learn from them.
We’re pleased to announce that Tyler Sticka is joining Cloud Four today.
Tyler is someone whose work I have long admired. His portfolio speaks for itself. He has designed games, created illustrations, guided projects, and teaches a course on web standards.
Most importantly, he is passionate about the web and pushing the boundaries of what it can do. I think he will fit in nicely. :-)
On an unrelated note, when I started to write this post, I searched to see what I had written when Matt Gifford joined Cloud Four back in 2011. I realized that we had been remiss and had forgotten to write something back then.
So in hopes that it is not too late to remedy that oversight, I wanted to belatedly say that like Tyler, Matt was someone we knew and admired from his role in the tech community. Not only has he become a critical member of our team building complex JavaScript applications, but he has stepped up as the primary organizer of Mobile Portland’s monthly meetings.
The best thing about starting Cloud Four has been the opportunity to work with an amazing team. I feel truly privileged to get to work with some of the smartest people I know.
One of the big advantages that native apps have over mobile web sites is that native apps never ask you to login again and web sites do. Why is that?
Let’s look at a very specific example of a site and app that I use on a regular basis—the Alaska Airlines app and mobile site.
Because I travel a fair amount, I have found myself using both Alaska Airline’s iOS app and their mobile web site quite a bit.
I end up using both because neither does exactly what I need. The mobile web site will tell me where I am on the upgrade waitlist, but the app won’t. And while the app doesn’t have all the data I need, it doesn’t log me out which means I don’t have to dig up my password to find any of the information that the app provides.
I would prefer to use the mobile web site. There are a few things that I like better about the mobile web site than the app and I get some data, like the upgrade list, that I don’t have in the app.
Despite my inclination, I find myself using the app more often because I don’t have to worry about supplying a password.
Which brings me to my question: why do I need to continually log into the mobile web site and not the app?
There is nothing that prevents a website from keeping me logged in indefinitely. If it is for security reasons, then wouldn’t those same security reasons apply for the native app?
I’m honestly confused by this. It isn’t just Alaska Airlines that I see making different decisions about how long they strore credentials in apps versus mobile web sites. Does anyone have a good reason why this might be the case?
We wrote the book:
Recent Comments