Danny Boulanger

Solutions Expert

Franco Bao

Solutions Expert, Services

Building “Responsive Web Design” for your Communication and Marketing Strategy

Agenda

� Challenges

� What the Responsive Web Design framework is

� Discussion about InBound Marketing strategy

� See it in action

� Differences between a standard website and a SharePoint website

� Benefits for you and your customers

Your Trainers

Our clients

Chambre des communes

Challenges

Remember When?

� Launch your Browser to view a site and get this

<link href="../css_files/main.css" rel="stylesheet" type="text/css" media="screen" />

<!--[if lte IE 6]>

<link href="../css_files/IE6.css" rel="stylesheet" type="text/css" media="screen" />

<![endif]-->

<!--[if lte IE 7]>

<link href="../css_files/IE7.css" rel="stylesheet" type="text/css" media="screen" />

<![endif]-->

Or having to do this to your html for different browsers

Remember When?

� Two websites, one for your desktop and one specifically for mobile

� Two complete html, one for desktops and one for mobiles with a

redirect code

… or

� <link rel="stylesheet" media="handheld" />

� <link rel="stylesheet" media="screen" />

Trends

Trends in Intranet

� Employee are getting mobile (In the U.S., an estimated 13 million)

� Content Approval

� Agreement

Trends in Marketing

� Why having sales people calling your customer when they don’t need you?

� Email Marketing

� Inbound Marketing

Market Changes

Trends

Many Business Applications

� Articles

� Blog Posts

� Books/eBooks

� Brochures

� Case Studies

� Demos

� Email Marketing

Information Guides

Live Streamed Events

Manuals

Microsites/Web Pages

Online Courses

Podcasts/Videocasts

Presentations

Press Releases/Reviews

Product Data Sheets

Reference Guides

Resource Libraries

What isResponsive Web Design?

What is Responsive Web Design

� Three key technical features are the heart of responsive Web design:

• media queries to detect the device or the resolution of the device

being used@media screen and (min-width: 751px) and (max-width: 999px) { }

• A flexible grid-based layout that uses relative sizing

Percentages and floating elements.

• Flexible images and media, through dynamic resizing or CSS

� Truly responsive Web design requires all three features to be implemented and create a flexible foundation.

Responsive or Adaptive

� A responsive design fluidly changes to fit any browser size. The media-query changes should almost not be identifiable, fluidly change and respond to fit any screen or device size.

� An adaptive design changes to fit a defined set of browser sizes. Adaptive design revolves around how a site will change to fit a predetermined set of screen and device sizes.

Responsive Example: http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Adaptive examples: http://www.colly.com, http://adampolselli.com

What Elements Makes RWD Possible?

� HTML5

� New features of media playback allows you to put <audio> and <video> by default into your browser with no <embed> which makes the content customizable and needs no plugins

� New Tags to better define your content. <header>, <nav>, <footer>, <article> and <section>. SEO friendly tags which help your site ranking in Google

� Universal device compatibility. Allows developers to target the largest amount of devices with the least amount of developmental effort.

� Works in accordance with CSS 3 Stylesheets that have progressed for RWD

What Elements Makes RWD Possible?

� CCS3

� The @Font-face properties. Allow Corporate fonts as text and not images

� Border radius ability to make rounded corners

� Box shadow customizable to developer preferences

� Dynamic widths and proportional sizing for multiple screen sizes.

Max-width, min-width, img {width:100%} and media queries

.roundedboxshadow { -moz-box-shadow: 3px 3px 5px #535353; -webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px;-webkit-border-radius: 6px;

border-radius: 6px 6px 6px 6px; }

RESPONSIVE WEB DESIGN AND A SHAREPOINT WEBSITE

Responsive Difficulties in SharePoint

� SharePoint comes with it’s own extensive css which needs to be overwritten.

� Navigation not responsive friendly

� Navigation is hover oriented. jQuery to enable touchStart for mobiles

� body #s4-bodyContainer style prevents the screen from shrinking when displaying in mobile devices, so add body #s4-bodyContainer{ min-width:0; }

� OOB SharePoint Controls difficult to style

� i.e. OOB search control

SEE IT IN ACTION

BENEFITS FOR YOUAND YOUR CUSTOMERS

Conclusion

� Benefits

� Provides real content access to your reader

� Supports your internal content review process

� Reduces your cost, mid and long term to maintain your content

� Supports various communications and marketing needs

� Challenges

� Your content design must be developed for Responsive

� Animation limitation with jQuery

Contact

Danny Boulanger

Expert en solutions SharePoint

514.762.1370

dboulanger@alcero.com

www.alcero.com

http://blog.alcero.com

www.twitter.com/alcerosolution