Responsive Web Designed for your communication and marketing needs
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Designed for your communication and marketing needs

on

  • 557 views

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

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

Statistics

Views

Total Views
557
Views on SlideShare
554
Embed Views
3

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Designed for your communication and marketing needs Responsive Web Designed for your communication and marketing needs Presentation Transcript

    • Building “Responsive Web Design” for your Communication and Marketing Strategy Danny Boulanger Solutions Expert Franco Bao Solutions Expert, Services
    • 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 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]-->
    • 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 is Responsive 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 .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
    • 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 YOU AND 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