responsive design case study n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Responsive Design Case Study PowerPoint Presentation
Download Presentation
Responsive Design Case Study

Loading in 2 Seconds...

play fullscreen
1 / 14

Responsive Design Case Study - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Responsive Design Case Study' - wilda


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
responsive design case study

Responsive Design Case Study

June 27, 2012

Ryan Day and William Wales, GSA OCFO/BDFE

agenda
Agenda
  • Business drivers for mobile friendly
  • Current approach to mobile
  • First steps in mobile development
  • Using responsive design
  • Implementing
  • Tools
  • Testing
  • Future plans
business drivers for mobile friendly
Business drivers for mobile friendly
  • Increasing mobile use in general public
  • Mobile device transition within GSA
    • Android
    • iOS
  • Target: portfolio of web based applications
current approach to mobile
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?
first steps in mobile development
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
using responsive design
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
implementing
Implementing

Mobile (0 – 480 pixels)

Desktop and Tablet (481 pixels and wider)

implementing cont
Implementing (cont.)
  • Technology
    • HTML5
    • Cascading Style Sheets 3 (CSS3)
    • Not currently using JavaScript
implementing cont1
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
implementing cont2
Implementing (cont.)

All devices – get base style sheet

Mobile devices – additional formatting

implementing cont3
Implementing (cont.)

Wider devices – also get desktop style sheet

tools
Tools
  • IDE - JBoss Developer Studio (Eclipse based)
    • HTML, CSS editing
  • Chrome Developer Tools
    • CSS review
testing
Testing
  • Chrome browser (demo)
    • Resizing – test Responsive CSS
    • Device emulation – user-agent
  • W3C MobileOK Checker
    • http://validator.w3.org/mobile/
  • Real devices – Android, iOS
future plans
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