The Rise of the Mobile Web from a Developer Perspective

The Move Toward Mobile
The rise of mobile devices in the past few years is undeniable. Earlier this year, Apple announced the number of iPhones shipped daily surpasses the number of babies born in the world.

In 2009, PayPal tallied $141 million in mobile payments. That number jumped to $750 million in 2010 – and skyrocketed to $4 billion in 2011.

At Johns Hopkins Medicine, we've seen traffic from mobile devices to increase from 4% in 2009, to 11% in 2010, to 18% this past year.

A Developer's Perspective
As a developer, this new mobile revolution is both exciting and worrisome. It's exciting to watch new things take shape and to view the exponential growth of great new technologies, but at the same time, we're introduced to a variety of technical issues.

For example, we now have great things like near universal HTML 5, JavaScript and CSS3 support on mobile devices. But developers also need to account for an absolutely mind-blowing variety of screen sizes, resolutions and pixels to make sure everything displays properly and correctly.

Systems like responsive design (the ability to make pages larger or smaller based on screen size) are natural offshoots to attempt to deal with these issues.

In the end, the goal is to deliver a robust experience to all users no matter their device size or shape. While this goal will require a lot of work, I'm very excited to see where these new technologies will take us in the coming years.

What are the Most Important Things to Consider?
It's easy to get caught up in the hype of new technology and miss seeing the bigger picture. A mobile strategy in today's market should focus on making your entire site mobile accessible with key areas providing a more robust experience.

1. Make all your content accessible by mobile devices. Updating your existing site styles so that they render across the board is key. Whether you use responsive design, adaptive design, or mobile device templates doesn't matter as long as your users can view the information they need.

2. Respect user bandwidth. As much as cellular carriers love to tout their networks, we know the truth: cellular coverage can be spotty or non-existent. Do your best to reduce bandwidth load on your user’s device. Avoid large images on pages and anything Flash based.

3.  Avoid gimmicks. Nothing is more frustrating to a user than visiting a page on their phone and attempting to scroll when the website has grabbed "swipe" actions. If you happen to move your finger to the side, you're now on a new page.  What's intended to be a cool feature can come across to users as gimmicky and frustrating.

4. Use design guidelines. Apple does it. Google does it. Hopkins does it.  Make sure you're thinking about a UI design that's comfortable for your users.

5. Don't make everything an app. Visit a site that happens to have a mobile application for your device and you'll be peppered with notifications about it or even worse, denied access to their content unless you install the application. Applications are great ways to deliver a very robust user experience, but the majority of users expect to find content and experiences on the web. It's also much less expensive for organizations to focus on the desktop and mobile browser first and considering application-specific development for incredibly specific, strategic purposes.

How are Hopkins Medicine Web sites changing?
Here at Hopkins the Internet Strategy Team is hard at work to make our sites and site designs compatible across devices. Most recently, the team launched a new web site for The Johns Hopkins Hospital. The site is a showcase for a mobile design approach and reflects our goals of providing content for our site visitors no matter what device they’re using.

So stay tuned, the site is changing, and our team is working to extend the capabilities of the Hospital sub-site to pages all across However, the greatest challenge is that the site includes 30,000 pages within the current content management system – many of them individually managed by editors across the institution.

The Web Center site will soon include numerous resources for editors to increase consistency and to prepare us for upcoming mobile development projects. Training and User Guides provide a basic overview on using the content management system. More importantly, the Template and Styles Standards in the Web Standards and Guidelines outline the proper use of styles – and soon will include the styles which we're using to develop our mobile solutions.