INFORMATION TECHNOLOGY STANDARD

Transcription

1 COMMONWEALTH OF PENNSYLVANIA DEPARTMENT OF PUBLIC WELFARE INFORMATION TECHNOLOGY STANDARD Name Of Standard: Mobile Website Development Domain: Application Number: Category: STD-EASS010 Date Issued: Date Revised: 08/19/13 Issued By Direction Of: Shirley Monroe, Acting Dir of Div of Tech Engineering Abstract: The purpose of this standard is to define the guidelines to be used to drive future mobile website development. These guidelines should be applied based on the needs of the customer and have been defined to make the best use of DPW s existing development technology, processes, and tools. To better serve the citizenry and workforce, the Department of Public Welfare (DPW) has embarked on a strategic initiative to define and operationalize their mobile website architecture. The Department s goal is to provide an opportunity for DPW to build a standard architecture and develop a set of guidelines that define the foundation for mobile based solutions to support potential citizen facing mobile websites. The following areas are to be addressed: Design and UX/UI (user experience/user interface) Architecture o Critical to understanding how to create user friendly, interactive and attractive mobile websites. Application Development Architecture o The core technology for the creation of mobile websites. Mobile Device Architecture o The mobile device architecture for deploying mobile websites. Security Architecture o Critical controls and data security considerations. Testing, Performance, and Usage Metrics o Important testing and performance management considerations during and after application development.

2 General: The goal of the process is to create a set of guidelines relevant in the development and deployment of mobile websites. The purpose of this document is to state standards in terms that can be applied as technology changes and they will require review as technology and requirements change. The key objectives are to create development guidelines to enable and support the creation of citizen-facing DPW mobile websites. The resulting guidelines herein are intended to describe the items that are not part of the established standards defined in the ALM Baseline (which should be followed where appropriate). The guidelines focus on the mobile-specific topics and include mobile web environments, architectures, security, and standards. Standard: DESIGN AND UX/UI ARCHITECTURE This section of the guidelines describes the activities, tools and processes required to create highly usable, interactive and attractive mobile websites. This section provides standards for the following: Mockups, Wireframes, and Prototyping Tools - Tools to facilitate the creation of visualizations of a mobile website s screens Creative Design Branding, color scheme, and iconography guidelines Accessibility Creating mobile websites that are accessible for users with disabilities Mockups, Wireframes, and Prototyping Tools Creative Design Accessibility Guideline Rationale Tools Design tools appropriate for the project should be selected. Adobe Creative Suite is an approved tool, but other tools may be used if approved by stakeholders. Mobile websites should follow best practices for mobile web design such as being touch friendly and highly visible on small screens. The standard DPW style guide for websites should be used where applicable when creating styles for mobile websites. The current accessibility standards issued by the state should be applied as much as possible to mobile websites. Adobe Creative Suite licenses are already owned by DPW. Although other tools may be helpful they will require the purchase of new licenses. Screen size and input methods on mobile devices differ greatly from desktop websites and a different design should be created to increase usability on mobile devices. The appearance of mobile websites should be consistent with DPW s desktop websites and branding. Accessibility standards for websites have been created by the Office of Administration and mobile websites are not exempt. The wire framing tool Balsamiq, the prototyping tool Axure, and the graphics design tools provided by in Adobe s Creative Suite. Best practices for mobile web design are defined by the W3C in the Mobile Web Best Practices 1.0 document (available on their website). The following documents contain style and branding information for desktop websites that may also apply to mobile websites: Commonwealth of Pennsylvania Style Guide ITB-APP005 STD-APP005A For Commonwealth of PA s Accessibility Policy see ITB- ACC001. For the W3C s mobile web accessibility guidelines see the website of the W3C Web Accessibility Initiative.

3 ARCHITECTURE OVERVIEW The following section provides a high level view of the components that comprise the mobile web architecture. Figure 1 demonstrates the relationship between the current web architecture and the architecture to support mobile websites. At high level the DPW Mobile Web Archjtiecture can be described in the context of the chosen subject matter areas including Design UX/UI, Application Architecture, Device Support, Security and Testing, Performance and Usage Metrics. Figure 1

4 APPLICATION DEVELOPMENT ARCHITECTURE This section describes how mobile websites are rendered and served to mobile devices and any third party services, external to the Commonwealth that provide additional functionality and capabilities (mapping, social media, etc.). It also provides guidance on how mobile websites should be tested to ensure that consistent results are achieved across a diverse set of browsers and devices. This section provides guidelines for the following: Mobile Page Rendering Approach Approaches to use for page rendering Device Detection Detecting mobile devices so the correct pages will load on the device Server Side Application Framework Specifies a server side application framework for mobile websites Data Interchange Format Specifies the data interchange format for mobile websites JavaScript Framework Specifies the JavaScript framework for mobile websites Figure 2: Mobile websites offer greater portability and connectivity HTML5 Features Process for use and review of certain HTML5 features Third Party Services Process of evaluating and using web services offered by third parties external to the Commonwealth

5 Guidelines Mobile Page Rendering Approach Device Detection Server Side Application Framework Guideline Rationale Tools The preferred page rendering approach is either a server based page rendering architecture, a rich client architecture, or a combination of the two depending on the needs of the application. Servers should detect requests from mobile devices and automatically redirect users to a mobile version of the website (links should be provided to return to the nonmobile version if desired). Server device detection that serves different content to different devices or client side feature detection with JavaScript may be required in order to provide the desired user experience on some mobile websites. The need for this functionality should be evaluated on an application specific basis. The preferred server side application framework for mobile websites is ASP.NET MVC. If complex web services are required, the Windows Component Framework (WCF) may be required. A server based page rendering architecture which renders a complete page on the server has the advantage of being a familiar architecture. A rich client architecture which uses AJAX calls from the client to load and display data can be more responsive, reduce the amount of data passed between client and server, and make use of existing web services. These two architectures can be combined by having some data being rendered into the page on the server but other data being loaded with AJAX calls. Redirection for mobile devices is an industry best practice which insures the best experience is provided to mobile users. However, mobile users should be allowed to easily switch to the full version of the site if the features they are looking for are not available on the mobile version. Differences in browser support for HTML5 and hardware difference between devices may require custom code in client side scripts or device specific files to be delivered to the browser in order properly implement features on all supported devices. ASP.NET MVC provides a more flexible architecture for mobile websites than the.net Web Forms architecture since it is capable of easily rendering both web pages and JSON services. The frameworks selected by DPW in these guidelines can support any of the rendering approaches mentioned. Two.NET libraries useful for server side device detection and redirection are: 51Degrees.mobi and WURFL. Modernizr is a JavaScript library that is used to do client side feature detection. ASP.NET MVC websites are developed in Visual Studio MVC requires a separate download from Microsoft to be installed. Data Interchange Format The preferred data interchange format for mobile services is JSON. JSON integrates with JavaScript natively and is the most compact of the standard data interchange formats. Support for JSON built into Visual Studio and all web browsers that support JavaScript.

6 JavaScript Framework HTML5 Features Third Party Services Guideline Rationale Tools The preferred JavaScript framework for mobile websites is jquery/jquery Mobile. If approved by stakeholders, secondary JavaScript frameworks may be used based on project requirements. The checklist of applicable HTML5 features in Appendix A should be submitted and reviewed for each mobile website developed. If integration with third party services is desired, a document justifying their use should be produced and approved by stakeholders. jquery and jquery Mobile are market leading JavaScript frameworks which are comparatively easy to learn. This framework also supports the widest variety of mobile browsers and has the best support for graceful degradation. Support for these frameworks is available through a partnership with Microsoft. HTML5 support varies across mobile browsers, features like local storage have security implications, and use of features like geo location can have privacy implications. Reviewing an HTML5 feature checklist of proposed features for an application allows stakeholders to address concerns at an early stage and mitigate risk. In some situations integration with third party services could provide some tangible advantages. However, there are also security concerns and potential issues if the third party has a service outage. Therefore, any third party services should be carefully reviewed by stakeholders before they are implemented. jquery Mobile is open source, supported by Microsoft, and requires a separate download from the jquery Foundation s website. Appendix A provides a checklist based on the HTML5 specification as of May The features encompassed by HTML5 are evolving and is managed by the W3C HTML Working Group. The latest standards are available on their website. Examples of common third party services used in mobile applications are mapping APIs and social media interaction.

7 MOBILE DEVICE ARCHITECTURE This section describes the systems and devices required for end to end solutions. Devices selected for support are based on the current trends in the market. As shown in Figure 3 below, a survey conducted in December 2011 indicates a majority of the smartphone market is divided between ios and Android devices. The tablet market is dominated by ios/the ipad. Android tablets hold less than 10 percent of the market share. Figure 3: OS Share of Device Traffic The Android tablet market share is rapidly changing. As shown in the Figure 4, the new Amazon Kindle Fire is rapidly taking over market share. The data in Figures 5 and 6 suggests testing on the 9.7-inch Apple ipad, the 7-inch Kindle Fire, and the 10.1-inch Samsung Galaxy Tab 2. Testing on these tablets would cover a range of screen sizes, the ios operating system, the new Android 4 (Ice Cream Sandwich) operating system, and the heavily modified version of Android 2.3 (Gingerbread) used by the Kindle Fire.

8 Figure 4: Android Tablet Market Share Figure 5 shows a breakdown of mobile traffic that visited DPW s websites during April Since the browsers on different versions of Android have different levels of HTML5 support, this graph divides the visits from Android devices according to operating system market share data provided by Google for the time period shown. Because of the low number of devices using versions other than ios 5, this breakdown was not necessary for ios. Figure 7 reinforces the need for testing on an iphone, ipad, and a device running version 2.3 of the Android operating system. The Samsung Galaxy SII is a popular phone that runs Android 2.3 making it a good candidate for testing. This phone is also scheduled to receive an update to Android 4.0 (the latest version) in the near future. Figure 5: Mobile Traffic to DPW Sites, April 2012

9 This section provides guidelines for the following: Device Support Which devices should be supported by mobile websites Device Support Guideline Rationale Tools Mobile websites should be fully functional on a set of the top devices found to be accessing DPWs mobile websites. DPW recognizes that mobile device landscape changes rapidly and market leading devices and operating systems can be obsolete in less than a year. The top device categories accessing DPW s public websites are a moving target that closely conforms to the devices citizens are actually using, making it a suitable guide for determining device support. The following devices are market leaders across several categories and encapsulate a range of operating systems and screens sizes. Apple iphone (ios) Apple ipad (ios) Samsung Galaxy S (Android) Samsung Galaxy Tab (Android) Amazon Kindle Fire (Android) Testing on these devices will provide coverage for the most common devices on the market at the time of this document s creation. These devices need to be re-evaluated periodically to keep pace with current market trends. SECURITY ARCHITECTURE The security control guidelines have been defined to make the best use of DPW s existing security technology, processes and tools in the ALM Baseline. A copy of the Mobile Application Security Standards can be found here: A copy of the Mobile Device Standard can be found here TESTING, PERFORMANCE, AND USAGE METRICS This section describes the tools and methods used to test mobile websites during and after development; validate the performance of mobile applications; and the metrics and tools be used to assist in the process. Where the stated guidelines do not address a specific area, it is either described in the ALM Baseline. This section provides guidelines for the following: Performance Guidelines to minimize the amount of data transferred to mobile devices and maintain the minimum acceptable levels of performance for mobile websites Usage Metrics Specifies the tool used for metrics gathering and mobile websites usage analytics Load Testing Tools used for load testing mobile websites Functional Testing Guidelines and options for testing the functionality of mobile websites Device Testing Testing mobile websites on devices

10 Performance Usage Metrics Load Testing Functional Testing Device Testing Guideline Rationale Tools Mobile websites should have GZIP compression enabled, JavaScript files should be minified, and HTTP headers should be as small as possible. Google Analytics should be used to gather usage statistics for all mobile websites. DPWs standard load testing tool should be used to load test all mobile applications. Mobile website functionality should be tested on devices (see device testing) but testing in browser emulators that emulate a broader range of devices than the supported devices is an industry trend. Use of this practice should be evaluated on a per project basis. Testing pages with W3C s mobileok testing tool is also an industry trend that should be evaluated on a per project basis. All mobile websites should be tested on the current list of supported devices. Mobile devices can be limited by slow connection speeds or high cost of bandwidth so the specified practices should be applied to minimize the size of all content transmitted to and from the web server. Google Analytics is currently being used by DPW and many other enterprises. Load testing new websites is a DPW standard and industry best practice. The large number of devices and speed with which new devices, operating systems, and mobile browsers are introduced makes testing websites on the devices used by a significant portion of users prohibitively expensive and time consuming without using emulators. It is an industry best practice to test on physical devices to verify that pages render correctly and features are fully functional. GZIP is supported by IIS, the web server currently used by DPW. The following minification tools are all solid options that can be integrated into the Visual Studio/TFS build process: YUI Compressor Microsoft AJAX Minifier Google Closure Compiler The following tools were evaluated: Google Analytics Webtrends Site Catalyst Coremetrics Percent Mobile NeoLoad is the standard load testing tool for DPW as of May 2012 and it supports load testing of mobile sites. The following emulators and testing tools were researched: Adobe Device Central CS4 Opera Mobile Emulator Google Chrome Emulator (Developer Tools) Keynote MITE Perfecto Mobile Compuware Gomez CrossBrowserTesting W3C mobileok mobiready Google PageSpeed The mobile website should be tested on all supported devices. Adobe Shadow was discussed as a way to make this process easier.

11 Appendix A: HTML5 FEATURE CHECKLIST This checklist is to be used to evaluate HTML5 features used by an application. It is referenced in the HTML5 section of the Application Development Architecture guidelines. Feature Description Used Application Cache Offline package installation. Web storage Persistent and session storage. Web SQL storage Persistent SQLite storage. Geolocation Geolocation & tracking using GPS, cells or Wi-Fi. Multimedia Video & Audio Players Server-Sent Events Allow data to be pushed from server Web Sockets Bidirectional protocol over HTTP Web Workers Threading and background process communications Canvas API 2D Drawing API SVG Scalable Vector Graphics Motion Sensors Accelerometer, Gyroscope, Magnetometer WebGL 3D Canvas for the web Network Information Connection Type: 2G, 3G, 4G, WiFi API File API Opening local files through input type CORS Cross origin Resource Sharing, for cross domain AJAX requests HTML Media Capture Taking pictures, record video and audio from an input file type Notifications API Background alert notifications IndexedDB Agnostic database system (replacement for Web SQL) getusermedia Camera access for <video> element FullScreen API Allow the application to get a full screen mode Page Visibility API Determine current visibility state Animation Timing API Performance timers for HTML5 animations

12 Exemptions from this Standard: There will be no exemptions to this standard. Refresh Schedule: All standards and referenced documentation identified in this standard will be subject to review and possible revision annually or upon request by the DPW Information Technology Standards Team. Standard Revision Log: Change Date Version Change Description Author and Organization DPW Mobile Website Dev Standards v1.doc Page 12 of 12