Responsive design in sp seminar buildingi 20130918
21
RESPONSIVE DESIGN IN SHAREPOINT 2013 A Case Study of an Intranet
-
Upload
bill-england -
Category
Technology
-
view
138 -
download
0
description
A slide deck on responsive web design in SharePoint 2013.
Transcript of Responsive design in sp seminar buildingi 20130918
RESPONSIVE DESIGN IN SHAREPOINT 2013
A Case Study of an Intranet
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
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
BuildingiAtlanta
3
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
TODAY
Responsive design & SharePoint
Case study and live demo
Best practices and resources
Questions
5
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
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-statsForrester Research “Understanding Responsive Design”: http://www.forrester.com/Understanding+Responsive+Design/fulltext/-/E-RES74481Forrester Research US Telecommuting Forecast 2009-2016: http://www.forrester.com/US+Telecommuting+Forecast+2009+To+2016/fulltext/-/E-RES46635Web 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
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
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
THE TWO APPROACHES
Graceful Degradation
Progressive Enhancement
10
DEMO TIME!
11
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
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
LESSONS LEARNED: IDENTIFY DEVICES & BROWSERS
Check http://caniuse.com/
Do feature detection
14
LESSONS LEARNED: TEST, TEST, TEST
TEST15
LESSONS LEARNED: THINK ABOUT TOUCH
• Don’t create hover-over experiences
• Use large enough click points
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
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.
18
WHAT COMES AFTER LAUNCH?
• Check your web analytics
• Stay up on device channels
• Leverage mobile platforms more (APIs, etc.)
ALWAYS BE OPTIMIZING !
19
RESOURCES
•Can I Use
•Twitter Bootstrap
•jQuery
•Normalize.css
•Respond.js
•Other Responsive Frameworks
•Html5shim
•HTML5 Boilerplate
•Foundation (Zurb)
•Skeleton
•Modernizr
20
