Responsive Design for SharePoint

transcript

Planning for SharePoint Branding

SPS ATL - 2013

Cathy Dew

Speaker Bio

Cathy Dew Senior Engineer at Planet Technologies

Graphic Designer, Consultant and SharePoint MVP

Over 6 years of SharePoint

branding experience

Author: SharePoint 2010: Six in One

catpaint1 on Twitter

Agenda Intro to responsive design When, where and if you should create a

responsive design. Responsive design discussions Responsive and SharePoint 2013

Two ways to create responsive designs

What is it? Design and Development should respond to

the user’s behavior and environment based on screen size, platform and orientation

Consists of a Mix of Flexible Grids and Layouts Flexible Images and Media CSS and Media Queries

Device Shapes/Sizes

Grid Based Layout

Common Grid Systems 960 Grid System Twitter Bootstrap Grid System Generator Flexible CSS Grid Many more…

“The grid system is an aid, not a

guarantee. It permits a number of

possible uses…” -Josef Muller-

Brockman

Grid systems explained… Do I really have to use a grid system?

These are meant to be a starting point something to help you in creating a flexible site.

It’s helpful – but not necessary Make your own, it all depends on

your project and what your client needs are.

Making it Flexible Taking your design beyond Flexible Grids

allows you to make a responsive site with images that resize and layouts based on media

Flexible Images and Media img {max-width: 100%;} Can apply to video and other rich media Has limitations

Max-width Limitations IE 6 and below isn’t supported Broader issues with Windows

IE 7 and lower Firefox 2 and lower

Windows 7 and Higher Fixed

Flexible Images & Backgrounds Create larger than needed image and use a

scale % to size it Overflow:Hidden Create Multiple Image Sizes and use them

accordingly *

Media Queries Despite our work with flexible grid layout and

flexible images our site might have issues when displayed small or widescreen

Media Types defined by W3C

Media Typesall Suitable for all devices.

braille Intended for braille tactile feedback devices.

embossed Intended for paged braille printers.

handheld Intended for handheld devices (typically small screen, limited bandwidth).

print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.

screen Intended primarily for color computer screens.

speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.

tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.

tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media Query @media screen and (min-width: 1024px)

Asks 2 questions of the browser Media type (screen) Query – in parenthesis feature and value

How to Apply Put these directly in a stylesheet with a

declaration - <link rel=“stylesheet” href=“sample.css” media=“screen and min-width: 1024px” />

Or attach to an import - @import url(sample.css) screen and (min-width: 1024px);

Why Responsive Design? We have to break away from how we

traditionally think about web design/development and start thinking with the new medium in mind.

Responsive SharePoint Sites

Maryland.gov

LGOntario.ca

MarshfieldClinic.org

CFAInstitute.org

When to Create Responsive? What are the device/browser needs? What type of Site is it?

Questions you may be asking… Where do I start to make a Responsive

Design? What is this really going to give the Client/me? How much do I need to know to create a

Responsive SharePoint site?

SharePoint Challenges What are the challenges we face?

Design Manager creates an HTML master – separation of HTML and .master files

Typically Lots of Devices Type of Sites Extra User Experience

and Branding effort and costs

Not good for intranets

Tools for Responsive SharePoint Image Renditions Device Channels

Image Renditions Optimize Images for different resolutions

Define multiple sizes of image files to be used in your SharePoint sites

Must have Blob Cache enabled in web.config

Add Screenshots and Steps - Sample

Create Image Renditions

Modify Image Rendtions

Device Channels Device Channels Pros and Cons

A DC can use a particular MP Specified for Different Browsers

Device Channels Device Channels Pros and Cons

More Development for creation and Management of Multiple Master Pages

Confusing Performance??

Responsive Design and SharePointWorking with Responsive Design and SharePoint 2013, create, work with and utilize.

Browsers that Support RWD

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

Browsers that Support RWD http://blog.divshot.com/post/29829585371/chr

ome-developer-tools-responsive-design

Great tools for checking your designs! MattKersley.com/responsive/ Quirktools.com/screenfly/ Screenqueri.es/ Responsinator.com/

RWD Breakpoints

http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Thank you for attending!

Helpful Links http://msdn.microsoft.

com/en-us/library/jj733517.aspx

http://blogs.technet.com/b/tothesharepoint/archive/2013/02/07/sharepoint-and-mobile.aspx

http://blog.mastykarz.nl/responsive-image-renditions-sharepoint-2013/

http://msdn.microsoft.com/en-us/library/jj733518.aspx

Other links for reading http://blog.cloudfour.com/css-media-query-for-mo

bile-is-fools-gold/ http://alistapart.com/article/responsive-web-desig

http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/

http://www.html5rocks.com/en/mobile/responsivedesign/

http://coding.smashingmagazine.com/2013/03/11/responsible-web-design/

Questions

@catpaint1 www.sharepointcat.com - blog

Twitter Contests!

Mention @SPS_ATL & #SPSATL You MUST Mention a speaker OR a sponsor to

qualify You must be present to win!

Drive your own popularity – mention your Twitter handle

Win prizes for best tweets!

Multiple prizes each session! Session Prizes

1 4 $25 gift cards

2 4 $25 gift cards

3 4 $25 gift cards

4 4 $25 gift cards

5 4 $25 gift cards

Talk About Yourself!

Fill out surveys for big prizes

SCAN QR CODES

47 |SharePoint Saturday Atlanta47 |SharePoint Saturday Atlanta

Join us for SharePint Meehan’s – 200 Peachtree Street Right after the event ends First drink is on B2B Technologies

SharePint Directions

Please thank our sponsors!

Platinum Sponsors

Gold Sponsors

Silver Sponsors

SharePint

Item & Event Sponsors

Speaker Shirts Attendee Shirts

Abel Solutions

Speaker Dinner

Responsive Design for SharePoint

Technology