This document discusses branding strategies in SharePoint 2013. It begins by listing supported browsers and mobile devices. It then summarizes the three levels of branding in SharePoint 2013 - low, medium, and high effort. For each level it provides details on the tools used and steps involved, such as using themes, design manager, code snippets, and development. It concludes by recommending steps for an branding workshop including prototyping, designing, testing, and deploying solutions.

3. nabil.babaci@azeo.com
http://dotnet4ever.fr
https://www.codeplex.com/site/users/view/nabilbabaci

4. Agenda

5. 2013 et le branding

6. Browser (PC)
Browser Supported Not supported
Internet Explorer 10 X
Internet Explorer 9 X
Internet Explorer 8 X
Internet Explorer 7 X
Internet Explorer 6 X
Mozilla Firefox (Latest
version in-market)
X
Google Chrome (Latest
version in-market)
X
Safari (Latest version in-
market)
X

7. Browser (Mobile)
Mobile device
operating system
Operating system
version
Browser Smartphone device
Windows Phone
Windows Phone 7.5
or later versions
Internet Explorer
Mobile
Supported
Windows
Windows 7 or later
versions
Internet Explorer Not applicable
iOS 5.0 or later versions Safari Supported
Android
4.0 or later
versions
Android Browser Supported

8. Design sous SP2010
Sketche
s
CSS
HTML
Dreamweaver, MS Expression / etc.
SharePoint Designer / Visual Studio
Custom
Nav
provider

9. Design sous SP2013
Auto
Convert
Snippet
Gallery
Channel
settings
Outils natifs SharePoint
Dreamweaver, MS expression Web / etc.
Sketches
CSS
HTML
Upload

10. De la mobilité

11. Mobile > Device Channel
• Panneau de configuration de canal
périphérique

12. Mobile > Données adaptatives

13. Responsive Design
Version IE Firefox Chrome Safari Opera iOS Safari
Opera
Mini
Android
Browser
Blackberr
y Browser
2.1
2.2
6,0 3.2 2.3
7,0 4.0-4.1 3.0
8.0 4.2-4.3 4.0
9.0 20.0 26.0 5.1 5.0-5.1 4.1 7.0
Actuel 10.0 21.0 27.0 6.0 12.1 6.0-6.1 5.0-7.0 4.2 10.0
Future 11.0 22.0 28.0 7.0 15.0 7.0
Next 23.0 29.0

14. Wireframe

15. WireFrame avant tout
• Axure
• Balsamiq
• Mockingbird
• Lovely Charts
• Cacoo
• Gliffy
• Lumzy
• Mockflow
• Pencil Project
• SimpleDiagrams
• Denim

16. Retour en arrière

17. 2007

18. 2010

19. Niveau 1 de Branding
Low effort

20. Niveau 1 >Changement de look
Themes basés sur HTML 5
• PowerPoint ( .THMX) plus necéssaire
Navigation basée sur le Term Store
Image (resizing)
Inclus Master Page, Colors, Fonts, Background Image et
Preview File
Outils : Adobe Dreamweaver, Microsoft Expression Web
etc…

21. Niveau 1 >Vues composées
• /_catalogs/theme/15/

22. Niveau 2 de Branding
Medium effort

23. Niveau 2 >Designer Manager > Conception
Design Manager
• Pas à Pas – 9 étapes (Master Pages /
Page Layout)
• Prise en charge / HTML- CSS- JS
• Injection de Code SharePoint ( Master
Page)
• Génération du .master
• Mapping ( WEBDAV ) catalogs
• SPDesigner est moins utile.

24. Niveau 2 >Designer Manager > Code Snippet

25. Niveau 2 >Designer Manager > Packaging
Master Page
Gallery, Style Library, Theme Gallery,
Device Channels list, Page content
types, Pages)

26. Niveau 3 de Branding
High effort

27. Niveau 3 >Développement

28. ©2012 Microsoft Corporation. All rights reserved. Content based on SharePoint 15 Technical Preview and published July 2012.

29. Conclusion

30. Conclusion >Etapes
Atelier Users
Maquette /
Prototye (PSD)
Maquette HTML/
CSS
SharePoint
Branding (1,2,3)
DéveloppementsTests
Solution
Package
Production
Package

31. Pour aller plus loin
https://ugsfdesignstarterkit.codeplex.com/