Insert Information Protection Policy Classification from Slide 13 1
Responsive Web Design in Application Express using HTML5 and CSS3 Shakeeb Rahman @shakeeb Principal Member of Technical Staff Oracle Application Express #orclapex Insert Information Protection Policy Classification from Slide 13 2
Shakeeb Rahman Software Developer Intern at Oracle in 2006 Joined APEX team in 2009 Projects I have worked on Oracle Store APEX Oracle Cloud First talk at Oracle OpenWorld 3 3
Program Agenda The Web Today Mobile App vs Responsive App Responsive Web Design APEX 4.2 Features Demos Is Responsive Right for you? 4 4
Evolving Web Applications 10 Years Ago Designed for Internet Explorer Windows Desktop or Laptop Maximum screen resolution of 1024x768 Table-Based <font> Tag Presentation + Markup mixed 5 5
Evolving Web Applications 5 Years Ago Mobile becomes popular with iphone Firefox is eating IE marketshare Start Investigating Mobile 6 6
Evolving Web Applications Today Many Devices Many Platforms Many Screen sizes Many Resolutions Many Browsers Many Many Variables 7 7
Evolving Web Applications Enterprise gone Mobile Mobile is not just for personal use Enterprises have embraced mobile Agility Cost savings Improve productivity 8 8
71% of organizations are already using or planning to use custom mobile applications Symantec 2012 State of Mobility Survey 9 9
Everyone is doing it. How can you? 10 10
Native Apps? 11 11
12 12
Native Apps? 13 13
Dedicated Mobile Web Apps? 14 14
Dedicated Mobile Web app Fast Looks Native Optimized for Mobile Duplicate Code Less Functionality Not Optimized for Tablets 15 15
Dedicated Mobile Web Apps? 16 16
Well, let s look at the requirements. 17 17
The Business Requirement Enterprise Application Work on Desktop, Mobile, Tablets Similar UI Single Code Line Same Developers No New Technology 18 18
Responsive Web Design (RWD) 19 19
Responsive Web Design (RWD) an approach to web design in which a designer intends to provide an optimal viewing experience easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to mobile phones). (Wikipedia) 20 20
Same HTML. Same Application Logic. Different User Experience. 21 21
22 22
23 23
24 24
25 25
26 26
27 27
28 28
29 29
30 30
31 31
32 32
33 33
How does it work? 34 34
CSS3 Media Queries allowing you to define styles based on conditions such as screen size or resolution @media screen and (min-width: 320px) and (maxwidth: 479px) {...} define multiple CSS media queries to target cut off points and appropriately adjust UI for given screen size 35 35
Mobile Portrait @media screen and (min-width: 320px) and (max-width: 479px) Mobile Landscape @media only screen and (min-width: 480px) and (max-width: 767px) Mobile Portrait / Landscape @media only screen and (max-width: 767px) Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 959px) Tablet Landscape @media only screen and (min-width: 960px) and (max-width: 1024px) 36 36
CSS3 Responsive Utility Classes Easily hide / show content depending on device type 37 37
Grid Layout Using a grid makes it easier to align and lay out page components Media Queries can then easily shift or reposition these components 38 38
Example Grid 39 39
Sounds technical. Do I have to do this manually? 40 40
NO! APEX handles all of this for you. 41 41
APEX 4.2 Support for Responsive Web Design Grid Layout for Regions and Items Theme 25 42 42
APEX 4.2 Support for Responsive Web Design Grid Layout Declarative way to lay out regions and items on a page Possible to do complex layouts without manual css overrides Compatible with popular grid frameworks such as twitter bootstrap, 960 gs, etc. 43 43
APEX 4.2 Support for Responsive Web Design Fully Responsive Theme Uses custom flexible grid up to 2560px wide Mobile, Tablet, Desktop support Icon Buttons Retina Display Compatible Modernizr 44 44
APEX 4.2 Support for Responsive Web Design Fully Responsive Theme SCSS Based Respond.js for RWD in older IE One Sprite (and one for Retina) Icons 45 45
Demo: Convert Existing App to Responsive App 46 46
Demo: Sample DB Application Walk Through 47 47
Is Responsive Right for you? Responsive Full Experience Single Code Line Web UI Mobile Limited Utility New Mobile Codeline Pseudo Native UI 48 48
49 49
Q & A 50 50
@shakeeb blog: apex.shak.us 51 51
Insert Information Protection Policy Classification from Slide 13 52
Insert Information Protection Policy Classification from Slide 13 53