{"id":334,"date":"2013-06-27T10:48:46","date_gmt":"2013-06-27T07:48:46","guid":{"rendered":"https:\/\/www.webceo.com\/blog\/?p=334"},"modified":"2024-02-12T15:57:00","modified_gmt":"2024-02-12T12:57:00","slug":"responsive-web-design-for-mobile-websites","status":"publish","type":"post","link":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/","title":{"rendered":"Responsive Web Design for Mobile Websites"},"content":{"rendered":"

Recently, Helen Vozna wrote an article entitled\u00a0Mobile Website Optimization: Where to Start<\/a>. She wrote about optimizing the way search engines crawl your website by providing and submitting a mobile sitemap. However, there is a modern technology that allows you to optimize your website for mobile users, while retaining the original user experience that you have invested so much time in. This technology is called responsive web design.<\/p>\n

<\/span>The problem<\/span><\/h2>\n

Most websites you visit today will have a fixed number of pixels for their main content container. This is a wise decision, because as a designer this allows you to define the exact dimensions within that container. The W3Counter\u00a0shows how the 1024×768 screen resolution owns a significant share in the global statistics<\/a>. But viewing a website of 960 pixels in width on a screen of 1920 pixels in width leaves the other 50% unused, which might eventually reduce the user experience.<\/p>\n

On the other hand, StatCounter\u00a0states that the most common screen resolution of mobile devices is 320×480<\/a>. To get your 960 pixels website on a 320 pixels screen, your mobile browser would have to zoom out to display everything. And then again, the user would have to zoom in to view the right bits of content on your website.<\/p>\n

<\/span>The solution<\/span><\/h2>\n

So there is a solution, called responsive web design. Basically it means that you define a dynamic stylesheet that behaves differently based on a range of screen resolutions. This allows you to resize, move and hide elements to whatever extent. The syntax speaks for itself:<\/p>\n

@media (min-width: 1200px) {
\n.logo img { display:inline-block; }
\n.logo span { display:none; }
\n}<\/p>\n

@media (min-width: 768px) and (max-width: 979px) {
\n.container { margin:0; padding:8px; }
\n.logo img { display:none; }
\n.logo span { display:inline-block; }
\n}<\/p><\/blockquote>\n

The workflow is straightforward. You start with designing a website based on a large display. Then, for each step down the ladder, you analyze the appearance and decide whether some elements should be modified by resizing, moving or hiding.<\/p>\n

However, always remember that responsive web design starts at the very beginning of your process. Making an existent website responsive is not always as easy as it seems.<\/p>\n

\"Responsive<\/p>\n

<\/span>The result<\/span><\/h2>\n

There are frameworks such as Bootstrap which have responsive features built into their design. Its fluid grid system\u00a0and other useful features can help any designer and developer to quickly and effectively build web applications that are suitable for any device.<\/p>\n

Using responsive web design can assist in optimizing your website for both visitors and search engines. At first, you will retain a substantial part of the original user experience for whatever device. Second, you will serve one version of your website’s content on one domain only, which is good for SEO and prevents outdated content on a mobile version of your website.<\/p>\n

<\/span>The discussion<\/span><\/h2>\n

Designing responsive web applications and frameworks can have many advantages for web designers, developers, visitors and search engines. However, the topic is heavily hyped and some critique on the technique has been aired.<\/p>\n

First, it is important that you keep in mind that you wish to retain the original user experience at all time. If responsive web design does not provide you with the right tools to achieve this goal, you might want to forget about the concept and stick to a separate mobile domain.<\/p>\n

Also, serving the same website to any device means that all elements of the website will be loaded at first, after which they might be hidden through the dynamic stylesheet. The fact that they will be loaded anyhow will influence the load and compilation time. Therefore, making sure your website’s load time<\/a> is topnotch becomes even more important, as well as loading resources asynchronous through jQuery and Ajax.<\/p>\n

<\/span>The conclusion<\/span><\/h2>\n

Searching the web will give you a lot of results on the positive and negative aspects of using responsive web design for your web applications. The technique can help retain the original user experience and helps to optimize your website for search engines as well. However, it is the user experience which should be considered and retained at all time. Therefore, sticking to original solutions such as mobile domains might be a better solution, depending on your specific case. Therefore, always verify your website’s mobile optimization using WebCEO’s Website Audit Tool<\/a> to avoid any issues that could lead to penalties from search engines.<\/p>\n","protected":false},"excerpt":{"rendered":"

Recently, Helen Vozna wrote an article entitled\u00a0Mobile Website Optimization: Where to Start. She wrote about optimizing the way search engines crawl your website by providing and submitting a mobile sitemap. However, there is a modern technology that allows you to…<\/p>\n","protected":false},"author":5,"featured_media":380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[132,53,18,9,54],"class_list":["post-334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo-tips-tricks","tag-guest-blogging","tag-mobile-website-optimization","tag-seo-how-to","tag-seo-tips-2","tag-web-design"],"yoast_head":"\nResponsive Web Design for Mobile Websites<\/title>\n<meta name=\"description\" content=\"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.\" \/>\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.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Design for Mobile Websites\" \/>\n<meta property=\"og:description\" content=\"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO tools & Online Marketing Tips Blog | WebCEO\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-27T07:48:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-12T12:57:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gerard Nijboer\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gerard Nijboer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/\",\"url\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/\",\"name\":\"Responsive Web Design for Mobile Websites\",\"isPartOf\":{\"@id\":\"https:\/\/www.webceo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg\",\"datePublished\":\"2013-06-27T07:48:46+00:00\",\"dateModified\":\"2024-02-12T12:57:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/7f9db02b92971fd5d006a4aca97c67c7\"},\"description\":\"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage\",\"url\":\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg\",\"contentUrl\":\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg\",\"width\":400,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webceo.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Design for Mobile Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webceo.com\/blog\/#website\",\"url\":\"https:\/\/www.webceo.com\/blog\/\",\"name\":\"SEO tools & Online Marketing Tips Blog | WebCEO\",\"description\":\"The latest news about SEO, Online Marketing, Social Media Marketing from the best SEO software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webceo.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/7f9db02b92971fd5d006a4aca97c67c7\",\"name\":\"Gerard Nijboer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/137025e2cc4c009ee484396480b9feb8b8001227a218cebec791e224e4fda3ee?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/137025e2cc4c009ee484396480b9feb8b8001227a218cebec791e224e4fda3ee?s=96&r=g\",\"caption\":\"Gerard Nijboer\"},\"description\":\"Gerard is an expert in developing web applications and providing related services to small and medium-sized enterprises in the Netherlands and abroad.\",\"sameAs\":[\"https:\/\/x.com\/GNijboer\"],\"url\":\"https:\/\/www.webceo.com\/blog\/author\/gerard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Web Design for Mobile Websites","description":"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.","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.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Web Design for Mobile Websites","og_description":"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.","og_url":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/","og_site_name":"SEO tools & Online Marketing Tips Blog | WebCEO","article_published_time":"2013-06-27T07:48:46+00:00","article_modified_time":"2024-02-12T12:57:00+00:00","og_image":[{"width":400,"height":300,"url":"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg","type":"image\/jpeg"}],"author":"Gerard Nijboer","twitter_misc":{"Written by":"Gerard Nijboer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/","url":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/","name":"Responsive Web Design for Mobile Websites","isPartOf":{"@id":"https:\/\/www.webceo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage"},"image":{"@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage"},"thumbnailUrl":"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg","datePublished":"2013-06-27T07:48:46+00:00","dateModified":"2024-02-12T12:57:00+00:00","author":{"@id":"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/7f9db02b92971fd5d006a4aca97c67c7"},"description":"Responsive web design is a technology that allows you to optimize your website for mobile users, while retaining the original user experience.","breadcrumb":{"@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#primaryimage","url":"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg","contentUrl":"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2013\/06\/code.jpg","width":400,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.webceo.com\/blog\/responsive-web-design-for-mobile-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webceo.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Design for Mobile Websites"}]},{"@type":"WebSite","@id":"https:\/\/www.webceo.com\/blog\/#website","url":"https:\/\/www.webceo.com\/blog\/","name":"SEO tools & Online Marketing Tips Blog | WebCEO","description":"The latest news about SEO, Online Marketing, Social Media Marketing from the best SEO software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webceo.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/7f9db02b92971fd5d006a4aca97c67c7","name":"Gerard Nijboer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webceo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/137025e2cc4c009ee484396480b9feb8b8001227a218cebec791e224e4fda3ee?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/137025e2cc4c009ee484396480b9feb8b8001227a218cebec791e224e4fda3ee?s=96&r=g","caption":"Gerard Nijboer"},"description":"Gerard is an expert in developing web applications and providing related services to small and medium-sized enterprises in the Netherlands and abroad.","sameAs":["https:\/\/x.com\/GNijboer"],"url":"https:\/\/www.webceo.com\/blog\/author\/gerard\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/posts\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":34,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":11533,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/posts\/334\/revisions\/11533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/media\/380"}],"wp:attachment":[{"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webceo.com\/blog\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}