responsive web design ms training audience
DESCRIPTION
A responsive web design presentation to Microsoft by Buildingi (Roberto Yglesias and Chad Lanphear.TRANSCRIPT
RESPONSIVE DESIGN IN SHAREPOINT 2013
A Case Study of an Intranet
Session
sponsored
by
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
2
TODAY
Responsive design & SharePoint
Case study and live demo
Best practices and resources
Questions
3
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
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
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
5
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…
6
vs
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
THE TWO APPROACHES
Graceful Degradation
Progressive Enhancement
8
DEMO TIME!
9
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
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
LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS
12
LESSONS LEARNED: TEST, TEST, TEST
TEST13
LESSONS LEARNED: THINK ABOUT TOUCH
•Don’t create hover-over experiences
•Use large enough click points
14
LESSONS LEARNED: DON’T RE-INVENT THE WHEEL
• Leverage all the libraries available
• jQuery
• Respond.js
• Normalize.css
•Use already-built responsive frameworks
15
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
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
WHAT COMES AFTER LAUNCH?
• Check your web analytics
• Stay up on device channels
• Leverage mobile platforms more (APIs, etc.)
ALWAYS BE OPTIMIZING !
18
RESOURCES
•Can I Use
•Twitter Bootstrap
•jQuery
•Normalize.css
•Respond.js
•Other Responsive Frameworks
•Html5shim
•HTML5 Boilerplate
•Foundation (Zurb)
•Skeleton
•Modernizr
19
