SharePoint on mobile - Responsive Design

© Greystone Solutions, Incorporated

Boston, MA

Greystone SolutionsMicrosoft SPC 2014 Highlights

SharePoint on Mobile

April 9, 2014


Karthik Ramamoorthy

1

• Senior Consultant, Greystone Solutions

• @spbreed

• http://spbreed.wordpress.com/

• MCTS,MCDS, MCP


Why Mobile?

2


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


What SharePoint offers?

4

Features:

• Out-of-the-box automatic setup

• Simple configuration

• Easily view data from small lists / libraries

Mobile Views


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


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


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


8


RWD - Why use it?

• Considerations:

• More efficient UX

• Familiar user experience

• Better performance

• Easy maintenance

9


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


RWD – What you need to get started?

• Technology Concepts:

Fluid Grid

Media queries

Flexible Media

11

Fluid GridFlexible media

Media Queries


• HTML prototypes

12

RWD – Build your own site

Navigation

Search

Page Title

Logo

Footer

Ribbon


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


Thank You!

Questions??

14

SharePoint on mobile - Responsive Design

Technology

Transcript of SharePoint on mobile - Responsive Design