Learn how you can develop Responsive Web Applications in Oracle Application Express using Theme 25

1. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
1

2. Responsive Web Design
in Application Express using
HTML5 and CSS3
Shakeeb Rahman
@shakeeb
Principal Member of Technical Staff
Oracle Application Express #orclapex
Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
2

3. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
3

4. Program Agenda
 The Web Today
 Mobile App vs Responsive App
 Responsive Web Design
 APEX 4.2 Features
 Demos
 Is Responsive Right for you?
4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
4

5. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
5

6. Evolving Web Applications
5 Years Ago
 Mobile becomes popular with
iPhone
 Firefox is eating IE marketshare
 Start Investigating Mobile
6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
6

7. Evolving Web Applications
Today
 Many Devices
 Many Platforms
 Many Screen sizes
 Many Resolutions
 Many Browsers
 Many Many Variables
7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
7

8. Evolving Web Applications
Enterprise gone Mobile
 Mobile is not just for personal use
 Enterprises have embraced
mobile
 Agility
 Cost savings
 Improve productivity
8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
8

9. “71% of organizations are already using or
planning to use custom mobile applications”
Symantec
2012 State of Mobility Survey
9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
9

10. Everyone is doing it. How can you?
10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
10

11. Native Apps?
11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
11

12. 12
12

13. Native Apps?
13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
13

14. Dedicated Mobile Web Apps?
14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
14

15. Dedicated Mobile Web app
• Fast
• Looks Native
• Optimized for Mobile
• Duplicate Code
• Less Functionality
• Not Optimized for
Tablets
15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
15

16. Dedicated Mobile Web Apps?
16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
16

17. Well, let’s look at the requirements.
17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
17

18. The Business Requirement
Enterprise Application
 Work on Desktop, Mobile, Tablets
 Similar UI
 Single Code Line
 Same Developers
 No New Technology
18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
18

19. Responsive Web Design (RWD)
19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
19

20. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
20

21. Same HTML.
Same Application Logic.
Different User Experience.
21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
21

22. 22
22

23. 23
23

24. 24
24

25. 25
25

26. 26
26

27. 27
27

28. 28
28

29. 29
29

30. 30
30

31. 31
31

32. 32
32

33. 33
33

34. How does it work?
34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
34

35. CSS3 Media Queries
 allowing you to define styles based on conditions such
as screen size or resolution
 @media screen and (min-width: 320px) and (max-
width: 479px) {...}
 define multiple CSS media queries to target “cut off
points” and appropriately adjust UI for given screen size
35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
35

36.  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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
36

37. CSS3 Responsive Utility Classes
 Easily hide / show content depending on device type
37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
37

38. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
38

39. Example Grid
39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
39

40. Sounds technical.
Do I have to do this manually?
40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
40

41. NO!
APEX handles all of this for you.
41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
41

42. APEX 4.2 Support for Responsive Web Design
 Grid Layout for
Regions and Items
 Theme 25
42 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
42

43. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
43

44. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
44

45. 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 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
45

46. Demo:
Convert Existing App to
Responsive App
46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
46

47. Demo:
Sample DB Application Walk Through
47 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
47

48. Is Responsive Right for you?
 Responsive  Mobile
 Full Experience  Limited Utility
 Single Code Line  New Mobile Codeline
 Web UI  Pseudo Native UI
48 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
48

49. 49
49

50. Q&A
50 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
50

51. @shakeeb
blog: apex.shak.us
51 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
51

52. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
52

53. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
53