responsive design in sp seminar buildingi 20130918

RESPONSIVE DESIGN IN SHAREPOINT 2013

A Case Study of an Intranet

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

roberto.yglesias@buildingi.com

2

BUILDING SNAPSHOT

Technical services consulting firm, serving clients since 1994

Deep expertise in SharePoint/Office365 and IWMS/CAFM

Over 65 employees

Buildingi Bellevue

Buildingi DC

Buildingi Costa Rica

BuildingiAtlanta

3

SERVICES

Business Technology Expertise

• SharePoint Design, Implementation & Services

• Enterprise Content Management

• eDiscovery

• Information Governance

• Records Management

• Shared Drive Optimization

• Data Migration

• Complex System Integrations

Workplace Technology Expertise

• Corporate Real Estate Portfolio Technologies

• Space Utilization Management

• CAD / CAFM / IWMS Solutions

• Vendor Collaboration & Oversight Communities

• Business Intelligence Reporting

• Database Management & Analytics

• Enterprise Data Systems Integration

• Change Management / Rollout Success

4

TODAY

Responsive design & SharePoint

Case study and live demo

Best practices and resources

Questions

5

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

6

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 Google to find a site that IS easily readable

Sources:Global Mobile Statistics 2012 Home: http://mobithinking.com/mobile-marketing-tools/latest-mobile-statsForrester Research “Understanding Responsive Design”: http://www.forrester.com/Understanding+Responsive+Design/fulltext/-/E-RES74481Forrester Research US Telecommuting Forecast 2009-2016: http://www.forrester.com/US+Telecommuting+Forecast+2009+To+2016/fulltext/-/E-RES46635Web 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

43% of the US workforce will work from home by 2016

7

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…

8

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

9

THE TWO APPROACHES

Graceful Degradation

Progressive Enhancement

10

DEMO TIME!

11

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!

12

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

13

LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS

Check http://caniuse.com/

Do feature detection

14

LESSONS LEARNED: TEST, TEST, TEST

TEST15

LESSONS LEARNED: THINK ABOUT TOUCH

• Don’t create hover-over experiences

• Use large enough click points

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

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.

18

WHAT COMES AFTER LAUNCH?

• Check your web analytics

• Stay up on device channels

• Leverage mobile platforms more (APIs, etc.)

ALWAYS BE OPTIMIZING !

19

RESOURCES

•Can I Use

•Twitter Bootstrap

•jQuery

•Normalize.css

•Respond.js

•Other Responsive Frameworks

•Html5shim

•HTML5 Boilerplate

•Foundation (Zurb)

•Skeleton

•Modernizr

20

Roberto Yglesias@robertoy

roberto.yglesias@buildingi.comwww.buildingi.com

Q&A

21