Responsive web design ms training audience

397 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
397
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive web design ms training audience

  1. 1. RESPONSIVE DESIGN IN SHAREPOINT 2013 Session sponsored by A Case Study of an Intranet
  2. 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. 3. TODAY Responsive design & SharePoint Case study and live demo Best practices and resources Questions 3
  4. 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. 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. 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. 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. 8. THE TWO APPROACHES Graceful Degradation Progressive Enhancement 8
  9. 9. DEMO TIME! 9
  10. 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. 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. 12. LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS 12
  13. 13. LESSONS LEARNED: TEST, TEST, TEST TEST 13
  14. 14. LESSONS LEARNED: THINK ABOUT TOUCH • Don’t create hover-over experiences • Use large enough click points 14
  15. 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. 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. 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. 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. 19. RESOURCES •Can I Use •Html5shim •Twitter Bootstrap •HTML5 Boilerplate •jQuery •Foundation (Zurb) •Normalize.css •Skeleton •Respond.js •Modernizr •Other Responsive Frameworks 19
  20. 20. Q&A Roberto Yglesias @robertoy v-roygle@Microsoft.com www.buildingi.com 20

×