• Share
  • Email
  • Embed
  • Like
  • Private Content
Responsive Web Design - One Website for 6500 Devices

Responsive Web Design - One Website for 6500 Devices



Responsive web design lets you create a single website that detects the screen size of the device viewing it and fluidly adapts site content, layout and functionality in response to fit that device. ...

Responsive web design lets you create a single website that detects the screen size of the device viewing it and fluidly adapts site content, layout and functionality in response to fit that device. Responsive design is more than just mobile website design. This resource introduces the responsive web design approach, shows examples, discusses 10 direct business benefits, and can be used to help marketers present the concept of responsive design to their team.

Learn more at rwd.quarry.com



Total Views
Views on SlideShare
Embed Views



5 Embeds 25

https://si0.twimg.com 10
https://twitter.com 9
https://twimg0-a.akamaihd.net 3
http://ams.activemailservice.com 2
http://www.slashdocs.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

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.


13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • In the early days, the web was a much simpler place. In terms of devices that buyers could use to access it, this was about it.
  • Not anymore. Today, there are literally thousands of mobile device models – each with varying screen sizes – capable of visiting a website. This device diversity has created some significant challenges for marketers.
  • And in terms of a trend, this one isn’t going away! Internet traffic generated from mobile devices is set to soon overtake traffic from desktops.
  • You could say this issue – or opportunity, depending how you look at it – is like a freight train heading marketers way. The problem is, too many are looking the other way…
  • In fact, right now, most of them are looking the other way. In a recent survey by Econsultancy, 70% of companies said they had yet to launch a mobile site.
  • The thing is, they are 100% wrong. Every website today is a mobile website, whether you know it or not.
  • Remember that problem of device diversity? Well up until recently, marketers have handled that by…
  • … building sites that detect devices and redirect visitors to unique versions of the site specifically for that device. That’s a lot of sites to build and maintain!
  • While device detection will still play an important role in delivering great experiences for the mobile environment, there is now another tool in your toolkit.
  • It’s called Responsive Web Design, and it’s an approach to designing and developing websites that allow them to fluidly adapt their layout, content and even functionality in response to the screen size of the device that is viewing it, all from a single code base.
  • Here are a few examples of some great responsive websites. Notice how the layout, functionality and content in these websites adapt in response to the different browser sizes when viewed on different devices – while maintaining consistency in brand experience, user experience and the marketing messages conveyed.
  • Technically speaking, the practice of building a responsive website (as originally discussed by Nathan Marcotte) draws on a couple of key ingredients: namely, fluid grids and layouts (with flexible images and media) that use media queries within Cascading Style Sheets.Media queries, a relatively new enhancement of CSS3, are the real secret behind making a site responsive. These are the magic bits of code that inform the browser, on load, which styles it should or should not apply to the page, based on information about the device such as its screen size, orientation, pixel density and so on. The same website can then be visually rendered as different layouts for different situations to appropriately optimize the user experience.
  • Here are 10 reasons to consider Responsive Web Design:1. Build brand equity. We’ll delight buyers, and build greater equity into our brand when we deliver the right user experience for the right screen size at the right time.2. Offer a consistent brand experience. We’ll offer a consistent (note: not “identical”) brand experience across devices for your potential buyers.3. Prioritize your messaging. We can maintain prioritization and flow of your messaging regardless of device.4. Address buyers’ needs. We can use context-inspired content strategy and information architecture to address buyers’ needs.5. Save money and time. We can build and manage a single site with a single code base for long-term cost savings and easier maintenance.6. Increase efficiency. We can consolidate content management for greater efficiency and consistency.7. Lower complexity. We can lower complexity in some respects, with no special technology required to sniff browsers and redirect.8. Provide clarity. Marketing tactics can promote one URL to buyers and prospects.9. Build traffic. We can enable better SEO, with all traffic building visibility for the same site.10. Prepare your online presence for the future. In terms of mobile devices, there’s always a next big thing on the horizon. A responsive approach to web design and development will help us get ready for it today.
  • Here are 6 ways to get started:1. Get internal buy-in: Kick-start the conversation by challenging ourselves to answer these questions:“How mobile-friendly is our website today, really?”“Are the experiences we deliver in line with our brand promise?”“In what ways could we make those experiences better for mobile visitors?”2. Determine how mobile our buyers are today:Strengthen our evidence-based business case for a responsive website by putting in place the measurement tools you’ll need to answer this key question: “To what extent are our buyers using mobile devices to engage with us today?”.3. Start with a campaign landing page: Pick some campaign landing pages to experiment with responsive – they’re a natural place to start. 4. Assess the “responsive-readiness” of current site(s):To understand whether or not your site is a good candidate for a responsive retrofit, have our digital marketing team or agency conduct a responsive-readiness audit.5. Investigate “retrofitting” current site(s) to go responsive: It may be possible to recalibrate your existing websites with media queries that enable them to become “responsive” too. Think of this approach as a “responsive retrofit” without a full site redesign and rebuild.6. Dedicate a budget for a responsive pilot: Pilot a responsive initiative on a small scale before rolling it out in full.

Responsive Web Design - One Website for 6500 Devices Responsive Web Design - One Website for 6500 Devices Presentation Transcript

  • RESPONSIVE WEB DESIGNHow to create a single website that deliversa better experience across all devices
  • TRADITIONALWEB DESIGN FORMOBILE BROWSINGDetect the device and redirectto a unique version of the sitespecifically for that device
  • RESPONSIVEWEB DESIGNA website that fluidly adapts its layout,content and even functionality in responseto the device that is viewing it
  • cavoy.com
  • us.onsior.com
  • lounge.norton.comCopyright © 2012 Symantec Corporation. All rights reserved. Reprinted with permission from Symantec Corporation.
  • quarry.com
  • THE INGREDIENTS OFRESPONSIVE WEB DESIGN• Media queries (CSS3)• Fluid grids & layouts (and often fixed grids too)• Flexible images & media
  • 10 DIRECT BENEFITSFOR YOUR BUSINESS1. Build brand equity2. Offer a consistent brand experience3. Prioritize your messaging4. Address buyers’ needs5. Save money and time6. Increase efficiency7. Lower complexity8. Provide clarity9. Build traffic10. Prepare your online presence for the future
  • HOW COULDWE GET STARTED?1. Get internal buy-in2. Determine how mobile our buyers are today3. Start with a campaign landing page4. Assess the “responsive-readiness” of current site(s)5. Investigate “retrofitting” current site(s) to go responsive6. Dedicate a budget for a responsive pilot
  • WANT TOLEARN MORE?Download this free 26-page Guideat to learn what Responsive WebDesign is, why you need to knowabout it and how to get started.See what websites look likeon various mobile devices usingour testing tool.Or view our video to explore howResponsive Web Design delivers abetter customer experience.
  • Quarry Integrated Communications1440 King Street NorthSt. Jacobs, OntarioCanada N0B 2N0+1 519.664.2999www.quarry.comresponsive@quarry.com