OdeToCode IC Logo

Thoughts On Going Mobile With An Existing Web Site

Monday, April 15, 2013

Assuming I already have an existing web site or web application deployed, running, and working great for desktop browsers, my decision tree for getting the site working on mobile devices looks something like the following. mobile thoughts

The right-hand side, the "mobile friendly" approach, is primarily concerned with adding responsive design touches to an existing site. Frameworks like Bootstrap and Skeleton can make this easier, if they can be worked into the existing design. The right-hand side seems to work best with content heavy web sites (news, blogs, articles, and dashboards) with little interactivity from the user.  

The left-hand side uses frameworks like jQuery Mobile to create the illusion of a native app. These frameworks generally require some major structural changes to the presentation layer and thus often work better as a separate site and source control project (m.server.com for mobile devices, server.com for the desktop, for example). A clean separation allows for a complete focus on the mobile experience, but  there is still the possibility of reusing assets, media, and backend services previously built for the desktop version.

The middle box is a hybrid approach using a framework like ASP.NET MVC that allows for view selection at runtime (Index.cshtml and Index.mobile.cshtml). Although this approach makes it easy to reuse quite a bit of code (even into the UI layer of the server), and often takes less time, it sometimes sacrifices the optimizations that can be made when working from a clean slate and doesn't evolve as easily when adding new features. This approach might use just a CSS framework, or might use a framework like jQuery Mobile, while still keeping the ability to make structural changes like an entirely new site.

Like everything else in software, the decisions are all about tradeoffs and where the software has to go in the future.

Gravatar Martin Tuesday, April 16, 2013
Converting an existing website to be responsive is not that easy, nor does it just involve frameworks. You need to take a step back and use the mobile first approach, which means re-evaluating your content. I have taken 3 of my sites, and the first few I tried to "convert" the current site to responsive, and it was a nightmare. You don't need to start from scratch, but you will find it WAY easier if you start with the mobile version and work your way out to the desktop.
Gravatar Dan Tuesday, April 16, 2013
I like the idea of designing for large screens and taking things away rather than thinking mobile first. Smart TVs are an emerging trend and monitors are getting larger and larger - those users deserve an experience that matches their premium device. The smaller screen mobile users are addressed by stripping away content to compensate for their small screens...this way you can show off your site in a board room and get a 'wow' reaction, and you mobile users still get what they need. Of course I tend to design sites which - by their very nature - are not likely to have high mobile demand, so this makes a 'big screen first' approach even more sensible.
Comments are closed.