Building “Responsive
Web Design” for your
Communication and
Marketing Strategy
Danny Boulanger
Solutions Expert
Franco Bao...
Agenda
Challenges
What the Responsive Web Design framework is
Discussion about InBound Marketing strategy
See it in action...
Your Trainers
Our clients

Chambre des
communes
Challenges
Remember When?
Launch your Browser to view a site and get this

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 ...
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 Market...
Market Changes
Trends
Many Business Applications
Articles
Blog Posts
Books/eBooks
Brochures
Case Studies
Demos
Email Marketing

Information Guid...
What is
Responsive Web
Design?
What is Responsive Web Design
Three key technical features are the heart of responsive Web
design:
• media queries to dete...
Responsive or Adaptive
A responsive design fluidly changes to fit any browser size. The
media-query changes should almost ...
What Elements Makes RWD Possible?
HTML5
New features of media playback allows you to put <audio> and <video> by default
in...
What Elements Makes RWD Possible?
CCS3
The @Font-face properties. Allow Corporate fonts as text and not images

Border rad...
RESPONSIVE WEB DESIGN
AND A SHAREPOINT WEBSITE
Responsive Difficulties in SharePoint
SharePoint comes with it’s own extensive css which needs to be
overwritten.
Navigati...
SEE IT IN ACTION
BENEFITS FOR YOU
AND YOUR CUSTOMERS
Conclusion
Benefits
Provides real content access to your reader
Supports your internal content review process
Reduces your...
Contact
Danny Boulanger
Expert en solutions SharePoint
514.762.1370
dboulanger@alcero.com
www.alcero.com
http://blog.alcer...
Upcoming SlideShare
Loading in …5
×

Responsive Web Designed for your communication and marketing needs

953 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Designed for your communication and marketing needs

  1. 1. Building “Responsive Web Design” for your Communication and Marketing Strategy Danny Boulanger Solutions Expert Franco Bao Solutions Expert, Services
  2. 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. 3. Your Trainers
  4. 4. Our clients Chambre des communes
  5. 5. Challenges
  6. 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. 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. 8. Trends
  9. 9. Trends in Intranet Employee are getting mobile (In the U.S., an estimated 13 million) Content Approval Agreement
  10. 10. Trends in Marketing Why having sales people calling your customer when they don’t need you? Email Marketing Inbound Marketing
  11. 11. Market Changes
  12. 12. Trends
  13. 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. 14. What is Responsive Web Design?
  15. 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. 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. 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. 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. 19. RESPONSIVE WEB DESIGN AND A SHAREPOINT WEBSITE
  20. 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. 21. SEE IT IN ACTION
  22. 22. BENEFITS FOR YOU AND YOUR CUSTOMERS
  23. 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. 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

×