{"id":16767,"date":"2013-03-27T23:01:36","date_gmt":"2013-03-27T15:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16767"},"modified":"2020-05-21T00:06:24","modified_gmt":"2020-05-20T16:06:24","slug":"responsive-web-design-war","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/","title":{"rendered":"The Responsive Web Design War Strategy"},"content":{"rendered":"<p>It seems like everyone is hailing <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/responsive\/\" rel=\"noopener noreferrer\">Responsive Web Design<\/a> (RWD) as the savior for the mobile site development since 2013. That\u2019s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the fragmentation resulted from  hardware business competition.<\/p>\n<p>But alas, Responsive Web Design is not the messiah you\u2019re seeking, for it has its own range of imperfections. Yet it is too prominent for the future of web design, and so the conflict incites a flame war among web designers.<\/p>\n<p>Since we strictly practice the philosophy of \u2018Make Design, Not War\u2019, today we are just here to <strong>explore 5 core disadvantages of Responsive Web Design, <\/strong>and the respective arguments and solutions to lessen the destructive consequences that designers and clients are forced to bear. If you wonder if RWD is the path you seek, be enlightened here.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/rwd-tools\/\" class=\"ref-block__link\" title=\"Read More: 50 Useful Responsive Web Design Tools for Web Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">50 Useful Responsive Web Design Tools for Web Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rwd-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14360 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/rwd-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">50 Useful Responsive Web Design Tools for Web Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn previous, we've explored some top-notch WordPress and Joomla responsive themes for your website. Now, it's time to...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. It Burns time to load<\/h2>\n<p>The first rule to successful web design: make it as fast as possible. And this is even more important for the mobile user who has comparatively slow Internet connection on the go. However, Responsive Web Design is <strong>clearly against fast loading speeds<\/strong>.<\/p>\n<p>That  means that if you own a responsive website, there\u2019s a great chance that your competitor\u2019s mobile-optimized website will be way faster than yours. The delay is because to access a responsive website, you have to <strong>load all images and scripts of the website<\/strong> first, even if some of them are not required to display on mobile device.<\/p>\n<p>This results the dramatic decrease of site loading speed, <strong>taking 7 times longer than a dedicated, mobile-optimized website<\/strong>. Truly a catastrophe especially if you\u2019re doing an e-commerce website, or if your website does not possess enough popularity to risk testing your visitor\u2019s endurance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg\" alt=\"website speed influence\" width=\"500\" height=\"370\"><\/figure>\n<h3>On the supportive side<\/h3>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/timkadlec.com\/2012\/10\/blame-the-implementation-not-the-technique\/\">Implementation<\/a> is the problem here. If you don\u2019t want the content, you either don\u2019t load it, or selectively load it \u2013 that\u2019s what the conditional tag is for. There are also many engineered solutions available to optimize the loading behavior of the script, such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/adaptive-images.com\/\">Adaptive Images<\/a> which detects screen size and dynamically delivers appropriately scaled images to the website.<\/p>\n<p>Another clever method is to use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/snippets\/javascript\/lazy-loading-images\/\">Lazy Loading<\/a>, a technique that <strong>commands the site to load image content on a later stage<\/strong>, thus putting the text content  as the highest priority.<\/p>\n<p>In  other cases, you could also <strong>switch to a separate stylesheet<\/strong> to prevent any loading of unnecessary or oversized elements.<\/p>\n<h2>2. It Breaks A Feature-Driven Website<\/h2>\n<p>When a user visits a website on any device, the user <strong>expects every core feature \u2013 from search to navigation, category to action button<\/strong>. That\u2019s when the problems come in, as the most common approach of the responsive website is to squeeze and pile them into a long, tedious list of functions, sometimes even hidden somewhere. Prepare to see navigation menus crowd  your entire screen, or not being able to find a button you actually need<\/p>\n<p>Hide unnecessary features? That\u2019s not an ideal solution, too, since every user has their own preference on certain features, and removing any of them will definitely break usability.<\/p>\n<p>That said, Responsive Web Design is <strong> better for a content-focused site,  not a feature-driven site<\/strong>. You have to <strong>trade your usability for flexibility<\/strong>, while a mobile site development framework such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cordova.apache.org\/announcements\/2020\/08\/14\/goodbye-phonegap.htmlapp\/\">PhoneGap<\/a> can solve all the problems mentioned above.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/mobile-optimized-website.jpg\" alt=\"mobile optimized website\" width=\"500\" height=\"375\"><\/figure>\n<h3>On the supportive side:<\/h3>\n<p>Although RWD is pretty limited compared to mobile site development framework, there are actually numerous techniques to optimize the usability for responsive web design. For navigation menu, it can be <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/convert-menu-to-dropdown\/\"><strong>transformed into drop-down menus<\/strong><\/a> for mobile devices, and the same method could also be applied to the category section, or you can even <strong>implement <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tympanus.net\/Tutorials\/FlexibleSlideToTopAccordion\/\">Accordion layout<\/a> for subcategories<\/strong>.<\/p>\n<p>Best of all, you could even hide them into a button resting on the top right side of the screen and it <strong>will only pop up when it\u2019s required<\/strong>, hence leaving more space for action buttons. All of these can be easily achieved with traditional CSS and JavaScript. No need for complicated development framework.<\/p>\n<h2>3. It Disrupts the Advertising Model<\/h2>\n<p>Unlike any other web element, advertisement is not something that we, as the publisher, have full control over in the display. Even if we could tweak the ad size to fulfill the requirement of the Responsive Web Design, it will break the deal with the advertiser, as most web advertisement businesses are built on ad placement.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/web-advertisement-placement.jpg\" alt=\"web advertisement placement\" width=\"500\" height=\"272\"><\/figure>\n<p>This <strong>forces advertisers to re-think about the value of advertising<\/strong> on your site since everything is bound into a pre-defined resolution, and their top positioned ads will possibly be forced to different position of the site, or it will break the layout.<\/p>\n<p>Damned are those websites that rely on advertisement networks such as Google AdSense that do not offer responsive ads. <strong>Don\u2019t expect that they will solve the problem for you either<\/strong>. The implementation is rather complicated on their end.<\/p>\n<h3>On the supportive side:<\/h3>\n<p>It\u2019s quite \u2018fortunate\u2019 that most advertisers do not understand much about Responsive Web Design, but here\u2019s a brilliant suggestion for you if they start questioning about the issue \u2013 <strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/markboulton.co.uk\/journal\/responsive-advertising\/\">sell the ads as a package<\/a><\/strong>.<\/p>\n<p>Simply put, instead of selling a leaderboard ad on desktop version of website that will disappear on certain resolution, <strong>include other types of ads exclusive to a set of different device resolution<\/strong>, and sell them as a package.<\/p>\n<p>The whole point is to <strong>become responsive with your web advertising model too<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/web-advertising-responsive-model.jpg\" alt=\"responsive design model\" width=\"500\" height=\"270\"><\/figure>\n<p>For Google AdSense, you can <strong>switch between the Google ads based on device resolution<\/strong>, for instance leaderboard ad for iPad, banner ad for iPad Mini, and text ad for iPhone. It\u2019s safest to say that this is the only way since you will be potentially breaking Google AdSense\u2019 Terms of Service if you change any portion of the advertisement code, so deal with it.<\/p>\n<h2>4. No compatibility for IE 8<\/h2>\n<p>On the first day you submit your responsive website to your corporate client, expect him to contact you and ask why the website does not work on his computer. Ask what browser he is using and there is a chance he ran the site on IE.<\/p>\n<p>How do you inform him that his website is not compatible to the browser that currently holds <strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/thenextweb.com\/apps\/2012\/10\/01\/internet-explorer-8-falls-25-market-share-firefox-15-passes-10-mark-chrome-loses-users\/\">24% of browser usage share<\/a> across the world<\/strong>? That totally sounds like the worst decision you can make, but it\u2019s a painful fact that CSS3 media queries, the foundation pillar of RWD, is not supported by Internet Explorer 8 and below.<\/p>\n<h3>On the supportive side:<\/h3>\n<p>At the time the RWD made its debut, IE8\u2019s compatibility is a huge drawback for the approach, but you can solve this seemingly doomed issue within hours by now, using the Respond.js developed by Scott Jehl.<\/p>\n<p>The script\u2019s effect is pretty straightforward, it <strong>supports min-width, max-width and all media types for IE8 and below<\/strong>. Alternatively, opt for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/code.google.com\/archive\/p\/css3-mediaqueries-js\/\">CSS3-Media-Queries<\/a> that supports similar set of features.<\/p>\n<p>There are surely flaws for every script, but it\u2019s far better than seeing the sky falling on your head. It\u2019s not the end of the world though, as only a minority of mobile users browse the Web with Internet Explorer 8.<\/p>\n<h2>5. Experience-, Time- and Cost-Intensive<\/h2>\n<p>We often tend to hold very high optimism over any technological buzzword that is trending on the Internet (I\u2019m staring at you, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\" rel=\"noopener noreferrer\">HTML5<\/a>), until we actually apply it to the product. From 4 disadvantages discussed above you can understand that implementing Responsive Web Design <strong>requires extensive experience of web technologies and design pattern<\/strong>. It\u2019s insane to reach the goal with trial-and-error method.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/device-testing.jpg\" alt=\"device testing\" width=\"500\" height=\"280\"><\/figure>\n<p>On top of that, the approach works under the assumption that the browser will display the design perfectly without bugs. And that, of course, isn\u2019t true. Given the fluid nature of the RWD, there will be <strong>unforeseen bugs every time the layout changes<\/strong> its structure according to the screen resolution and orientation.<\/p>\n<p>That means you need to <strong>test every resolution on every mobile browser<\/strong> to make everyone of them render correctly. Kind of an overkill for a feature, no?.<\/p>\n<h3>On the supportive side:<\/h3>\n<p>Unless you are going to display the desktop version of the website for mobile device, any other considerable approach, either mobile-optimized website or hybrid app, <strong>will burn as much  experience, time and cost as with RWD<\/strong>. And thanks to the effort of all brilliant developers, RWD is now the easiest one to bake and test with relatively low learning curve.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/twitter-bootstrap.jpg\" alt=\"twitter bootstrap\" width=\"500\" height=\"277\"><\/figure>\n<p>Prevention is better than cure, and preventing browser bugs nowadays could not be simpler, with <strong>so many <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/\" rel=\"noopener noreferrer\">tutorials<\/a>, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/rwd-tools\/\" rel=\"noopener noreferrer\">frameworks and tools<\/a> existed to aid the web designers<\/strong>. For beginner, you could kickstart <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\" rel=\"noopener noreferrer\">Bootstrap<\/a> from Twitter to integrate responsive layout brainlessly, and avoid most well-known browser bugs.<\/p>\n<p>For the testing phase, although it\u2019s important to note that it\u2019s <strong>always better to test on a real device<\/strong>, online testing services have also improved well enough to significantly reduce your workload, try <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/screenqueri.es\/\">Screenqueri.es<\/a> for example. It even <strong>allows you to simulate the view of landscape mode<\/strong>.<\/p>\n<p>Responsive Web Design is not just a feature. Improvements on frameworks, development and testing tools over these 2.5 years positively show that majority of web designers truly believe the <strong>Responsive Web Design is the future<\/strong>.<\/p>\n<h2>Reflection<\/h2>\n<p>Nothing is more credible than the words of the author who coined the term, Responsive Web Design:<\/p>\n<p class=\"note\">\u201cMost importantly, responsive web design isn\u2019t intended to serve as a replacement for mobile web sites.\u201d<\/p>\n<p>In the end, it\u2019s just an approach, and an approach works best with this good ol\u2019 piece of advice: <strong>it depends<\/strong>.<\/p>\n<p>The development flow of RWD should be to figure out the type of  website you will be forging, measure the needs and don\u2019ts from your client, inspect the worth and outcome of each mobile approach, then finally decide if the RWD is best suited for the site.<\/p>\n<p>Are you a zealous follower of Responsive Web Design? Or  have you implemented the approach before, and discovered that there are in fact more deficiencies lying within this promising approach? Either way, we\u2019re eager to hear your opinion and feedback!<\/p>","protected":false},"excerpt":{"rendered":"<p>It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That\u2019s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the fragmentation resulted from hardware&hellip;<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Responsive Web Design War Strategy - Hongkiat<\/title>\n<meta name=\"description\" content=\"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That&#039;s reasonable too, since RWD\" \/>\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.hongkiat.com\/blog\/responsive-web-design-war\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Responsive Web Design War Strategy\" \/>\n<meta property=\"og:description\" content=\"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That&#039;s reasonable too, since RWD\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-27T15:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-20T16:06:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg\" \/>\n<meta name=\"author\" content=\"Alvaris Falcon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alvaris Falcon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/\"},\"author\":{\"name\":\"Alvaris Falcon\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\"},\"headline\":\"The Responsive Web Design War Strategy\",\"datePublished\":\"2013-03-27T15:01:36+00:00\",\"dateModified\":\"2020-05-20T16:06:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/\"},\"wordCount\":1709,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-design-war\\\/website-speed-influence.jpg\",\"keywords\":[\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/\",\"name\":\"The Responsive Web Design War Strategy - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-design-war\\\/website-speed-influence.jpg\",\"datePublished\":\"2013-03-27T15:01:36+00:00\",\"dateModified\":\"2020-05-20T16:06:24+00:00\",\"description\":\"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That's reasonable too, since RWD\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-design-war\\\/website-speed-influence.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-design-war\\\/website-speed-influence.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-design-war\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Responsive Web Design War Strategy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/110548906de9455e25024dbfbc9156d1\",\"name\":\"Alvaris Falcon\",\"description\":\"Alvaris is a web designer, developer and staff writer for Hongkiat.com.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/alvaris\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Responsive Web Design War Strategy - Hongkiat","description":"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That's reasonable too, since RWD","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.hongkiat.com\/blog\/responsive-web-design-war\/","og_locale":"en_US","og_type":"article","og_title":"The Responsive Web Design War Strategy","og_description":"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That's reasonable too, since RWD","og_url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-03-27T15:01:36+00:00","article_modified_time":"2020-05-20T16:06:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg","type":"","width":"","height":""}],"author":"Alvaris Falcon","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Alvaris Falcon","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/"},"author":{"name":"Alvaris Falcon","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1"},"headline":"The Responsive Web Design War Strategy","datePublished":"2013-03-27T15:01:36+00:00","dateModified":"2020-05-20T16:06:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/"},"wordCount":1709,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg","keywords":["Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/","url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/","name":"The Responsive Web Design War Strategy - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg","datePublished":"2013-03-27T15:01:36+00:00","dateModified":"2020-05-20T16:06:24+00:00","description":"It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development since 2013. That's reasonable too, since RWD","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-design-war\/website-speed-influence.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-design-war\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Responsive Web Design War Strategy"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/110548906de9455e25024dbfbc9156d1","name":"Alvaris Falcon","description":"Alvaris is a web designer, developer and staff writer for Hongkiat.com.","url":"https:\/\/www.hongkiat.com\/blog\/author\/alvaris\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4mr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16767"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16767\/revisions"}],"predecessor-version":[{"id":62782,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16767\/revisions\/62782"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16767"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}