A responsive web design presentation to Microsoft by Buildingi (Roberto Yglesias and Chad Lanphear.

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