Your SlideShare is downloading. ×
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Responsive web design ms training audience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive web design ms training audience

187

Published on

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

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
187
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVE DESIGN IN SHAREPOINT 2013 Session sponsored by A Case Study of an Intranet
  • 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. TODAY Responsive design & SharePoint Case study and live demo Best practices and resources Questions 3
  • 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. 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. 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. 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. THE TWO APPROACHES Graceful Degradation Progressive Enhancement 8
  • 9. DEMO TIME! 9
  • 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. 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. LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS 12
  • 13. LESSONS LEARNED: TEST, TEST, TEST TEST 13
  • 14. LESSONS LEARNED: THINK ABOUT TOUCH • Don’t create hover-over experiences • Use large enough click points 14
  • 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. 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. 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. WHAT COMES AFTER LAUNCH? • Check your web analytics • Stay up on device channels • Leverage mobile platforms more (APIs, etc.) ALWAYS BE OPTIMIZING ! 18
  • 19. RESOURCES •Can I Use •Html5shim •Twitter Bootstrap •HTML5 Boilerplate •jQuery •Foundation (Zurb) •Normalize.css •Skeleton •Respond.js •Modernizr •Other Responsive Frameworks 19
  • 20. Q&A Roberto Yglesias @robertoy v-roygle@Microsoft.com www.buildingi.com 20

×