1 Lynne Figg and Steven RayDonald Donais August 13th, 2014 SharePoint Branding Lynne Figg and Steven Ray
2 Agenda MNSPUG InformationUse C.R.A.P. to Improve your Website Design – Lynn Figg Break Branding SharePoint – Steven Ray Giveaways Vendor Sponsored Lunch - AvePoint
3 User Group Goal / ObjectivesDevelop and support a local community focused on Microsoft SharePoint Technologies Educate user group members about SharePoint Technologies Transfer knowledge within the community Communicate best practices Introduce new products / solutions
4 MNSPUG Sponsors Dedicated Sponsors Annual SponsorCurrently Looking for Sponsorships! Avtex (www.avtex.com) Microsoft (www.microsoft.com) SharePoint User Group Support Media Sponsor Wrox Press (www.wrox.com) O’Reilly (www.oreilly.com)
5 MN SharePoint Users Group WebsiteSharePoint Resource Documents SharePoint Resource links RSS Feeds Meeting Schedule Past User Group Presentations Past User Group Recordings Sponsorship Information
6 Social Networking Linked In group – The most interactive… includes job postings… Post Job Posting on the Jobs Discussion page Twitter tags and #MNSPUG Yammer – Minnesota SharePoint Users Group https://www.yammer.com/mnspug/
7 Call for SharePoint Member Case Studies!Upcoming Schedule Call for SharePoint Member Case Studies! Still Looking for 1-2 More Case Studies 4-6 Member Case Studies (10-15 in length min.) Submit by: August 29th Examples: Implemented Form/Workflow Integrated with different systems Implemented for client – joint presentation Contact: or Next Meeting September 10th – SharePoint Member Case Study Microsoft Technology Center Check for updates! Ongoing Schedule 2nd Wednesday of every month 9:00 to 11:30 am Microsoft Technical Center – Edina
8 Local and Online EventsTwin Cities PowerShell User Group – Sept 9th, 4:30 – 7:00 pm SharePointalooza– Sept 12th & 13th in Branson, Missouri MN SharePoint Legal Users Group – Sept 18th 12 – 1:30 p.m. TBD Mindsurf Conference – October 9th, Minneapolis Convention Center (Pay to attend event) SharePoint Saturday Twin Cities – November 22nd, Normandale Community College MN SharePoint SharePint– August 26th 4:30-?, Joe Senser’s Bloomington MN Women in SharePoint – September 16th, Avtex office Bloomington SPChat through SharePoint Community – August 14th – Online
9 Evaluations & Giveaways!
10 Presenters
11 Lynne Figg Now: SharePoint Solutions Analyst @ Scott CountyB4: Web Normandale College, Web Alexandria Tech College Member: MNSPUG, MIMA, Nat’l Gov’t Web Professionals Work hobby: web content strategy Personal hobby: riding motorcycle Yammer some, tweet little, blog less, link in, and pray for warm sunshine to ride more…
12 Steven Ray User Experience developer, Avtex Sarah Connor look alike
13 Using C.R.A.P.
14 I am . . . Web developer: XHTML, XLST, XHTML, JavaScript, various languages Web content strategist SharePoint OOB analyst I am not . . Back-end specialist Deep-dive developer Graphic designer by trade part web, part marketing, and pretty good with C.R.A.P.
15 Presentation based primarily on publication . . .The Non-Designer’s Design Book by Robin Williams (no, not THAT Robin Williams) Design and typographic principles for visual novice
16 So what is C.R.A.P? Contrast Repetition Alignment ProximityUsing these four principles effectively can greatly increase the effectives of your web pages as well as print and published materials; personally and professionally.
17 C.R.A.P Contrast Repetition Alignment Proximity
18 Alignment “The principle of alignment states that nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” Our brains like organization – it aids in readability and comprehension. When applying the principle of alignment, you will no longer just place items on the page where there is room. Notice the different alignments? Yuck!
19 Alignment Example
20 Alignment Example - before
21 Alignment Example - after
22 Alignment Example – after 2x
23 C.R.A.P Contrast Repetition Alignment Proximity
24 Proximity As in life, the closeness, the proximity of items, implies a relationship. “The principle of proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch or unrelated bits .” White space is your friend Proper organization of website navigation and content organization are examples of using proximity
25 Proximity Example
26 Proximity Example - before
27 Proximity Example - after
28 Proximity Example – after 2x
29 Alignment & Proximity Example
30
31 C.R.A.P Contrast Repetition Alignment Proximity
32 Repetition “The principle of repetition states that you repeat some aspect of the design throughout the entire piece.” Think of repetition as unity – a deliberate way to consciously unify all the elements on a page. Use it to communicate more clearly and to organize items both intellectually and visually.
33 Repetition
34 Alignment, Proximity, & Repetition Example
35 C.R.A.P Contrast Repetition Alignment Proximity
36 “Contrast is created when two or more elements are different.”Contrast can be created in several ways: Colored background: white or transparent –v- colored Font styles: Sans-serif –v- Serif –v- Decorative Type: Large –v- small type Weight: Strong –v- regular Etc…
37 Don’t be a wimp! Contrast, not conflictConflict – when contrast misses the mark. “If two items are not exactly the same, then make them very different. Really different.” Don’t be a wimp!
38 Alignment, Proximity, Repetition & Contrast Example
39 C.R.A.P. - All together now
40
41 Share C.R.A.P. with web contributorsWeb Content Guidelines ‘writing for the web’ practices contributors should follow Web Contributor Guide specific ‘how-to’ enter content for organization website Web Style Guide list preferred spellings and abbreviations
42 Share C.R.A.P. with web contributors
43 Share C.R.A.P. with web contributors
44 Share C.R.A.P. with web contributors
45
46 C.R.A.P. Summary cheat sheets
47 Alignment Purpose How Avoid Unify and organize.Be conscious of where you place elements. Align every object with an edge. Avoid Avoid inconsistent alignments. Avoid centered alignment unless consciously trying to be formal.
48 Proximity Purpose How AvoidOrganize content by grouping related items. How Count the number of visual elements on the page. Can they be streamlined? Avoid Avoid equal amounts of white space between all page items. Don’t stick things in the corners and the middle. If items are unrelated, don’t put them together. Avoid too many separate elements on a page.
49 Repetition Purpose How Avoid Unify and add visual interest.Be consistent and bold with presentation of page headings, secondary headings, lists, etc. Add a strong and unique element you can use to repeat. Avoid Avoid over repeating. Avoid ‘sort-of’ repeating.
50 Contrast Purpose How Avoid Create visual interest.Aid in organization. How Colors: background, text. Font: style, size. Weight: strong, regular. Graphics: size, placement. Ask expert graphic designer Avoid Make items very different. Don’t be a wimp.
51 More thoughts about C.R.A.PDon’t be a wimp! Once you know the rules, you can consciously break them. And your just getting started. . . Design concepts: focal-point, typography, etc. User behavior: F-shaped pattern, Z-layout, etc. Multi-channel: re-usable content, social, mobile, etc. Content strategy: writing, voice, tone, content audit, etc.
52 Audience Participation – Apply C.R.A.P.
53
54 Helpful Links Writing for the web – usability How users read online https://www.gov.uk/service-manual/user-centred-design/how-users-read.html Website design – develop a project plan Purpose of a wireframe
55 Additional Resources The Non-Designer's Web Book, 3rd Edition Paperback by Robin Williams (Author), John Tollett (Author) Content Strategy for the Web, 2nd Edition Paperback by Kristina Halvorson (Author), Melissa Rach (Author) Son of Web Pages That Suck: Learn Good Design by Looking at Bad Design Paperback by Vincent Flanders (Author), Dean Peters (Author)
56
57 So what is C.R.A.P? Contrast Repetition Alignment Proximity~ Lynne Figg So what is C.R.A.P? Contrast Repetition Alignment Proximity Using these four principles effectively can greatly increase the effectives of your web pages as well as print and published materials; personally and professionally.
58 Break Time
59 Branding SharePoint 2010 August 2012 MNSPUG featured a detailed talk on SP2010 branding. PowerPoint deck Video
60 Why branding is importantto enhance user and customer experience to create user buy-in for intranets to promote corporate identity to unify employees
61 Anything is possible, with enough time
62 20 hours Extranet Single layoutMinor changes to default SharePoint structures Branding development time, not envisioning, wireframes, storyboards
63 80 hours Intranet Responsive (Bootstrap) IE7 compatibilityCustom megamenu Some custom web parts, including promo boxes on left side
64 100 hours Intranet Major effort to make it appear “non-SharePoint” while retaining most core functionality Client very interested in look/feel Involved lots of custom styling of various OOTB web parts
65 120 hours Responsive (Bootstrap) Moderate amount of custom web partsTwo main layouts
66 160 hours Responsive Custom megamenu Lots of custom webpartsMultiple complex page layouts
67 200+ hours Everything you see is custom-builtHuge number of individual pieces, all of which needed to be branded and styled
68 Who should brand Ideally, a collaborative group consisting of:Marketing (brand experts) User Experience (interface and web design experts) IT (Hardware and network experts) Front-end developer (HTML/CSS/JS expert)
69 SharePoint themes A bit like painting with a mop -- can’t get granular control of look/feel Difficult to customize Additional custom CSS usually required for an acceptable result
70 SharePoint structure
71 Master pages, page layouts and pagesMaster page is the overall frame that pages and page layouts fit into. Page layouts provide structures for the unique content on each page. Pages are the unique content (webparts) for an individual page. Each page uses a page layout. One page layout can be used by an infinite number of pages.
72 Master Page:
73 Page Layouts
74 Web-part Zones Designates areas where users can add/edit/delete web parts
75 Branding considerations
76 Branding tools for 2013 Layered PSD of OOB 2013https://skydrive.live.com/?cid=ed1a37150dabcd2d&id=ED1A37150DABCD2D!385 SharePoint Designer 2013 Firebug or IE/Chrome dev toolbar jQuery/CSS/HTML Randy Driscoll’s SP2013 master BindTuning Bootstrap theme for SharePoint 20130
77 How SP2013 differs from SP2010 Different HTML and CSS structuresMuch less anonymous and semi-anonymous HTML Two options for building master pages and page layouts Old school Design Manager and code snippets Two options for storing custom CSS/JS/Images Style Library Masterpages folder Device Channels replace mobile view Content by Search and Display Templates, vs Content Query and XSLT
78 HTML and CSS
79 Where to put your CSS, JS and imagesStyle Library (old school) PROS: Simple, you’re used to it CONS: Those files are actually stored in the database, so referencing them requires a SQL roundtrip – in other words, slow Custom folder in “Master Pages” directory PROS: All your stuff in one place. Files are stored on server, so faster CONS: Have to get to the directory a different way in order to see the files in Designer DEMO: Show the two locations, show how files are invisible in the wrong view
80 Different HTML/CSS structures#s4-ribbonrow now second row in #ms-designer-ribbon #s4-workspace and .s4-bodyContainer still the same Inside that, it’s HTML5 --
81 2010: Anonymous HTML
82 2013: much less anonymous HTML SP2013 Breadcrumb. No tables. Everything except the images has a class. While there are still inline styles, none of them are marked !important, and they are easy to target for override.
83 Still a lot of semi-anonymous HTML2010: Here's a sample web part. 84 Still a lot of very specific CSS to override2010: For instance, the first item in the Quick Launch: 85 Master Pages and Design Manager 86 Two new starting master pagesSeattle and Oslo Seattle optimized for intranet, with left nav Oslo optimized for public-facing: no left nav, wider content area, security-trimmed controls Can really use either one There’s a v4 there too, but ignore it; for backward compatibility only DEMO: Show masterpage directory 87 Design Manager Intended so that designers can create any HTML structure they want, without having to understand or mess with .NET code Lets you configure functionality and then copy/paste code snippets into your master page Allows you to preview your layouts Will go into detail later 88 Master page option #1: the old-fashioned wayCreate a .NET master page/page layout and edit it directly, just like in SP2010 Copy either Seattle or Oslo Go into Design Manager “Edit Master Pages” from left menu Click the “…” next to your master page In the resulting popup, click “…” again Choose “Edit properties” from the menu Uncheck “Associated File” Click “Save” You can now edit the master page directly. But preview and code snippets won’t work. DEMO: Walk through the process You may notice that SP2013 is UI Version 15; V4 is SP2010 89 Master page option #2: HTML master pagesCreate your own HTML layout. Can be anything you want Copy or save it to the “Masterpages” folder, and publish it SharePoint will automatically generate a linked master page This linked page cannot be deleted and should not be edited; it is regenerated every time the HTML file is saved. In Design Manager, go to “Edit Master Pages” and publish/approve your page Use Design Manager to create code snippets that you copy and paste into your HTML master. DEMO: Walk through the process 90 Code Snippets 91 Code snippets in HTML master pagesDesign Manager -> Edit Master Pages -> Click on master page Choose “Snippets” from top bar in ribbon In the “Web Parts” section of ribbon, choose the web part you want to configure When done configuring, copy the HTML snippet and paste it into your HTML master page All snippet code is kept together; don’t put the registration tags at the top of the page, like you do in .NET pages. SharePoint will put everything in the right place in the autogenerated master. DEMO: Add CQWP of “Site collection images” to top of main container 92 A sample code snippet Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version= , Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> 93 A custom control, as a snippet Register TagPrefix="Avtex" Namespace="Avtex.MegaMenu.Controls" Assembly="Avtex.MegaMenu, Version= , Culture=neutral, PublicKeyToken=36e04f49f99f6afe" %>--> --> Fuller explanation of SharePoint markup: 94 Code snippets in HTML master pagesPROS: Your designer can create a straight HTML layout, and you can drop it into SharePoint Can configure functionality in Design Manager; don’t have to edit code Can preview snippets and layouts in Design Manager 95 Code snippets in HTML master pagesCONS: Any .NET code you put in your HTML master (like, say, a custom control) must be wrapped in SharePoint Markup tags Snippet code is lengthy and messy; doesn’t make it any easier to read the file If you want to tweak a snippet, you either have to edit code or regenerate it in Design Manager. 96 Design for different screen sizes and contexts 97 Responsive design Much cleaner markup and responsive readyWill still need to figure out how to make individual web parts responsive We use Bootstrap Recommend BindTuning SharePoint 2013 template: Free Can customize colors, fonts, etc. so you don’t have to override them later DEMO: Show Tennant 98 Device Channels Replaces terrible 2010 Mobile ViewAllows you to use different master pages, layouts or device panels based on device being used to view the site 99 Device Channels PROS Serve only what that devices needs; no need for responsive coding CONS Relies on device detection (user-agent strings) Doesn’t handle orientation differences Only 10 channels allowed (though can have multiple devices per channel) More files to maintain OVERALL Fine if you only care about a handful of devices In most cases, responsive design will provide a better result DEMO: Show device channels (Design manager -> edit device channels) 100 Content by Search 101 Content by Search: A new way to access informationPROS Can surface information from anywhere in the installation Can pull in multiple types of information (pages, documents, images, etc.) Ability to use complex refiners and multi-level sorting Uses Display Templates instead of XSLT CONS Can only find items that have been indexed by the search crawler New content can take a while to show up Emphasize that you can still use CQWP just fine 102 Display Templates Only usable with Content Search; Only way to display Content Search results Configured for the Site and Site Collection, rather than for a web part Kept in Master Pages Display Templates Can be nested: Group template, for instance, calls various Item templates Similar to HTML master pages HTML file with specially-marked-up JS code and references Autogenerated linked JS file Uses SharePoint’s CSOM (client-side object model) More powerful and flexible than XSLT, but not necessarily easier to work with As with code snippets, you have to learn a particular markup syntax for the JS, and need to understand CSOM to write your JS DEMO: Walk through “Item_PDF” display template 103 Office 365 and WebDAV 104 A word about Office 365 PRO: Constantly being updated, so always have the latest functionality CON: Constantly being updated, so sometimes SharePoint Designer doesn’t work If Designer doesn’t work, can manage files through WebDAV 105 WebDAV Map your site’s “Master Pages” folder as a network drive on your computer Get URL from Design Manager -> Upload Design Files Open a Windows Explorer window Right click on “Computer” Choose “Map network drive” Choose a drive letter, paste in the URL, click “Finish” Enter your login credentials PRO: Can edit files in any editor; site is just another folder on your computer CON: Bypasses file check-out/check-in, doesn’t publish the changes 106 Branding tips and tricks 107 Turn off master-page approvalIn the “Settings” menu, choose “Site Settings” Under “Site Administration”, click “Content and Structure” Right-click on “Master Page Gallery” in the left menu Select “Edit Properties” Select “Versioning Settings” In the first section, you can choose whether content approval applies to that library. In the second section, you can choose whether SharePoint should bother with minor versions or simply save major versions every time you save. Choosing “major versions only” will cut out a step whenever you save the master page. 108 Server-relative URLs <% $SPUrl:~SiteCollection %>" /> Sometimes you need full URL: Or 109 Set up your favicon Create your “favicon.ico” file and put it wherever you want (Style Library, in this example). There are lots of online favicon generators, such as: Edit your master page (HTML version, in this example) Find the SPShortcutIcon control: And replace the “IconUrl” value with the path to your icon: Easy to forget, and looks a little silly to have the default SP icon on your custom site. Do it right away so you don’t have to worry about it. 110 Kill the chrome When creating page layouts, add the following property to any 111 Dealing with semi-anonymous HTMLEdit the HTML in the master page or layout To target a specific web part, place it in its own Web Part Zone, wrapped in a div with a specific class or ID 112 Overriding very specific default CSSCSS Frameworks like LessCSS (http://lesscss.org/) Automatically nests CSS styles Variables and mix-ins let you set a property in one class, then reference that class in other styles Takes a little bit of getting used to Very specific custom styles !important tag Not ideal, but effective 113 Custom styles for the Rich Text EditorConfigure the Rich Text Editor to properly display content while editing, and provide users with pre-built styles to help preserve the look/feel of the site. Remove default text styles from the dropdowns 114 Front-end development tips and tricks 115 Content Query Bug If Content Query returns no results, it forgets a closing No items 2013: Classes are generic Web-part ID is based on number that changes if web parts are added, removed or moved on the page Even “webpartid” property is brittle tag, which will likely break your layout Two possible fixes Ensure that your CQWP will always return at least one result Edit ContentQueryMain.xsl (Style Library -> XSL Stylesheets) and add the following code at Line 78: This will display a “no items’ message if there are no items. Customize the message, or leave it blank.
116 jQuery issue in Edit ModeA script in Edit Mode is hogging the “$” namespace, meaning jQuery can’t use it when you’re editing a page. The Fix Use “jQuery” instead of “$” for the namespace in any code that needs to work when in edit mode (i.e., “jQuery(‘.footer’);” instead of “$(‘.footer’);”). This will display a “no items’ message if there are no items. Customize the message, or leave it blank.
117 Custom Announcement displayDisplay the full text of an announcement using a CQWP, giving you full control over the presentation. This will display a “no items’ message if there are no items. Customize the message, or leave it blank.
118 Custom promo boxes Create user-customizable promo boxes with all sorts of options, without any back-end development. This will display a “no items’ message if there are no items. Customize the message, or leave it blank.
119 Custom browser warningWarn users who are viewing your site in an outdated browser, and provide links to upgrade or switch. This will display a “no items’ message if there are no items. Customize the message, or leave it blank.
120 Thanks for coming! Last But Not Least Please Fill Out EvaluationsDrawings for Giveaways Today’s Presenters: Lynne Figg Steven Ray Thanks for coming!
