Responsive Web Design ~ Best Practices for Maximizing ROI

1

SACRAMENTO

Responsive Design Best Practices to Maximize ROIJUAN 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

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.

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…

6

A Business Case for Going Responsive

WHO IS GOING TO WIN THE WORLD CUP?

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

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

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!

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.

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

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

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?

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 $$$

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 $$$

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 $$$

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 $$$

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 $$$

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

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.

21

Responsive Web Design Examples

California Department of Veteran Affairs ~ https://www.calvet.ca.gov/

22

Responsive Web Design Examples

San José-Evergreen Community College District ~ http://www.sjeccd.edu/

23

Responsive Web Design Examples

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.

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.

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

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)

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

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

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.

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

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

33

Other Mobile Options in SharePoint

Many ways to go mobile

Adaptive Design aka Device Channels

Adaptive / Responsive Hybrid

Mobile Apps

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

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

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

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

38

Thank You to Our Sponsors

39

Join us right after at The Blue PryntSocialize and unwind after our day of

learning.

Blue Prynt Restaurant & Bar815 11th St, Sacramento, CA 95814

bluepryntsacramento.com

Don’t Forget SharePint

Thank you for joining us Today!

SACRAMENTO