Published on 04.09.13 in Vol 1, No 2 (2013): Jul-Dec
Development of a Smartphone App for a Genetics Website: The Amyotrophic Lateral Sclerosis Online Genetics Database (ALSoD)
Background: The ALS Online Genetics Database (ALSoD) website holds mutation, geographical, and phenotype data on genes implicated in amyotrophic lateral sclerosis (ALS) and links to bioinformatics resources, publications, and tools for analysis. On average, there are 300 unique visits per day, suggesting a high demand from the research community. To enable wider access, we developed a mobile-friendly version of the website and a smartphone app.
Objective: We sought to compare data traffic before and after implementation of a mobile version of the website to assess utility.
Methods: We identified the most frequently viewed pages using Google Analytics and our in-house analytic monitoring. For these, we optimized the content layout of the screen, reduced image sizes, and summarized available information. We used the Microsoft .NET framework mobile detection property (HttpRequest.IsMobileDevice in the Request.Browser object in conjunction with HttpRequest.UserAgent), which returns a true value if the browser is a recognized mobile device. For app development, we used the Eclipse integrated development environment with Android plug-ins. We wrapped the mobile website version with the WebView object in Android. Simulators were downloaded to test and debug the applications.
Results: The website automatically detects access from a mobile phone and redirects pages to fit the smaller screen. Because the amount of data stored on ALSoD is very large, the available information for display using smartphone access is deliberately restricted to improve usability.
Visits to the website increased from 2231 to 2820, yielding a 26% increase from the pre-mobile to post-mobile period and an increase from 103 to 340 visits (230%) using mobile devices (including tablets). The smartphone app is currently available on BlackBerry and Android devices and will be available shortly on iOS as well.
Conclusions: Further development of the ALSoD website has allowed access through smartphones and tablets, either through the website or directly through a mobile app, making genetic data stored on the database readily accessible to researchers and patients across multiple devices.
JMIR Mhealth Uhealth 2013;1(2):e18)
- amyotrophic lateral sclerosis;
- frontotemporal dementia;
- mobile website;
Amyotrophic lateral sclerosis (ALS) is a neurodegenerative disease of motor neurons resulting in progressive weakness of voluntary muscles. Death usually follows 2-5 years after the first symptoms appear, due to respiratory failure . The causes of ALS are largely unknown, but a genetic component is present even in those without a family history of the disease. The gene variants contributing to risk have been identified in about 15% of the affected population, and the proportion is increasing rapidly. The ALS Online Genetics Database (ALSoD) [ ] is a freely available database funded by major ALS charities (the ALS Association, the Motor Neurone Disease Association, ALS Canada, and MNDA Iceland) and sponsored by the European Network for the Cure of ALS and the World Federation of Neurology. It is aimed at researchers and clinicians and is designed for collation and bioinformatics analysis of ALS gene and phenotypic information. It typically receives about 300 unique visits a day [ , ].
Like most websites, ALSoD was initially built to display information to users of desktops and laptops, and the pages are configured to suit the height and width of those screens. With changes in browsing habits, website access is now often through a small portable device like a smartphone or tablet computer. It is therefore essential to ensure data will display correctly on a small device [, ]. Mobile device data traffic has overtaken desktop traffic in the last decade, and data traffic on mobile devices for browsing alone has risen more than four times in 2008 [ ]. According to NetMarketShare, the introduction of the Apple mobile device operating system, iOS, for the Apple iPad and iPhone for mobile browsing between March and October 2010 doubled Internet traffic [ ], leading to a projection that, by 2014, mobile Internet usage will overtake desktop Internet usage [ ]. Although the target community for ALSoD is mainly university or hospital-based users where desktop and laptop computers are common, such users are increasingly likely to use a portable device for use in clinic settings, conferences, or the laboratory, where fast access away from an office may be needed. Thus, it is essential that the ALSoD website is accessible not just from a desktop or laptop computer, but also from portable devices.
Mobile phone displays have greatly improved from the early monochrome screens for sending SMS messages to colorful graphical touch screens for mobile browsing . Issues of low bandwidth and low resolution screens have been resolved, and smartphones and tablets should be regarded as “mobile computers” [ - ]. It therefore makes sense to write webpages specifically for portable devices. Mobile webpage content is similar to desktop webpage content and uses HTML connected and accessible over the Internet, even though mobile websites are typically accessed through Wi-Fi, 3G, or 4G networks [ ]. Furthermore, portable devices are able to use applications (apps) specific to a website for access, rather than a generic browser, with the advantage of offline access to some information. Apps are generally platform-specific and downloaded from company portals, for example, BlackBerry App World, Apple App Store, and Google Play [ ]. Thus, as well as writing ALSoD webpages specific for mobile devices, we also aimed to design a platform-specific app to enable some offline content and improve the user experience.
Optimization of Webpages
Our first focus was on the development of a mobile Web-based platform because we wanted the content to work across all mobile platforms . Identification of the most viewed information was carried out using in-house analytic data coupled with the Google Analytics service configured for the ALSoD website. The Google Analytics tool was configured in August 2012. We based our data analysis on the 3 subsequent months (August, September, and October). These represent the period from when the Google Analytics tool was implemented to the point where we started the development of the mobile website and will be referred to as the pre-mobile website period. The 3-month period from November 2012 to January 2013 with the mobile website fully developed and the app implemented will be referred to as the post-mobile website period. In the pre-mobile website period, page views (the total number of pages viewed) were analyzed to discover the commonly visited pages on the website, including repeated views of a single page.
Designing a mobile website that works on several platforms does not mean shrinking a complete webpage into a mini-sized webpage; the aim is to eliminate very small type, scrolling left or right, and typing, and to achieve the outcome required with a single click [, ]. We therefore created a separate style sheet, retained some original images, reduced the size of images by a fixed percentage, configured the content layout of the screen to wrap text, and summarized the information on the desktop version to fit a smaller screen.
Mobile Device Detection
To detect if the request comes from a mobile device, the .NET Framework provides the “isMobileDevice” property, which returns a true value if the browser is a recognized mobile device. This does not always work because some mobile device browsers disguise themselves as desktop browsers . We therefore use “UserAgent” strings sent by the mobile device browser to the server in conjunction with the “isMobileDevice”, as described in and with an overview in .
Text messages and BlackBerry Messenger messages were sent to a selection of individuals known to the authors, asking them to view the ALSoD Web address on their phones and tablets. After the app was developed, additional users were asked to download the app via Google Play. Since ALSoD has a Facebook  account, a Facebook “Recommend” Button was embedded on the mobile master page. All users were asked to click on the Facebook Recommend button so as to have an estimate of the number of users who were satisfied with the outcome of the display on their phone, as seen in .
The most commonly used smartphone platforms are iOS, BlackBerry, Android, and Windows Mobile. We used Eclipse software as the integrated development environment (IDE), with the Android software development kit (SDK), Android development tools (ADT) plugin, BlackBerry plugin, and the latest SDK tools and platforms, downloaded using the SDK Manager [- ].
From Eclipse, the application was compiled producing an .apk file (Android application package file format). This file was submitted to a registered Google Play account with a generated keystore containing a private key . The ALSoD app can be downloaded from Google Play and currently, our Google app account confirms that the ALSoD app has had more than 100 downloads. The app then displays the website (designed using the Microsoft ASP.NET framework) with no status bar or URL navigation on the screen.
A marquee function scrolling text from right to left was inserted on the desktop master page to create an alert for regular users of the website, as seen in. At symposiums and seminars, researchers were exposed to the recent development of the mobile app, which has contributed to increased Web traffic to ALSoD.
Feedback From App Users
During the various presentations of the mobile app development through posters and seminars, practical assessment of the website on mobile phones was carried out by attendants. Responses, questions asked, concerns raised, and critical analysis given by the audience were recorded and considered.
Analysis of Visits
The Google Analytics account for ALSoD was created in August 2012 to compare results generated by the two tools (mobile website and app) and to gain insight into the changes of the design and content of the website . Visits were compared for the period before mobile website development, from August 2012 to October 2012, with the period after, from November 2012 to January 2013.
Optimization of Webpages
In the 6-month data analysis period from August 2012 to January 2013, there were 5051 visits to the website, of which 2698 were unique (53%). There were 19,785 page views, of which 8883 (45%) were to 4 sets of pages. These pages focused on the pathogenicity of mutations, gene information, data analysis of mutations, and patient data.
Pages were optimized for mobile browsing by reducing image size to 5% of the original size, creating a mobile master page different from the desktop master page, and creating a link page to allow users to switch seamlessly between the mobile and desktop views.
Mobile Device Detection
If the UserAgent string contained keywords suggesting a mobile platform, for example, BlackBerry, Palm, mobile, iPhone, or iPad, then the user’s device was redirected to the mobile site  displaying the compact version ( ) of the website instead of the full version ( ) [ ].
To test this, we sent the mobile site URL to mobile phones of 14 users (colleagues and friends from whom we could easily obtain verbal feedback): 3 on the Android platform, 1 on the Windows Phone, 5 on BlackBerry OS, and 5 on iOS (2 iPhone and 3 iPad). All users gave positive feedback except for the Windows Phone user who could not utilize the pages with dropdown boxes.
Following successful implementation of the mobile website, we began app development. One straightforward method to achieve this is to automatically convert an already-built mobile website into a native app. This is done through the “WebView” object, which is an in-app Web browser used to display a website as if viewed on the browser of an Android smartphone . For testing, we downloaded and used Android simulators. The plugins allow programmers to develop, test, and debug a Java application using the Eclipse IDE, but it requires a high level of programming skill [ ]. We also tested and manipulated the .apk file on a real Android phone before submitting to Google Play.
Following the development of the mobile version, on the ALSoD Facebook page, 34 users recommended the website by May 29, 2013, using the Facebook “Recommend” button embedded on the website. Current tabular data are available on the website , displaying the growth of visits to the genetic database, as seen graphically in .
Feedback From App Users
After the creation, testing, and publicity of the app, we received feedback from users about: caching for offline viewing [- ], which would enable users to continue work; having a “page loading” icon when connecting; making users aware of the cookies policy; using an option menu button [ ] to display analysis webpages (interaction.aspx, credibility.aspx, analysis.aspx); and creating a link to allow users to switch from mobile view to desktop view, as this would be useful on tablets like the iPad. We were able to implement all changes except for the offline viewing, which is difficult to implement because the database is large and held online.
Analysis of Visits
Our Google Analytics account showed that visits to the website increased from 2231 to 2820, yielding a 26% increase from pre-mobile period to post-mobile period and a 230% increase on the use of mobile devices (including tablets) to access the ALSoD website. On average, there were 300 unique visitors a day suggesting a high demand from the research community. A total of 1595 unique visitors in the post-mobile era accessed 11,376 page views on the website as opposed to 1220 unique visitors in the pre-mobile period (an increase of 31%), showing the relevance of a mobile-friendly website. Five mobile operating systems (Android, iOS, BlackBerry, Windows Phone, Symbian) were detected to have accessed the website within 6 months. Although BlackBerry OS visits declined from 34 to 14 visits (58%), iOS for iPhones and iPads increased from 40 to 105 visits (162%), and visits by Android devices increased from 29 to 213 visits (634%) (see). The Google search engine was the most used to search for the website (see ). The likely explanation for the great increase in the use of Android devices is the development and introduction of the Android app submitted to Google Play.
ALSoD was developed as a disease-specific database for ALS, focused on genetics and phenotype, with planned incorporation of environmental and other risk factors in the future. We have shown that development of the website to facilitate smartphone access has greatly increased access.
In broad terms, there are two strategies for development of an app like this. Either the app can be developed as stand-alone software or it can be developed as a means to access an existing mobile website. We chose access to a mobile website for several reasons. First, we used this approach because mobile websites are immediately accessible to users through a browser, more compatible across devices, have easier content updates, are faster to find on search engines, make it easier to share content via a link, have a longer lifecycle on a user’s device, are easily convertible to an app, and are more cost-effective [, ]. Second, the database is regularly updated with data, which would require the release of weekly updates to an app if the website was not the primary content holder. Third, although third-party automated app development tools exist [ , ], it was simple for us to convert the mobile website into an Android app using the WebView object.
A limitation to this approach is that the website recognizes a mobile device based on the information held in the list in the UserAgents string. Although software exists to automatically update the list, there is a financial cost involved and we have therefore chosen to update the list manually. Furthermore, UserAgents strings are limited in the kind of information sent to the server. Specific information such as the size of the screen, the manufacturer, the format of image supported, and the model of phone are not sent. This is an issue because some mobile devices allow portrait and landscape views when repositioned while others have unique width and height dimensions. It is therefore difficult to have a perfect display on all devices.
There are 3 main methods by which users access the website (). Roughly 39% of the traffic is organic from the Google search engine, 37% is direct by typing the ALSoD URL directly on a browser, and the rest are referrals through external sites collaborating with ALSoD.
More than 100 interactive, downloadable widgets and mobile applications have been submitted to the NHS Choices Health Apps library . Some of these apps are commercial apps and the freely available ones range from calculating alcohol consumption to weight tracking. There are no specific genetics disease apps that concentrate on combining genotype, phenotype, and geographical information with associated analysis tools, although ALS database apps do exist. For example, the PatientsLikeMe app was initially developed to help United Kingdom-based ALS patients find clinical trials that are right for them and organizations find patients right for their trials [ , ]. The ALSoD app has direct relevance to clinicians working in ALS and therefore relevance to the NHS Choices Health Apps library. It includes a comparison tool to evaluate information for different genes side by side or jointly with user configurable features, a pathogenicity prediction tool using a combination of computational approaches to distinguish variants with nonfunctional characteristics from disease-associated mutations with more dangerous consequences, and a credibility tool to enable ALS clinicians and researchers to objectively assess the evidence for gene-causation in ALS. A checklist, as seen in , was used to report the web-based intervention of users [ ]. Furthermore, integration of external tools, systems for feedback, annotation by users, and two-way links to collaborators hosting complementary databases further enhance the functionality.
Development of the mobile website and associated app has increased access to this disease-specific database and facilitated access through a wide range of devices. Visitor analysis has shown the importance of collaborating with other relevant databases through hyperlinks. Our future work will concentrate on further integration with other databases, adding in nongenetic risk factors, and increasing access and relevance for related research disciplines.
We are especially grateful for the long-standing and continued funding of this project from the ALS Association and the MND Association of Great Britain and Northern Ireland. We also thank ALS Canada, MNDA Iceland, and the ALS Therapy Alliance for support. The research leading to these results has received funding from the European Community’s Health Seventh Framework Programme FP7/2007-2013, under grant agreement number 259867. We thank the NIHR specialist Biomedical Research Centre for Mental Health and the Biomedical Research Unit for Dementia at the South London and Maudsley NHS Foundation Trust (SLaM) and the Institute of Psychiatry, King’s College London. Aleks Radunovic, Nigel Leigh, and Ian Gowrie originally conceived ALSoD. ALSoD is a joint project of the World Federation of Neurology (WFN) and European Network for the Cure of ALS (ENCALS).
Conflicts of Interest
Conflicts of Interest: None declared.
Multimedia Appendix 1
Script for redirecting views.PDF File (Adobe PDF File), 20KB
Multimedia Appendix 2
CONSORT-EHEALTH checklist V1.6.2 .PDF File (Adobe PDF File), 982KB
- Al-Chalabi A, Jones A, Troakes C, King A, Al-Sarraj S, van den Berg LH. The genetics and neuropathology of amyotrophic lateral sclerosis. Acta Neuropathol 2012 Sep;124(3):339-352. [CrossRef] [Medline]
- ALSoD Website. URL: http://alsod.iop.kcl.ac.uk/ [accessed 2013-07-26] [WebCite Cache]
- Abel O, Powell JF, Andersen PM, Al-Chalabi A. ALSoD: A user-friendly online bioinformatics tool for amyotrophic lateral sclerosis genetics. Hum Mutat 2012 Sep;33(9):1345-1351. [CrossRef] [Medline]
- Lill CM, Abel O, Bertram L, Al-Chalabi A. Keeping up with genetic discoveries in amyotrophic lateral sclerosis: the ALSoD and ALSGene databases. Amyotroph Lateral Scler 2011 Jul;12(4):238-249. [CrossRef] [Medline]
- Bickmore TW, Schilit BN. Digestor: device-independent access to the World Wide Web. Computer Networks and ISDN Systems 1997 Sep;29(8-13):1075-1082. [CrossRef]
- Cutshall T, Blake L, Bandy S. Creating a Mobile Library Website. 2011. URL: http://gru.openrepository.com/gru/bitstream/10675.2/431/3/65258930.pdf [accessed 2013-05-01] [WebCite Cache]
- Gube J. Mashable Business. 2010. 8 Tools For Easily Creating a Mobile Version of Your Website URL: http://mashable.com/2010/12/16/create-mobile-site-tools/ [accessed 2013-05-01] [WebCite Cache]
- Bosomworth D. Smart Insights. 2012. Mobile Marketing Statistics 2012 URL: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ [accessed 2013-05-01] [WebCite Cache]
- Maurer ME, Hausen D, De Luca A, Hussmann H, editors. Mobile or desktop websites?: website usage on multitouch devices. ACM 2010. [CrossRef]
- Agar J. Constant Touch: A Global History of the Mobile Phone. Cambridge: Icon Books; 2004.
- Iglesias E, Meesangnil W. Mobile website development: From site to app. Bul Am Soc Info Sci Tech 2011 Dec 01;38(1):18-23. [CrossRef]
- Imielinski T, Korth H. Introduction to mobile computing. Mobile Computing 1996:1-43. [CrossRef]
- Lemaire ED, Boudrias Y, Greene G. Low-bandwidth, Internet-based videoconferencing for physical rehabilitation consultations. Journal of Telemedicine and Telecare 2001 Apr 01;7(2):82-89. [CrossRef]
- Summerfield J. Mobile Website vs Mobile App (Application): Which is Best for Your Organization?.: HumanServiceSolutions; 2012. URL: http://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/ [accessed 2013-05-01] [WebCite Cache]
- Flow A. How to Make a Mobile Website - 6 Easy Tips. 2010. URL: http://blog.templatemonster.com/2010/05/11/how-make-mobile-website-6-easy-tips/ [accessed 2013-05-01] [WebCite Cache]
- Georgiou N. ASP.NET IsMobileDevice and how it works. 2011 Mar 12. URL: http://stackoverflow.com/questions/1829089/how-does-ismobiledevice-work [accessed 2013-05-01] [WebCite Cache]
- Ellison NB, Steinfield C, Lampe C. The benefits of Facebook "friends": Social capital and college students' use of online social network sites. Journal of Computer-Mediated Communication 2007;12(4):1143-1168. [CrossRef]
- Android Developers. Building Your First App. 2012. URL: http://developer.android.com/training/basics/firstapp/creating-project.html [accessed 2013-05-01] [WebCite Cache]
- Android Developers. Web Apps. 2012. URL: http://developer.android.com/guide/webapps/webview.html [accessed 2013-05-01] [WebCite Cache]
- Heuwieser FM. BlackberryCool. 2009. How to write your first BlackBerry application – Lesson 1: UI fields URL: http://www.blackberrycool.com/2009/06/05/how-to-write-your-first-blackberry-application-lesson-1-ui-fields/ [accessed 2012-10-01] [WebCite Cache]
- Genuitec. Genuitec Product and Eclipse Package Downloads. 2012. URL: http://www.genuitec.com/all_eclipse.html [accessed 2013-05-01] [WebCite Cache]
- Blackberry Developer. BlackBerry Java 7.1 SDK. 2012. URL: https://developer.blackberry.com/java/download/ [accessed 2013-05-01] [WebCite Cache]
- Google App Engine.: Developers G; 2012. URL: https://developers.google.com/appengine/docs/whatisgoogleappengine [accessed 2013-05-01] [WebCite Cache]
- Plaza B. Google Analytics for measuring website performance. Tourism Management 2011;32(3):477-481.
- ALSoD Mobile Site. URL: http://alsod.iop.kcl.ac.uk/Mobile/index.aspx [accessed 2013-07-26] [WebCite Cache]
- Greenfield M. CNET UK. 2012. How to develop Android apps URL: http://reviews.cnet.co.uk/mobile-apps/how-to-develop-android-apps-50008626/ [accessed 2013-07-26] [WebCite Cache]
- ALSoD Visitor Statistics. URL: http://alsod.iop.kcl.ac.uk/charts/index.aspx [WebCite Cache]
- Hickson I. World Wide Web Consortium, Working Draft WD-html5-20120329. 2012. A vocabulary and associated APIs for HTML and XHTML URL: http://www.w3.org/TR/2012/WD-html5-20120329/ [accessed 2013-05-01] [WebCite Cache]
- vandenbossche J. WINK(Webapp INnovation Kit). HTML5 Application Cache Study URL: http://www.winktoolkit.org/blog/235/ [accessed 2013-07-26] [WebCite Cache]
- Grove R. Mobile Browser Cache Limits: Android, iOS, and webOS. 2010. URL: http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/ [accessed 2013-05-01] [WebCite Cache]
- Smith S. Android SDK: Implement an Options Menu. 2012. URL: http://mobile.tutsplus.com/tutorials/android/android-sdk-implement-an-options-menu/ [accessed 2013-07-26] [WebCite Cache]
- Klein D. How to decide: Mobile websites vs mobile apps. 2013. URL: http://www.adobe.com/inspire/2012/02/mobile-websites-vs-mobile-apps.html [accessed 2013-05-01] [WebCite Cache]
- mobincube. 2012. Mobimento Mobile SL URL: http://www.mobincube.com/ [accessed 2013-05-01] [WebCite Cache]
- AppsGeyser. 2012. URL: http://www.appsgeyser.com/ [accessed 2013-05-01] [WebCite Cache]
- NHS Choices Annual Report. 2011. NHS Choices. Improving Health, Improving Lives URL: http://www.nhs.uk/aboutNHSChoices/professionals/developments/Documents/annual-report/Annual_report_2011_digital.pdf [accessed 2013-07-31] [WebCite Cache]
- Wicks P, Massagli M, Frost J, Brownstein C, Okun S, Vaughan T, et al. Sharing health data for better outcomes on PatientsLikeMe. J Med Internet Res 2010;12(2):e19 [FREE Full text] [CrossRef] [Medline]
- PatientsLikeMe. PatientsLikeMe app. 2013. URL: http://apps.nhs.uk/app/patientslikeme/ [accessed 2013-05-01] [WebCite Cache]
- Eysenbach G, CONSORT-EHEALTH Group. CONSORT-EHEALTH: improving and standardizing evaluation reports of Web-based and mobile health interventions. J Med Internet Res 2011;13(4):e126 [FREE Full text] [CrossRef] [Medline]
|ALSoD: Amyotrophic Lateral Sclerosis Online Genetics Database|
|ASP.NET: active server page network|
|IDE: integrated development environment|
|Master page: provides automatic layout, pagination, headers and footers, and graphic elements for multiple pages.|
|OS: operating system|
|SMS: short message service|
|UserAgent: a user agent is software (a software agent) that is acting on behalf of a user.|
|Wi-Fi: wireless local area network|
Edited by G Eysenbach; submitted 13.05.13; peer-reviewed by P Wicks, S Singh; comments to author 11.06.13; revised version received 21.06.13; accepted 30.06.13; published 04.09.13
©Olubunmi Abel, Aleksey Shatunov, Ashley R Jones, Peter M Andersen, John F Powell, Ammar Al-Chalabi. Originally published in JMIR mHealth and uHealth (http://mhealth.jmir.org), 04.09.2013.
This is an open-access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/2.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work, first published in JMIR mHealth and uHealth, is properly cited. The complete bibliographic information, a link to the original publication on http://mhealth.jmir.org/, as well as this copyright and license information must be included.