{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Responsive Design Overview, Resources and Tools |Digital.gov",
    "description": "Responsive Design Overview, Resources and Tools",
    "home_page_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/","feed_url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/06/11/responsive-design/index.json","item" : [
    {"title" :"Responsive Design Overview, Resources and Tools","summary" : "Responsive Web design refers to a fluidly constructed Web page layout that scales from handheld device displays to large, high-resolution computer displays using flexible typography, flexible images, fluid grids, and CSS3 media queries. For years, most Web teams designed for the desktop. Branding, navigation, work flows – the overall look & feel of online applications","date" : "2013-06-11T13:08:25-04:00","date_modified" : "2024-04-02T09:45:13-04:00","authors" : {"jparcell" : "Jacob Parcell"},"topics" : {
        
            "mobile" : "Mobile",
            "product-and-project-management" : "Product and project management",
            "user-experience" : "User Experience"
            },"branch" : "cm-topics-button-component",
      "filename" :"2013-06-11-responsive-design.md",
      
      "filepath" :"news/2013/06/2013-06-11-responsive-design.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/cm-topics-button-component/content/news/2013/06/2013-06-11-responsive-design.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/cm-topics-button-component/content/news/2013/06/2013-06-11-responsive-design.md","slug" : "responsive-design","url" : "/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/06/11/responsive-design/","content" :"\u003cp\u003eResponsive Web design refers to a fluidly constructed Web page layout that scales from handheld device displays to large, high-resolution computer displays using flexible typography, flexible images, fluid grids, and \u003ca href=\"http://www.w3.org/TR/css3-mediaqueries/\" rel=\"nofollow\"\u003eCSS3 media queries\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eFor years, most Web teams designed for the desktop. Branding, navigation, work flows – the overall look \u0026amp; feel of online applications – were all considered reasonable areas to distinguish one’s online presence from others. Things have changed so dramatically over the past few years that starting with the desktop may now be the backwards way of creating a web site. We have to be able to think in systems. Mobile is a helpful wedge there, because you just see the panic on people’s faces when they say, “What do you mean, I have to support the iPhone and Android and Blackberry and tablets … and is this ever going to get better?”\u003c/p\u003e\n\u003cp\u003eNo, it’s not going to get better. The interactive landscape is increasingly complex. It includes a vast array of mobile devices (feature phones, smartphones, tablets), highly-specialized devices (eReaders, TVs, Internet of things) and more traditional digital devices (desktops, laptops, netbooks). Plus, we don’t know what’s right around the corner. So the question becomes clear: How do we design for all these devices? The only way we’re ever going to support all those things is if we have a reusable content store that is flexible, intelligent, and nimble.\u003c/p\u003e\n\u003cp\u003eRead: \u003ca href=\"http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-will-disrupt-our-old-school-ux-assumptions.htm\" rel=\"nofollow\"\u003eSmall, cheap devices will disrupt our old-school UX assumptions (The Coming Zombie Apocalypse)\u003c/a\u003e which discusses how the coming wave of cheap electronic devices will end up disrupting the old user experience assumptions.\u003c/p\u003e\n\u003ch2 id=\"toc0\"\u003e\u003ca name=\"x-Why use Responsive Web Design?\"\u003e\u003c/a\u003eWhy Use Responsive Web Design?\u003c/h2\u003e\n\u003cp\u003eFrom a mobile user experience perspective, forcing the use of separate mobile versions of websites or mobile apps presents a problem, specifically with the consistency and continuity of following hyperlinks. Often links to desktop web content break when a mobile redirect is inserted without the intelligence to find the equivalent mobile version of the content in question. Worse, if a mobile user tries to access a hyperlink and is presented instead with a full screen advertisement to go to their app store and download the mobile app for the organization they’re trying to get at, they are inconvenienced with either having to go through all the downloading and installation steps and waiting, or else they are going to have to click out of the advertisement and hope that they can still access the content they intended to see. Why not just deliver the content to the user in a tidy mobile format with a single URL that is intelligent enough to reformat the layout based on the dimensions of the screen being used to access it?\u003c/p\u003e\n\u003cp\u003eIn addition to the user experience considerations, mobile versions of websites and mobile content apps are arguably an unnecessary additional expense and effort to maintain, and mobile applications developed using native APIs such as Objective-C require additional skills to develop. Moreover, the development team is subject to the whims of the approval process of the app store in question to publish and distribute their apps and any maintenance updates.\u003c/p\u003e\n\u003cp\u003eFinally, using responsive design techniques means that your web layout stands a stronger chance of being able to adapt to the wide range of screens currently available, as well as future devices that haven’t hit the market yet.\u003c/p\u003e\n\u003ch2 id=\"toc2\"\u003e\u003ca name=\"x-Future-friendly Theming\"\u003e\u003c/a\u003eFuture-friendly Theming\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eThe base content and default presentation are mobile, and optimized for the very simplest devices first. We’ve defined this as ‘basic’ support.\u003c/li\u003e\n\u003cli\u003eDevices with small screens and media query support are served an enhanced layout—and occasionally—more complex content. We’ve called this ‘mobile’.\u003c/li\u003e\n\u003cli\u003eFinally, the layout and content are smartly enhanced to reflect the ‘desktop’ context.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cspan style=\"font-size: 1.17em;\"\u003eImages\u003c/span\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://www.cloudfour.com/responsive-imgs/\" rel=\"nofollow\"\u003eResponsive IMGs — Part 1\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.cloudfour.com/responsive-imgs-part-2/\" rel=\"nofollow\"\u003eResponsive IMGs Part 2 — In-depth Look at Techniques\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/\" rel=\"nofollow\"\u003eResponsive IMGs Part 3 — Future of the IMG Tag\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"toc5\"\u003e\u003ca name=\"x-WARNING: Some Page Elements are not so Responsive-Tables\"\u003e\u003c/a\u003eTables\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/\" rel=\"nofollow\"\u003eA Responsive Design Approach for Complex, Multicolumn Data Tables\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"toc6\"\u003e\u003ca name=\"x-WARNING: Some Page Elements are not so Responsive-Tools\"\u003e\u003c/a\u003eTools\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://www.benjaminkeen.com/misc/bricss/\" rel=\"nofollow\"\u003eResponsive Design Test Bookmarklet\u003c/a\u003e This tool lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"toc7\"\u003e\u003ca name=\"x-WARNING: Some Page Elements are not so Responsive-Other Links\"\u003e\u003c/a\u003eOther Responsive Resources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"http://www.lukew.com/ff/entry.asp?933\" rel=\"nofollow\"\u003eMobile First\u003c/a\u003e by Luke Wroblewski\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.alistapart.com/articles/responsive-web-design/\" rel=\"nofollow\"\u003eResponsive Web Design\u003c/a\u003e by Ethan Marcotte\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://speakerdeck.com/u/scottjehl/p/responsive-responsible\" rel=\"nofollow\"\u003eResponsive and Responsible\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://www.slideshare.net/lyzadanger/crap-it-doesnt-look-quite-right-or-how-i-learned-to-stop-worrying-and-set-my-mobile-web-sites-free-9518337\" rel=\"nofollow\"\u003eCloud Four (non-Techy)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://patternlab.bradfrostweb.com/\" rel=\"nofollow\"\u003ePattern Lab\u003c/a\u003e by Brad Frost\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/preview/gsa/digitalgov.gov/cm-topics-button-component/2013/08/20/embracing-responsive-design/\" title=\"Embracing Responsive Design\"\u003eUSA.gov Responsive Design\u003c/a\u003e Implementation\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"toc8\"\u003e\u003ca name=\"x-Government Examples of Responsive Design::\"\u003e\u003c/a\u003e\u003c/h2\u003e\n"}
  ]
}