Upwardly Mobile and Responsive Design

by

Upwardly Mobile lets you find out where in the country it’s best to live by comparing various types of salary, living and employment data and ranking it based on your preferences.

After months of “coming soon” teasers, we are finally launching Upwardly Mobile! The site uses economic data provided by the government to help you find areas of the country where you, based on your occupation, could be more economically secure than where you currently live. While economic concerns are only one part of the decision of where to live, Upwardly Mobile can help you find areas of the country that you may have never considered before or help you rule out those you have.

Upwardly Mobile is also Sunlight Foundation’s first responsively designed site. By using normal old web technologies (HTML, CSS, JavaScript), we’ve created a site that optimizes its layout to best fit whatever device it is being viewed on. The image below shows Upwardly Mobile as viewed on a phone, a tablet, and a desktop computer.

Upwardly Mobile resizes for phone, tablet, and desktop

Try it out on your phone or tablet by visiting http://upwardly.us. If you are using an Android device you can download the Upwardly Mobile launcher from Google Play.

A general philosophy of mobile development

For the purpose of this post, I’m going to use the terms web app and web site interchangeably. I’ve seen no good definitions that make me think that they are two separate things. Also, when I say developing for mobile I don’t mean creating an app that works on only mobile devices, but one that works well when used on a mobile device and potentially on other devices as well.

There is a small set of guidelines I try to follow when developing for mobile devices:

  1. Native apps generally provide a good experience for the user.
  2. Web apps, at this time, are unable to provide the same experience as native apps.
  3. Web apps that try to mimic native apps will always disappoint, so they should embrace their webiness instead!

A web app that tries to make the user think it is a native app will always fail to do so, leaving the user with the impression that it’s just a terrible native app. So embrace the web if you don’t go native! By using responsive design you are creating something that can be used on any device by anyone with an internet connection. You won’t have multiple codebases to deal with and you won’t have to worry about feature parity across apps targeted at specific platforms.

As far as native v. web for mobile development goes, I say it’s dependent on the goals and requirements of the project. I’m not one of those people that envisions a future that consists solely of web-based applications. There are good reasons you may want to use native development so it’s a project specific call you have to make. Native platforms will always be one step ahead of the web when it comes to new features and integration with hardware. If the project would be better off as a native app then do it!

For more information on responsive development, check out Responsive Web Design by Ethan Marcotte.

This sounds great! So how much does it cost?

If your app does not need native functionality then responsive design will greatly reduce the amount of time and effort needed to target multiple devices. With one codebase it is possible to create a product that works on desktops, tablets, and phones across all major operating systems. There is an initial investment of time needed to become familiar with responsive practices as it requires an entirely different process of design and development. Once that process is established, however, the amount of effort is not much more than if you were to make a normal old, desktop-sized web site.

As Upwardly Mobile was our first responsive site, there are lots of things that we can do better. Best practices for responsive images are still being developed so this isn’t a completely solved problem yet. But even with the methods we have now, it is possible to create a site that reaches an incredibly large audience and provides unique presentation for any device on which it is viewed.

Credits

Upwardly Mobile was designed by Sunlight Foundation in Washington, DC.

This app was made possible by a grant from the Knight Foundation. Upwardly Mobile is the second in a series of three apps that show how government data can have an impact on people’s lives. Our first Knight app, Sunlight Health is available in both the iOS App Store and Google Play.