Going Mobile with Your Liferay Portal

transcript

June 12, 2014

Perficient is a leading information technology consulting firm serving clients throughout

North America.

We help clients implement business-driven technology solutions that integrate business

processes, improve worker productivity, increase customer loyalty and create a more agile

enterprise to better respond to new business opportunities.

About Perficient

• Founded in 1997

• Public, NASDAQ: PRFT

• 2013 revenue $373 million

• Major market locations throughout North America

• Atlanta, Boston, Charlotte, Chicago, Cincinnati, Columbus,

Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis,

Los Angeles, Minneapolis, New Orleans, New York City,

Northern California, Philadelphia, Southern California,

St. Louis, Toronto and Washington, D.C.

• Global delivery centers in China, Europe and India

• >2,100 colleagues

• Dedicated solution practices

• ~85% repeat business rate

• Alliance partnerships with major technology vendors

• Multiple vendor/industry technology and growth awards

Perficient Profile

BUSINESS SOLUTIONS

Business Intelligence

Business Process Management

Customer Experience and CRM

Enterprise Performance Management

Enterprise Resource Planning

Experience Design (XD)

Management Consulting

TECHNOLOGY SOLUTIONS

Business Integration/SOA

Cloud Services

Commerce

Content Management

Custom Application Development

Education

Information Management

Mobile Platforms

Platform Integration

Portal & Social

Our Solutions Expertise

Mark Polly

Director, Portal, Social and Web Content CWP

@markapolly

• Mark Polly is Perficient's Director of Portal, Social and Web Content practice and

provides thought leadership and technology strategy engagements.

• Over the past 31 years, Mark has worked in a variety of roles within large companies

across many industries.

• He has spent the last 18 years consulting on portal, web content and social strategy.

• Mark is an active blogger on Perficient.com (www.perficient.com/portals) and has had

several articles published on IBM developerWorks.

Speaker

Mobile Market

Mobile Statistics

Sources:

1 Mobile Marketing Stats

2 Econsultancy, 2013

3 It’s official: Mobile devices surpass PCs in online retail

4 Digiday, 2013

5 infographic

US mobile phone users that use it as the primary device1

Mobile Statistics

Sources:

4 Digiday, 2013

5 infographic

21%Companies plan to implement location based marketing2

Mobile Statistics

Sources:

4 Digiday, 2013

5 infographic

27% Used mobile web browser to find coupons & deals3

Mobile Statistics

Sources:

4 Digiday, 2013

5 infographic

53%Used mobile web browser to research product features

Mobile Statistics

Sources:

4 Digiday, 2013

5 infographic

64% Americans bring their phones to the bathroom4

Mobile Statistics

Sources:

4 Digiday, 2013

5 infographic

64% Americans bring their phones to the bathroom4

75% Adults have their mobile phones within arms reach 24/75

Mobile Usage Growth

Mobile Apps

Mobile Experience

http://searchenginewatch.com/article/2343076/Marketers-Failing-Badly-on-Mobile-Specific-Landing-Pages-PPC-Ad-Copy-Report

Site Experience Mobile Tablet

Disappointed companies don’t have optimized site

44% 50%

Disappointed companies don’t have application 38% 47%

I’m less likely to re-visit brand’s site it it wasn’t optimized for my mobile device the first time I visited

38% 44%

Mobile Options with Liferay

Mobile Options

Responsive

Web Design Mobile Web

Hybrid

Applications

Native

Applications MEAPS

Responsive Web Design

• Works across desktop and mobile devices

• Layout adapts to the device form factor

• Uses proportional grids, CSS, flexible images

• Site responds with optimal layout plus optimal page elements

Responsive

Web Design

• Liferay Options

– Themes support Bootstrap in Liferay 6.2

– Portlet developers and Content Authors can use the Bootstrap

mark-up, styles and components.

– See for example: https://www.liferay.com/web/jorge.ferrer/blog/-

/blogs/new-in-6-2-bootstrap-even-in-web-content

• <table class="table table-striped table-bordered">

Responsive

Web Design

• Liferay Options

– Responsive Bootstrap Theme

• Based on Twitter Bootstrap follows 1-3 layout

• Liferay 6.1 CE GA2+

• Liferay Marketplace: http://www.liferay.com/marketplace/-

/mp/application/25164094

Responsive

Web Design

• Liferay Options

– Themeray

• Responsive themes built by Innotall GmbH

• Inspire, BizRay, PixelPress, BizNizz, & Beveled

• https://www.themeray.com

Responsive

Web Design

• Traditional web applications that are styled to specific

device form factors

– Example: m.bart.gov

– Device detection can used to redirect to specific sites

Mobile Web

device form factors

Mobile Web

device form factors

Mobile Web

• Liferay Options

– Fully supports HTML 5, CSS 3

– Out of the box theme is HTML 5

– HTML 5 Video, Viewport, etc

– REST Services

– Liferay supports device detection and rule management

• Rules Management Plug integrates with open source WURFL

• Rules include:

– Template modifications

– Theme modifications

– Simple redirects

– Site redirects

Mobile Web

Hybrid Applications

• Hybrid apps runs natively on the device, but are written in web

technologies like HTML5, CSS and Javascript)

• Container is loaded on the device and interacts with the mobile

device’s browser engine to retrieve and render HTML

• Container provides access to mobile device features like camera

and GPS for the web site

• Example frameworks: Cordova (PhoneGap) and TItanium

Hybrid

Applications

Liferay Options

• HTML5, CSS3

• Liferay REST access to services

• Use Liferay content sharing

– Example:

Hybrid

Applications

Native Applications

• Native apps are built in the device specific tooling

provided by the mobile device OS:

– iPhone – iOS – Cocoa/Objective C/Swift

– Android – Anroid OS – Java/Android SDK

• Takes full advantage of device capabilities

• Apps are downloaded from the App Stores

Native

Applications

Liferay Options

• Liferay Mobile SDK Introduced in 6.2

• Provide APIs to native apps to access Liferay features

– Authentication

– Services Directory

– JSON Parsing

– Server Error Handling

• Generates device specific code to access any remote portal

service

• Example:

Session session = new SessionImpl("http://localhost:8080",

"test@liferay.com", "test");

BlogsEntryService service = new BlogsEntryService(session);

JSONArray jsonArray = service.getGroupEntries(10184, 0, 0, -1, -1);

• Supports iOS and Android, but other platforms are planned for the

future

Native

Applications

• Mobile Enterprise Application Platform that typically include

management, development and deployment features

• Cross platform mobile deployment and management

• Abstract away device specific features so you develop once and

deploy to many devices

Liferay Options

• Liferay REST services

• Liferay HTML 5

• Liferay SDK

• See Hybrid options

Where Are You?

Mobile Development

http://www.clickz.com/clickz/column/2338846/the-natives-are-getting-restless-the-emergence-of-hybrid-web-apps-in-developing-mobile-experiences

Responsive

Hybrid

Applications

Native

Applications MEAPS

Mobile Development

http://www.clickz.com/clickz/column/2338846/the-natives-are-getting-restless-the-emergence-of-hybrid-web-apps-in-developing-mobile-experiences

Responsive

Hybrid

Applications

Native

Applications MEAPS

Benchmark

Examine

Helping You Make the Right Choice

Evaluate1

Evaluate your mobile needs and high level

requirements

Examine source systems and internal capabilities

Benchmark your requirements against the leading mobility solutions

Help you plan an enterprise mobile strategy

and identify the best solution for your business

Partner Solutions Expertise Custom Development

Mobile Platform Partnership

Mobile Marketplace Focus & Track Emerging Leaders

Perficient’s Mobility Practice

As a reminder, please submit your

questions in the chat box

We will get to as many as possible

Daily unique content

about content

management, user

experience, portals

and other enterprise

information technology

solutions across a

variety of industries.

Perficient.com/SocialMedia

Facebook.com/Perficient

Twitter.com/Perficient

Thank you for your participation today.Please fill out the survey at the close of this session.

Going Mobile with Your Liferay Portal

Technology