going mobile with your liferay portal
DESCRIPTION
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 strategyTRANSCRIPT
Going Mobile with Your Liferay Portal
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
21%
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%
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%
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%
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%
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%
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
S
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
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
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
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
• 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
• 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
• 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
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",
"[email protected]", "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
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
Liferay Options
• Liferay REST services
• Liferay HTML 5
• Liferay SDK
• See Hybrid options
MEAPS
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
Web Design Mobile Web
Hybrid
Applications
Native
Applications MEAPS
S
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
Plan
Benchmark
Examine
Helping You Make the Right Choice
Evaluate1
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
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.