Presentation - Fishbowl Solutions

needlessoybeanMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

92 views

WebCenter

Portal
ADF

Designing
for Desktop, Mobile &
Tablet

Responsive and
Adaptive Design Integration


Session #
513

John Sim

Oracle
WebCenter

Ace

Agenda

+
Who is Fishbowl Solutions?

+
Success Stories

+
An Intro To Responsive & Adaptive

+
Who is Moving Towards Responsive?

+
Making ADF
Responsive/Adaptive

+
Example of Tweaking ADF component

+
Mobile Apps.. Where does ADF Mobile fit?





About Fishbowl Solutions


Specializing on portals & content management for
13 years


Customers throughout North America & EMEA


Enterprise
-
wide consulting services


Packaged software for WebCenter


100+ WebCenter
-
related projects

in last 2 years

About Me

John Sim

Senior Consultant (Oracle ACE)

(Product Development & User Experience)


12 Years Product Development, UI & Content Management Experience.



UIX
WebCenter

Spaces Technical Lead at Balfour Beatty (2009)

-

The project won Oracle's 2010 Enterprise 2.0 Blazer

Award: Employee
-
Facing Portal Award.



IOUG
-

Collaborate 13 Denver


Developing and integrating with Oracle Social Network



Creating
WebCenter

Hybrid ADF Mobile &
Phonegap

Applications




Current:: Fishbowl Solutions working on Product Development, innovation and
enhancements for Fusion Middleware


About Fishbowl Solutions

WebCenter Mobile

User Experience Design

SharePoint Integration

Google Search Integration

Fishbowl


Leader in Mobile ECM

Experience


3+ years research and
development


Numerous
POCs:


iTwitter

Social
Portlets


Oracle
WebCenter

Hybrid applications


Oracle Native Mobile applications


Expertise


Native
iOS
, Android


HTML5,
Phonegap

(Cordova) & ADF Mobile


IOS, Android, Blackberry, Windows 7&8


Responsive design and skinning


Customer Successes


Medical device manufacturer and therapy services provider currently deployed with 6,000 iPads


Photo eye and sensor manufacturer went live on April 1, 2012


Award Winning


Forrester Groundswell


Employee Mobile Application
-

Management


Oracle Fusion Innovation


Oracle
WebCenter



Case Study:
Medtronic

Customer Profile
:


Medical device manufacturer and therapy services
provider


45,000 employees and $15.9 billion in revenue

Solution Summary:


Mobile ECM system supporting 4,500 users


Mobile API enables security authentication, downloading
and synchronization of content and application of
content management rules

Business Drivers:


Efficiently provide accurate, up
-
to
-
date, and approved
product and services information to sales personnel


Enhance the sales process by making content available
on visually rich, 3D platforms such as the
iPad


Customer Benefits:


Improved sales rep productivity and efficiency


Reduced content distribution and sharing costs


“With the popularity of
mobile devices like the
iPad
, consumers are used
to having information
where they want it, and
when they want it. “That is
what our app store helps
us do, cater to this idea.
With
mCMS
, we are able
to extend big internal
enterprise
-
class systems
like Oracle
WebCenter
, to
our users on their mobile
devices
.”


Jim Freeland

Senior Principal

IT Mobility Analyst

Responsive & Adaptive
Design

”?? What..”

The Past

User Interface

The look and feel of an
application, including the
layout and interaction
model.

Desktop Office

The Daily experience of the
workforce is now changing
before it was a simple
desktop job now it’s a job on
the move with smart devices

1 Interface:: Hundreds of devices

The Problem
-


The Reality


Problem: Ever
-
Changing
Device Usage Dynamics


Mobile Internet users will
exceed desktop Internet
users by 2014



Mobile: Phone, tablet,
other?


Mobile first


Mobile only



User
Expectations

User
-
Centered Drivers


Loyalty and emotion



Younger users “always on”



Mobilisation



Consumerisation

of IT



BYOD (Bring Your Own Device)



Simplification



Device and interaction opportunities



Supporting the future
(Design once & reuse)… ..


What is Responsive Design?



+
As the user switches from their laptop to
iPad
, the
website should automatically switch to accommodate for
resolution, image size and scripting abilities


Responsive Web design

-

approach that
suggests that design and development should
respond to the user’s behaviour and environment
based on screen size, platform and orientation.

1 Template
-

3 devices

Google Rewards

Responsive Web Design For Mobile


Saves resources for both your site and

Google’s crawlers.


Googlebot

user agents needs to crawl your pages only
once, as opposed to crawling multiple times with different
user agents, to retrieve your content.


Improves crawling efficiency can indirectly help Google
index more of the site’s contents and keep it appropriately
fresh.

https://developers.google.com/webmasters/smartphone
-
sites/

DEMO

Responsive Web Design

Hennepin

County Medical
Center

What is Adaptive Design?


Adaptive Design


Creating interfaces that adapt to the device capabilities

(in terms of both form and function).


Responsive design is actually a subset of the Responsive approach



Los Angeles Department of Water & Power

LADWP.COM

Responsive Design


Fluid Grids


Liquid Layouts


Flexible Images


Break Points


Media Queries


Touch of JavaScript


Multi orientation and resolution support


Flexible grid
system

Flexible
media

Flexible layout

through media
queries

Fluid Grids & Liquid Layouts


Base Framework Skeleton


Can scale to any resolution


Wraps content & Grids


Can Support Desktop to Mobile with 1
template

Liquid Layout

http://www.designinfluences.com/fluid960gs/

Fluid Grid

Pinterest.com

http://pinterest.com/search/pins/?q=responsive

Flexible Images


Scalable Images


100% Width attribute


Device Image Optimisation

Desktop
-

Mobile


WebCenter

Content Conversion Server


New Retina Display Support


(The Webs Version of HD)


Dynamic Images


Digital Asset Management


Multiple Device Renditions

Break Points


Defining flexible template


Resolution Break Points


Break Points are always changing!

Retina

(The Webs Version of HD)

Multiple Screen Densities


Low
density (120),
ldpi

pxRatio

0.75


Medium
density (160),
mdpi

pxRatio

1.0


High
density (240),
hdpi

pxRatio

1.5


Extra
high density (320),
xhdpi

pxRatio

2.0



The pixel ratio species how a physical display pixel compares to a
pixel on a “normal” density screen. A “normal” display is anything
between about 100
ppi

(desktop, laptops).

Example retina display


Galaxy S3 (XHDPI) (2.0 Pixel Ratio)


Resolution (720px x 1280px)



The Problem…


A CSS
pixel no
longer equals
a device
pixels


Graphics become blurred as designed for 72dpi.

Solution 1px = 1px


Force
-
mapping CSS pixels to device
pixels


Or

Galaxy S3 Resolution Now (360px x 640px)

Improve Graphics

1)
Double Resolution and use low quality.

1)
Use CSS to downscale image to correct resolution.

2)
Provide device specific images via
WebCenter

Content DAM



http://retinafy.me/examples

Normal

Doubled

Desktop to
i
Pad

to iPhone

Example of response against resolution

Touch of JavaScript


Browsers don’t all support CSS3
Media
queries


Custom JS implementation incorporated
(
PolyFills
)


to support Browsers like IE.

Who is Moving to
Responsive/Adaptive?

Microsoft Metro UI

Desktop


Console


Tablet


Mobile


Single UI



Recognised across

device



Reusable elements



Supports Voice, Touch

& Spatial interactions

Developing Windows
8


HTML 5 applications


Portable to PC, Tablet, Mobile, Kinect via Microsoft App Store


Simple Minimalist Visual
UI

The New Face of

Oracle FUSE

Pssst
.. Not only Fusion Apps..

Other Oracle apps heading that way too!..

Making ADF
Responsive/Adaptive

Fishbowl Solutions

CSS Media Queries

Targeting Device (and setting break points)

CSS Media Queries

Retina Display Option

Issue



ADF Does not support media queries


Use EL expression or
Javascript

to determine device
or browser dimensions and inject a custom ID into
the body tag Store all in single ADF Style Sheet.


Ie

<body id=“
deviceMobile
”>




Use EL Expression and import separate ADF
Stylesheet

required by device.



Issue



ADF Does not support media queries

Adaptive Design: Programming

Simple JavaScript Redirect

EL Expression HTML Redirect

Adaptive Design:
Programming

WebCenter

Dynamic Look & Feel


Use EL to dynamically apply page template and skin based on the device


IF
-
THEN
-
ELSE statement


Use Simple Page Template for Mobile Devices


Use Rich Page Template for Desktop Browsers


EL: requestContext.agent.platformName returns


Windows


iPhone


Etc.




Adaptive Design:

Example Sample Template

ADF
iPad

sample app

Oracle Fusion Middleware Team (Maiko Rocha)

Landscape

Portrait

Testing Responsive Design


FireFox

Responsive Testing Demo


-

use (Ctrl + Shift + M) to access

Adaptive Design Hints and Tips


Use different templates for different device categories

(desktop, tablet, phone, other ...)



If you need to use HTML in your phone, surround it with an
<af:group>


Protects DOM



Don’t use certain CSS methods
ie

@media @import they get
stripped


Hints and Tips


Consider resetting skin classes to better control rendering, e.g.:


af|document {
-
tr
-
inhibit: all;}


af|commandLink {
-
tr
-
inhibit: all;}


will clear out all the inherited properties.



Use

<meta name="viewport" content="width=device
-
width, initial
-
scale=1.0, maximum
-
scale=1.0, user
-
scalable=no" />



Use

-
webkit
-
overflow
-
scrolling: touch

to enable native momentum scrolling within
overflown areas or JS Lib like
iScroll
,
jqTouch

etc.



Use

text
-
rendering: optmizeLegibility

to improve readability



User

text
-
overflow: ellipsis

to gracefully crop overflow text or Hyphenator JS Lib


Developer and Design Resources

Adaptive, Responsive, Simple UX Solutions

(John Brunswick)


E2.0: Workbench Podcast 6


WebCenter Portal Mobile Templates using Adaptive Styles


(
Fishbowl Solutions C4 Blog)


WebCenter

Portal and Space Boilerplate Template and Overview to Responsive Design

(
Bex

Huff)


ADF EMG Podcast Episode 6: ADF Mobile

(
OTN)


Oracle Fusion Applications User Experience Design Patterns and Guidelines (
inc

Mobile)


(
Misha Vaughan)


Roadmap to a Simple and Modern User Experience




Developer and Design Resources

More ADF, UX and Skinning
-
Related Resources

(Maiko Rocha and George
Maggessey
)


Designing Well
-
known Websites with ADF Rich Faces


(Lynn
Munsinger
)


Building ADF User Interfaces


(Shay
Shmeltzer
)


Introduction to ADF Faces



(Frank
Nimphius
)


ADF Faces Skinning



(
Sten

Vesterli
)


Oracle ADF Development Made Simple





Components & APPS

Fishbowl Solutions

Responsive Calendar

Calendario

(
jQuery
)


2 Break Points, Responsive

Desktop & Tablet (Landscape)

Tablet (Portrait)

Mobile

WebCenter

Adaptive

Desktop to
Iphone

Events Component

Mobile & Tablet ADF
Apps..

Where
does ADF Mobile fit?

Responsive Web App


Why do I need ADF Mobile?


ADF Mobile creates installable mobile apps


-

IOS and Android



Provides device access that a web browser cannot currently supply..
YET!!


Offline Access,
Syncronisation
, Camera, Upload, video, audio, GPS,
Contacts etc.



Fast mobile platform development framework via
jDev

Tablet, mobiles



Easy Web
-
Service integration
ie

REST API

“I’ve
Already Created a Responsive ADF
App can I pull it easily into ADF
Mobile?”



Not Really..
B
ut you can try this..


1.
Create an
iframe

within ADF Mobile,
phonegap
.

2.
Point
iFrame

to your ADF App.

3.
Use
javascript

to communicate to
phonegap

app to use device
features
ie

if (
phonegap
) then enable upload form etc..


-

Leveraging phonegap.js

Mobile
-

Hybrid App

Phonegap

(Cordova) to ADF Mobile


Hybrid App Development (HTML5)

-

Enables single source mobile & tablet application development.

-

Providing better performance and access to device features

---
(Camera, GPS, Contacts)



ADF Mobile

(Only Support Android, IOS)


PhoneGap

(Cordova)

(Supports Win7/8 Android, IOS, RIM etc..)



What’s Better you can use Responsive design!


Create 1 app for multiple device support / resolution



Oracle Mobile Applications

Quick POC Delivery


Contact

Us

web:


fishbowlsolutions.com

email:


sales@fishbowlsolutions.com

phone:

+
1.952.465.3400

blog:


cfour.fishbowlsolutions.com



Stay

Connected

twitter:

@
FishbowlE20, @
JRSim_UIX

facebook
:
facebook.com/
fishbowlsolutions


linkedIn
:

join
our groups



webcenter

content &
webcenter

portal

vimeo
:

fishbowl
solutions

youtube
:

fishbowlsolutions