22
SHAREPOINT E OFFICE 365 - OFF004 - Tecniche di sviluppo mobile per SharePoint 2013 e Office 365 Fabio Franzini – MVP Patrick Lamber - MVP

tTecniche di sviluppo mobile per share point 2013 e office 365

Embed Size (px)

DESCRIPTION

Using SharePoint Publishing Features and Bootstrap to developing mobile solutions

Citation preview

Page 1: 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

Page 2: tTecniche di sviluppo mobile per share point 2013 e office 365

Fabio Franzini

@franzinifabiohttp://www.fabiofranzini.com

[email protected]

tb

m

Page 3: tTecniche di sviluppo mobile per share point 2013 e office 365

Patrick Lamber

@patricklamberhttp://patrick.nubo.eu

[email protected]

tb

m

Page 4: tTecniche di sviluppo mobile per share point 2013 e office 365

Agenda

• Mobile experience overview

• Contemporary view

• Publishing

• Publishing Infrastructure

• Device channels

• Image Renditions

• Bootstrap

• SharePoint Online with Bootstrap

• Recommendations

Page 5: tTecniche di sviluppo mobile per share point 2013 e office 365

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.

Page 6: tTecniche di sviluppo mobile per share point 2013 e office 365

Contemporary view and redirection

• Menu button

• Switch to PC View Navigation window

• Tap-to-open links

• Pagination

• New and edit functionality

Page 7: tTecniche di sviluppo mobile per share point 2013 e office 365

DEMO - Contemporary view

• See how the contemporary view looks like in SharePoint 2013

• See a responsive site sample and what the logic behind

Page 8: tTecniche di sviluppo mobile per share point 2013 e office 365

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.

Page 9: tTecniche di sviluppo mobile per share point 2013 e office 365

SharePoint Publishing Page Model

Page 10: tTecniche di sviluppo mobile per share point 2013 e office 365

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)

Page 11: tTecniche di sviluppo mobile per share point 2013 e office 365

Device channels

• Single publishing site

• Multiple designs

• Design specialization per device/agent string

Page 12: tTecniche di sviluppo mobile per share point 2013 e office 365

Image Renditions

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

Page 13: tTecniche di sviluppo mobile per share point 2013 e office 365

DEMO

• See Publishing Page Model

• See Device Channels in action

• See Image Renditions in SharePoint 2013

Page 14: tTecniche di sviluppo mobile per share point 2013 e office 365

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

Page 15: tTecniche di sviluppo mobile per share point 2013 e office 365

Bootstrap Intro

Page 16: tTecniche di sviluppo mobile per share point 2013 e office 365

Demo - Bootstrap

Page 17: tTecniche di sviluppo mobile per share point 2013 e office 365

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

Page 18: tTecniche di sviluppo mobile per share point 2013 e office 365

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

Page 19: tTecniche di sviluppo mobile per share point 2013 e office 365

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

Page 20: tTecniche di sviluppo mobile per share point 2013 e office 365

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)

Page 21: tTecniche di sviluppo mobile per share point 2013 e office 365

Q & A

Page 22: tTecniche di sviluppo mobile per share point 2013 e office 365

Contatti OverNet Education

OverNet Education

[email protected]

www.overneteducation.it

Tel. 02 365738

@overnet

www.facebook.com/OverNetEducation

www.linkedin.com/company/overnet-solutions