Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Making It a Mobile Web App

Ask any interactive agency nowadays what their clients are asking for when they need a mobile experience — the answer will inevitably be “an iPhone and/or an iPad app.” Native Apple apps are a hot commodity, and in today’s mobile application ecosystem, mobile web apps are not sexy. In fact, many people don’t even realize they are even an option. In certain cases, an iPhone/iPad app will be the right solution for their needs.

However, there are some situations where it may become a short-term win, but eventually a long-term loss. Mobile web apps offer a good number of advantages over native apps; and though they face some design, development and deployment challenges, they are a powerful cross platform, scalable and affordable solution.

Increasing Fragmentation Link

Mobile apps are all the rage. There are a slew of startups targeting the iPad, countless entrepreneurs hacking together the next killer iPhone app, and it seems as though every big company has released an app of some sort. With the increasing penetration of Android phones, developers are scrambling to port their software.

But what about deploying to Windows Phone 7, Blackberry and Symbian? Who wants to study yet another SDK, learn another language, and go through yet another app submission process? Who will continue to keep the code up to date for all these platforms as each one splinters into new incarnations, releases new hardware and OS updates. Fragmentation is a costly long-term investment. And people are beginning to realize that native apps are not a sustainable long-term solution for all their needs.

Screenshot
GAP StyleMixer application for both iOS & Android

The Mobile Web is Everywhere Link

As the native mobile app market becomes increasingly fragmented, it is becoming clear that there needs to be a solution which can re-use code and designs across platforms, and which eases deployment headaches. But why invent a new solution, when it already exists on every device out there: the Web. Webkit1 is gaining ground as the de facto standard for rendering web content, but even Webkit isn’t appropriate for every application. It wouldn’t be recommended for experiences that need complex graphics rendering, require hooks into specific hardware such as camera or accelerometer, or have hefty media requirements.

Though these constraints will change over time. But for all other apps that don’t need these features, using the mobile web frees developers to use their web technology of choice, so long as it will render on mobile browsers. Design and develop once, deploy everywhere. With smart design and code, a single web app could render appropriately on differing resolutions and screen sizes, and respond accordingly to touch, 5-way or cursor. Indeed, frameworks for mobile web app development already exist, such as Sencha Touch2.

3
Sencha Touch Mobile Web Development Framework

Old News Link

Desktop web apps are far from a new idea — Rich Internet apps have been around for a while. Google has been pushing in this direction for years, creating a broad suite of online tools, primarily for the desktop, with an increasing focus on mobile. However, web apps have been slow to gain traction in the mobile space. Even with Apple promoting mobile web apps as the next best thing on their 1st generation iPhone in 2007, the focus is still squarely on native apps. And the primary reason for this is due to the overwhelming success of Apple’s (native) App Store.

The App Store Model Link

Apple’s App Store was not the first to distribute native applications to mobile phones, but they proved it was a viable model, and launched the concept into popular culture. It’s this same model that would be necessary to make a mobile web app ecosystem successful.

Google's Android Market in Making It a Mobile Web App
Foursquare App in Google’s Android Market

As a consumer, it’s more appealing to go to one trusted online outlet for stuff than to waste time searching the web for the same thing, and putting yourself at risk of being hacked. Mobile web apps need a consolidated storefront for much the same reasons.

First, it’s easy to find apps when they are indexed, categorized, and searchable in one place. Second, a robust community of users exposing app popularity, contributing ratings and writing reviews makes it easier to evaluate your choices. Third, when I’ve decided to buy a game such as Plants and Zombies, I want to be sure my purchase will be a safe one — something a robust app store from a recognized company should offer. And since a web app is cross-platform, you could play it on your Android phone, your iPad, and your desktop — all with a single purchase. Buy once, use anywhere. It’s magic!

As a business or developer creating web apps, a centralized web app store provides benefits over doing it solo. Most importantly, it provides a source of monetization. This is the key to driving adoption of a web app ecosystem, as without revenue, businesses and developers will stick with money-making native apps. It’s also a marketing channel, allowing for easy discovery and promotion. Another potential benefit of using a web app storefront would be the APIs to help developers deal with authentication, licensing and other technical hurdles of digital distribution.

It’s Possible Now Link

A great majority of native apps could be deployed today as full featured mobile web apps. The HTML5 family of technologies allow for refined typography, animation, streaming video, offline storage, and the list goes on. Probably the most high profile web app to date is the Youtube mobile site, which delivers a comparable experience to the native apps they have built.

4
Youtube Mobile Web Experience

Real World Challenges Link

As with any innovation, there are big questions that need to be answered. The most obvious is the issue of cross-platform compatibility. Building a robust and rich cross-platform mobile web app experience would benefit from HTML5 technology support, but currently RIM and Microsoft’s mobile offerings use their own standards. This weakens the des/dev once, deploy anywhere story; but is by no means a dealbreaker. Web developers have long dealt with coding to accommodate troublesome browsers, and this would be a similar case.

Another challenge in the ‘deploy anywhere’ scenario arises when you look at how a given design translates across devices with varying resolutions, form factors and input methods. Application designers will need to approach this problem by targeting several key resolution/form factor combinations, similar to what is recommended by the Android SDK. Depending on what device an app is being run on, the design, layout and functionality may differ significantly. This can be solved using a combination of intelligent design and careful development.

Last but not least is the problem of providing consistent, quality user experiences in this new application space. We’ve seen how the Android’s app offerings often leave much to be desired in terms of visual design and usability while Apple has been more successful in defining quality experiences. Providing a set of best practices, design patterns, and components for designers would go a long way towards the creation of quality mobile web app experiences that would win over consumers. As mobile web apps gain credibility, we will see more offering such as Sencha Touch and Sproutcore that provide solid web development and experience frameworks.

The Inevitable Victory of the Web Browser Link

Web applications as ‘the next big idea’ might never happen — but in the coming years, more and more websites will have mobile incarnations that look a lot like applications. You’ll be swiping through articles, pinching photos, and flicking pests off your Farmville plot — all in your mobile browser. And people won’t even realize that in the end, the next generation mobile web won.

What Do You Think? Link

This article is part of our Opinion Column section where we provide a platform for designers and developers to raise their voice and discuss their opinion with the community. What is your opinion on native mobile apps and HTML5 apps? Where do you see advantages and disadvantages of both? How do you predict mobile development in the upcoming years? Are we all getting a little carried away with the app hype? If you have developed an app for mobile devices, which model did you choose and why? Let us know what you think.

If you have developed an app for mobile devices, what paradigm did you choose?survey software5

(ik)(vf)

Footnotes Link

  1. 1 http://webkit.org/
  2. 2 http://www.sencha.com/
  3. 3 http://vimeo.com/12636777
  4. 4 http://www.youtube.com/watch?v=GGT8ZCTBoBA
  5. 5 http://polldaddy.com/features-surveys/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Kim is user experience designer who creates engaging and innovative experiences on Adobe's XDCE team. When not pushing pixels for Adobe, he shoots photos, plays with physical computing, and makes DJ mixes.

  1. 1

    Rondo Estrello

    January 26, 2011 8:21 am

    Really nice read.

    We are definitely living in the era where the question, “do we need a mobile version?”, is becoming a really dumb question.

    Thanks!

    0
  2. 2

    Excellent article. While I’m just getting into mobile design/dev myself, it does seem to be extremely flexible. Even better, anyone with a cursory knowledge of front-end can put one together. Hope the community can get together and develop some sort of “mobile app” store.

    0
  3. 3

    I’ve also read about PhoneGap: http://www.phonegap.com/

    Is this a similar framework to Sencha?

    If so do PhoneGap and Sencha work better for different things or are they fairly similar?

    0
    • 4

      I’m surprised by the poll that over 50% polled created their app in the cross browser web app paradigm. I’m not sure that this applies to web applications which are different then cross browser websites. I see applications as those that specifically target the unique value additions of the mobile device offering, and I don’t think that many website webapps apply this forethought. The “webapps” are rather built to be compatible on mobile devices while taking a standard webpage browser approach paradigm.

      0
      • 5

        hmmmm…not sure if i completely follow you here – but if you’re saying that webapps are usually just mobile versions of their big brother desktop browser versions – then in most cases yes that is true – but there are mobile web versions (or webapps) that do behave like an app and don’t necessairly try to display the entire web page. As for the mobile device offering – I think that is due to current limitations w/ say JS/CSS3 and what one can currently detect and/or assume is available on the mobile device rendering the webapp. I think HTML/CSS3/JS hardware detection will get better and thus if there are diff. w/ mobile devices those can be detected. Hopefully, such an API would be clean and easy. With current native mobile apps the dev. can usually assume the API is smart enough to handle situations where the mobile device doesn’t support a certain feature – say the diff. b/w an iPhone 3G and an iPhone 4.

        0
      • 6

        While I agree that this may be the way in which many mobile web apps are developed, it doesn’t have to be the case. It is possible to use any number of web technologies in mobile web apps, including PHP, which makes it possible (along with these front-end UI frameworks) to create mobile web apps that look and feel like native web apps.

        I think what we are seeing in this arena is the result of developers doing what they know best in mobile web apps, which is to mimic the websites they have developed in the past. This is a new paradigm and one worth learning as such. Once developers become more skilled in this area, I think the differences in native and mobile apps will be much less noticeable. The only areas in which mobile web apps will find it harder to compete may be security and speed – but the latter should be largely negligible.

        0
        • 7

          @Gabriel You are exactly right. At UCLA we’ve done exactly this. We’ve created a mobile web framework for UCLA mobile (http://m.ucla.edu) that is device agnostic based on a single set of markup. Developers only need to pull in the framework’s CSS and JavaScript files and it will deliver the appropriate styling based on the device.

          Also it’s key to understand that when developing a mobile website you should complement your desktop website, not copy it. Users on mobile devices are on the go and need/want information quickly. The key is to develop a mobile website strategy: http://www.takadesigns.com/blog/2010/01/26/developing-a-mobile-website-strategy/

          0
  4. 8

    Ciprian Borodescu

    January 26, 2011 8:43 am

    Kim, this is a really good article. Having a mobile-friendly website is no longer a fashionable-trendy-cool aspect of a brand, it has become a necessity (not even to mention that if your website still has a flash that takes forever to load on the mobile page, the users will delete it from their memories and bookmarks for ever!).

    In my opinion, Mobile Web Apps have the potential of becoming the Big Kahuna on the trends wave, which swallows more and more brands, music bands, SMEs, basically anybody who wants to be somebody on the mobile environment.

    I would have to say though that Native Apps are here to stay and nobody would need to argue otherwise: in my opinion there’s a big potential from the fact that both Web and Native Apps will coexist and even merge in some cases.

    0
  5. 9

    i think it depends on which audience you are targeting, and what type of information you want to give.
    Local data storage is one of the hot issues, making apps really fast.
    jQuery mobile, even if it’s still in Alpha, it could be a good starting point without going through C# and various (open or propetary) SDK .
    Chrome and Firefox are out there selling web apps as well, that will drive a LOT of developers on this side of the fence.
    Augmented Reality is my next step though ……
    btw, good read

    0
  6. 10

    for some reason, whether by conditioning or affinity for my iphone 4, i much prefer native apps versus web apps (even though usually the former is just a compiled version of the latter). i have absolutely no web app bookmarks on my springboard at all. heres hoping for a smashing mag native iphone (and android etc) app!

    0
    • 11

      Jake Rocheleau

      February 25, 2012 4:21 pm

      Yes I second a native app for Smashing Magazine. The App Store and Android Market would look much prettier :)

      0
  7. 12

    This was a great article. I am currently working on a personal development project for a web app and last week it dawned on me…I might not have my computer with me at times where i need the app, so why not not make sure it works with mobile devices.

    0
  8. 13

    Great article.

    I’m cheering on the mobile web vs. native applications, and I love the Sencha framework. Being able to give that native application experience but served using open standards is a big win for both designers/developers and end users.

    Consider the alternative, if App Stores (used liberally here, despite Apple’s trademark) are the end game, then our use and consumption habits are really at the whim of what our tyrannical app overlords dictate. Native apps can’t be searched. Native apps are generally subject to censorship and arbitrary guidelines (I can appreciate these, but I should be able to release “Hamster Dance Mobile” should I choose to). Native apps are subject to a 30% tax right out of the gates.

    Go Sencha & other open standards frameworks!

    0
  9. 14

    This is a really awesome article that hits a TON of relevant points. I feel like because of all of the latest mobile and social networking trends that we beat this “mobile app” thing to death. No longer is it easy to find apps that are original and the market is flooded with them now. Not to mention how many people are fighting for your attention by trying to make their apps free. But then this gets into the debate about advertising and when enough is enough.

    Definitely some interesting stuff, and it will be exciting to see where the “app revolution” takes us in the next couple of years. Thanks for the post! :D

    -Nick
    nickhammonddesign.com

    0
  10. 15

    Sorry Apple, Sorry Google, Sorry Facebook…the internet will win!!! The monopoly of “by the people, for the people” vis a vis an open internet will trump any companies attempt at total and utter domination.

    Long live the web, long live web standards, long live open source — !

    0
  11. 16

    You forget that people can easily charge for a native iphone/android app, so if an application is received favourably at least some of the cost of fragmentation should be covered.

    I’d happily invest in version 4 of my android/iphone/whatever app if I had $100,000 worth of users on it, but wouldn’t bother if the customer base was only worth $100.

    So if the developer can make their content compelling then wonderful.

    The adobe platform was going to be great for mobile apps until apple refused to allow it on iphone, that’s the direction I wish everything had gone. Though I do really wish people would focus more on web apps, oh how I do :)

    0
    • 17

      Carolina Ramirez

      July 26, 2013 11:36 am

      Apple refused to allow Flash because it is bad: it is very slow and will hog CPU of phones. jQuery Mobile and Sencha Touch is better than Flash when you put them with HTML5, CSS3, and Javascript.

      0
  12. 18

    take mozilla prism as an example… we need to make offline apps and web apps as two subjects… nice read, thanks :)

    0
  13. 19

    I’m a mobile app (iPhone and iPad) developer. I think part of the problem is distribution. It’s a pain to build a webapp and ask people to fumble with the menus to get it in the device as an app (in iPhone you need to bookmark it as a home screen item). It’s often easier to point them to a link in the app store. You get reviews in the app store, which you don’t on a naked web app.

    I think it mostly boils down to resources and what you need to accomplish with the app. If it’s simply showing content, you could go for a web app. If it requires integration with core components (and possibly other native apps) then it’s a much better experience to go native.

    0
  14. 20

    Very good article. iA recently reworked ZEIT ONLINE for the exact same reasons and wrote a good article about the experience. The web browser is still the most popular content app, so they chose the obvious route.
    http://www.informationarchitects.jp/en/news-on-ipad-the-obvious-way/

    0
  15. 21

    We’re testing WPtouch Pro on all our WordPress sites. The feedback has been very positive.

    0
  16. 22

    I’m surprised by the poll that over 50% polled created their app in the cross browser web app paradigm. I’m not sure that this applies to web applications which are different then cross browser websites. I see applications as those that specifically target the unique value additions of the mobile device offering, and I don’t think that many website webapps apply this forethought. The “webapps” are rather built to be compatible on mobile devices while taking a standard webpage browser approach paradigm.

    0
  17. 23

    Not for nothing, but I recently started a company that publishes independent authors’ books by creating a custom app for them. If you interested in seeing what that app looks like and the design of it, feel free to truck on over to http://www.publishyourownbook.org and by all means, if you have questions about app design, I’ve got a few under my belt. :) Maybe I can help ya out.

    Nice article! I can’t wait for the next book to come out next month!! I already reserved my copy! :)
    Shawn

    ps. I think the Windows 7 phone is DOA and I would never recommend someone developing for it. Android, maybe… but for now.. Apple is where it’s at. (for good or for bad)

    0
  18. 24

    Great article and one that we will probably be reading more of in the future. It’s a little bit funny to me that with everything moving to the cloud in the desktop world some are slow to realize that clearly we are just repeating history. The mobile apps of today will move into the cloud as well. At my company (www.insequent.com), we built a platform that provides mobile websites for small business. One it allows everyone access, and two, you don’t need an app if you are a small business in most cases. Yes apps will be around for a while, but in the end, as the author correctly points out, the mobile web will “win.”

    0
  19. 25

    Steve: PhoneGap is different from Sencha Touch.

    Sencha Touch is a Javascript framework for building rich, touch-screen optimized user interfaces that run in a web browser.

    PhoneGap is a very interesting product to bring up because helps bridge the gap between web and mobile apps. It works by taking HTML/CSS/JS content and wrapping it in a container (a framework in the phone’s native programming language) that turns it into a native app for a variety of phones.

    So it can be a good transition to developing native apps – most of your development can still be done in HTML/CSS/JS, rather than in Objective C or Java, and much of the rest of the phone-specific coding is handled by the framework, which can greatly lessen the learning curve needed to build native apps.

    You could build for the web first, then transition to mobile apps by reusing most of the web code in PhoneGap once you think you need a native version that’s downloadable from an app store.

    You should be able to use Sencha Touch in combination with PhoneGap, since they serve different functions – you could use Sencha Touch to help build the rich user interface of your web app, and PhoneGap to wrap that web app up into a native application for various phones.

    0
  20. 26

    Gordon @ Primate

    January 26, 2011 1:55 pm

    For web sites, I’m all for creating mobile skins which simply alter the appearance (and possible operation) of it for the the mobile device. The popular WPTouch WordPress plug-in is a great example of something like this. Of course, with modern smartphones that can render sites almost perfectly it’s quite debatable as to its necessity.

    The other thing I’m really interested in is cross app compilation. Although Apple are really strict about it at the moment, I’m starting to hear about software that will compile languages in native code for both the iPhone and Android. This could be really powerful in nullifying that fragmentation you mentioned.

    0

↑ Back to top