#C

14

LV

REMINDER

Check in on the COLLABORATE mobile app

#C

14

LV

RESPONSIVE DESIGN

Dmitri Khanine

Sr. ArchitectECM Solutionshttp://ECMSolutions.ca

Achieving peak user productivity, scalability and awesome response time in Web Center Content

#C

14

LV

2

Welcome to Session 606!

■ Responsive Design▪ What is it

▪ Principles

▪ How to use with WebCenter

■ Information Architecture▪ What is it

▪ Principles

▪ How to use with WebCenter

■ User Experience ▪ Case Study

#C

14

LV

3

Responsive Design

■ What does it mean?

▪ Is this the design that responds to user needs?

▪ Or it assures fast response times?

▪ Or it’s a variant of Ajax?

#C

14

LV

4

What is Responsive Design?

■ It’s an approach to designing HTML apps that work well on a variety of different screens

#C

14

LV

5

Responsive Design - Introduction

■ It’s an approach, not a technology■ Also known as “Responsive Design Principles or RDP”

■ Ever growing number of implementations

■ Makes Sense!

■ Often contrasted to Adaptive Web Design

#C

14

LV

6

Adaptive vs. Responsive

■ Adaptive = mobile + desktop

▪ Browser Detection is key

▪ Mobile site fits mobile

▪ Desktop site fits desktop

■ Responsive = one site that responds to it’s environment

▪ Screen Size is key

▪ Works well on all devices

#C

14

LV

7

Adaptive Design - Demo

■ Mobile Site on a tablet:

#C

14

LV

8

Adaptive Design – Demo (contd.)

■ Desktop site on a phone:

#C

14

LV

9

Responsive Design - Demo

■ Jyske Bank – Denmark:

Phone Tablet Desktop

#C

14

LV

10

Key Principles

■ Key Principles of RDP:

#C

14

LV

11

Browser as the reason for the design

■ “Stop Thinking in Pages. Start Thinking in Systems.”

Jeremy Keith

▪ Start with the needs of each browser— Mobile

— Tablet

— Desktop

▪ Factor in connection speeds and scripting abilities

#C

14

LV

12

‘Mobile First’ principle

■ Why?▪ 28% of all traffic in 2013 was mobile

■ Design your mobile experience first■ Add new elements as capabilities increase

#C

14

LV

13

Progressive Enhancement Principle

■ Start with ‘Mobile First’■ Add features and elements as capabilities increase■ Think ‘Break Points’ – screen sizes where you add

functionality

#C

14

LV

14

Break Points Example

■ Jyske Bank’ Site

▪ Product Buttons are replaced by the product shelf at 450px

▪ Left feature on the top is added at 500px

▪ Search box replaces the search button at 750 px,

▪ Feature image is added at 850 px,

▪ Full top menu replaces a menu button at 550px,

▪ Two lines of Product Shelf joins into one at 1000 px

#C

14

LV

15

Break Points Example (contd.)

#C

14

LV

16

Graceful Degradation Principle

■ Opposite of Progressive Enhancement

■ Starts with your Desktop Site and takes away features to make it work on smaller screens

▪ Resize, reposition, hide or replace heavy graphics and JavaScript

■ Important features may disappear as User Experience is designed based on desktop capabilities

#C

14

LV

17

Graceful Degradation Principle - Example

#C

14

LV

18

The Fluid Grid

■ Use percentage sizing instead of pixels

■ No tables used for layout▪ Use CSS positioned DIVs

■ Do not use absolute positioning. Use CSS float instead

#C

14

LV

19

Media Queries

■ CSS construct that allows page to adjust to the type of output device

▪ Hide background and some graphics when printing

▪ Resize objects based on screen size

■ @media screen and (max-width: 480px){ .header { background:

url('img/bkg_small.jpg');} }

■ @media screen and (min-width: 481px) and (max-width: 600px)

{ .header{ background: url('img/bkg_med.jpg');} }

■ @media screen and (min-width: 601px){ .header{ background:

url('img/bkg_lg.jpg');} }

#C

14

LV

20

Client – Server Interaction

■ Hiding objects with CSS will not make the page load faster

▪ To tailor page to screen size use cookies or Ajax calls to set session values

#C

14

LV

21

Using RDP with WebCenter

Practical insights and Observations

Practical insights and Observations

#C

14

LV

22

WebCenter Sites Mobility Server

■ Automatically formatting your site's content to fit the end user's device

#C

14

LV

23

Digital Asset Manager (DAM)

■ Automatically generate various resolution sets for all types of images

■ Have them ready for use in your design

■ Video Manager converts videos to streaming format▪ Generates storyboard thumbnails

#C

14

LV

24

RDP with ADF

■ Can be tricky as ADF is driven by custom tags▪ Custom tags controlled by rederkit

■ Check out John Sim’s template for using Fluid Grid with ADFL

▪ Google for “Fishbowl Responsive Design”

(http://cfour.fishbowlsolutions.com/2012/08/16/webcenter-portal-spaces-boilerplate-template-and-guide-to-responsive-design/ )

#C

14

LV

25

RDP with Site Studio

■ No serious limitations on your code

■ Do not to use Design Mode in Site Studio Designer as it may break your code

#C

14

LV

26

Basic Principles of

Information Architecture

#C

14

LV

27

Information Architecture (IA)

■ Deals with the structure of information

■ Before designing IA answer these questions:

▪ What types of information assets are you managing

▪ What are your high level Use Cases

#C

14

LV

28

Basic Principles

#C

14

LV

29

Affinity to Growth

■ Design so it will continue to work when your content multiplies by factor of 10 and more

▪ Cost of storage goes down

▪ More content comes in then gets disposed

#C

14

LV

30

Content as an Object

■ Content is a living thing▪ Lifecycle – expiry, seasonal etc

▪ Attributes

■ Think content types and relationships

#C

14

LV

31

The choice dilemma

■ Large number of choices make it hard for us to decide

■ (Small, focused lists are the answer)

#C

14

LV

32

Gradual Disclosure

■ Only show enough information for people to understand what comes next and make a decision

■ Think layers▪ Start with a list of short descriptions

or snippets

▪ These will lead to the item

■ Google is a perfect example

#C

14

LV

33

Show by example

■ "Describe the content of categories by showing examples of content“

Dan Brown

#C

14

LV

34

Arbitrary point of entry

■ Assume that 50% of your visitors will NOT use your home page

▪ Your site template have all required navigation

▪ Every page needs to show what other content is also available

■ Home page should not be the do all page▪ Focus on welcoming and properly introducing new users

#C

14

LV

35

DIVERSE CLASSIFICATION

■ People use different ways when they’re looking for information

▪ Gmail has moved away from folders and uses labels

▪ Think online store – browse by size, color and type.

■ Taken too far - may overwhelm and confuse your users

#C

14

LV

36

Rethink your nav

■ Most shops refer to navigation elements by location▪ Names like Top Nav, Left Nav make you miss the purpose

▪ Try using

— ‘Department Nav’ instead of the ‘Top Nav’

— ‘Topic Nav’ instead of the ‘Left Nav’

#C

14

LV

37

User Experience Management

#C

14

LV

38

User Experience Management (UEM)

■ An overarching topic – including

▪ Information Architecture

▪ Your design

▪ Information flows

▪ Usability

■ Start with your Use Cases!

#C

14

LV

39

Case Study: Improving User Experience with Oracle Content Server ■ Content Server UI is a frequent target for end user

complaints...

#C

14

LV

40

Our findings

■ We began by studying Use Cases

▪ Main information flow:

Search > Content Information > Document Preview

■ Main problem – a lot of waiting:▪ Click on the link and wait

▪ Then go back and wait for results to load again

▪ Find the row you just clicked on and click on the next one

#C

14

LV

41

Screen Layout

■ Use of screen real estate can be greatly improved▪ 20 rows per screen and nothing else:

#C

14

LV

42

Pagination

■ May work well on a web site, but problematic in a web app

▪ Going to the next page involves waiting.

▪ Mass update operations that span multiple pages have to be performed multiple times (for each page)

▪ Risk of error – as you have to repeat update instructions for every page

#C

14

LV

43

New UI

■ More information on the screen means less waiting:

#C

14

LV

44

New features

■ Seamless scroll with lazy load■ Almost twice as many rows on the screen without feeling

crowded■ Document Preview and Content Information without leaving

Search Results

#C

14

LV

45

Checkboxes – be gone!

■ Windows style selection:▪ Ctrl and Shift allows multiple selection

#C

14

LV

46

Context Sensitive Menus

■ Context Menu changes based on the number of items and type of items selected:

#C

14

LV

47

Iteratively refinement of search criteria:

■ Allows users to tweak their criteria without leaving the form:

#C

14

LV

48

New Content Server Web UI

■ Why didn’t we use the new Web UI?▪ Web UI requires 11g

▪ Project took place before Web UI was available

▪ Our UI still works better for the type of information they managing:

#C

14

LV

49

Conclusion

#C

14

LV

50

Conclusion

■ Mobile browsing becomes mainstream

▪ Consider using Responsive Design on your sites

▪ Information Architecture becomes more critical as amounts of information grows

▪ Think Use Cases and Information Flows before designing your site or your web app

#C

14

LV

51

About Us

■ ECM Solutions does▪ Oracle WebCenter Implementation, Support and Training

■ We also▪ Help you “Awe Your Business Users” with Dynamic User

Interfaces

■ Check www.ecmsolutions.ca for real life user stories

#C

14

LV#

C1

4LV

Please complete the session evaluation on the mobile appWe appreciate your feedback and insight

This box will have simplified instructions about how to complete the session evaluation online

#C

14

LV

53

THANK YOU!

info@ECMSolutions.ca