Agenda
UI Design for Tablets / Mobile Phones
Introduction into Responsive Web Design
Implementing Client-Side Responsive Web Design
Implementing Server-Side Adaptive Web Design
Using HTML 5 Input Types
Mobile Device Integration
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
5
scrolling
across a wide range of devices (from mobile phones to desktop computer
monitors
Aspects of RWD
Fluid grids: sizing relative(%) rather than absolute (pixels, points)
Media Queries: Use different CSS styles based on screen dimensions
Flexible Images: Images that resize based on screen dimensions
10
320px
11
730px
950px
12
13
14
Window.matchMedia Listener
15
16
17
18
manipulation
Can result in ugly, large if-then-else Javascript methods
Solution as of JDeveloper 12.1.2: clientListener type mediaEvent
19
20
written by you!
Traverse complete component tree client-side
Register each component with clientListener type mediaEvent
Within each matchMedia listener method, loop over components and
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
properties
If not, confusing user experience: both swiping and pagination needed
38
39
40
41
42
43
44
45
46
47
48
49
More Info
Going Mobile with ADF Running ADF Faces on Mobile Phones and
Tablets
http://www.ateam-oracle.com/going-mobile-with-adf-running-adf-faces-on-
mobile-phones-and-tablets/
ADF-WebCenter Responsive-Adaptive Design Beyond
http://www.ateam-oracle.com/adf-webcenter-responsive-adaptive-design-
beyond/
Responsive Design for your ADF Faces Web Application
https://blogs.oracle.com/shay/entry/responsive_design_for_your_adf
50
51