Responsive Web Design in Application Express

Transcription

1 Insert Information Protection Policy Classification from Slide 13 1

2 Responsive Web Design in Application Express using HTML5 and CSS3 Shakeeb Principal Member of Technical Staff Oracle Application Express #orclapex 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 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 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 5

6 Evolving Web Applications 5 Years Ago Mobile becomes popular with iphone Firefox is eating IE marketshare Start Investigating Mobile 6 6

7 Evolving Web Applications Today Many Devices Many Platforms Many Screen sizes Many Resolutions Many Browsers Many Many Variables 7 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 8

9 71% of organizations are already using or planning to use custom mobile applications Symantec 2012 State of Mobility Survey 9 9

10 Everyone is doing it. How can you? 10 10

11 Native Apps? 11 11

12 12 12

13 Native Apps? 13 13

14 Dedicated Mobile Web Apps? 14 14

15 Dedicated Mobile Web app Fast Looks Native Optimized for Mobile Duplicate Code Less Functionality Not Optimized for Tablets 15 15

16 Dedicated Mobile Web Apps? 16 16

17 Well, let s look at the requirements

18 The Business Requirement Enterprise Application Work on Desktop, Mobile, Tablets Similar UI Single Code Line Same Developers No New Technology 18 18

19 Responsive Web Design (RWD) 19 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 20

21 Same HTML. Same Application Logic. Different User Experience

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 34

35 CSS3 Media Queries allowing you to define styles based on conditions such as screen size or 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

36 Mobile screen and (min-width: 320px) and (max-width: 479px) Mobile only screen and (min-width: 480px) and (max-width: 767px) Mobile Portrait / only screen and (max-width: 767px) Tablet only screen and (min-width: 768px) and (max-width: 959px) Tablet only screen and (min-width: 960px) and (max-width: 1024px) 36 36

37 CSS3 Responsive Utility Classes Easily hide / show content depending on device type 37 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 38

39 Example Grid 39 39

40 Sounds technical. Do I have to do this manually? 40 40

41 NO! APEX handles all of this for you

42 APEX 4.2 Support for Responsive Web Design Grid Layout for Regions and Items Theme

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

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 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 45

46 Demo: Convert Existing App to Responsive App 46 46

47 Demo: Sample DB Application Walk Through 47 47

48 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 49

50 Q & A 50 50

51 @shakeeb blog: apex.shak.us 51 51

52 Insert Information Protection Policy Classification from Slide 13 52

53 Insert Information Protection Policy Classification from Slide 13 53