June 27, 2012

inexpensivebossesΚινητά – Ασύρματες Τεχνολογίες

12 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

73 εμφανίσεις

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