Post on 29-Jul-2015
transcript
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
P R O V O K E S O L U T I O N S
P R O V O K E S O L U T I O N S
What is responsive design?
P R O V O K E S O L U T I O N S
What is adaptive design?
P R O V O K E S O L U T I O N S
Why build responsively?
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
P R O V O K E S O L U T I O N S
Designing it
P R O V O K E S O L U T I O N S
Building It: FED
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
P R O V O K E S O L U T I O N S
Grid Based Layout
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>
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
Grid classes nested
<div class="col-lg-8"><div class="col-lg-12"></div>
</div> <div class="col-lg-4"></div>
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
P R O V O K E S O L U T I O N S
Device Channels
P R O V O K E S O L U T I O N S
Image Renditions
http://jsfiddle.net/CodingCockatoo/080zp3g9/
P R O V O K E S O L U T I O N S
Main Demo
P R O V O K E S O L U T I O N S
CHALLENGES
What are the challenges?
Things to remember
P R O V O K E S O L U T I O N S
Q&ATIME FOR YOUR QUESTIONS
P R O V O K E S O L U T I O N S
RESOURCES
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
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
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/