This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action

1. Building “Responsive
Web Design” for your
Communication and
Marketing Strategy
Danny Boulanger
Solutions Expert
Franco Bao
Solutions Expert, Services

2. 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

3. Your Trainers

4. Our clients
Chambre des
communes

5. Challenges

6. Remember When?
Launch your Browser to view a site and get this
Or having to do this to your html for different browsers
<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]-->

7. 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" />

8. Trends

9. Trends in Intranet
Employee are getting mobile (In the
U.S., an estimated 13 million)
Content Approval
Agreement

10. Trends in Marketing
Why having sales people calling
your customer when they don’t
need you?
Email Marketing
Inbound Marketing

11. Market Changes

12. Trends

13. 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

14. What is
Responsive Web
Design?

15. 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.

16. 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

17. 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

18. 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
.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; }
Dynamic widths and proportional sizing for multiple screen sizes.
Max-width, min-width, img {width:100%} and media queries

19. RESPONSIVE WEB DESIGN
AND A SHAREPOINT WEBSITE

20. 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

21. SEE IT IN ACTION

22. BENEFITS FOR YOU
AND YOUR CUSTOMERS

23. 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

24. Contact
Danny Boulanger
Expert en solutions SharePoint
514.762.1370
dboulanger@alcero.com
www.alcero.com
http://blog.alcero.com
www.twitter.com/alcerosolution