Top Banner
39

SharePoint Saturdays Cape Town 2012

Jul 09, 2015

Download

Travel

Troy Gerber

The session will look at new design trends such as Metro Design Principles and Responsive Web Design. The Session will show how these principles can be used to freshen up an existing SharePoint 2010 Intranet or solution using these methods
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SharePoint Saturdays Cape Town 2012
Page 2: SharePoint Saturdays Cape Town 2012
Page 3: SharePoint Saturdays Cape Town 2012
Page 4: SharePoint Saturdays Cape Town 2012

SharePoint sucks…

Page 5: SharePoint Saturdays Cape Town 2012

Two trends that you can use with SharePoint

Page 6: SharePoint Saturdays Cape Town 2012
Page 7: SharePoint Saturdays Cape Town 2012

What is Modern UI ("Metro")

Page 8: SharePoint Saturdays Cape Town 2012
Page 9: SharePoint Saturdays Cape Town 2012

UI

Page 10: SharePoint Saturdays Cape Town 2012

Design Principles of Modern UI ("Metro")

Page 11: SharePoint Saturdays Cape Town 2012
Page 12: SharePoint Saturdays Cape Town 2012

Apply these Design Principles

Page 13: SharePoint Saturdays Cape Town 2012

Modern UI ("Metro") – Simple Design

Page 14: SharePoint Saturdays Cape Town 2012

Modern UI ("Metro") – List Driven Design

Page 15: SharePoint Saturdays Cape Town 2012
Page 16: SharePoint Saturdays Cape Town 2012
Page 17: SharePoint Saturdays Cape Town 2012

One size fits all…

Page 18: SharePoint Saturdays Cape Town 2012

Let's demonstrate…

Page 19: SharePoint Saturdays Cape Town 2012
Page 20: SharePoint Saturdays Cape Town 2012
Page 21: SharePoint Saturdays Cape Town 2012
Page 22: SharePoint Saturdays Cape Town 2012

Jeffrey Veen

Founder and CEO at Typekit

Page 23: SharePoint Saturdays Cape Town 2012
Page 24: SharePoint Saturdays Cape Town 2012
Page 25: SharePoint Saturdays Cape Town 2012
Page 26: SharePoint Saturdays Cape Town 2012

16

Columns

Width: 90%

Max-width: 960px

Page 27: SharePoint Saturdays Cape Town 2012

Max-width:100%;

Page 28: SharePoint Saturdays Cape Town 2012
Page 29: SharePoint Saturdays Cape Town 2012

Latest Chrome (Mac/PC)

Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)

Latest Safari

IE9, IE8, IE7

Page 30: SharePoint Saturdays Cape Town 2012
Page 31: SharePoint Saturdays Cape Town 2012

1. One solution that works for every

scenario

2. Sharing a link doesn't send a friend

to the wrong site version

3. Workspace friendly, not just device

friendly

4. Encourages "Mobile First"

design, an evolving best practice

5. Ease of use can increase viewers

1. Development time

2. Browser compatibility

3. Load times if bandwidth is not

considered

4. Different devices/Different

objectives

5. Proper image resizing includes re-

cropping images appropriately

6. Require custom page layouts

Page 32: SharePoint Saturdays Cape Town 2012
Page 33: SharePoint Saturdays Cape Town 2012
Page 34: SharePoint Saturdays Cape Town 2012
Page 35: SharePoint Saturdays Cape Town 2012
Page 37: SharePoint Saturdays Cape Town 2012
Page 38: SharePoint Saturdays Cape Town 2012
Page 39: SharePoint Saturdays Cape Town 2012