{"id":11099,"date":"2012-05-16T15:29:13","date_gmt":"2012-05-16T19:29:13","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=11099"},"modified":"2012-05-22T16:37:01","modified_gmt":"2012-05-22T20:37:01","slug":"60-creative-examples-of-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/","title":{"rendered":"60+ Creative Examples of Responsive Web Design"},"content":{"rendered":"

There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device and they use it primarily to access the internet and social networks. So what do we as designers and developers need to do to adapt? We need to build responsive web sites.<\/p>\n

What is Responsive Web Design?<\/h3>\n

Lets see what the wiki says about this!<\/p>\n

\nResponsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.\n<\/p><\/blockquote>\n

Basically it is a response web technique that responds to different browser environments – If you are using a desktop computer you get the full view, if you are on a smartphone using a mobile browser then the website ‘reacts’ or ‘responds’ to this and adapts the width of the page to match the size of the mobile device.<\/p>\n

Today we have rounded up some of the best responsive web designs for your inspiration – so you can see what is possible, and spark some ideas of your own so you can use it on your next project! I hope you like these beautiful mobile layouts and get inspired! Enjoy!<\/p>\n

Responsive WordPress Website – Sendas<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Purveyor Responsive Web Designs<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

KRO Responsive magazine<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

responsive website – My Indieye<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Responsive Design – Cape May Zoo<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Raewyn Brandon Responsive Portfolio Website<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Responsive Photography Web Design – Oleg Dou<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Eon Clippers Responsive Website<\/a><\/h2>\n

\"\"<\/a><\/p>\n

Boldmind Responsive Web Design<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Hasser\u00f6der – Responsive Relaunch<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Reformat.no Responsive Web Magazine<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Quazar Responsive Web Design<\/a><\/h2>\n

\"\"<\/a><\/p>\n

zu – Responsive Site Design<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Grey Goose Vodka Site<\/a><\/h2>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Starbucks Responsive Design<\/a><\/h2>\n

\"\"<\/a><\/p>\n

Need More Responsive Mobile Web Goodness?<\/h3>\n

Here are some more epic resources for your inspiration!<\/p>\n

Responsive Web Design: 50 Examples and Best Practices<\/a><\/h2>\n

\"\"<\/a><\/p>\n

Top 5 Responsive Website Designs on the Web<\/a><\/h2>\n

<\/a><\/p>\n

60 Examples of Responsive Website Design<\/a><\/h2>\n

\"\"<\/a><\/p>\n

What is your favorite mobile friendly site? Let us know in the comments below! Thanks for reading!<\/p>\n

You like this? Don’t forget to follow us on twitter @andysowards<\/a> and like us on facebook @andysowardsfan<\/a>! We are also on that Google Plus<\/a> & Pinterest<\/a> thing.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device and they<\/p>\n","protected":false},"author":1,"featured_media":11121,"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":[1654,24,4206,199,4584,35,4050,107],"tags":[4056,165,5914,5885,418,5887,1127,5377,4420,5375,4415,5376,5373,5185,5374,5890,848],"yoast_head":"\n60+ Creative Examples of Responsive Web Design<\/title>\n<meta name=\"description\" content=\"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device\" \/>\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\/60-creative-examples-of-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"60+ Creative Examples of Responsive Web Design\" \/>\n<meta property=\"og:description\" content=\"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-16T19:29:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-05-22T20:37:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"599\" \/>\n\t<meta property=\"og:image:height\" content=\"415\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\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=\"Andy Sowards\" \/>\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\/60-creative-examples-of-responsive-web-design\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/\",\"name\":\"60+ Creative Examples of Responsive Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg\",\"datePublished\":\"2012-05-16T19:29:13+00:00\",\"dateModified\":\"2012-05-22T20:37:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg\",\"width\":599,\"height\":415},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"60+ Creative Examples of Responsive Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & 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\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"60+ Creative Examples of Responsive Web Design","description":"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device","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\/60-creative-examples-of-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"60+ Creative Examples of Responsive Web Design","og_description":"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device","og_url":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2012-05-16T19:29:13+00:00","article_modified_time":"2012-05-22T20:37:01+00:00","og_image":[{"width":599,"height":415,"url":"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg","type":"image\/jpeg"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/","url":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/","name":"60+ Creative Examples of Responsive Web Design","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg","datePublished":"2012-05-16T19:29:13+00:00","dateModified":"2012-05-22T20:37:01+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"There is no denying that the future of the web, will be a responsive web. Everyone practically has a smartphone, or a tablet, some sort of mobile device","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/Raewyn-Brandon-Responsive-Portfolio-Website-iPad.jpg","width":599,"height":415},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2012\/60-creative-examples-of-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"60+ Creative Examples of Responsive Web Design"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & 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\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/11099"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=11099"}],"version-history":[{"count":0,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/11099\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/11121"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=11099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=11099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=11099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}