Drive Better SharePoint 2013 Mobile Solutions with Responsive Design

SharePoint 2013 and Responsive Design: Engage Your Mobile

Audience

Rich Wood • 8/28/13

Our Microsoft Practice

SharePoint Expertise

Member, SharePoint Partner Advisory Committee (PAC)

Public websites delivered on SharePoint 2013: Responsive, Search-driven

Intranets delivered on-premise or with SharePoint Online 500+ SharePoint projects

520,000+ hours of SharePoint experience

40,000 monthly blog hits

Hired by Microsoft to Build SharePoint 2010 Demo for Technology Demo Centers Worldwide

Early Access to Software and Training via Product Group Relationships and Technology Adoption Program

Defined Competencies in Infrastructure, Development, Design, and Strategy

Strong Partnerships with NewsGator, Telligent, Nintex, K2, AvePoint, and Metalogix

4

Rich Wood

Director, Web & Social Collaboration Practice, Perficient

Rich has been planning, designing, and building enterprise solutions for intranets, extranets, and public internet sites since 1997. A veteran of both the SharePoint partner community and Microsoft itself, Rich has deep experience in information architecture, user experience, social collaboration, and enterprise architecture and technology strategy.

Our Speaker

• You can do that? • What about native

apps? • Collaboration,

social, BI, WCM… how and when?

• 2013 = Easier!• SharePoint can

break your design• Cost is a factor• Consider the ribbon

• Public Internet sites• All sites shown are

live!• You can do

Intranets, too• Q&A

Agenda

Responsive SharePoint? Best Practices Real, Live Examples!

Responsive Design & SharePointWhat, Why and When?

What is Responsive Design?

“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).”

In Other Words…

• Works well across browsers and form factorso Desktop, tablet, phoneo IE, Safari, Chrome

• Resizing, scrolling, panning et cetera is minimized: Less pinching and expanding

• Navigation is easy

The Big Question

Responsive Design (i.e., “HTML 5”) vs. Native Mobile Apps

Microsoft Provides Native Apps

• Yammer (WinPhone, iOS, Android)• Office 365 (WinPhone, iOS, Android)• SharePoint Newsfeed (WinPhone, iOS)• OneNote (WinPhone, iOS)

When to Choose?

Native Apps Responsive Design

Document Collaboration

Native Apps Responsive Design

Document Collaboration

Social Business

When to Choose?

Native Apps Responsive Design

Document Collaboration

Web Content Management

Social Business

When to Choose?

Native Apps Responsive Design

Document Collaboration

Web Content Management

Social Business

Reporting (Business

Intelligence)

When to Choose?

Best PracticesWhat We’ve Learned About Doing it Right

Okay, but SharePoint?

SharePoint offers some useful out-of-the-box tools for responsive designs and web content management (WCM):

• Variations• Device channels• Content by search

Okay, but SharePoint?

SharePoint offers some useful out-of-the-box (“OOB”) tools for responsive designs and web content management (WCM):

• Variations• Device channels• Content by Search

Generally, this isn’t enough for most designs. Thankfully…

Key Findings: #1

Incorporating a responsive design is easier in SharePoint 2013 than in previous versions.

Incorporating a responsive design is easier in SharePoint 2013 than in previous versions.

Why? HTML 5, cloud-friendly architecture = client-side friendly.

Key Findings: #1

“The FrontPage Effect”:

As SharePoint adds its own HTML elements during rendering, if the responsive design is not flexible, it will break.

Key Findings: #2

Responsive design can quickly get expensive depending upon:

Key Findings: #3

Responsive design can quickly get expensive depending upon:

• Which browsers need to be supported

Key Findings: #3

Responsive design can quickly get expensive depending upon:

• Which browsers need to be supported• The design itself (animations, parallax scrolling, etc.)

Key Findings: #3

Responsive design can quickly get expensive depending upon:

• Which browsers need to be supported• The design itself (animations, parallax scrolling, etc.)• Device sizes (iPad, iPad mini, iPhone, etc.)

Key Findings: #3

Collaborating? Think about how the ribbon elements will merge with the design if it’s an authenticated site (i.e., requiring login – most intranet and extranet scenarios) versus an anonymous site (many public internet sites).

Key Findings: #4

Example Responsive DesignsPC / Internet Explorer, iPad (Safari iOS),

Windows Phone

• All sites shown designed & delivered by Perficient teams

• All sites shown are in the public domain – no intranets (although we have some…)

• All sites shown from multiple form factors

• All images shown are actual screenshots of live websites captured over the interneto No visual compso No dev/testo No mockups

Responsive Design Examples

Marshfield ClinicTopSharePoint.com “Site of the Month” – March 2013

Group Health CareTopSharePoint.com “Site of the Month” – April 2013

UTC Aerospace Systems

Customized Microsoft Training for IT Pros & End Usersbit.ly/1cy8WV5

Win an Xbox One!perficient.com/sharepointxbox

Our Microsoft blogblogs.perficient.com/microsoft

9.25 Webinar:Understanding Identity Management with Office 365bit.ly/1fhfc0y

9.11 Webinar:Preparing for BI in the Cloud with Windows Azure

bit.ly/19IIqay

Connect with Perficient

• Founded in 1997

• Public, NASDAQ: PRFT

• 2012 revenue of $327 million

• Major market locations throughout North America• Atlanta, Austin, Boston, Charlotte, Chicago, Cincinnati, Cleveland, Columbus, Dallas,

Denver, Detroit, Fairfax, Houston, Indianapolis, Minneapolis, New Orleans, New York City, Northern California, Philadelphia, Southern California, St. Louis, Toronto, Washington, DC

• Global delivery centers in China, Europe and India

• ~2,000 colleagues

• Dedicated solution practices

• ~85% repeat business rate

• Alliance partnerships with major technology vendors

• Multiple vendor/industry technology and growth awards

Perficient Profile

Business Solutions• Business Intelligence• Business Process Management• Customer Experience and CRM• Enterprise Performance

Management• Enterprise Resource Planning• Experience Design (XD)• Management Consulting

Technology Solutions• Business Integration/SOA• Cloud Services• Commerce• Content Management• Custom Application Development• Education• Information Management• Mobile Platforms• Platform Integration• Portal & Social

Our Solutions Expertise

Perficient is a leading information technology consulting firm serving clients

throughout North America.

We help clients implement business-driven technology solutions that integrate

business processes, improve worker productivity, increase customer loyalty and

create a more agile enterprise to better respond to new business opportunities.

About Perficient