responsive design case study
DESCRIPTION
Responsive Design Case Study. June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE. Agenda. Business drivers for mobile friendly Current approach to mobile First steps in mobile development Using responsive design Implementing Tools Testing Future plans. - PowerPoint PPT PresentationTRANSCRIPT
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