The document outlines the importance of responsive web design (RWD) in enhancing user experience across various devices, highlighting its potential for improving ROI, increasing productivity, and streamlining operational costs. It discusses best practices for implementing RWD, including careful planning, stakeholder involvement, and adapting content for different devices, while also addressing challenges such as higher upfront costs and the need for modern technology. The conclusion emphasizes that adopting RWD is crucial for organizations to meet evolving user expectations in a mobile-driven world.

1. 1
SACRAMENTO

2. Responsive Design
Best Practices to Maximize ROI
JUAN CARLOS DURON
PIXELMILL.COM

3. About Juan
I’m a Usability guy.
For almost 20 years I’ve been helping improve the User Experience on websites, software
applications, and business systems for disruptive companies using emerging technology.
Managed implementation of dynamic search for macys.com early 2000’s – still used today
Helped build online SAAS for Real Estate industry mid 2000’s – revolutionized industry
Contributed to PixelMill becoming the leader in Responsive Web Design for SharePoint
http://jcduron.com
@jcduron
jcduron
3

4. A Business Case for Going Responsive
Responsive Web Design can positively impact the bottom line.
Mobile is Today… and Tomorrow
Many Devices | Many Screen Sizes | Few Solutions
Responsive Design allows users to interact with your website on their
terms instead of forcing a user to use a desktop browser. Using modern
devices like tablets or smartphones creates an optimal User Experience.
4

5. A Business Case for Going Responsive
But investing in a Responsive website design isn’t always so clear cut.
Requires more planning from entire organization.
Often results in higher upfront design cost.
So the BIG Question is…
5

6. A Business Case for Going Responsive
WHO IS GOING TO WIN THE WORLD CUP?
6

7. A Business Case for Going Responsive
Why Go Responsive?
Agenda:
- Benefits of Responsive Web Design (RWD)
- RWD best practices and cost considerations to maximize your ROI
- Other Mobile Options in SharePoint
7

8. The Rise of Mobile
Rate of Mobile penetration is well documented
BYOD is very real
Collaboration demands a modern approach
Business case amplified in SharePoint
8

9. The Rise of Mobile
User Expectations drive change
◦ Need for Accessible Content
◦ Optimized for each device
◦ Work without friction
◦ The Facebook mentality – they want easy
It’s About the User!
9

10. The Rise of Mobile
Business needs make it happen
◦ Streamline operation expenses
◦ Keep communication in house
◦ Security
◦ Build for the future
Organizations are realizing path to increased productivity and operational
value comes from building a complete system for users and their devices.
10

11. Responsive Litmus Test
An easy way to tell if you might need a Responsive Website
1) Do you expect users to access SharePoint site on a tablet or smartphone?
◦ Yes = Responsive Good Fit
◦ No = Responsive May Be Good Fit
2) Check your business intelligence – is the percentage of site visitors accessing via a mobile device
trending up?
◦ Yes = Responsive Good Fit
◦ No = Responsive May Be Good Fit
11

12. What is Responsive Web Design
Allows you to build one fluid website that can shrink or stretch to fit any screen size on any
smartphones, tablets, or laptop providing a tailored User Experience.
[image]
The Key: All devices load the same page but the look is optimized for each screen size
12

13. Benefits of Responsive Web Design
Reduced development and maintenance cost over time (if properly planned)
◦ Develop one code base and manage one set of content
◦ Fewer Dev resources required because not managing multiple mobile solutions
Customized look for every modern device
◦ Different experience depending on the size of browser
Increased flexibility using Responsive framework
◦ Framework components make it easier to develop websites and have additional design options
Most future-friendly option
◦ Optimized for every screen size means your design lasts longer
Increased collaboration and productivity by creating an environment suited to user needs
3 winners of Nielsen’s Intranet Design Annual 2014 used Responsive Design – what does that say?
13

14. Drawbacks of Responsive Design
Higher up front cost to develop – both in Time and Money
Requires modern browsers and devices that support HTML 5 / CSS 3
Bandwidth concerns
OOTB webparts not Responsive
RWD is more suited to Publishing Sites vs Team Sites
Iterative process can be exhausting if not planned correctly = more $$$
14

15. Drawbacks of Responsive Design?
Higher up front cost to develop – both in Time and Money
◦ Planning and design process may take longer but
◦ Offset by shorter Development cycles and shorter Design phases in future projects
Requires modern browsers and devices that support HTML 5 / CSS 3
Bandwidth concerns
OOTB webparts not Responsive
Iterative process can be exhausting if not planned correctly = more $$$
15

16. Drawbacks of Responsive Design?
Higher up front cost to develop – both in Time and Money
◦ Planning and design process may take longer but
◦ Offset by shorter Development cycles and shorter Design phases in future projects
Requires modern browsers and devices that support HTML 5 / CSS 3
◦ Solutions exist for older browsers like IE 8
Bandwidth concerns
OOTB webparts not Responsive
Iterative process can be exhausting if not planned correctly = more $$$
16

17. Drawbacks of Responsive Design?
Higher up front cost to develop – both in Time and Money
◦ Planning and design process may take longer but
◦ Offset by shorter Development cycles and shorter Design phases in future projects
Requires modern browsers and devices that support HTML 5 / CSS 3
◦ Solutions exist for older browsers like IE 8
Bandwidth concerns
◦ Using a Mobile First approach, optimize content like large, heavy images
OOTB webparts not Responsive
Iterative process can be exhausting if not planned correctly = more $$$
17

18. Drawbacks of Responsive Design?
Higher up front cost to develop – both in Time and Money
◦ Planning and design process may take longer but
◦ Offset by shorter Development cycles and shorter Design phases in future projects
Requires modern browsers and devices that support HTML 5 / CSS 3
◦ Solutions exist for older browsers like IE 8
Bandwidth concerns
◦ Using a Mobile First approach, optimize content like heavy images
OOTB webparts not Responsive
◦ Use javascript to resize or provide panning
Iterative process can be exhausting if not planned correctly = more $$$
18

19. Drawbacks of Responsive Design?
Higher up front cost to develop – both in Time and Money
◦ Planning and design process may take longer but
◦ Offset by shorter Development cycles and shorter Design phases in future projects
Requires modern browsers and devices that support HTML 5 / CSS 3
◦ Solutions exist for older browsers like IE 8
Bandwidth concerns
◦ Using a Mobile First approach, optimize content like heavy images
OOTB webparts not Responsive
◦ Use javascript to resize or provide panning
Iterative process can be exhausting if not planned correctly = more $$$
◦ Like any feature, you can roll out in phases
◦ End result will provide a better user experience and design longevity
19

20. Responsive Web Design Fundamentals
Fundamentals:
Fluid Grid
Flexible Media
CSS Media Queries
- A Fluid Grid System helps define how content flows on a page
- Flexible Media allows content to dynamically grow or shrink within a grid
- Media Queries allows to change layout of the grid dependent on the viewport size.
20

21. Responsive Web Design Examples
21
California Department of Veteran Affairs ~ https://www.calvet.ca.gov/

22. Responsive Web Design Examples
22
San José-Evergreen Community College District ~ http://www.sjeccd.edu/

23. Responsive Web Design Examples
23
FS Propane ~ http://sptest.fspropane.com/pages/default.aspx

24. Best Practices and ROI Implications
Developing a Responsive Site involves careful planning and execution with business goals and
user expectations in mind.
Ultimately, think about the USER and the CONTEXT the DEVICE will be used
You’re designing for different users with a variety of needs while accounting for multiple devices
and their different screen sizes.
24

25. Plan with a Purpose – Content
Type of Content will help define the type of Responsive site you build as well as page layouts you
use.
◦ General content, images, and simple webpart data = simple
◦ Heavy analytic data, ad-hoc reporting, editing of tabular data = more planning
◦ What content needs to be hidden at lower viewports
◦ Content Order – especially important at lower viewports
Goal = Content Parity – ability to deliver same important content and message for any given
page on all viewports.
25

26. Plan with a Purpose – Business Needs
How will site be used?
◦ Intranet, Extranet, Public Facing
◦ Content consumption
◦ Collaboration portal
Do they have the same requirements from desktop to mobile?
What is you governance plan? BYOD?
Is security a concern?
Authoring workflows and Search
But remember, build toward User Expectations
26

27. Plan with a Purpose - Devices
How will site be used across type of device?
◦ Will all device types access?
◦ What viewports are necessary (device size and dimensions) – helps define breakpoints
◦ What Operating Systems, browsers, input controls (keyboard, touch, mouse) will be used
Means you don’t lose key content, features, or functionality on different devices or screen sizes
Remember User Intent and minimize friction (user frustration)
27

28. Plan with a Purpose – Involve Stakeholders
Designing a Responsive site requires more input from Stakeholders than traditional site design.
The top down process is less effective – collaboration is Critical.
Planning with key Stakeholders accounts for realistic patterns of use and increases likelihood of
User Adoption.
Needs are bottom up – comes from user tasks and business needs
28

29. Plan with a Purpose – Features
Careful considerations to keep in mind
◦ Images
◦ Video
◦ Tables
◦ OOTB Webparts
◦ List and Site settings
◦ Global Navigation
- static vs dynamic navigation
- SP OOTB Navigation relies on hover [not mobile ready]
- SP allows for different nav experiences on desktop (Floating, Drop Down, Collapsing, Off Canvas)
- Can be addressed in mobile using media queries
- Floating – OOTB, works well on desktop - can’t do dynamic not touch friendly, takes up space
- Drop down – using select form field using jQuery – dynamic can be nightmare on big menus
- Collapsing – Can account for small to large menus, Javascript can help with touch
29

30. Using Responsive frameworks saves time
Use a SharePoint ready Responsive Framework
◦ Jumpstart projects
◦ Build momentum
◦ Early adoption
◦ Future design projects have a baseline
Avoid over-customization and hacks that can minimize breaking SharePoint in the future.
30

31. Mobile First
The term “Mobile First” refers to a design approach where designing for the lowest viewport
than building up towards a desktop experience.
It will require knowing the devices used to access SharePoint and optimizing for that screen size.
This will focus your attention toward:
◦ The primary activities performed by the user
◦ What content they will consume
◦ The features and functionality available to the user
◦ The general layout of the pages on the smallest viewport where space is most limited
Design for the Real World
31

32. Additional Considerations
Be Sure Developers / Designers are very comfortable with SharePoint
◦ Even experienced coders with limited SP exposure have difficult time
Quality Testing Minimizes Costly Errors
Train Content Authors
◦ So they know how NOT to break the responsive site
32

33. Other Mobile Options in SharePoint
Many ways to go mobile
Adaptive Design aka Device Channels
Adaptive / Responsive Hybrid
Mobile Apps
33

34. Device Channels
Device Channels creates a targeted experience for a specific device and serves up customized HTML
◦ Mainly used to create a different design on different mobile devices.
Pros
◦ Ability to display different design or different content for different devices
◦ Page load can be faster
◦ Flexible to target older devices / browsers - not dependent on HTML 5 / CSS 3
◦ Less investment up front - costs spread out as design for new devices are developed
Cons
◦ Only available for publishing sites
◦ More development and maintenance – multiple Master Pages required and different HTML for every channel
◦ Limit to number of devices that can be targeted – 10 on-premises and only 2 device channels for public
websites
◦ Less flexible - Does not take advantage of a fluid grid
◦ Security concerns
34

35. Mobile Apps
Making a native app is a good solution if time, cost and resources aren't an issue and you want the highest level
of optimization for each device.
Pros
◦ Apps can take advantage of device hardware like camera, accelerometer, multi-taksing
◦ Fewer Security issues
◦ Typically fast page load
Cons
◦ Low history of adoption
◦ Forces user to install app before interacting with content
◦ Fear of Big Brother – Users don’t want company apps on personal devices
◦ High development cost
◦ Create one app per Operating System
◦ 3rd party solutions often have monthly and/or per user costs that adds up
◦ High Maintenance Cost
◦ Design changes can be difficult
◦ Frustration making app available through App store
◦ Changes to webparts can break app design
35

36. Demos
https://www.calvet.ca.gov/
http://www.sjeccd.edu/
http://sptest.fspropane.com/pages/default.aspx
http://www.fssystem.com/Pages/default.aspx
See More:
http://sps.cloudapp.net/
http://www.topsharepoint.com/responsive-sharepoint-websites
36

37. Conclusion
Age of Mobile in the workplace is upon us
RWD brings flexibility and accessibility, while addressing business
needs AND user expectations
Using RWD, organizations create the best User Experience that leads
to increased Adoption
Good Design adds value ~ Bad Design costs $$$
Increase productivity, team collaboration, and opportunities for
engagement
Bring the Age of Mobile into the fold with Responsive Web Design 37

38. 38

39. 39
Join us right after at The Blue Prynt
Socialize and unwind after our day of learning.
Blue Prynt Restaurant & Bar
815 11th St, Sacramento, CA 95814
bluepryntsacramento.com
SACRAMENTO