Branding effort under SharePoint 2013

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/