Fulfilling the promise of Responsive Design with SharePoint 2013

2 | SharePoint Saturday New York City 2013
 The Need
 The Design
 The SharePoint
 The Promise

There’s just too many choices…

http://www.w3schools.com/browsers

http://finecitizens.com/defineResponsive/

 Types
 Images
 Media Queries
 Grid Layouts

Types
EMunitequaltothecomputedvalueofthefont-sizepropertyoftheelementitisdeclared
on
body { font-size: 16px; }
1em = 16px
.5em = 8px
body { font-size: 10px; }
1em = 10px
.5em = 5px
REMlikeanEMunit,butalwaysrefersbacktotherootfont-size,assetontheHTMLtag
html { font-size: 16px; }
1rem = 16px
.5rem = 8px
html { font-size: 10px; }
1rem = 10px
.5rem = 5px

Calculate your percentages… Really, no eye
balling.
Create 3 equally sized columns of 230px within a 1000px container:
230 / 1000 = 0.23
.col { width: 23%; }
With 10px margins? No problem:
10 / 1000 = 0.01
.col { width: 23%; margin: 1%; }
http://www.responsivegridsystem.com

 Deliver small images to small devices
 Don’t allow images to stretch past their
designated width
img{
max-width:100%;
height:auto;
}

Media queries are made up of a media type and a
query, usually checking for max-width or min-width
which work universally.
@media screen and (max-width: 480px) {
.ChooseRendition {
background-image:url(“SmallImageBackground.jpg”);
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.ChooseRendition {
background-image:url(“MediumImageBackground.jpg”);
}
}

Media queries are made up of a media type and a
query, usually checking for max-width or min-width
which work universally.

Designers still need to come up with layouts for
various form factors.
• Desktops
• Tablets
• Mobile

 Easier to manage content
 Maintain a strong brand presence and consistent
experience
 Once designed, does not have to be redone (v. attractive
to the enterprise)
 Responsive design establishes a design framework that
is relatively future proof so costs across time are radically
reduced.

 Significant front loaded effort in UI code.This is often
unattractive to enterprises because they cannot see the
long term cost benefit. Cleaner code reduces latency but
time is required.
 Testing is also significantly increased
 New devices on the market place are not a guarantee
that the website will display properly (though admittedly
less risk than a site that has no responsive design)

Designthedesktopsolutionfirstandtakeawaystylesasyoudeterminewherethe
breakingpointsareinthedesign:
 Youcanstillcomeupwithabasesetofpropertiesthatapplyacrosstheboard,but
yougettherethroughaprocessoftakingawaystylesandmovingthemtomedia
queries.
 Afterdeveloping thedesktopversion,decreasethewidthofthewindowuntilyouhit
thepointwherethedesigniscompromised(columnsaretoonarrowforcontent,
navigationwrapstomultiple lines,etc.)
 Movetheoffendingstylesintoanewmediaquery
 Repeatthisprocessuntilyougettoamobile/phonewidth
 Ofcourse,testingonotherdevicesalongthewaywillsignificantlyimprovethe
outcomeofthisprocess,butthebrowserisagoodstartingplace

Design the mobile solution first and move up from there.This is
generally seen as the preferred approach.
 This not only forces you to consider what content is most important
given the limited real estate, it also gives you abase set of styles that
are applicable tomobile right up todesktop
 Asyou increase the real estate, determine what elements can be
brought into view or adjusted and add styling for them using a media
query with the min-width set tothe current browser width
 Repeat until you’ve reach the desktop view

Now the
SharePoint side of
things

Web Part
Web Part Web Part
Web Part Web Part

Provides a mechanism for template based branding, yet still allows
power users tomake minor changes
 Master Page
 Color palettes - .spcolor
 Font palettes - .spfont
 Background image
 Preview - .preview

 Render a single publishing site in multiple ways
by using different designs that target different
devices
 Assign MasterPages to device channels to create
specific experiences for each device.

Device User agent substring(s)
Windows Phone •Windows Phone OS 7.5 (Specific to
Windows Phone 7.5 phone.)
•Windows Phone OS (Generic
substring for all Windows Phone
versions.)
iPhone iPhone
iPad iPad
Android Android

 Enable you to display differently sized versions of
an image on different pages in a publishing site,
based on the same source image. When you
create an image rendition, you specify the width
and/or height for all images that use that image
rendition. The image renditions are available for
every image that is uploaded to a library in that
site collection.

 Bootstrap for SharePoint
 Desktop First approach
 ZURB Foundation
 Mobile FirstApproach
Each Framework comes with a MasterPage, set of Style Sheets and
an assortment of Page Layouts that are developed for Responsive
Web Design.
http://responsivesharepoint.codeplex.com/releases

 Ton of jQuery plugins to help smooth the
transition to a responsive design
http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/

Thank you!
@JustinSypekwww.linkedin.com/in/justinsypek/

 Please remember to turn in your filled out bingo
cards and event evaluations for prizes.
 SharePint is sponsored by Slalom at Whiskey
Trader (Between 55th and 56th on 6th Avenue).
 Follow SharePoint Saturday New York City on
Twitter @spsnyc and hashtag #spsnyc

Images:
 fromthecurb.com
 sugarbushcc.com
 lauriecalzada.files.wordpress.com
 http://farm5.static.flickr.com

Fulfilling the promise of Responsive Design with SharePoint 2013

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Fulfilling the promise of Responsive Design with SharePoint 2013

Semelhante a Fulfilling the promise of Responsive Design with SharePoint 2013 (20)

Último

Último (20)

Fulfilling the promise of Responsive Design with SharePoint 2013

Notas do Editor