2. • Co-Founder of SPD Labs
• SharePoint UI Developer
• Based in Asheville, NC @spdlabs
facebook.com/spdlabs
• Services
– UX & Design
– Content Strategy
– Branding / Identity / Design
3. • Increasingly Variable Interaction
– More Device Types
– Mobile Devices
– Scaling Up & Down
– Unpredictable Bandwidth
– Shift in Desired User Experience
4. The Shift
• Mobile access as the
default access point is on
the rise
• Mobile devices are taking
over the landscape
• The Social & Mobile Link
5.
6. • Motivated by Change in Context
– People experience the web differently
– People have different expectations for…
• What they want delivered on the web
• When they want to access that content
• How the content is delivered
– Demanding users with more demands and lower
tolerance than ever before
7. • Media Queries
– Used to scope your styles
• Flexible Grid-Based Layout
• Flexible Images & Media
– Preventing overflow
9. • Flexible Dimensions & Type
– Target ÷ Context = Result
• Fluid Layout
– Grid-based system
• Flexible Images
– img{
max-width:100%;
}
10. • Build Up, Not Down
• Design for Mobile Devices First
• Forces Prioritization of Content
• Drives Better Content Strategy
– More Sustainable
– Well Thought Out
• Harness Mobile Platform Capabilities
– Touch, GPS, etc.
11. • Translate your designs
from one viewport to
the next
• Allows you to target
the right content in the
right context
• Better user experience
• Preferred over “mobile
versions”
12. • Responsive Design is an approach and a work
in progress.
• Strategies & Principles Are Evolving
• Statistics Show the Need for Mobile Strategy
• Focus on Gathering User-Driven Results
– If you build it, they will come and they will let you
know what sucks!
14. • Not Responsive
• Best Suited for “Portals”
• Easy to Manage Content
• Easy to Make Content Look Really Ugly!
• Not Adaptive for Smaller Screens
• OOTB has a Mobile Version Which is Only
Good For Browsing List Items!
15.
16. • Consists Of…
– HTML
– CSS
– ASP.NET Master Pages
– Page Layouts
– jQuery/Javascript
• Extending Functionality
– Custom Web Parts
– Custom User Controls
– Branding Features
17. • Blueprint for Design & Layout
• Includes
– Static Text
– HTML
– Server Controls
– ContentPlaceHolder Controls
• Define regions of replaceable content within the
Master Page
18. • Provides a fluid framework for all pages/page
layouts in the site
• References CSS3 stylesheet that uses media
queries and relative sizing to make your
content follow a fluid layout
• References javascript, jQuery, HTML5 Shiv to
support older IE Versions, etc.
19. • Context
– What needs to be responsive and what doesn’t?
– Who is this site for – Intranet/Extranet/Internet
– Timeline & Budget
• Depth
– What site types do you need to support?
– How much control over the UX do you have?
• Revamping the way users interact with SharePoint
should tie into your responsive design planning.
20. • Don’t expect to have the same SharePoint with
responsiveness added.
• Not everything should be responsive.
– Users won’t be editing datasheet views on their mobile
phones.
• Not everything can be responsive right now.
– SharePoint is not designed for content owners to manage the
site from a mobile device. If you’re using SharePoint for DMS
and Collaboration, it’s primarily a desktop application.
– The UI functionality is not designed for touch screen
interaction.
– We will inevitably meet roadblocks that require creative
workarounds and imperfect solutions.
– Remember you are building a responsive site on SharePoint,
not the responsive SharePoint platform.
21. • Narrow your focus.
– Publishing Sites, Team Sites, Blogs
• Let it be.
– Leave as much of the inner workings alone as
possible.
• Settings pages, document management, datasheets.
– For public-facing sites make the _layouts area of
your site stick to v4.master
• Nobody needs to access that outside desktop
environment. Think of it as your Admin Panel
22. • Content Strategy
• UI Design
• Choose a Fluid Grid or Build One
– http://foundation.zurb.com/
– http://cssgrid.net/
– http://twitter.github.com/bootstrap/
• Prototype
• Merge
23. • Responsive Prototype
– Fluid Grid Layout
– HTML5 & CSS3
• Built in SharePoint
2010
– Designed for Public-
Facing
– Using Publishing
Features
