Tackle Mobile Upfront with Responsive Web Design
With the number of mobile devices expected to exceed the world's population this year, we can't ignore the trend. We know that any web application we develop will be accessed at some point through a mobile browser. To that end, the usability of your application within a mobile browser can have a significant impact on the popularity of your application.
Yet, this is not to advocate a full-scale redesign of your web application to support mobile browsers. Spending too much time upfront on requirements and design can be wasteful and counterproductive. We could be spending that time implementing actual features that feed the bottom line! We can spend our time more wisely by simply following certain practices within our design that enable mobile optimizations.
Incorporating responsive web design principles into your application will ensure that making your application mobile-friendly is a much easier undertaking. Responsive web design as a term has been around since 2010, but the practices have been around much longer. Appearing on the top of several hottest web design trends lists for 2013 and eliciting countless frameworks to support fluid grid-based layouts, the practice has certainly become mainstream. So, how can we incorporate these practices?
When starting a new project, let a framework do the heavy lifting. The choice of a good framework will not only guarantee you are following best practices but also can give you a head start on your development effort. There are many to choose from. They vary from the most basic grid support (e.g., Base) to a full-fledged UI framework including forms, buttons, icons, templates, and more (e.g., Foundation). The learning curve can be steep for the more comprehensive frameworks but can be worth the effort to easily achieve a very slick UI.
For an existing application, incorporating a framework may not be an option. Refactoring an entire code base around the API requirements of a framework may require an enormous amount of effort. In this case, an understanding of fluid layouts and media queries can go a long way to converting the existing CSS to a responsive design. The Chrome DevTools are especially useful when working through this type of conversion process.
Chrome DevTools allow you to see the changes you are making by modifying styles inline while providing debugging capabilities. In addition, you can even emulate specific mobile devices for more specific test cases. Taking time to learn about responsive web design is well worth the effort. Simply applying the skills you learn will ensure a mobile-friendly user experience. And it may even help make your application the next killer app.
