ESPC 14 - TH22 - Enhance SharePoint 2013 with Responsive Web Design
Responsive SharePoint
-
Upload
provokesolutions1 -
Category
Technology
-
view
284 -
download
0
Transcript of Responsive SharePoint
![Page 1: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/1.jpg)
PROUDLY BROUGHT TO YOU BY:
P R O V O K E S O L U T I O N s
Responsive SharePoint
Rebecca Gordon @BEXKELLEHERTechnical Specialist
Emma Woods @cODINGcOCKATOOFront End Developer
![Page 2: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/2.jpg)
P R O V O K E S O L U T I O N S
![Page 3: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/3.jpg)
P R O V O K E S O L U T I O N S
What is responsive design?
![Page 4: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/4.jpg)
P R O V O K E S O L U T I O N S
What is adaptive design?
![Page 5: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/5.jpg)
P R O V O K E S O L U T I O N S
Why build responsively?
![Page 6: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/6.jpg)
P R O V O K E S O L U T I O N S
0
10
20
30
40
50
60
70
80
90
Desktop Laptop MobilePhone
Tablet GameConsole
Smart TV
Device Internet Access – NZ 2013
World Internet Project 2013 – AUT University
![Page 7: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/7.jpg)
P R O V O K E S O L U T I O N S
Designing it
![Page 8: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/8.jpg)
![Page 9: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/9.jpg)
![Page 10: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/10.jpg)
![Page 11: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/11.jpg)
![Page 12: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/12.jpg)
![Page 13: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/13.jpg)
![Page 14: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/14.jpg)
![Page 16: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/16.jpg)
P R O V O K E S O L U T I O N S
Building It: FED
![Page 17: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/17.jpg)
![Page 18: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/18.jpg)
P R O V O K E S O L U T I O N S
Desktop1024px wide
Desktop800px wide
Tablet768px wide
Phone320px wide
Desktop1920px wide
Desktop1366px wide
Tablet768px wide
Phone480px wide
Resolution
![Page 19: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/19.jpg)
P R O V O K E S O L U T I O N S
Grid Based Layout
![Page 20: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/20.jpg)
Grid classes
<div class="col-sm-1 col-md-7 col-lg-8"></div> <div class="hidden-sm col-md-5 col-lg-4"></div>
![Page 21: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/21.jpg)
Classes to hide content
Small devices Medium devices Large devices
.hidden-sm Hidden Visible Visible
.hidden-md Visible Hidden Visible
.hidden-lg Visible Visible Hidden
![Page 22: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/22.jpg)
Grid classes nested
<div class="col-lg-8"><div class="col-lg-12"></div>
</div> <div class="col-lg-4"></div>
![Page 23: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/23.jpg)
P R O V O K E S O L U T I O N S
Building It: DEV
Warning, code samples may be incoming
![Page 24: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/24.jpg)
P R O V O K E S O L U T I O N S
Device Channels
![Page 25: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/25.jpg)
P R O V O K E S O L U T I O N S
Image Renditions
http://jsfiddle.net/CodingCockatoo/080zp3g9/
![Page 26: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/26.jpg)
P R O V O K E S O L U T I O N S
Main Demo
![Page 27: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/27.jpg)
P R O V O K E S O L U T I O N S
CHALLENGES
![Page 28: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/28.jpg)
What are the challenges?
![Page 29: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/29.jpg)
Things to remember
![Page 30: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/30.jpg)
P R O V O K E S O L U T I O N S
Q&ATIME FOR YOUR QUESTIONS
![Page 31: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/31.jpg)
P R O V O K E S O L U T I O N S
RESOURCES
![Page 32: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/32.jpg)
Design resources
SharePoint 2013 wireframe template from Flucidity:
http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-
template/
How to make responsive wireframes in Axure:
http://www.axure.com/learn/adaptive/tutorial
SharePoint online introduces the touch mobile experience:
http://blogs.office.com/2013/11/19/sharepoint-online-introduces-the-touch-
design-mobile-experience/
Design Manager image renditions:
http://msdn.microsoft.com/en-
us/library/office/jj720398(v=office.15).aspx#Create
![Page 33: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/33.jpg)
Development resources
Use JavaScript to show renditions on different devices (code by Provoke):
http://jsfiddle.net/CodingCockatoo/080zp3g9/
Use a mobile device to work with SharePoint online sites:
http://office.microsoft.com/en-us/office365-sharepoint-online-small-business-help/use-a-
mobile-device-to-work-with-sharepoint-online-sites-HA102891452.aspx
JavaScript injection code for master pages:
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.JavaScriptInjection
Bootstrap:
http://getbootstrap.com/
Mobile devices and SharePoint Server 2013:
http://technet.microsoft.com/en-US/library/fp161351(v=office.15).aspx
![Page 34: Responsive SharePoint](https://reader033.fdocuments.in/reader033/viewer/2022042602/55b80999bb61eb31748b476b/html5/thumbnails/34.jpg)
Testing resources
Windows phone emulator:
http://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx
Mozilla:
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
MattKersley.com:
http://mattkersley.com/responsive/
Screenqueri (Works in all browsers):
Screenqueri.es/
Quirktools (Works on Firefox and Chrome only):
Quirktools.com/screenfly/