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: Res...
4
Rich Wood
Director, Web & Social Collaboration Practice, Perficient
Rich has been planning, designing, and building ente...
• You can do that?
• What about native
apps?
• Collaboration,
social, BI, WCM…
how and when?
• 2013 = Easier!
• SharePoint...
Responsive Design & SharePoint
What, Why and When?
What is Responsive Design?
―Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an opt...
In Other Words…
• Works well across browsers and form factors
o Desktop, tablet, phone
o IE, Safari, Chrome
• Resizing, sc...
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 Newsfe...
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
Intelligen...
Best Practices
What 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...
Okay, but SharePoint?
SharePoint offers some useful out-of-the-box (―OOB‖) tools for
responsive designs and web content ma...
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 arch...
―The FrontPage Effect‖:
As SharePoint adds its own HTML elements during
rendering, if the responsive design is not flexibl...
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 (ani...
Responsive design can quickly get expensive depending upon:
• Which browsers need to be supported
• The design itself (ani...
Collaborating?
Think about how the ribbon elements will merge with the
design if it’s an authenticated site (i.e., requiri...
Example Responsive Designs
PC / 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 (alth...
Marshfield Clinic
TopSharePoint.com “Site of the Month” – March 2013
Group Health Care
TopSharePoint.com “Site of the Month” – April 2013
UTC Aerospace Systems
Customized
Microsoft
Training for IT
Pros & End
Users
bit.ly/1cy8WV5
Connect with Perficient
• Founded in 1997
• Public, NASDAQ: PRFT
• 2012 revenue of $327 million
• Major market locations throughout North America
...
Business Solutions
• Business Intelligence
• Business Process Management
• Customer Experience and CRM
• Enterprise Perfor...
Perficient is a leading information technology consulting firm serving clients
throughout North America.
We help clients i...
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Drive Better SharePoint 2013 Mobile Solutions with Responsive Design
Upcoming SlideShare
Loading in …5
×

Drive Better SharePoint 2013 Mobile Solutions with Responsive Design

3,477 views

Published on

With the explosion of smartphones and tablets in a post-PC landscape, the importance of mobility is evident. Mobile devices can differ tremendously, from screen size to functionality and usability, making it impossible to optimize a website for a single device. Given the mobile shift, companies are looking to develop and execute on strategies that provide a first-class experience for all devices.
How can SharePoint help? SharePoint is a powerful web content management platform – and it’s even better with the 2013 release. During the webinar, we demonstrated what can be accomplished using SharePoint 2013 and responsive web design. We also examined:
- What is responsive web design?
- SharePoint 2013’s WCM features
- Responsive web design & SharePoint
- Responsive SharePoint website examples

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Very nice presentation about SharePoint responsive.
    I'm also working with responsive branding for SharePoint, let me introduce our work, take a look at http://bindtuning.com/
    We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,477
On SlideShare
0
From Embeds
0
Number of Embeds
1,228
Actions
Shares
0
Downloads
42
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • UPDATE
  • Mention topsharepoint.com
  • The bottom line is, they’re both good! There are scenarios where each is superior
  • Spoke with my senior architects and this is what I found
  • Note what’s called “parallax scrolling”
  • http://bit.ly/1fhfc0yUnderstanding Identity Management with Office 365
  • Drive Better SharePoint 2013 Mobile Solutions with Responsive Design

    1. 1. SharePoint 2013 and Responsive Design: Engage Your Mobile Audience Rich Wood • 8/28/13
    2. 2. Our Microsoft Practice
    3. 3. 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. 4. 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
    5. 5. • 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!
    6. 6. Responsive Design & SharePoint What, Why and When?
    7. 7. 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).‖
    8. 8. In Other Words… • Works well across browsers and form factors o Desktop, tablet, phone o IE, Safari, Chrome • Resizing, scrolling, panning et cetera is minimized: Less pinching and expanding • Navigation is easy
    9. 9. The Big Question Responsive Design (i.e., “HTML 5”) vs. Native Mobile Apps
    10. 10. Microsoft Provides Native Apps • Yammer (WinPhone, iOS, Android) • Office 365 (WinPhone, iOS, Android) • SharePoint Newsfeed (WinPhone, iOS) • OneNote (WinPhone, iOS)
    11. 11. When to Choose? Native Apps Responsive Design Document Collaboration
    12. 12. Native Apps Responsive Design Document Collaboration Social Business When to Choose?
    13. 13. Native Apps Responsive Design Document Collaboration Web Content Management Social Business When to Choose?
    14. 14. Native Apps Responsive Design Document Collaboration Web Content Management Social Business Reporting (Business Intelligence) When to Choose?
    15. 15. Best Practices What We’ve Learned About Doing it Right
    16. 16. 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
    17. 17. 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…
    18. 18. Key Findings: #1 Incorporating a responsive design is easier in SharePoint 2013 than in previous versions.
    19. 19. 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
    20. 20. ―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
    21. 21. Responsive design can quickly get expensive depending upon: Key Findings: #3
    22. 22. Responsive design can quickly get expensive depending upon: • Which browsers need to be supported Key Findings: #3
    23. 23. Responsive design can quickly get expensive depending upon: • Which browsers need to be supported • The design itself (animations, parallax scrolling, etc.) Key Findings: #3
    24. 24. 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
    25. 25. 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
    26. 26. Example Responsive Designs PC / Internet Explorer, iPad (Safari iOS), Windows Phone
    27. 27. • 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 internet o No visual comps o No dev/test o No mockups Responsive Design Examples
    28. 28. Marshfield Clinic TopSharePoint.com “Site of the Month” – March 2013
    29. 29. Group Health Care TopSharePoint.com “Site of the Month” – April 2013
    30. 30. UTC Aerospace Systems
    31. 31. Customized Microsoft Training for IT Pros & End Users bit.ly/1cy8WV5 Connect with Perficient
    32. 32. • 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
    33. 33. 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
    34. 34. 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

    ×