Copyright © 2012, Oracle and/or its affiliates. All rights ... · Responsive Web Design (RWD) 20 an approach to web design in which a designer intends to provide an optimal viewing

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

1


Responsive Web Designin Application Express using HTML5 and CSS3Shakeeb Rahman@shakeebPrincipal Member of Technical StaffOracle Application Express #orclapex

2

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

Software Developer

Shakeeb Rahman

Intern at Oracle in 2006Joined APEX team in 2009Projects 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


10 Years Ago

Evolving Web Applications

Designed for Internet ExplorerWindows Desktop or LaptopMaximum screen resolution of 1024x768

Table-Based<font> TagPresentation + Markup mixed

5

5


5 Years Ago


Mobile becomes popular with iPhone

Firefox is eating IE marketshareStart Investigating Mobile

6

6


Today


Many DevicesMany PlatformsMany Screen sizesMany ResolutionsMany BrowsersMany Many Variables

7

7


Enterprise gone Mobile


Mobile is not just for personal useEnterprises have embraced mobile

AgilityCost savings Improve productivity

8

8


Symantec2012 State of Mobility Survey

“71% of organizations are already using or planning to use custom mobile applications”

9

9

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

Everyone is doing it. How can you?

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


Enterprise Application

The Business Requirement

Work on Desktop, Mobile, TabletsSimilar UISingle Code LineSame DevelopersNo New Technology

18

18


Responsive Web Design (RWD)

19

19


Responsive Web Design (RWD)

20

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


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

35

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


CSS3 Responsive Utility Classes

37

Easily hide / show content depending on device type

37


Grid Layout

38

Using a grid makes it easier to align and lay out page components

Media Queries can then easily shift or reposition these components

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


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


Fully Responsive Theme


Uses custom flexible grid up to 2560px wide

Mobile, Tablet, Desktop support Icon ButtonsRetina Display CompatibleModernizr

44

44


Fully Responsive Theme


SCSS BasedRespond.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

48

Mobile Limited Utility New Mobile Codeline Pseudo Native UI

48

49

49


Q & A

50

50


@shakeebblog: apex.shak.us

51

51


52


53

Documents

Copyright © 2012, Oracle and/or its affiliates. All rights ... · Responsive Web Design (RWD) 20 an approach to web design in which a designer intends to provide an optimal viewing