I’ve been working with a mobile web application for the last couple months and have slowly been realizing the difficultly for an app built on the same HTML to render correctly on multiple devices. Most of my time spent it tracking down errors and bugs on specific devices and their differing operating systems. Granted iOS is the least buggy by far and the majority of my users are using iOS, but simply supporting this platform just isn’t a viable option considering the rapid growth of Android devices and even Windows devices.

I have always been on the responsive design bandwagon but until I truly faced the actual problem of supporting the app in multiple operating system the more I have questioned it’s use in future projects. Responsive design sound great on the surface; a couple media queries, a nice grid layout and a couple of CSS tweaks and Wham! The perfect site that responds to any screen resolution perfectly. Although this is a bright and sunny view on mobile web design, it’s not entirely that perfect.

The trade off however to responsive design is creating a separate mobile site…. this will probably include one designed specifically for phone resolutions, one for larger tablet resolutions, one for smaller tablet resolutions and possibly one for larger screen (TV) resolutions. But who really has the development time or money to accomplish this? So which is a better solution to the mobile problem? Which of these will break out and be the future of mobile web design? My bet is still on responsive design.

Rethink Design

Where we as designers fail with responsive design is that we start designing for one specific size of screen, then try to modify – or hack – to fit other screens. For me, I’m starting to realize what responsive web design really is, it’s not just simply about making your site be flexible to all screen sizes, it’s actually rethinking the way you approach the design from the very start. Although Luke W’s Mobile first campaign preaches a new way to think about the way we design sites, for me it all changed when I read what Jeremy Keith wrote on the subject.

Those who are currently rejecting responsive design point to the difficulties of making desktop-optimised sites work on small screens with potentially narrow bandwidth. They’re right. But the solution is not to create a separate site just for smaller screens. The solution is to fix the site so it isn’t optimised for just one environment.

The truth is that web designers and developers have been making device-specific websites for years; it’s just that the device in question was the desktop computer. But just about every point in the W3C’s Mobile Best Practices should be applied to all websites.

The solution to our mobile woes is really just that, rethinking the way we design. Instead of simply designing for a specific display, whether it be mobile or desktop, we need to design for the web in general. The future of web design isn’t going to be attached to specific pixel size or dimension so why should we continue to design that way?

In the process of rethinking the way my mobile project is structured, I’ve discovered that most of my bugs and problems are a result of designing a mobile site for a desktop viewport and then trying to make the smaller screens works. But, even if the application was specifically designed for a phone, the tablet and display versions will suffer the same fate. Because the support for the application is so broad and we must create an incredible and unique experience in all resolutions, the only true way to accomplish the task will probably actually be creating three different versions of the app: one for phone, one for table and one for desktop display.

The Hybrid Application

Although I still believe that responsive design is the true future of web design, I still feel like the technology hasn’t quite caught up yet. Although HTML5 really promises to resolve that – as long as browsers’ reflect it is their adoption rates. I guess it’s kind of the “peacemaker” cop out, but I still feel the best solution right now may lye in the middle – a hybrid of sorts.

Like I illustrated earlier, I think my application may require three version: phone, tablet, desktop. Three separate apps where each on hits a specific user need or user experience. From there responsive design can take over and manage the smaller differences in each family for devices – even phones have some drastic differences.

The bottom line is this: This “hybrid” or “cop out” solution is probably completely ridiculous and will probably hog to much dev time and resources, but the real solution will actually depend on your user, your app and what you are really trying to accomplish. For some apps or web sites responsive design will be the best solution and for others, separate sites may truly be the cat’s meow. For now, I still believe that the separate site approach is still probably the best solution at this point, but only if you have the dev resources and time to spend into developing such sites. But as technology continues to get better (and browsers, both display and mobile follow too) responsive design will surely take over as the legit solution and the future of web design.