September 11, 2011

Of Sites and Apps

Users probably don’t care what’s a web site and what’s a web app. But I believe web practitioners should, if only to know when certain best practices apply, and when they don’t.

But does an established distinction exist between the two genres of experience? Not as far as I know. Is it to do with creation versus consumption? Linkability? User experience? Or the architecture underlying the way they are built?

Personally I think there is a way to clearly delineate the two types of experience, but I’m also sure it’s not the only way to do so, and that the distinctions are very likely to vary with individual’s perspective. I’m unabashedly trawling for debate.

<tldr>

There’s one notable result of the disruption that mobile is wreaking upon the way we think about the web. The blogosphere, the conference circuit and various online communities – not to mention boardrooms up and down the country – are abuzz with hypotheses regarding the “One True Way” to do something, the “Dawn of” this, or the “Death of” that.

No doubt I’m a part of this. It’s quite fun. (Although let’s be honest, none of us really has a clue about how mobile’s going to play out eventually.)

In the real world, such binary proclamations are less useful than we like to think. Building mobile and web experiences for real users, real business – and with real constraints of many kinds – is not at all easy. Being buffeted around by voguish black-and-white philosophies (or even the outmoded ones) is of reduced benefit when you’re really trying to navigate the shades of gray in between.

One of the shadiest boundaries to have to consider when using web technologies is that netherworld that lies between ‘web application’ and ‘web site’. As far as I can tell, there aren’t established definitions that help us decide what is one and what is another – let alone a decision tree that developers and designers can follow to decide what sort of experience they should deliver to their users in different circumstances.

On one hand, the differentiation between these two things seems rather academic. If a user can access what I want them to access, and can do what I want them to be able to do, then who cares how we label that experience? It’s the web right? (Stop reading now.)

But again, this belies the subtlety of the real world, and especially in mobile. It’s 2011: iPhone-plus-four. Users want apps. Marketers want apps. Boardrooms want apps. This is, we’ve been trained to believe, the way in which we enhance our phones’ capabilities and access information in elegant, consistent ways. We can assert as much as we want that users should only be using their devices’ web browsers, but apps sell, and will continue to.

Of course, many of these apps are written with native technologies, and distributed via non-web-based stores. This article is not about them: they are likely to become evolutionary dead-ends. But if the web is to succeed as a distribution medium – and as a stack of technology – it will have to rise to match the expectation that’s been set. It will have to provide what is needed to create and deliver app-like experiences, just as well as it can classical site- and document-based content.

The good news is that smarter people than me have long seen this coming. Although much of HTML5 (the markup specification) is about improving the semantic qualities of web documents, HTML5 (the suite of related APIs and technologies) is unashamedly focussed on enabling web applications of increasing complexity. And with browser vendors now competing on such metrics as JavaScript performance and API completeness (rather than how well they support the <aside> tag or somesuch), it seems we should expect to see ever more advanced web apps in the future.

Nevertheless, in frequent discussions about the mobile web, its best practices, and its tools, you’ll hear many arguments qualified with clauses like “oh, but things are different if you’re building an app” or “this is a better technique for traditional sites”. I know, because I do too.

And so, as we enter conference season again, I thought it might be interesting to see if there’s any consensus about what these two things even are, and how we can differentiate between them. What is a mobile web app? And when is it not a mobile web site?

For me, there are a few possible vectors that we can consider.

Creation versus Consumption

Imagine a large structured collection of interlinked documents, where the user is essentially limited to a read-only interaction (give or take the odd comment form or search box). There’s no doubt that such a thing should be classified as a site. Blogs, news sites, academic papers – these are clearly the heartland of the classical web. Online stores too? Probably.

But what about micro-blogging services? Photo-sharing? Online email clients, document editors, IDEs even? Games? It seems debatable as to whether one should classify twitter.com as a site or an app (especially on a mobile device), but I am most certainly using an application when I’m logged into GMail, Google Docs, or playing Angry Birds – let alone working in some web-based data admin interface.

Interestingly, this second category of experiences all seem to be read-write (or at least, highly interactional). So can we classify sites as being read-only and apps as being read-write? That certainly seems simple enough: sites are to consumption as apps are to creation.

Does this feel right? One problem here is that there are some beautiful and enjoyable app-like experiences – Flipboard comes to mind – which are clearly oriented towards consumption. (But then again, maybe the logic is backwards here… perhaps Flipboard is what the web site of the future should look like, though Gawker’s infamous app-like blog felt clunky). And how would you classify Facebook? Entirely user-generated content, but it still looks and feels quite like a site.

Linkability

If you are launching an experience from a desktop or homescreen icon, it is easy to feel that you are in a sandboxed and closed environment whose boundaries are explicit and inescapable. If you start your experience by entering a URL into a browser, conversely, you’re more likely to feel that you are at the start of journey – one where every link clicked can immediately take you to another page or another site or another domain, across the web’s endless interlinked landscape with no boundaries.

So does this serve as a way to distinguish between site and app? Most native apps certainly do have impermeable boundaries: outbound and especially inbound. Even the iPhone Twitter app opens up links in a modal, embedded web view rather than spawning a new Safari window (much to my frustration, at least).

But web apps? Need these be silos? No, of course not. They’re still running in a browser, and (unless in hybrid environment) hanging off a URL like any web site does. There’s no reason for a web app not to contain links that lead you off to other parts of the web, either in new browser tabs or the present one. While reliable deep-linking back into web apps seems to be less commonplace, this is more a function of implementations and browser’s fragmented History APIs than some fundamental flaw in the web’s architecture. (I never shared purists’ distaste of hash-bangs, for example. These are a symptom of developers trying to make this inbound linkability and bookmarkability work for single-page web apps: fixing the web, not breaking it.)

So, like others, I’d definitely hold up linkability as a huge advantage of web apps over native apps – but not as a reliable way to distinguish between web apps and web sites.

User Experience

Another way we might classify apps and sites is by assessing the user interface and experience presented. What are the visual cues that an app’s an app, and a site’s a site?

The use of fixed toolbars is certainly an obvious one: at the top, containing a title and maybe a back button; at the bottom a series of large tab-navigating buttons within easy thumb-reach. This is a UI/UX paradigm that, pioneered by iOS, emerged entirely from the native application world, and which, before 2007, had absolutely no precedent in the classical or mobile web worlds.

Ditto disclosure lists. Ditto sliding transitions between master and detail records. Ditto action sheets, spinners, and momentum-based scrolling. Ditto even the disablement of pinch & zoom on document-like content (controversial to some, and yet understandable if you argue that viewport zooming was merely the browser’s way of dealing with legacy, not-made-for-mobile web content in the first place).

Many developers work hard to bring these platform behaviors in their web apps. And many web frameworks work hard to make it easy for them to do so. (My employer is one of those, of course.) Many rightly blanche at the thought of slavishly mimicking a particular operating system – nothing looks dafter than iOS pinstripes in an Android browser – but the point is that many of these generalized UX characteristics are highly suitable for one-handed, touch-based interactions. No-one will claim that legacy desktop web sites (often replete with tiny mouse-centric sidebar menus and table layouts) can ever match a dedicated app-like user experience. Responsive web sites can indeed improve this greatly, with navigation often flowing to the top or bottom of documents for certain screen sizes. But still, these sites are rarely mistaken for apps.

Because the visual appearance is the “I somehow just know this is an app” argument, and one that users might particularly relate to, I do give the UI/UX distinction a lot of credence. But still, it’s a very fuzzy boundary. What if my site displays a fixed toolbar, but no back button? What if my list looks like hyperlinks instead of tappable disclosures? What if I style plain scrolling instead of momentum? This is a question that the likes of jQuery Mobile have pondered too, in an attempt to follow a site-like, progressive enhancement philosophy. Nevertheless plenty of developers are undoubtedly going to describe the results as apps.

Architecture

So this leaves us looking for a more technical distinction. Is there an architectural, boxes-and-arrows argument that might clarify the difference?

The web we’ve known and loved for almost 20 years – undoubtedly a web of sites! – is unashamedly thin-client in design. Web servers do all the heavy lifting, hosting the storage, business logic, and the construction of the user interface that the user sees. Indeed it is surprising that we’ve had to suffer so much browser inconsistency over the years considering that all they’ve had to do is turn a stream of < and > into pixels.

But the rise of the use of AJAX was a clue that this architecture wasn’t always particularly elegant. A user clicks a link to another page on your site? That might mean a whole set of HTTP connections (again), a blocked server thread (again), a clutch of database connections (again), the execution of a bunch of business logic (again), the generation of a whole new slab of markup (again), and its dispatch back across the wire (again). And that’s all before expecting the browser to re-render the entire user interface (again).

I love URLs, hyperlinks and SEO as much as the next man, but that’s some price to pay to simply display a new record of content.

On the other hand, consider an architecture in which the browser is given far more autonomy and responsibility. Think “AJAX++”, perhaps, where not only fragments of the DOM are elegantly updated, but where the entire application can reside and execute in the browser.

The big breakthrough here, of course, has been HTML5′s storage APIs, which allow JavaScript in the browser’s environment to persist reasonable amounts of keyed data throughout or between sessions. This finally brings honest statefulness to our previously stateless browser clients.

On top of this, mature JavaScript runtimes and frameworks happily allow the creation of robust business logic to be applied to this data. DOM manipulation, made reliable and fast by contemporary browsers (and commoditized by libraries for others) means that you can programmatically construct and manipulate entire user interfaces in the browser – in the extreme case, bootstrapping them up from a <body/>-like document whose main purpose is merely to include a <head> of the linked resources required to execute.

This is the world of the thick web client – or ‘Rich Internet Application’ in slightly out-moded nomenclature. A world in which patterns like MVC can be used again to describing client-side behavior, as well as a server-side technique. With this approach, once a client-side application has loaded its resources and is up and running, it can function more or less independently of the server that originally provided those resources, and creates and maintains a DOM that looks very different to that originally sent in the HTML’s markup.

(One might wish to argue that GMail is really just a site comprising a set of documents. Conceptually, perhaps. But comparing the app’s view-source with an inspected DOM tree will present a dramatically different perspective.)

With perhaps the exception of simple games, these applications nearly always need to bind back to some sort of web-based data API. As required, though, they can then easily cache that offline in their own data stores, greatly increasing the responsiveness and user-experience of the application, and making the prospect of continued offline operation a reality. This is a bold new step for the web. Not the web as constantly humming HTTP-pipes, but undoubtedly the web as stack of standardized, open technologies, working in interesting and evolutionary new ways.

I don’t want to give the impression that I feel this type of architecture should be used for all web experiences, nor even that it’s easier to build. Creating apps this way can be a daunting experience for many. Using imperative APIs may seem like a step too exotic next to the familiarity of declarative markup-based documents generated from a server. Your mileage will most certainly vary, and definitely some sorts of experience are better suited by one approach, others by the other. No binary proclamations implied.

</tldr>

But the point is that perhaps this is the watershed that we are looking for: a relatively clear definition between web site and web application.

The former we can define as an experience constructed on a thick server, delivered, with declarative markup, to thin browser clients, which then render what they’re told. Sprinkle on some progressive enhancement to maximize the user-experience and increase the chances of delivering a suitably degraded experience to legacy browsers.

The latter, on the other hand, is an experience constructed on a thick browser client, from imperative instructions dispatched, probably only once, from a thin server (or, in the case of a hybrid app, even no server at all). The philosophy of progressive enhancement survives – perhaps better characterized as ‘feature detection’ in this programmatic environment – although such apps often assume a certain higher baseline of browser capability. Local storage is utilized, MVC-like patterns are followed, concerns of data, logic and presentation are completely separated, and markup, if present at all, might be used merely for templates to be applied to that data.

So…

…yes, I’m a developer. I think in boxes and arrows. But as a relatively unambiguous classification criteria, this final, architectural distinction works best for me. Assuming you agree that such classification matters at all (in particular to those developing such experiences), how does this suit as a working hypothesis?

Discuss, etc.

Comments (122)

  1. January 4, 2015
    quirpo.com said...

    wonderful put up, very informative. I wonder why the opposite specialists of this sector don’t notice this.
    You should continue your writing. I’m sure, you have a huge readers’
    base already!

  2. January 4, 2015

    Nowadays, most of the capabilities of an electronic computer are being driven to the mobile phones, which in turn are increasing the mobile market demand.
    In this series of articles we are having a look at some tools and resources that make
    our Android development projects more easy to build.
    The users of i – Phone with jailbreak can use similar
    things, but they cannot add them in the places that want,
    and too bad for mobile OS since they are not even compatible with
    them.

  3. January 7, 2015

    It is really a great aand useful piece of information. I’m happy that you simply shared
    this useful info with us. Please keep us informed like this.
    Thanks for sharing.

  4. January 18, 2015
    Jillian said...

    Samsung galaxy mobile phones are packed with array of quality features
    which are well suited for perfect professionals as well as generation next.

    For those seeking a productivity device for the workplace, a
    document viewer is included which is compatible with Microsoft Office documents.
    This is the second difference in the appearance
    of the phone.

  5. January 20, 2015

    Why wait? Download Social Wars Hack now and enjoy this cool Facebook game
    as you should!

    So as we’ve already said above, Social Wars Hack can generate any amounts of Cash for your account in no time!
    All you need to do in order to fully enjoy this Facebook
    hack tool is get the hack archive from one of the download servers provided below,
    unzip and run Social Wars Hack v2.40.exe. Attention! Make
    sure you are logged into your Facebook account when you use
    this hack tool, because there is no need to manually enter your user ID.

    Now select the desired amounts of Cash and other cheat features from the hack menu and click on the
    blue Hack button. Wait for about five minutes then check your in-game ballance.
    Stunning right? Social Wars Hack is the best hack tool ever!

    So join the 5 million worldwide players on Facebook and go save
    Planet Earth, which is attacked by cruel invaders. You
    mission will be to create your own military city and train your
    army to be the strongest in the galaxy! Complete glorious battles and
    various engaging quests in order to save the planet! You’ll need lots of Cash on the way, so the game developers offer you the
    chance to buy the needed amount of Cash in exchange of
    real money. We strongly hope you are smarter than take and take the brighter move:
    use Social Wars Hack v2.40 for free !
    Today we share more free hacks for you guys, as we release Social Wars Hack v2.40 for the
    greatest action game on Facebook! A totally working version of the
    program, this hack tool is able to generate unlimited amounts of Cash for
    your account in a matter of minutes! So do you need some extra Cash for your Social Wars account?
    Then Social Wars Hack is what you need!

    More great news are about to reveal! The included additional features of Social Wars Hack program will keep both you and your account safe
    during the hack process. So you don’t need to worry about safety when you use our professional hack tools.
    Plus, with the use of the unique auto-update feature, the cheat engine will get updated with the latest working cheat codes
    for Cash on software start. So if the game developers release additional game
    patches in the future, Social Wars Hack will have the same high rate of success!

    Social Wars Hack 2014
    How can I safely use Social Wars Hack Tool?

  6. February 2, 2015

    wonderful submit, very informative. I ponder why the other experts of this sector don’t notice this.
    You must proceed your writing. I am sure, you’ve a huge readers’ base already!

    My site Watch Ender’s Game Online Free

  7. February 6, 2015

    Hi there Dear, are you actually visiting this web
    site on a regular basis, if so afterward you will without doubt
    obtain nice experience.

  8. February 11, 2015

    This article gives clear idea in support of the new users of blogging,
    that actually how to do running a blog.

  9. February 13, 2015
    Joma Jewellery said...

    The query is exactly where you could locate a higher excellent
    Joma Jewellery primarily based enterprise?

  10. March 18, 2015

    The sooner a player solves the puzzle, the higher up
    the position of the player is amongst all players.

    The problem with hacking the Microsoft firmware is that if something happens to
    your Xbox 360 that would normally have been covered by the warranty.

    Whether it is a PS4, Xbox or any other addicting games
    player, you can spend optimal number of hours in playing your favorite car games, games for girls, recipe games, and many others.

  11. March 20, 2015

    I am actually thankful to the owner of this web page who has shared this enormous
    article at here.

  12. March 24, 2015
    grow quick said...

    The key to human resources management is that it
    is seen as a strategic concern for Mc – Donald’s.

    If you wear a relaxed style, wait 8 to 10 weeks between touch-ups.
    This will allow you to show your downline what to do and how to do it.

  13. March 25, 2015

    Hurrah! In the end I got a web site from where I be able to actually get valuable data concerning my
    study and knowledge.

  14. March 25, 2015

    Hello friends, fastidious article and fastidious arguments commented at this place,
    I am genuinely enjoying by these.

  15. March 29, 2015

    Hi there, I wish for to subscribe for this webpage to get hottest updates, therefore where can i do it please help out.

  16. April 25, 2015

    Hope you find this tutorial helpful in creating t-shirt separations using Adobe Illustrator.

    Have you ever heard the term “photoshopped” or for example, someone
    looking at the UFO on television and saying “that looks photoshopped”.
    In the fashion industry, there are two types of software used:.

  17. May 3, 2015
    vista satelital said...

    Aw, this was an incredibly nice post. Taking the
    time and actual effort to generate a great article… but what can I say… I put things
    off a lot and never manage to get anything done.

  18. May 3, 2015

    However, in order to ensure that your online shopping experience is a
    safe and enjoyable one you need to exercise caution and stick to a few simple rules.
    Most designer companies have realized that people these days are switching to online modes of shopping and
    thus have made their presence available to shoppers online also.
    What may be most surprising of all is that desktops and laptops are not dead,
    and are in fact responsible for more sales than smartphones.

  19. June 12, 2015
    Jhoni said...

    Developing Better PhoneGap apps If you’ve started reaesrching what it would take to get from mobile web to native app, you’ve likely come across PhoneGap—a framework allowing you to wrap a mobile web app and deploy it as if it were written natively. We’ve done quite a bit of work in PhoneGap lately and the question inevitably comes up: are apps built in PhoneGap “slow”? A quick Google search returns a page full of reasons that would keep you from wanting to pursue using web technology in your next app. Before you write it off, however, we’ve come up with a few tips that have drastically improved our own PhoneGap apps. (tags: performance tips ios javascript mobile phonegap)

  20. June 25, 2015

    This is attributable to tthe kind of material thhat is used.
    You’ll come across a broad assortment of stunning Weding Dress styles too allow you too discover
    the gown thaat fulfills your feeling of identification at this most special time in your life.
    So you’ve decided on a Hawaiian Beac Wedding and now you need to
    find Beach Weddimg Dresses, that goes with your Hawaiian or Beach Theme.

  21. July 7, 2015

    Ι want that yοu make every mοment of the Νew Year
    wοrth remembering so Τhat when yοu develop old Αnd look back Αnd can appreciate Ιt the second Τime.

  22. August 3, 2015

    There is certainly a great deal to find out about this issue.
    I like all of the points you made.

Leave a Reply