O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive design in sp seminar buildingi 20130918

594 visualizações

Publicada em

A slide deck on responsive web design in SharePoint 2013.

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

Responsive design in sp seminar buildingi 20130918

  1. 1. RESPONSIVE DESIGN IN SHAREPOINT 2013 A Case Study of an Intranet
  2. 2. A LITTLE ABOUT ME Microsoft Certified Professional in SharePoint Business Technology Director forBuildingi (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
  3. 3. 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 Buildingi Atlanta 3
  4. 4. 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
  5. 5. TODAY Responsive design & SharePoint Case study and live demo Best practices and resources Questions 5
  6. 6. 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
  7. 7. 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-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 43% of the US workforce will work from home by 2016 7
  8. 8. 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
  9. 9. 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
  10. 10. THE TWO APPROACHES Graceful Degradation Progressive Enhancement 10
  11. 11. DEMO TIME! 11
  12. 12. 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
  13. 13. 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
  14. 14. LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS Check http://caniuse.com/ Do feature detection 14
  16. 16. LESSONS LEARNED: THINK ABOUT TOUCH •Don’t create hover-over experiences •Use large enough click points 16
  17. 17. 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
  18. 18. 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
  19. 19. WHAT COMES AFTER LAUNCH? • Check your web analytics • Stay up on device channels • Leverage mobile platforms more (APIs, etc.) ALWAYS BE OPTIMIZING ! 19
  20. 20. RESOURCES •Can I Use •Twitter Bootstrap •jQuery •Normalize.css •Respond.js •Other Responsive Frameworks •Html5shim •HTML5 Boilerplate •Foundation (Zurb) •Skeleton •Modernizr 20
  21. 21. Roberto Yglesias @robertoy roberto.yglesias@buildingi.com www.buildingi.com Q&A 21