While Mutual Mobile is best known for enterprise applications, it’s not all we do. In fact, we often deliver responsive websites that look just as stunning on a PC as they do on a mobile device.
As you might imagine, we’ve gained some valuable insights along the way, insights we’ve applied to the recently re-launched mutualmobile.com — and now want to share with you.
ONE SITE, ONE CODE
Instead of creating separate desktop and mobile websites, you can use a single code base and still have a design that works across disparate platforms. What makes this possible? Code that automatically detects a user’s browser size and configures your site to perfectly fit those dimensions.
Of course, you can choose to have differing experiences from one platform to the next — even with a single code base. Take our site, for example. Because of usability concerns, we didn’t want the desktop navigation to carry over to the mobile experience.
To get around this, we developed a menu icon that appears as the browser window shrinks. Upon tap, users see a touch-friendly overlay menu. For a look at how this works, use your cursor to minimize the size of this browser window on a desktop computer.
YOU CAN HAVE IT ALL
While some have previously advocated limiting what content is surfaced in a mobile experience, it’s not something you have to do. In fact, for our own site, we chose to do the opposite.
“The mindset of a lot of brands is to try and guess what’s most relevant to mobile,” says Mutual Mobile CMO Sam Gaddis. “We didn’t want to have to do that – we wanted people to be able to access all of our content from any device.”
As you explore how our site morphs along the x-axis, you’ll notice we didn’t eliminate a thing. We merely altered the presentation of content for each respective device.
THINK INSIDE THE GRID
The key to designing a flexible site is to start with a grid. Going from four columns to two columns to one column isn’t terribly difficult if you’ve formalized a design system at the outset of your project.
While this does make it easier to achieve a responsive design, the creative process is not without stumbling blocks. Not only do you have to take multiple screen sizes into consideration, there are also touch and non-touch experiences to keep in mind as well.
Mutual Mobile developer George Henderson offers this advice: “It’s challenging to architect a responsive site to fit the user experiences required by different screen sizes. Finding an elegant solution for fluid layouts and interactions plays a fundamental role.”
IT TAKES TEAMWORK
With most web design projects, your designers create mock-ups of every single page. These files are then passed along to your development team, who often work in a vacuum until it’s time to QA the entire site.
To expedite the process — and allow for a greater level of collaboration — we recommend co-locating teams for the duration of the project. When designers and developers sit next to each other, it allows for feedback that’s iterative and on-the-fly.
Co-location during the development of our site meant quicker fixes when something didn’t work. It empowered designers and developers to solve the problem that day, as opposed to the next phase. It also gave each team greater insight into the other’s world, which made everyone better equipped to avoid pitfalls.
PATIENCE PAYS OFF
You should know the initial time to design a responsive site is about twice as long as a traditional website. However, because the code base is consolidated, any future content updates will automatically sync across devices.
We’ve found that designing responsively, while challenging, is well worth the extra effort in the end. The finished product of a responsive site makeover works down to the smallest detail, and is a beautiful experience, no matter what screen or device your audience accesses it from.
For a more detailed look at when responsive web design makes sense, check out 11 Criteria for Selecting the Right Front-End Solution.
