Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
SharePoint on mobile - Responsive Design
-
Upload
karthik-ramamoorthy -
Category
Technology
-
view
273 -
download
0
Transcript of SharePoint on mobile - Responsive Design
![Page 1: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/1.jpg)
© Greystone Solutions, Incorporated
Boston, MA
Greystone SolutionsMicrosoft SPC 2014 Highlights
SharePoint on Mobile
April 9, 2014
![Page 2: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/2.jpg)
© Greystone Solutions, Incorporated
Karthik Ramamoorthy
1
• Senior Consultant, Greystone Solutions
• @spbreed
• http://spbreed.wordpress.com/
• MCTS,MCDS, MCP
![Page 3: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/3.jpg)
© Greystone Solutions, Incorporated
Why Mobile?
2
![Page 4: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/4.jpg)
© 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
![Page 5: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/5.jpg)
© 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
![Page 6: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/6.jpg)
© 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
![Page 7: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/7.jpg)
© 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
![Page 8: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/8.jpg)
© 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
feature7
A Design methodology that aims at controlling
web page rendering based on screen size and
platform orientation
![Page 9: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/9.jpg)
© Greystone Solutions, Incorporated
8
![Page 10: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/10.jpg)
© Greystone Solutions, Incorporated
RWD - Why use it?
• Considerations:
• More efficient UX
• Familiar user experience
• Better performance
• Easy maintenance
9
![Page 11: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/11.jpg)
© 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 future10
Desktop First Design
Mobile First Design
![Page 12: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/12.jpg)
© Greystone Solutions, Incorporated
RWD – What you need to get started?
• Technology Concepts:
Fluid Grid
Media queries
Flexible Media
11
Fluid GridFlexible media
Media Queries
![Page 13: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/13.jpg)
© Greystone Solutions, Incorporated
• HTML prototypes
12
RWD – Build your own site
Navigation
Search
Page Title
Logo
Footer
Ribbon
![Page 14: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/14.jpg)
© 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
![Page 15: SharePoint on mobile - Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022060121/559468951a28ab23118b45ac/html5/thumbnails/15.jpg)
© Greystone Solutions, Incorporated
Thank You!
Questions??
14