tTecniche di sviluppo mobile per share point 2013 e office 365

SHAREPOINT E OFFICE 365 - OFF004 -Tecniche di sviluppo mobile per SharePoint

2013 e Office 365

Fabio Franzini – MVPPatrick Lamber - MVP

Fabio Franzini

@franzinifabiohttp://www.fabiofranzini.com

fabio@fabiofranzini.com

tb

m

Patrick Lamber

@patricklamberhttp://patrick.nubo.eu

pl@nubo.eu

tb

m

Agenda

• Mobile experience overview

• Contemporary view

• Publishing

• Publishing Infrastructure

• Device channels

• Image Renditions

• Bootstrap

• SharePoint Online with Bootstrap

• Recommendations

SP 2013 Mobile browsing experienceContemporary view Full screen UIClassic view

Optimized mobile

browser experience to

users and renders in

HTML5.

WP 7.5, iOS 5.0, Android

4.0

Backward compatibility

for mobile browsers that

cannot render

contemporary view.

Same mobile experience

as in SharePoint 2010

Full desktop view for

smartphone devices.

Device Channels

Full desktop view for

smartphone devices.

Contemporary view and redirection

• Menu button

• Switch to PC View Navigation window

• Tap-to-open links

• Pagination

• New and edit functionality

DEMO - Contemporary view

• See how the contemporary view looks like in SharePoint 2013

• See a responsive site sample and what the logic behind

SP 2013 Mobile browsing experienceContemporary view Full screen UIClassic view

Optimized mobile

browser experience to

users and renders in

HTML5.

WP 7.5, iOS 5.0, Android

4.0

Backward compatibility

for mobile browsers that

cannot render

contemporary view.

Same mobile experience

as in SharePoint 2010

Full desktop view for

smartphone devices.

Device Channels

Full desktop view for

smartphone devices.

SharePoint Publishing Page Model

Device Channels

• Control experience based on user agent string, e.g.:

• Differentiated design with separate Master Pages

• E.g., account for different screen resolutions

• Targeted content with Device Channel Panels

• E.g., show a special deal to mobile customers

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0;

Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

Device channels

• Single publishing site

• Multiple designs

• Design specialization per device/agent string

Image Renditions

• Multiple sizes, aspect ratios, and crops in just one image!

DEMO

• See Publishing Page Model

• See Device Channels in action

• See Image Renditions in SharePoint 2013

But wait… Responsive web design?

• A RDW site adapts it’s layout to the viewing environment.

• Techniques used• Fluid grid layout

• CSS3 media queries

• Frameworks• Responsive Grid System

• Titan Framework

• Foundation 3

• Bootstrap

• HTML4 Boilerplate

Bootstrap Intro

Demo - Bootstrap

When should I use which technique?Device Channels

Good for a smartphone

base without UI

customization

requirements

Backward

compatibility???

Full desktop view for

smartphone devices.

Markup manipulation is

the key. Publishing sites

only!

Improve with RWD

Contemporary view Full screen UIClassic view

Demo

• Create a minimal master

• Create a pills page layout

• Add CSS and JS resources to the SharePoint Online site

• Associate the resources to the masterpage and page layout

• Create a support list for the pills locations

• Working with Display Templates

Recommendations

• Bootstrap/responsive design is not the holy grail

• Consider image renditions on different screens

• Use display templates and responsive design in hybrid

• Use already prepared solutions that implement responsive on SharePoint (e.g.: https://responsivesharepoint.codeplex.com/)

• Be prepared to get some support on future environments

Resources

• Overview of mobile devices and SharePoint Server 2013 (http://technet.microsoft.com/en-us/library/fp161351(v=office.15).aspx)

• Mobile device browsers supported in SharePoint 2013 (http://technet.microsoft.com/en-us/library/fp161353(v=office.15).aspx)

• Plan for mobile views in SharePoint 2013 (http://technet.microsoft.com/en-us/library/jj673030(v=office.15).aspx)

• Optimizing SharePoint 2013 websites for mobile devices (http://blogs.msdn.com/b/sharepointdev/archive/2013/05/07/optimizing-sharepoint-2013-websites-for-mobile-devices.aspx)

Q & A

Contatti OverNet Education

OverNet Education

info@overneteducation.it

www.overneteducation.it

Tel. 02 365738

@overnet

www.facebook.com/OverNetEducation

www.linkedin.com/company/overnet-solutions