fluent in energy

BUILDING YOUR BRAND AND RESPONSIVE WEB DESIGN IN SHAREPOINT 2013

RON COURVILLE

ENTRANCE SOFTWARE

2

Welcome to SharePoint Saturday Houston

• Please turn off all electronic devices or set them to vibrate

• If you must take a phone call, please do so in the hall so as not to disturb others

• Special thanks to our Title Sponsor, ProSymmetry

Thank you for being a part of the 5th Annual SharePoint Saturday for the greater Houston area!

3

Thanks to all our Sponsors!

4

Information

• Speaker presentation slides should be available from the SPSHOU website within a week or so

• The Houston SharePoint User Group will be having it’s next meeting Wednesday April 15th. Please join us at www.h-spug.org

fluent in energy

About Me

• @SMTP25Ron

• LSU alumnus

• My ♥’s• Business cases• JavaScript and C# development• SP Apps• Web design

• Working with custom SharePoint development since 2010

• With Entrance Software since 2012

fluent in energy

Why does design matter

• Buy-in of key stakeholders:• End users – determine to use the new system• Management team – determine investment allocation

• Kent State University: Given the same content, more attractive design immediately increases perceived credibility.• http://dl.acm.org/citation.cfm?id=1315064

• Darmstadt University: Usability > beauty• Usable design perceived as beautiful• Beautiful design not related to usability• http://dl.acm.org/citation.cfm?id=1466561

fluent in energy

Principles of good web design

•Principle of least astonishment (consistency)• Use of a master page and page layouts for

consistent designs

• Use of conventional web design techniques

fluent in energy

Principles of good web design

•F-Pattern layout• People don’t read online. They scan.

• Most important: The top horizontal

• Less important: Left edge, with bullet points

fluent in energy

Principles of good web design

• Roman architect, Vitruvius• Utilitas - Utility, or commodity• Venustas - Beauty, or delight• Firmitas- Firmness, or soundness

• Me:• Usability – Is it intuitive?• Aesthetic appeal - Attractive and engaging?• Resilient – Tested and free of bugs?• + Legitimacy - Reflect the established organizational

branding?

• Keep it above the fold• KISS - Keep it simple, stupid• Mockup your design first

fluent in energy

Terrible … so terrible

fluent in energy

Bad

fluent in energy

Not so good

fluent in energy

Good

fluent in energy

Good

fluent in energy

Good

fluent in energy

Really good

fluent in energy

Decide How to Build Your Design

• Paths:• Out of the box – Master pages, page layouts

• Most likely supported in upgrades• Least expensive, fastest, and easiest

• Custom code (Ron’s ♥) – Custom master pages• Most flexible• Most expensive

• “Hybrid” / Assisted dev tools – Customized composed looks• A little of both• Risky approach: seductively low upfront cost; hidden future costs

• Dynamic Market Survey of 100 USA IT Managers:• 72% higher than expected maintenance costs• http://www.tcs.com/Insights/Documents/independant_market

s_research_report.pdf

fluent in energy

Out of the Box

•Basic master pages

•Composed looks• Master page

• Theme / color

scheme (*.spcolor

file)

• Font scheme

• Background

fluent in energy

Custom code – Design Manager

• One of many possible approaches

• Start with basic HTML• Add snippets from

Snippet Gallery• Generate SP master

page

• http://blogs.perficient.com/microsoft/2012/08/design-manager/

fluent in energy

Custom CSS - super specificity, Batman!

•More specific selectors needed to override pre-existing CSS

•body {background: url(insert image file here);

}•body.ms-backgroundImage {

background: url(insert image file here);}

•http://blog.sharepointexperience.com/2013/05/sharepoint-2013-css-classes-that-suck-and-save-the-day/

fluent in energy

Hybrid – Customized composed look

•Custom color scheme - SharePoint Color

Palette tool• http://en.share-gate.com/blog/create-

sharepoint2013-theme-using-color-palette-tool

•DEMO: SharePoint Color Palette Tool• http://www.microsoft.com/en-

us/download/details.aspx?id=38182

fluent in energy

Customized composed looks?

•Themeable custom CSS files?• /*

[ReplaceColor(themeColor:"EmphasisBackground",themeTint:"0.05")] */ background-color:#f2faff;• https://msdn.microsoft.com/EN-

US/library/office/dn266906.aspx

•Development is more cumbersome• http://blog.sharepointexperience.co

m/2013/05/when-to-use-a-sharepoint-2013-composed-look/

fluent in energy

Recommendations

•Which method is supported?• O365 - Custom master pages not supported

• On prem upgrades – theme engine changes

•Office 365• Custom composed looks

•On premises• Custom master page + custom CSS

fluent in energy

Responsive Web Design

•Wikipedia: “provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices”

fluent in energy

OOTB Approaches

• Image renditions - Load specific image version, sized for the device

•Device channels - Load separate master page/CSS for each device

•Pro's• Can control content• (slightly) Easier to implement• Optimize load times (but cached after first loading)

•Con's• Does not dynamically resize• Higher maintenance cost

fluent in energy

Custom code – Media queries

•Guide:• https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/Media_queries

•DEMO: Media query basics• http://jsfiddle.net/roncourville/obkagxqv/

fluent in energy

Custom code – don’t re-invent the wheel

•Front end frameworks• Common HTML components

• Buttons• Navigation• Panels• Alerts

• Grid system – easily optimize display on various devices

• Glyphs – icon set implemented via font package

•Most popular frameworks• Bootstrap - http://getbootstrap.com/• Zurb - http://foundation.zurb.com/

fluent in energy

Grid System

•Per row -> 1 – 12 columns

fluent in energy

Grid System - resizing

• Desktop

• Tablet

• Mobile

fluent in energy

Bootstrap

• Bootstrap CSS = HUGE!

• Overrides are inevitable, but can be mitigated. Include as little Bootstrap possible• http://getbootstrap.com/custom

ize/

• DEMO: Grid + Navigation component• http://jsfiddle.net/roncourville/2

86eL9vq/

fluent in energy

Custom code – don’t re-invent the wheel

•Community supported responsive

SharePoint master pages• https://bootstrapsharepoint.codeplex.com/

• https://responsivesharepoint.codeplex.com/

•DEMO – Responsive SharePoint master page• https://roncourville-

public.sharepoint.com/demo_responsiveweb

fluent in energy

Maybe?

•Binding tuning Bootstrap theme• Prebuilt, customizable SharePoint master page

and page layouts

• Fast rollout, but probably bloated

• http://bindtuning.com/cms/sharepoint/sharepoi

nt-2013/theme/thebootstraptheme

fluent in energy

@SMTP25Ron

ron@entrancesoftware.com

slideshare.net/RonaldCourville/

¡ Feedback !

¿ Questions ?

http://bit.ly/1yiTfOl