More Related Content
Similar to SharePoint on mobile - Responsive Design
Similar to SharePoint on mobile - Responsive Design (20)
SharePoint on mobile - Responsive Design
- 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
- 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
- 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