Upload
alcero
View
645
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
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
www.alcero.com
http://blog.alcero.com
www.twitter.com/alcerosolution