Responsive Web Design in Application Express using HTML5 ... - Oracle

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

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

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

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

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

4

Evolving Web Applications 10 Years Ago  Designed for Internet Explorer  Windows Desktop or Laptop  Maximum screen resolution of

1024x768  Table-Based  Tag  Presentation + Markup mixed

5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

5

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

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

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

“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

Everyone is doing it. How can you?

10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

10

Native Apps?

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

11

12

12

Native Apps?

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

13

Dedicated Mobile Web Apps?

14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

14

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

Dedicated Mobile Web Apps?

16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

16

Well, let’s look at the requirements.

17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

17

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

Responsive Web Design (RWD)

19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

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

20

Same HTML. Same Application Logic. Different User Experience.

21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

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

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

 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

CSS3 Responsive Utility Classes  Easily hide / show content depending on device type

37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

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

38

Example Grid

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

39

Sounds technical. Do I have to do this manually?

40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

40

NO! APEX handles all of this for you.

41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

41

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

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

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

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

Demo: Convert Existing App to Responsive App

46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

46

Demo: Sample DB Application Walk Through

47 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

47

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

Q&A

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

50

@shakeeb blog: apex.shak.us

51 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

51

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

Insert Information Protection Policy Classification from Slide 13

52

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

Insert Information Protection Policy Classification from Slide 13

53