{"id":595,"date":"2012-09-07T02:24:44","date_gmt":"2012-09-07T07:24:44","guid":{"rendered":"https:\/\/oakinteractive.com\/stage\/?p=595"},"modified":"2025-02-04T17:05:30","modified_gmt":"2025-02-04T17:05:30","slug":"notes-on-responsive-design","status":"publish","type":"post","link":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/","title":{"rendered":"Notes on Responsive Design"},"content":{"rendered":"

We’ve recently had a lot of clients asking about responsive design – an exciting turn. We’ve been playing around with it ever since passing around Ethan Marcotte’s<\/a> now-famous ALA book<\/a>. It seems like the term has just entered the non-webnerd lexicon. A simple and (rightfully) alluring concept at it’s core; however, it’s been difficult communicating the technical requisites to normal clients.
\nWe want to build sites the right way. Often times, that requires intervention with the basic elements of the site – architecture, content<\/strong>, media, and so on. So we drew up this little document in attempt to provide clients with a brief but thorough explanation of what it means to go responsive.<\/p>\n

With an inevitable proliferation of screen sizes, responsive design allows any user to access your information the right way, regardless of device, operating system, or display size.
\nEnsuring your site renders \u201cthe right way\u201d within any reasonable context will require in-depth research and extensive testing in both the design and development stages. Regardless of how you expect your visitor to interact with your site, it\u2019s paramount that we make every user\u2019s experience as intuitive and straightforward as possible.
\nWith changing screens come changing contexts. A user may be sitting on their couch or rushing to a meeting.
\nA few points on designing for mobile:
\nNavigation<\/strong>
\nThe moment a mobile user opens your page they should be able instantly have access to the main sectors of your site. Also, if your pages are content-heavy and require a fair amount of scrolling, the navigation menu should be accessible at any point, regardless of scroll position. See Brad Frost\u2019s article on Responsive Navigation Patterns<\/a>.
\nMedia<\/strong>
\nCertain types of media adapt to responsive design better than others. Avoid dependence on Flash objects or any third-party widgets that don\u2019t explicitly support a fluid layout. Both embedded video (Youtube, Vimeo, etc.) and self-hosted video (.mp4, .mov, etc.) do rather well in a responsive environment. Surprisingly, static images are not as accommodating. Fortunately we can change out images depending on display size, just be mindful of how your image assets play a role in the site\u2019s overall functionality.
\nText\/Content<\/strong>
\nMaintain a clear and logical hierarchy to your content. A quick look at any analytics report will help you make an educated guess as to which areas of your site receive the most traffic. We want to make the the important information in these areas appear front-and-center giving the user the opportunity to drill down into a second or third level of content only if they wish to.
\nButtons\/Menus<\/strong>
\nAnother reason to keep your content tight and organized is so users can avoid dealing with the \u201cfat finger\u201d problem. Buttons and navigational links must be large and displayed sparingly. Oh, and don\u2019t rely on hover states<\/a>.
\nAlthough the notes listed above were written with mobile in mind, the same could and should apply to traditional web-surfing. Some fantastic example of responsive layouts can be viewed here<\/a>.<\/p><\/blockquote>\n

Did we miss something? Let us know!<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve recently had a lot of clients asking about responsive design – an exciting turn. We’ve been playing around with it ever since passing around Ethan Marcotte’s now-famous ALA book. It seems like the term has just entered the non-webnerd lexicon. A simple and (rightfully) alluring concept at it’s core; however, it’s been difficult communicating….<\/p>\n","protected":false},"author":10,"featured_media":55256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[19,21,24],"tags":[],"class_list":["post-595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creative","category-news","category-web","entry"],"acf":[],"yoast_head":"\nNotes on Responsive Design - OAK<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oakinteractive.com\/notes-on-responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Notes on Responsive Design - OAK\" \/>\n<meta property=\"og:description\" content=\"We’ve recently had a lot of clients asking about responsive design – an exciting turn. We’ve been playing around with it ever since passing around Ethan Marcotte’s now-famous ALA book. It seems like the term has just entered the non-webnerd lexicon. A simple and (rightfully) alluring concept at it’s core; however, it’s been difficult communicating....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oakinteractive.com\/notes-on-responsive-design\/\" \/>\n<meta property=\"og:site_name\" content=\"OAK\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-07T07:24:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-04T17:05:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Webskitters WebDev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webskitters WebDev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/\"},\"author\":{\"name\":\"Webskitters WebDev\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#\\\/schema\\\/person\\\/febb1a02b8a4f3c462343f14f286c585\"},\"headline\":\"Notes on Responsive Design\",\"datePublished\":\"2012-09-07T07:24:44+00:00\",\"dateModified\":\"2025-02-04T17:05:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/\"},\"wordCount\":515,\"publisher\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2012\\\/09\\\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg\",\"articleSection\":[\"Creative\",\"News\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/\",\"url\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/\",\"name\":\"Notes on Responsive Design - OAK\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2012\\\/09\\\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg\",\"datePublished\":\"2012-09-07T07:24:44+00:00\",\"dateModified\":\"2025-02-04T17:05:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2012\\\/09\\\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2012\\\/09\\\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg\",\"width\":2560,\"height\":1707,\"caption\":\"computer. tablet. smartphone and table lamp in dark room 3d rendering\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/notes-on-responsive-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/oakinteractive.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Notes on Responsive Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#website\",\"url\":\"https:\\\/\\\/oakinteractive.com\\\/\",\"name\":\"OAK\",\"description\":\"INTERACTIVE\",\"publisher\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/oakinteractive.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#organization\",\"name\":\"OAK Interactive\",\"url\":\"https:\\\/\\\/oakinteractive.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/oakinteractive.com\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"OAK Interactive\"},\"image\":{\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/oakinteractive.com\\\/#\\\/schema\\\/person\\\/febb1a02b8a4f3c462343f14f286c585\",\"name\":\"Webskitters WebDev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g\",\"caption\":\"Webskitters WebDev\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Notes on Responsive Design - OAK","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/","og_locale":"en_US","og_type":"article","og_title":"Notes on Responsive Design - OAK","og_description":"We’ve recently had a lot of clients asking about responsive design – an exciting turn. We’ve been playing around with it ever since passing around Ethan Marcotte’s now-famous ALA book. It seems like the term has just entered the non-webnerd lexicon. A simple and (rightfully) alluring concept at it’s core; however, it’s been difficult communicating....","og_url":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/","og_site_name":"OAK","article_published_time":"2012-09-07T07:24:44+00:00","article_modified_time":"2025-02-04T17:05:30+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg","type":"image\/jpeg"}],"author":"Webskitters WebDev","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webskitters WebDev","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#article","isPartOf":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/"},"author":{"name":"Webskitters WebDev","@id":"https:\/\/oakinteractive.com\/#\/schema\/person\/febb1a02b8a4f3c462343f14f286c585"},"headline":"Notes on Responsive Design","datePublished":"2012-09-07T07:24:44+00:00","dateModified":"2025-02-04T17:05:30+00:00","mainEntityOfPage":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/"},"wordCount":515,"publisher":{"@id":"https:\/\/oakinteractive.com\/#organization"},"image":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg","articleSection":["Creative","News","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/","url":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/","name":"Notes on Responsive Design - OAK","isPartOf":{"@id":"https:\/\/oakinteractive.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg","datePublished":"2012-09-07T07:24:44+00:00","dateModified":"2025-02-04T17:05:30+00:00","breadcrumb":{"@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oakinteractive.com\/notes-on-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#primaryimage","url":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg","contentUrl":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2012\/09\/computer-tablet-smartphone-table-lamp-dark-room-3d-rendering-scaled.jpg","width":2560,"height":1707,"caption":"computer. tablet. smartphone and table lamp in dark room 3d rendering"},{"@type":"BreadcrumbList","@id":"https:\/\/oakinteractive.com\/notes-on-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oakinteractive.com\/"},{"@type":"ListItem","position":2,"name":"Notes on Responsive Design"}]},{"@type":"WebSite","@id":"https:\/\/oakinteractive.com\/#website","url":"https:\/\/oakinteractive.com\/","name":"OAK","description":"INTERACTIVE","publisher":{"@id":"https:\/\/oakinteractive.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oakinteractive.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/oakinteractive.com\/#organization","name":"OAK Interactive","url":"https:\/\/oakinteractive.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oakinteractive.com\/#\/schema\/logo\/image\/","url":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2024\/01\/logo.svg","contentUrl":"https:\/\/oakinteractive.com\/wp-content\/uploads\/2024\/01\/logo.svg","width":1,"height":1,"caption":"OAK Interactive"},"image":{"@id":"https:\/\/oakinteractive.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/oakinteractive.com\/#\/schema\/person\/febb1a02b8a4f3c462343f14f286c585","name":"Webskitters WebDev","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a8eefb5c8d6eb9d439bbc3546494f0c542f3c4632db533511b3bd9ebe0173a26?s=96&d=mm&r=g","caption":"Webskitters WebDev"}}]}},"_links":{"self":[{"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":0,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/media\/55256"}],"wp:attachment":[{"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oakinteractive.com\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}