Responsive Web Design ~ Best Practices for Maximizing ROI
•Download as PPTX, PDF•
1 like•1,410 views
Implementing a Responsive design for SharePoint? Consider these best practices to ensure you’re delivering an optimized experience for your users. This session discusses RWD principles and industry leading best practice guidelines, followed by a review of public facing SharePoint sites and design elements that can impact project costs and timelines.
Report
Share
Responsive Web Design ~ Best Practices for Maximizing ROI
- 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
- 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