Creating applications fast for multiple screens

with appearances of jQuery mobile, PhoneGap and Dreamweaver CS6

Dee SadlerAdobe Community Professional

Adobe Certified Expert / InstructorAdobe Freelancer Program

UI Strategist/Android/HTML/CSS geek for SprintDreamweaver and Fireworks CS5 videos for

Total Training and Adobe TV (CS6)Hybrid

@DeeSadler

We’ll try to cover

• Mobile app, choices

• Dreamweaver’s place

• Creating Mobile Design (actual design, not code)

• Other helpful Adobe tools to create HTML/CSS

• jQuery Mobile in DW

• PhoneGap Build in DW

Pros  (na)ve  client)§ Be#er  performance  (at  least  for  now),  snappier  anima5ons,  transi5ons,  and  faster  load  5mes.  The  performance  difference  between  na5ve  and  web  apps  is  far  more  pronounced  on  slower  devices  (e.g.  iPhone  3G  running  iOS4)  

§ Can  store  more  data  offline  

§ Can  be  featured  and  searched  for  in  the  app  store  

§ Full  access  to  the  device’s  hardware  and  OS  features  

§ Implicit  installa5on  of  an  app  to  the  device’s  home  screen.  On  iOS  devices  you  can  add  any  web  app  to  your  home  screen,  but  it’s  a  manual  process

§ The  App  Store  handles  purchase  transac5ons  on  your  behalf  

Vs.

Cons  (na)ve  client)§ Typically  more  expensive  to  build,  even  for  a  single  plaMorm.  Build  costs  increase  significantly  for  each  new  plaMorm.  Because  the  codebase  needs  to  be  re-­‐worked  for  each  OS,  the  5me  to  build  an  app  for  mul5ple  devices  can  also  be  quite  involved.  

§ Your  app  must  be  accessed  through  the  device’s  app  store,  which  has  two  important  considera5ons:  your  app  must  go  through  an  approval  process,  which  can  be  lengthy  and  arbitrary,  and  if  your  app  generates  revenue  you  must  share  a  percentage  with  the  store  (30%  for  Apple’s  App  Store,  including  in-­‐app  purchases).  App  updates  must  go  through  a  new  approval  process  each  5me.

ProsCorporate websites and blogs that don’t require extensive user input

One Code Base

Device Agnostic

Not just a tool for mobile

If done right, can be fast

ProsCorporate websites and blogs that don’t require extensive user input

One Code Base

Device Agnostic

Not just a tool for mobile

If done right, can be fast

SprintZone  5.0…

HTML5

Sprint  customers  visi5ng  our  .com  site  are  prompted  to  download  our  Web  App.

Boot2Gecko

Device Specific HTML5 API’s - Qualcomm

• Audio Input

• Camera

• File System

• Screen Orientation

Hybrid Apps

Hybrids• PhoneGap (Apache Cordova)

• Sencha Touch

• Titanium

• Kendoui

• UXI (super micro tiny DOM lib)

• Zepto

• etc. . .

Fluid Grids

Quick HTML5 Templates

jQuery Mobile Starter Pages

jQuery starter pages

• jQuery Mobile (CDN) Use this starter page if you plan to host the jQuery Mobile library on a CDN (Content Delivery Network).

• jQuery Mobile (Local) Use this starter page if you plan to host the assets yourself, or if your application doesn’t rely on an Internet connection.

But what are Media Queries?

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/example.css' />

That stylesheet will only take effect when the current browser window is between 701

and 900 pixels in width.

A media query is a logical expression that is either true or false

Design

Designing for all screens

Design the experience

Which way will they navigate the app?

Fireworks CS6

• CSS Sprites

• CSS Properties Panel

• jQuery theme creation

• New wireframing tools

• Gesture icons

PrototypingAnd things to make development easier

Other tools to create HTML5/CSS3/JS

• Edge Animate

• Proto (iPad app that can quickly wireframe)

• Brackets - new code editor

• Shadow - See your designs on your device(s)/debug

Edge Animate

Setting up a jQuery app<div data-role="page" id="page">

<div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div>

With real datathanks to Ryan Stewart at Adobe for the code

<div data-role="page" id="page">

<div data-role="header"> <h1>Mountain Ranges</h1> </div> <div data-role="content"> <ul data-role="listview"><?phpinclude_once('PeakService.php');

$peak_service = new PeaksService();

$range_array = $peak_service->getDistinctRanges();

foreach ($range_array as $row){ echo "<li><a href='#".ereg_replace(' ','',$row[range_name])."'>".$row[range_name]."</a></li>"; } ?> </ul> </div> <div data-role="footer"> <h4>by ryan@adobe.com</h4> </div></div>

PhoneGap Build in DW

Working with native mobile

Pixel Density/Screen sizeTo get the ppi, you first need to find out how many pixels there are diagonally.

This is the square root of each side squared, added together (from a2 + b2 = c2)

Android densities: low, medium, high and extra highDensity-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.http://developer.android.com/guide/practices/screens_support.html

Thanks!