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

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

3. © Greystone Solutions, Incorporated
Why Mobile?
2

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

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

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

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

8. © 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
7
A Design methodology that aims at controlling
web page rendering based on screen size and
platform orientation

9. © Greystone Solutions, Incorporated
8

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

11. © 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
10
Desktop First Design
Mobile First Design

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

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

14. © 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/
13

15. © Greystone Solutions, Incorporated
Thank You!
Questions??
14