SharePoint can be customized to respond your customers and employees across multiple platforms and mobile devices using Responsive Web Design (RWD)

1. © Greystone Solutions, Incorporated
Boston, MA
Greystone Solutions
Microsoft SPC 2014 Highlights
SharePoint on Mobile
April 9, 2014

2. © Greystone Solutions, Incorporated
SharePoint 2013 Features
1

3. © Greystone Solutions, Incorporated
Office 365 Services
2
ProPlus
Exchange
Online
SharePoint
Online
Lync
Online
Project Pro
for Office 365
Project
Online
Power BI for
Office 365

4. © Greystone Solutions, Incorporated
SSRS, Analytics,
PerformancePoint
SharePoint online vs on-premises
(Feb 2013)
BI Excel Services, Power View, PowerPivot
SharePoint Online SharePoint 2013 Server
Deep refinement,
enhance relevancy
Search People/Expertise, hover card, enterprise search
Full-trust code, BCS+Developer Cloud app model, Sandbox, CSOM, BCS
Cross-site scripting,
content by search
Internet Public Website, Design Manager, apps/store
Central AdministrationAdmin Tenant-level, PowerShell, IRM, Recycle Bin
ECM /
Social
eDiscovery, Records Center, Site Mailbox, Mobile, Newsfeed, Follow, #, @
dot dot dot
3

5. © Greystone Solutions, Incorporated
A New Way to Compare
4

6. © Greystone Solutions, Incorporated
Content Search - Display Templates
5

7. © Greystone Solutions, Incorporated
Agenda
SharePoint on Mobile
Karthik Ramamoorthy
Greystone Senior Consultant
John Ferrari
Greystone Principal Consultant
Power BI
Richard Harbridge
Microsoft Partner Strategist
Carlos Leopoldo
Greystone Senior Consultant
Yammer
John Ferrari
Greystone Principal Consultant
6

8. © Greystone Solutions, Incorporated
Karthik Ramamoorthy
7
• Senior Consultant, Greystone Solutions
• @spbreed
• http://spbreed.wordpress.com/
• MCTS,MCDS, MCP

9. © Greystone Solutions, Incorporated
Why Mobile?
8

10. © Greystone Solutions, Incorporated
What SharePoint offers?
9
Features:
• Improved rendering across browsers and devices
• Improve page performance
• Support for videos and reports
SharePoint 2010SharePoint 2013
Optimized web pages for mobile browsers

11. © Greystone Solutions, Incorporated
What SharePoint offers?
10
Features:
• Out-of-the-box automatic setup
• Simple configuration
• Easily view data from small lists / libraries
Mobile Views

12. © Greystone Solutions, Incorporated
What SharePoint offers?
Device channels
11
Features:
• Target a specific design to a device
• Share content and page layouts across designs
• Highly customizable
Mobile View Tablet View

13. © Greystone Solutions, Incorporated
What SharePoint offers?
Mobile Apps
12
Features:
• Active marketplace
• Target device specific features
• Optimized for touch screens
SharePoint Newsfeed Office 365 - Calendar Office 365-Admin

14. © Greystone Solutions, Incorporated
Responsive Web Design (RWD)
• Began in 2010, gained a lot
of momentum in 2013.
• Microsoft has recognized
RWD as a good practice
• SharePoint development
platform aligns with RWD
• This is NOT a SharePoint
feature
13
A Design methodology that aims at controlling
web page rendering based on screen size and
platform orientation

15. © Greystone Solutions, Incorporated
14

16. © Greystone Solutions, Incorporated
RWD - Why use it?
• Considerations:
• More efficient UX
• Familiar user experience
• Better performance
• Easy maintenance
15

17. © Greystone Solutions, Incorporated
RWD – How to Design?
• Better performance at all
Connection speeds
• Rethinking information architecture
 Taxonomy,
 Content
 Search,
 Page-layouts
• Easier design decisions in the future
16
Desktop First Design
Mobile First Design

18. © Greystone Solutions, Incorporated
RWD – What you need to get started?
• Technology Concepts:
 Fluid Grid
 Media queries
 Flexible Media
17
Fluid Grid
Flexible media
Media Queries

19. © Greystone Solutions, Incorporated
• HTML prototypes
18
RWD – Build your own site
 Navigation
 Search
 Page Title
 Logo
 Footer
 Ribbon

20. © Greystone Solutions, Incorporated
RWD – Online Resources
• Codeplex
http://responsivesharepoint.codeplex.com
http://spblueprint.codeplex.com
• Opensource Frameworks
http://getbootstrap.com
https://code.google.com/p/css3-mediaqueries-js
http://modernizr.com
http://lessframework.com
• Browser tools
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
• Test your designs
http://mattkersley.com/responsive/
Quirktools.com/screenfly/
Screenqueri.es/
Responsinator.com/
19

21. © Greystone Solutions, Incorporated
Thank You!
Questions??
20