Upload
fabio-franzini
View
149
Download
0
Embed Size (px)
DESCRIPTION
Using SharePoint Publishing Features and Bootstrap to developing mobile solutions
Citation preview
SHAREPOINT E OFFICE 365 - OFF004 -Tecniche di sviluppo mobile per SharePoint
2013 e Office 365
Fabio Franzini – MVPPatrick Lamber - MVP
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
www.overneteducation.it
Tel. 02 365738
@overnet
www.facebook.com/OverNetEducation
www.linkedin.com/company/overnet-solutions