1 / 14

Responsive Design Case Study

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.

wilda
Télécharger la présentation

Responsive Design Case Study

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Responsive Design Case Study June 27, 2012 Ryan Day and William Wales, GSA OCFO/BDFE

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

  3. Business drivers for mobile friendly • Increasing mobile use in general public • Mobile device transition within GSA • Android • iOS • Target: portfolio of web based applications

  4. Current approach to mobile • Not asking “will pages be viewed on mobile?” • Pages will be viewed on mobile devices. • What experience will user have when they visit?

  5. First steps in mobile development • 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

  6. Using responsive design • 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

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

  8. Implementing (cont.) • Technology • HTML5 • Cascading Style Sheets 3 (CSS3) • Not currently using JavaScript

  9. Implementing (cont.) • 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

  10. Implementing (cont.) All devices – get base style sheet Mobile devices – additional formatting

  11. Implementing (cont.) Wider devices – also get desktop style sheet

  12. Tools • IDE - JBoss Developer Studio (Eclipse based) • HTML, CSS editing • Chrome Developer Tools • CSS review

  13. Testing • Chrome browser (demo) • Resizing – test Responsive CSS • Device emulation – user-agent • W3C MobileOK Checker • http://validator.w3.org/mobile/ • Real devices – Android, iOS

  14. Future plans • Application functionality • Mobile friendly • Perform interactive tasks • Content Management System (CMS) • Easier maintenance of pages • Consistent look and feel • Follow Digital Gov Strategy

More Related