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

http://codepen.io/zavoloklom/pen/IGkDz

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/