Mobile technology is expanding, and many marketing and IT organizations are working to catch up with their customers’ mobile demands. Customers expect to download your app, login, submit their order, deposit a check or even schedule their yoga sessions -- all while picking their kids up after school or relaxing in the evenings. The consumer-driven nature of mobile leaves many companies struggling to develop, enhance and provide the functionality needed to compete in today’s environment. Liferay Portal is one of the most aggressive open source portals avilable. In this slideshare, we: Review top mobile developments Demonstrate why Liferay is a good open source option for portal development Identify the options available to bring your Liferay portal to life on mobile devices Review best practices for creating, supporting and deploying a full-mobile strategy

1. Going Mobile with Your Liferay Portal
June 12, 2014

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

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

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

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

6. Mobile Market

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

8. 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
21% Companies
plan to
implement
location
based
marketing2
27%

9. 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
21% Companies
plan to
implement
location
based
marketing2
27% Used mobile
web browser
to find
coupons &
deals3
53%

10. 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
21% Companies
plan to
implement
location
based
marketing2
27% Used mobile
web browser
to find
coupons &
deals3
53% Used mobile
web browser
to research
product
features
64%

11. 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
21% Companies
plan to
implement
location
based
marketing2
27% Used mobile
web browser
to find
coupons &
deals3
53% Used mobile
web browser
to research
product
features
64% Americans
bring their
phones to
the
bathroom4
75%

12. 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
21% Companies
plan to
implement
location
based
marketing2
27% Used mobile
web browser
to find
coupons &
deals3
53% Used mobile
web browser
to research
product
features
64% Americans
bring their
phones to
the
bathroom4
75% Adults have
their mobile
phones
within arms
reach 24/75
91%

13. Mobile Usage Growth

14. Mobile Apps

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

16. Mobile Options with Liferay

17. Mobile Options
Responsive
Web Design Mobile Web
Hybrid
Applications
Native
Applications MEAPS
S

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

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

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

21. Responsive Web Design
• Liferay Options
– Themeray
• Responsive themes built by Innotall GmbH
• Inspire, BizRay, PixelPress, BizNizz, & Beveled
• https://www.themeray.com
Responsive
Web Design
S

22. • 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
Mobile Web

23. • 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
Mobile Web

24. • 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
Mobile Web

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

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

27. Liferay Options
• HTML5, CSS3
• Liferay REST access to services
• Use Liferay content sharing
– Example:
Hybrid
Applications

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

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

30. MEAPs
• 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
MEAPS

31. Liferay Options
• Liferay REST services
• Liferay HTML 5
• Liferay SDK
• See Hybrid options
MEAPS

32. Where Are You?

33. 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
Web Design Mobile Web
Hybrid
Applications
Native
Applications MEAPS
S

34. 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
Web Design Mobile Web
Hybrid
Applications
Native
Applications MEAPS
S

35. Plan
Benchmark
Examine
Helping You Make the Right Choice
Evaluate
1
2
3
4
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

36. Partner Solutions Expertise Custom Development
Mobile Platform
Partnership
Mobile Marketplace Focus
& Track Emerging Leaders
Perficient’s Mobility Practice

37. As a reminder, please submit your
questions in the chat box
We will get to as many as possible

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

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