branding sharepoint project
DESCRIPTION
2nd SPS Vietnam from Tuan NguyenTRANSCRIPT
![Page 1: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/1.jpg)
SHAREPOINT BRANDING"just not look like SharePoint!"
![Page 2: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/2.jpg)
Out line• Definition of Branding • Why Brand SharePoint?• How Branding Works in SharePoint • Design Considerations• Creating Wireframes• Tools of the Trade• DOCTYPE! & SharePoint• CSS in SharePoint• Case Study
![Page 3: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/3.jpg)
Definition of Branding
Branding i s t h e a c t o f c r e a t i n g a s p e c i fi c i m a g e o r i d e n t i t y t h a t p e o p l e r e c o g n i z e i n r e l a t i o n t o a
c o m p a n y o r p r o d u c t .
![Page 4: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/4.jpg)
Definition of Branding
W h e n r e f e r r i n g t o w e b s i t e s , b r a n d i n g u s u a l l y i n v o l v e s t h e
COLORS , FONTS , LOGOS , a n d SUPPORTING
GRAPHICS t h a t m a k e u p t h e g e n e r a l l o o k a n d f e e l o f
t h e s i t e .
![Page 5: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/5.jpg)
Why Brand SharePoint?• The most common reason is to make it unique.
• Making it “NOT look like SharePoint” is a basic request.
• For intranet site: A company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family.
• For internet site: A company want to communicate to this external audience information about your company, such as its services or products.
![Page 6: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/6.jpg)
Branding Is Just the Tip of the Iceberg
Sharepoint Branding(LOOK & FEEL)
Custom Web Parts
NavigationPage Layout
Search ScopeSite Templates
Site Definitions
![Page 7: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/7.jpg)
![Page 8: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/8.jpg)
How Branding Works in SharePoint
![Page 9: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/9.jpg)
How Branding Works in SharePoint• Themes
• In SharePoint 2007, themes were stored on the server in the
SharePoint 12 folder, and consisted of XML, CSS, and images that were
applied over the top of the default master page and CSS.
• In SharePoint 2010, themes are created with the Microsoft Office client
software (2007 and above), using either Word or PowerPoint to
create .THMX files that describe the 12 theme colors and two fonts
available in the new SharePoint themes.
![Page 10: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/10.jpg)
• Master page
• In SharePoint 2007: DEFAULT.MASTER and APPLICATION.MASTER.
• In SharePoint 2010:
• V4.MASTER : default master page that is used for many of the site templates
• NIGHTANDDAY.MASTER: This master page is accessible only in a
SharePoint Server 2010
• MINIMAL.MASTER: This master page is used only on pages that have their
own navigation or need extra space (such as dedicated application pages or the
search center).
How Branding Works in SharePoint
![Page 11: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/11.jpg)
How Branding Works in SharePoint• Using a starter Master Page:
• Microsoft’s Starter master page:
http://code.msdn.microsoft.com/odcSP14StarterMaster. This Starter
master page was built for SharePoint Foundation 2010, SharePoint
Server 2010.
• My own Starter master pages:
(http://startermasterpages.codeplex.com)
• Heather's Base Master Page:
http://www.heathersolomon.com/downloads/heathersbasemasterpage.zip
![Page 12: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/12.jpg)
Design Considerations
• Target Screen Resolution
• Table Layouts vs. Div Layouts
• Browser Versions
• Audience
![Page 13: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/13.jpg)
Forget IE6!
![Page 14: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/14.jpg)
Creating Wireframes Wireframes are skeletal page designs; they capture the layout and flow of a
website without focusing on colors and graphics.
• SharePoint wireframing and prototyping: http://intranetfactory.com/site/sampleReport.doc
• Demo: http://intranetfactory.com/Viewer/site1459/default.aspx?NodeId=33129• Resources for Visio : http://www.guuui.com/issues/01_06.php
![Page 15: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/15.jpg)
Creating Wireframes
![Page 16: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/16.jpg)
Creating Wireframes
![Page 17: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/17.jpg)
Tools of the Trade
![Page 18: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/18.jpg)
DOCTYPE! & SharePoint
“Quirks mode” ??The following is a list of the most popular DOCTYPES in use today:
• HTML 4.01 Strict : Allows all HTML elements but does not allow deprecated elements such as the <font> tag.
• HTML 4.01 Transitional: Allows all HTML elements including deprecated elements.
• XHTML 1.0 Strict: Similar to HTML 4.01 Strict, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
• XHTML 1.0 Transitional: Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
• Does/Will SharePoint 2010 support HTML5?
![Page 19: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/19.jpg)
DOCTYPE! & SharePoint• W3C HTML validator: http://validator.w3.org. • With SharePoint 2007 & 2010, the resulting page will not properly validate as XHTML 1.0
compliant. This is because several legacy ASP.NET controls used in SharePoint 2010 do not produce valid XHTML code.
Compatibility Mode in IE8• this feature to help with the display of web pages that were coded to older versions of Internet
Explorer.• <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
![Page 20: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/20.jpg)
CSS in SharePoint• SharePoint 2007: you are probably familiar with core.css and its nearly 5,000 lines of
CSS rules.
• SharePoint 2010: The default corev4.css: under 8,000 lines of code. And search.css: under 3,000 lines of code and wiki.css barely 50 lines of code
• Split into multiple files, only download what’s necessary for the page
CUSTOM STYLE SHEETS• <SharePoint:CssRegistration name=”/Style Library/customstyle.css”
runat=”server”/>• <SharePoint:CssRegistration name=”/Style Library/customstyle.css”
After=”corev4.css” runat=”server”/> : SP2010• <link media="all“ type="text/css" href="/_layouts/styles/customstyle.css"
rel="stylesheet">
CHEATSHEET• CSS Reference Chart for SharePoint 2007 :
http://www.heathersolomon.com/content/sp07cssreference.htm
CSS SPRITES
![Page 21: Branding sharepoint project](https://reader033.vdocument.in/reader033/viewer/2022061217/54b418e94a7959767f8b4620/html5/thumbnails/21.jpg)
Case Study