This document discusses responsive design for SharePoint 2013. It provides an overview of responsive design and why it is important given the rise of mobile usage. It then discusses how SharePoint 2013 can be made responsive and provides a case study of a company that implemented a responsive intranet on SharePoint. Key lessons learned include starting with user scenarios, focusing on return on investment from increased productivity, testing across devices and browsers, using existing responsive frameworks, and ensuring content quality.

1. RESPONSIVE DESIGN IN SHAREPOINT
2013
Session
sponsored
by
A Case Study of an Intranet

2. A LITTLE ABOUT ME
Microsoft Certified Professional in SharePoint
Business Technology Director for Buildingi (and SharePoint addict)
Costa Rican transplanted to WA a year ago
Coding for more than 10 years in a bit of everything
Enthusiastic but bad golfer
Roberto Yglesias
@robertoy
v-roygle@microsoft.com
2

3. TODAY
Responsive design & SharePoint
Case study and live demo
Best practices and resources
Questions
3

4. SO, WHAT IS RESPONSIVE DESIGN?
Design once, view everywhere - same site, code and content for every device
1. A flexible, grid-based layout
2. Flexible images and media
3. Media Queries
4

5. WHY RESPONSIVE DESIGN?
• 91% of US citizens have a mobile device within reach 24/7 and check phones an
average of 150x a day
• 90% of people use multiple screens to access the web
• 90% of smartphone searches result in a purchase or a visit to a business
• 61% of visitors will return to a search engine to find a site that IS easily readable
43% of the US workforce will work from home by 2016
Sources:
Global Mobile Statistics 2012 Home: http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats
Forrester Research “Understanding Responsive Design”: http://www.forrester.com/Understanding+Responsive+Design/fulltext/-/E-RES74481
Forrester Research US Telecommuting Forecast 2009-2016: http://www.forrester.com/US+Telecommuting+Forecast+2009+To+2016/fulltext/-/E-RES46635
Web Performance Today “Mobile vs. Desktop”: http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
SEO MOZ “The SEO of Responsive Web Design”: http://www.seomoz.org/blog/seo-of-responsive
5

6. SHAREPOINT CAN BE RESPONSIVE!
• Is SP 2013 better than SP 2010? Absolutely!
• Device Channels are awesome, right? Yes and No
• Is Mobile View the solution? Not really…
vs
6

7. CLIENT: MACDONALD MILLER
Summary: MacDonald Miller, an HVAC Systems
Contractor and Service Center, asked Buildingi to
help enhance their overall collaboration, including
building a new intranet on SharePoint.
Services provided:
• SharePoint 2013 Installation & Architecture
• Social media integration (Yammer)
• Mobile and tablet optimization
• Brand look and feel
• Workflow automation
• Data integration
• User experience
• Information architecture
• Custom app development
7

8. THE TWO APPROACHES
Graceful Degradation
Progressive Enhancement
8

9. DEMO TIME!
9

10. LESSONS LEARNED: IT’S ALL ABOUT YOUR USERS
• Start by understanding your users and how they interact with the site
• Scenario-based: What are your users going to do from each device?
• Design for the real world. No one writes a 60 page document on a phone!
10

11. LESSONS LEARNED: FOCUS ON ROI
Responsively designed SP intranets can be expensive in the short run, but a great
savings in the long run
• Increased productivity and collaboration
• Information exchange via enterprise social networking and collaboration sites
• Access to critical information when you need it
A 2% increase in productivity can equate to a
100% ROI when comparing staff returns to system costs
Source: Lee-Sia, ElcomCMS, Tips for planning an Intranet Project, March 13, 2013
11

12. LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS
12

13. LESSONS LEARNED: TEST, TEST, TEST
TEST
13

14. LESSONS LEARNED: THINK ABOUT TOUCH
• Don’t create hover-over experiences
• Use large enough click points
14

15. LESSONS LEARNED: DON’T RE-INVENT THE WHEEL
• Leverage all the libraries available
• jQuery
• Respond.js
• Normalize.css
• Use already-built responsive frameworks
15

16. LESSONS LEARNED: SP FUNCTIONALITY
• There’s a reason over 70% of enterprise intranets run on SharePoint
• Core features like libraries and lists support collaboration and knowledge sharing
16

17. REMEMBER…CONTENT IS KING
• A site is only as good as its content!
• Don’t overrun full screen experience with unnecessary information, images, video, etc.
17

18. WHAT COMES AFTER LAUNCH?
• Check your web analytics
• Stay up on device channels
• Leverage mobile platforms more (APIs, etc.)
ALWAYS BE OPTIMIZING !
18

19. RESOURCES
•Can I Use
•Html5shim
•Twitter Bootstrap
•HTML5 Boilerplate
•jQuery
•Foundation (Zurb)
•Normalize.css
•Skeleton
•Respond.js
•Modernizr
•Other Responsive Frameworks
19

20. Q&A
Roberto Yglesias
@robertoy
v-roygle@Microsoft.com
www.buildingi.com
20