SharePoint on mobile - Responsive Design

524 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
524
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SharePoint on mobile - Responsive Design

  1. 1. © Greystone Solutions, Incorporated Boston, MA Greystone Solutions Microsoft SPC 2014 Highlights SharePoint on Mobile April 9, 2014
  2. 2. © Greystone Solutions, Incorporated Karthik Ramamoorthy 1 • Senior Consultant, Greystone Solutions • @spbreed • http://spbreed.wordpress.com/ • MCTS,MCDS, MCP
  3. 3. © Greystone Solutions, Incorporated Why Mobile? 2
  4. 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. 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. 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. 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. 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. 9. © Greystone Solutions, Incorporated 8
  10. 10. © Greystone Solutions, Incorporated RWD - Why use it? • Considerations: • More efficient UX • Familiar user experience • Better performance • Easy maintenance 9
  11. 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. 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. 13. © Greystone Solutions, Incorporated • HTML prototypes 12 RWD – Build your own site  Navigation  Search  Page Title  Logo  Footer  Ribbon
  14. 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. 15. © Greystone Solutions, Incorporated Thank You! Questions?? 14

×