june 27, 2012 ryan day and william wales, gsa ocfo/bdfe
TRANSCRIPT
![Page 1: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/1.jpg)
June 27, 2012
Ryan Day and William Wales, GSA OCFO/BDFE
![Page 2: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/2.jpg)
Business drivers for mobile friendly Current approach to mobile First steps in mobile development Using responsive design Implementing Tools Testing Future plans
2
![Page 3: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/3.jpg)
Increasing mobile use in general public
Mobile device transition within GSA• Android• iOS
Target: portfolio of web based applications
3
![Page 4: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/4.jpg)
Not asking “will pages be viewed on mobile?”
Pages will be viewed on mobile devices.
What experience will user have when they visit?
4
![Page 5: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/5.jpg)
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
![Page 6: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/6.jpg)
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
![Page 7: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/7.jpg)
Desktop and Tablet (481 pixels and wider)Mobile (0 – 480 pixels)
7
![Page 8: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/8.jpg)
Technology• HTML5• Cascading Style Sheets 3 (CSS3)• Not currently using JavaScript
8
![Page 9: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/9.jpg)
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
![Page 10: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/10.jpg)
All devices – get base style sheet
Mobile devices – additional formatting
10
![Page 11: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/11.jpg)
Wider devices – also get desktop style sheet
11
![Page 12: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/12.jpg)
IDE - JBoss Developer Studio (Eclipse based)• HTML, CSS editing
Chrome Developer Tools• CSS review
12
![Page 13: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/13.jpg)
Chrome browser (demo)• Resizing – test Responsive CSS• Device emulation – user-agent
W3C MobileOK Checker• http://validator.w3.org/mobile/
Real devices – Android, iOS
13
![Page 14: June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE](https://reader035.vdocuments.us/reader035/viewer/2022081512/55168ac1550346a2698b61c0/html5/thumbnails/14.jpg)
Application functionality• Mobile friendly• Perform interactive tasks
Content Management System (CMS)• Easier maintenance of pages• Consistent look and feel• Follow Digital Gov Strategy
14