Responsive Web Design in Application Express

(1)

(2)

Responsive Web Design

in Application Express using

HTML5 and CSS3

Shakeeb Rahman

@shakeeb

Principal Member of Technical Staff

Oracle Application Express #orclapex

(3)

Software Developer

Shakeeb Rahman



Intern at Oracle in 2006



Joined APEX team in 2009



Projects I have worked on

–

Oracle Store

–

_APEX

–

Oracle Cloud

(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

(5)

10 Years Ago

Evolving Web Applications



Designed for Internet Explorer



Windows Desktop or Laptop



Maximum screen resolution of

1024x768



Table-Based



<font> Tag

(6)

5 Years Ago

Evolving Web Applications



Mobile becomes popular with

iPhone



Firefox is eating IE marketshare



Start Investigating Mobile

6

(7)

Today

Evolving Web Applications



Many Devices



Many Platforms



Many Screen sizes



Many Resolutions



Many Browsers

(8)

Enterprise gone Mobile

Evolving Web Applications



Mobile is not just for personal use



Enterprises have embraced

mobile



Agility



Cost savings



Improve productivity

8

(9)

Symantec

2012 State of Mobility Survey

“71% of organizations are already using or

planning to use custom mobile applications”

(10)

Everyone is doing it. How can you?

(11)

(12)

12

(13)

(14)

Dedicated Mobile Web Apps?

14

(15)

Dedicated Mobile Web app

• Fast

• Looks Native

• Optimized for Mobile

• Duplicate Code

• Less Functionality

• Not Optimized for

Tablets

(16)

Dedicated Mobile Web Apps?

16

(17)

(18)

Enterprise Application

The Business Requirement



Work on Desktop, Mobile, Tablets



Similar UI



Single Code Line



Same Developers



No New Technology

18

(19)

(20)

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)

(21)

Same HTML.

Same Application Logic.

(22)

22

(23)

(24)

24

(25)

(26)

26

(27)

(28)

28

(29)

(30)

30

(31)

(32)

32

(33)

(34)

How does it work?

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

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

(37)

CSS3 Responsive Utility Classes

(38)

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

(39)

(40)

Sounds technical.

Do I have to do this manually?

40

(41)

NO!

(42)

APEX 4.2 Support for Responsive Web Design



Grid Layout for

Regions and Items



Theme 25

42

(43)

Grid Layout

APEX 4.2 Support for Responsive Web Design



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)

Fully Responsive Theme

APEX 4.2 Support for Responsive Web Design



Uses custom flexible grid up to

2560px wide



Mobile, Tablet, Desktop support



Icon Buttons



Retina Display Compatible



Modernizr

44

(45)

Fully Responsive Theme

APEX 4.2 Support for Responsive Web Design



SCSS Based



Respond.js for RWD in older IE



One Sprite (and one for Retina)



Icons

(46)

Demo:

Convert Existing App to

Responsive App

46

(47)

Demo:

(48)

Is Responsive Right for you?



Responsive



Full Experience



Single Code Line



Web UI

48



Mobile



Limited Utility



New Mobile Codeline



Pseudo Native UI

(49)

(50)

Q & A

50

(51)

@shakeeb

(52)

(53)