{"id":7878,"date":"2012-02-01T01:06:47","date_gmt":"2012-02-01T05:06:47","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=7878"},"modified":"2014-03-05T00:46:18","modified_gmt":"2014-03-05T04:46:18","slug":"top-5-responsive-website-designs-on-the-web","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/","title":{"rendered":"Top 5 Responsive Website Designs on the Web"},"content":{"rendered":"<p>Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and Tablets continue their domination in the handheld device industry. Research shows that the percentage of users accessing the internet through a handheld device is increasing exponentially, so if you haven&#8217;t considered the use of responsive design in your projects, it might be a good time to start exploring the techniques behind it.  <\/p>\n<p>Responsive Web Design is a term first coined by <a href=\"http:\/\/ethanmarcotte.com\/\" target=\"_blank\">Ethan Marcotte<\/a>, which went viral after a blog post on <a href=\"http:\/\/www.alistapart.com\/\" target=\"_blank\">A List Apart<\/a> back in 2010. Essentially, responsive web design refers to a websites ability to respond to the browser size in which it is viewed to enhance a users experience and ensure maximum exposure for the content itself. This will mean that the text is legible without having to zoom in and images are resized contextually \u0096 allowing them to fit the browser screen without the need to scroll horizontally. Many design elements become invisible or hidden when viewed on a smaller browser size, which allows the user to get access to what they visited for \u0096 the content itself.  <\/p>\n<p>In a sense, responsive web design is reminiscent of the old &#8216;text-based&#8217; websites that we used to see of yesteryear, which primarily used to accommodate users on dial-up modems and slower internet connections to ensure faster page loading times. These days, whilst a responsive design does focus on the content, it also allows for some design elements to be incorporated to ensure consistency across all browsers \u0096 which is essential for any brand strategy. <\/p>\n<p>Responsive web design is still in its infancy however, and as with any new design technology, it takes time to be assimilated by the design world as a whole. For the Designer, it&#8217;s still very much a playground of trialling and testing new techniques &#8211;  as the full potential of responsive web design is as yet uncharted. <\/p>\n<p>Many designers have embraced the challenge and possibilities that responsive design presents \u0096 and you should too! Below are my Top 5 Responsive Web Designs for your viewing pleasure and inspiration&#8230; <\/p>\n<h2>1. <a href=\"http:\/\/forefathersgroup.com\/\" target=\"_blank\">Forefathers Group<\/a><\/h2>\n<p><a href=\"http:\/\/forefathersgroup.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg\" alt=\"\" title=\"forefathers-group\" width=\"600\" height=\"340\" class=\"alignnone size-full wp-image-7882 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/340;\" \/><\/a><\/p>\n<h2>2. <a href=\"http:\/\/sasquatchfestival.com\/\" target=\"_blank\">Sasquatch Music Festival<\/a><\/h2>\n<p><a href=\"http:\/\/sasquatchfestival.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/sasquatch-music-festival.jpg\" alt=\"\" title=\"sasquatch-music-festival\" width=\"600\" height=\"340\" class=\"alignnone size-full wp-image-7883 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/340;\" \/><\/a><\/p>\n<h2>3. <a href=\"http:\/\/www.benhandzo.com\/\" target=\"_blank\">Ben Handzo Photography<\/a><\/h2>\n<p><a href=\"http:\/\/www.benhandzo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/ben-handzo-photography.jpg\" alt=\"\" title=\"ben-handzo-photography\" width=\"600\" height=\"340\" class=\"alignnone size-full wp-image-7879 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/340;\" \/><\/a><\/p>\n<h2>4. <a href=\"http:\/\/www.illyissimo.com\/\" target=\"_blank\">Illy Issimo<\/a><\/h2>\n<p><a href=\"http:\/\/www.illyissimo.com\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/illy-issimo.jpg\" alt=\"\" title=\"illy-issimo\" width=\"600\" height=\"340\" class=\"alignnone size-full wp-image-7881 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/340;\" \/><\/a><\/p>\n<h2>5. <a href=\"http:\/\/www.deren.me\/\" target=\"_blank\">Deren Keskin<\/a><\/h2>\n<p><a href=\"http:\/\/www.deren.me\/\" target=\"_blank\"><img decoding=\"async\" data-src=\"https:\/\/www.andysowards.com\/blog\/assets\/deren-keskin.jpg\" alt=\"\" title=\"deren-keskin\" width=\"600\" height=\"340\" class=\"alignnone size-full wp-image-7880 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/340;\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and Tablets<\/p>\n","protected":false},"author":35,"featured_media":7882,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1427,4207,24,4206,225,35,73,202,4050,49],"tags":[3250,4056,355,555,550,176,405,382,165,5914,5885,495,1665,735,33,167,561,250,1255,418,5887,494,2974,482,5889,5896,450,1127,3048,4418,4420,4421,978,275,5888,496,976,4415,4416,4422,4417,2286,4423,4248,272,1229,945,2153,3118,1073,2074,848,113,220,4419],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Top 5 Responsive Website Designs on the Web<\/title>\n<meta name=\"description\" content=\"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 5 Responsive Website Designs on the Web\" \/>\n<meta property=\"og:description\" content=\"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-01T05:06:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-05T04:46:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"340\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jules\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jules\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/\",\"name\":\"Top 5 Responsive Website Designs on the Web\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg\",\"datePublished\":\"2012-02-01T05:06:47+00:00\",\"dateModified\":\"2014-03-05T04:46:18+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/4b22e65a5d6360bd8fc7290addf7af25\"},\"description\":\"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg\",\"width\":600,\"height\":340},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 5 Responsive Website Designs on the Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards\",\"description\":\"Design Inspiration &amp; Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/4b22e65a5d6360bd8fc7290addf7af25\",\"name\":\"Jules\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/82434620df55176b91f742b54c1cad59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/82434620df55176b91f742b54c1cad59?s=96&r=pg\",\"caption\":\"Jules\"},\"description\":\"Jules is a Web Designer and Digital Branding Expert running her own design agency, Pixo Media. She's a WordPress nut, Expression Engine enthusiast, Social Media freakazoid and PhotoShop virtuoso. Lover of all things pretty and orderly on teh interweb. Trying to put the chic in geek, as well as being a serial entrepreneur with far too many feathers in her cap! Web: www.pixo-media.com | Email: jules [at] pixo-media [dawt] com | Twitter: @pixomedia\",\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/jules\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Top 5 Responsive Website Designs on the Web","description":"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and","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:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/","og_locale":"en_US","og_type":"article","og_title":"Top 5 Responsive Website Designs on the Web","og_description":"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and","og_url":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2012-02-01T05:06:47+00:00","article_modified_time":"2014-03-05T04:46:18+00:00","og_image":[{"width":600,"height":340,"url":"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg","type":"image\/jpeg"}],"author":"Jules","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Jules","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/","url":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/","name":"Top 5 Responsive Website Designs on the Web","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg","datePublished":"2012-02-01T05:06:47+00:00","dateModified":"2014-03-05T04:46:18+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/4b22e65a5d6360bd8fc7290addf7af25"},"description":"Responsive Web Design is one of the most talked about trends in Web Design today, and will continue to remain a hot topic for as long as Smartphones and","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/forefathers-group.jpg","width":600,"height":340},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2012\/top-5-responsive-website-designs-on-the-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Top 5 Responsive Website Designs on the Web"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, &amp; Creatives by Andy Sowards","description":"Design Inspiration &amp; Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/4b22e65a5d6360bd8fc7290addf7af25","name":"Jules","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/82434620df55176b91f742b54c1cad59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82434620df55176b91f742b54c1cad59?s=96&r=pg","caption":"Jules"},"description":"Jules is a Web Designer and Digital Branding Expert running her own design agency, Pixo Media. She's a WordPress nut, Expression Engine enthusiast, Social Media freakazoid and PhotoShop virtuoso. Lover of all things pretty and orderly on teh interweb. Trying to put the chic in geek, as well as being a serial entrepreneur with far too many feathers in her cap! Web: www.pixo-media.com | Email: jules [at] pixo-media [dawt] com | Twitter: @pixomedia","url":"https:\/\/www.andysowards.com\/blog\/author\/jules\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/7878"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=7878"}],"version-history":[{"count":0,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/7878\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/7882"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=7878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=7878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=7878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}