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 Dont 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 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