Tag Archives: online-offline

Designing for limited connectivity

6 Apr

This is long-due post on designing web tools for  “limited connectivity” contexts, a challenge I’ve addressed in several projects at Reflab, and that can better described as a “compilation” of requirements and constraints.

My goal here is to draw attention to the topic and summarize what it means to access a web tool from the “fields”: emergency situation, remote or just under-served areas of the world, where humanitarian relief takes place. There is nothing really new, but it is worth having very clear when developing products that require an Internet connection, either  for PCs or mobile devices (and there are many, you know…).

I’d rather not talk (and rant) about how data could be managed and information organized, I want just to make an overview of the technical challenges and solutions to making better web tools.

Limited connectivity

Connectivity is just a promise still for many on our planet: in large urban settings, and places like the north of Europe it is even difficult to imagine but in a crisis, in an emergency, in rural contexts, in remote areas of developing countries the best you can get is: limited connectivity.

TelecomMap maps 3G Networks, Network Quality and Wi-Fi hotspots in Indian cities (powered by Ushahidi)

Imagine you’re on a train (in Italy, this time, and if you are not familiar with Italian trains, good for you): you need to access a website or use an online application, they promised you 3G or better, but in fact you get a lot less. You pick up your mobile, type the web address and your spinner spins, but nothing appear on your browser, finally you get some elements of the page but, no luck, a series of tunnels starts. Patiently you wait, retrying from time to time, your page loads then stops, then reload, Finally the train is now past the tunnels in the nice countryside: you try again, the page loads… slowly, and finally you have it. You click on the link you were looking for, it works! Now back to the previous page and oops! connection is gone again.

As Imna Gonzales (Organizations and Systems Responsible at MSF Spain), puts it:

“Vendors design their products from a very well connected office in some large US/European city, and their regularly fail to understand how much things can be different in the areas we operate”.

This is limited connectivity: you have some bandwidth, you have bad to awful latency (don’t even think playing online games), and connection goes up and down more or less frequently and, in many places, you do not have any connection at all. Depending on location and time you get a mix of all of the above (in office good connectivity, in cybercafé some connectivity, here a 3G, here SMS only, here nothing!). Unstable. Note also that I’m simplifying a lot by focusing only on web and mobile (smartphones) and assuming the (limited) connectivity is relatively cheap).

Now imagine that the software you are building has to be used in those conditions by people with a very limited time, in a hurry, in an emergency, people how are working to save lives. If you build and maintain a product that has to operate in those conditions here are a few things you should always consider in the design, monitor and continue to improve:

Hints for designers and developers

Here are a few hints, starting points in fact, for designers and developers; good results can be achieved by just setting the bar higher on some common requirement: for example a slower than average site is less likely to be used, but in these contexts it will not be *possible* to use it. And keep monitoring, and keep caring.

Page weight

A classic. The first thing you hear about and usually followed by the request to have a huge banner, logo or video in the homepage. Lighter pages require great UI design, clean code and optimizations, and those don’t just come fore free, unfortunately.
A recent article on The Guardian by John Naughton, “Graphic designers are ruining the web” shows the awful trend of webpage obesity.
It is quite interesting to see how much data (before cache) we are downloading every time we open a web page: the home page of the CNN today have 948.22KB transferred, YouTube home page 1.4Mb, etc.

Speed and performances

Just after page weight, and event more important, comes the speed and performances. While having well responding, fast systems is a general principle for usable software in the case of limited connectivity they can really make the difference. There are two sides of it:

Server side

Speed and performances are far too complex to discuss here, let’s just note that worst-than-average performances will sum up with page weight and client side performances to make it really impossible for some people to use the system in limited connectivity conditions.

Client side

Most will focus their attention to the server, but it’s important to keep in mind that users might be browsing from old browsers and old hardware. I’ve never been a big supporter of old-browsers compatibility (especially IE), but a good product will try to avoid long rendering time and heavy Javascript.

Cache

A good old way of speeding up things is caching: server cache, browser cache and “supercache” (see HTML5 Application Cache). Even for small projects a good use of the browser cache, maybe even of the new application cache can bring very significant improvements reducing transferred data from hundreds of Kb to a less than  a hundred Bytes. Server caching is not always good for every project, in my experience and, as my friend Federico (system administrator) keeps reminding me:

“There are only two hard things in Computer Science: cache invalidation and naming things” – Tim Bray

Asynchronous calls

Particular handy to manage long list of documents and the huge banner in homepage, it is a very useful technique the UI designer should keep it mind: user will be able to immediately access new pieces of information or features, only downloading the necessary Bytes. For a simple example see the logcluster.org preview of documents.

Binary files management

Ok, this is getting even more technical, let me just mention file compression and a good management of the synchronization, if any.

Offline

If you know what I’ve been working on in the past months you know I have to talk about offline web: the most complete support to limited connectivity would include it, but note that having offline support does not mean all of the above can be skipped! Offline support means the site/application can work online and offline, if needed it updates (sync), and updating is “sensible” i.e. just update things that have changed, use compression for files, etc. See my post on HTML5 offline support.
Two examples: the Ushahidi mobile web application and OOPS (Online Offline Publication System). The year looks promising, the standards are being finalized, will browsers follow?

Final considerations

Products made to be used in emergencies, crisis, humanitarian operations, remote, unserved areas, etc. require a lot more than just tackling limited connectivity, of course, and several of the points above are true for every good software product in general. Important improvements can be also made by designing different information flows, data formats, interfaces, etc. The main point? whatever is your product, please care about limited connectivity and keep evaluating, monitoring and improving!

One particular reason HTML5 matters

21 Jan

I’ve always been a loyal fan of standards and openness, but there is one particular reason HTML5 matters  to me: it promises to be extremely valuable for the development of powerful ICT4Dev tools.

It is true in general that HTML5 is there to move forward the extent and widespread of web (someone would say “cloud”), but why such a technical thing as web standard is meaningful for software aimed to serve international development and human rights?

The Web have already begun to have a mayor impact on development and crisis response, I will not dare trying to discuss that in a blog post, but for those not familiar with these issues, here are three projects you absolutely have to look at:

Ushahidi – a platform that allows collecting incidents reports by everyone in an emergency or crisis, and mapping the reports visually on maps to allow quick analysis and faster response. It has been successfully used in very large scale emergencies including Haiti. (http://www.ushahidi.com)

Kiva – a website that “connects people, through lending”; a wonderful story on how the web can be used to develop microcredit, and at the same time connect people from different countries or conditions. With minimal investments in technology or marketing, Kiva has  facilitated so far more than 150 millions in loans (http://www.kiva.org).

Refugees United -a website and mobile application aimed to directly help refugees reconnect with missing loved ones. A rather simple idea, not easy to implement, but with the potential of having a mayor role in rebuilding refugees families worldwide (http://www.refunite.org)

Those are only some of the most visible initiatives and organizations that are bringing an incredible change in this world, not to speak of the impact that the “social web” is bringing to international development (and btw: I love Twitter).

Indeed the developing world has some extra needs in terms of technology: here is three elements that we should always consider. Reuse: the developing world benefits a lot from open source and technologies that can be freely reused. Mobile: mobile technology is key in the innovation in many countries. Connectivity: internet access, through a PC or mobile phone can be limited, in bandwidth, depending on the location, and variable in time.

Reminder: what is HTML5 about?

the html5 logo

HTML5 is the umbrella name  for the “Next Open Web Platform“. The HTML5 brand includes the new upcoming standard for HTML itself, but also CSS3, Web Storage, SVG1.1, Geolocation, Web Sockets, Web Workers and many more standards; the aim of these new standards altogether is to enhance the web language (HTML), integrate second generation languages (SVG, Video, etc.) and making the web a lot more “reactive” (more about HTML5: http://www.w3.org/html/)

HTML5 promises to allow simple development of rich web applications: dynamic forms, video embedding, geolocation, offline, and much more; even video games can be developed in HTML5.  Some of the most astounding HTML5 apps so far have been collected in the HTML5ADVENT  URE CALENDAR2010 (check it out, if you haven’t already!).

Why HTML5 matters for ICT4Dev?

While working with HTML5 and studying it, it became more and more evident to me how the characteristics of the new platform are very relevant for the context of the developing countries. The new standards:

Allow the development of new generation cross-platform applications

A new generation of applications can flourish and they can be cross-platform, thus running freely on the most different devices, independently from the manufacturer and on low-cost hardware. Adaptation and maintenance costs reduced.

Allow the development of mobile applications

While projects show how, in both rural areas and in emergency relief that texting/SMS can be very powerful (see FrontlineSMS for example), the battle for mobile applications started. On one side the native applications for iPhone, iPad, Android, RIM, etc. on the other side the efforts of W3C and others to bring web development to mobile devices (see Mobile Web For Social Development (MW4D) and Open Mobile Consortuim).  HTML5 has the most challenging role: the faster and better it develops on mobile browsers the highest the possibilities for developers to adopt it.

Allows reusing the incredible number of open source products, libraries and web frameworks

HTML5 could be used to enhance and reuse the incredible variety and abundance of good open source products and libraries; there is an incredible potential in the combination of web, open source, and mobile in ICT4Dev. Again, the most successful HTML5 and web-based development the more the possibilities of this ecosystem.

Allows to deal with the conditions of limited or unstable connectivity

person with mobile phone in Africa

Image (c) textually.org

The single feature of HTML5 I’m more enthusiastic about is the offine and storage or, as the W3C puts it: “HTML5 apps can start faster, and work even if there is no internet connection (thanks to the App Cache, Local Storage, Indexed DB, and the File APIs.)“. Offline and storage will allow the deployment a new breed of web applications, that simply could not exist, because of the need of an active internet connection. We can think of countless great web applications that would be improved to be used in places where connectivity is limited, bandwidth an issue and hardware resources scarce.  We can think also of collaborative tools can run also offline, on any device and without any installation, and repositories of knowledge that can be easily carried in a USB key or external hard-disk, or almost-real-time (TM) gathering of information from different devices, geotagged, and still working when connectivity is not stable.

And it’s an open standard!

That too counts: open and not controlled by any single organization means a lot more freedom of action, competition, and better allows the development of solutions outside the interests of big market players. HTML5 is a vital part of that trend for openness: open source, open standards, open data and open protocols, that is acclaimed by all and threatened by many, at the same time.

The project I’m working on

More than a year ago I started working on an apparently very complex project whose user requirements were: we need a tool that is easily managed by non technical staff, works online and offline, is cross-platform, optimized for different devices, including mobile, is lightweight in data storage and in data replication, and open source, or at lest no licence-based. So far so good… but it also should run from a USB key or other portable device and no installation should be required. Commenting and feedback would be a nice to have (I’m glad there was at least a nice-to-have ).

hey, wait, this is either impossible or insane!

After long mumbling and head-scratching it is my colleague Riccardo that came out with a possible solution based on a web application using some open source libraries already available! That would meet all the requirements above in the simplest possible way, but for the online-offline, not mobile support. HTML5 was not at all ready at that time, but we aimed to invest in a solution that would be viable in the long run, so we developed the first version using Gears (was Google Gears), with the idea of bringing the project on HTML5 later.

The project, which is called OOPS: Online Offline Publication System, is just getting its HTML5 upgrade, and will run without any installation on several platforms, including some mobile devices, online and offline. The OOPS is itself a collection of libraries put together and it is released as open source (http://code.google.com/p/online-offline-ps).

Next?

I feel as with OOPS we had only scratched the surface of the many possibilities that this new standards are giving us to develop better web applications aiming to address, by completely new means, very old, dramatic problems.