June 27, 2012

Ryan Day and William Wales, GSA OCFO/BDFE

Business drivers for mobile friendly Current approach to mobile First steps in mobile development Using responsive design Implementing Tools Testing Future plans

2

Increasing mobile use in general public

Mobile device transition within GSA• Android• iOS

Target: portfolio of web based applications

3

Not asking “will pages be viewed on mobile?”

Pages will be viewed on mobile devices.

What experience will user have when they visit?

4

Started with existing content-only pages• New user guides, FAQs• Information portals

Created separate mobile pages• Redirect to “/mobile” URL• Use mobile framework (JQuery Mobile)

Sweet spot for separate pages: updates to existing sites, leave existing pages intact

Next effort: Development of new pages

5

New pages

Desired outcomes• Consistent with look and feel of GSA sites• Modify layout based on device width• Update user interface to be more “clickable”• Limit content in some situations• Develop reusable templates• Speed future development

6

Desktop and Tablet (481 pixels and wider)Mobile (0 – 480 pixels)

7

Technology• HTML5• Cascading Style Sheets 3 (CSS3)• Not currently using JavaScript

8

Responsive Design• Using fluid grid• Don’t specify pixel location• Shrink and expand to device size

• Style Sheets• Base style sheet for all devices• Mobile formatting for small devices (mobile first)• Separate style sheet for desktop sites

9

All devices – get base style sheet

Mobile devices – additional formatting

10

Wider devices – also get desktop style sheet

11

IDE - JBoss Developer Studio (Eclipse based)• HTML, CSS editing

Chrome Developer Tools• CSS review

12

Chrome browser (demo)• Resizing – test Responsive CSS• Device emulation – user-agent

W3C MobileOK Checker• http://validator.w3.org/mobile/

Real devices – Android, iOS

13

Application functionality• Mobile friendly• Perform interactive tasks

Content Management System (CMS)• Easier maintenance of pages• Consistent look and feel• Follow Digital Gov Strategy

14