{"id":724,"date":"2013-07-09T08:59:52","date_gmt":"2013-07-09T08:59:52","guid":{"rendered":"https:\/\/www.zateron.in\/blog\/?p=724"},"modified":"2022-08-26T17:38:56","modified_gmt":"2022-08-26T12:08:56","slug":"how-to-achieve-a-responsive-design-part-1","status":"publish","type":"post","link":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/","title":{"rendered":"How to Achieve a Responsive Design?"},"content":{"rendered":"<div class=\"entry_container_top\">\n<p>If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website. In case, if your website fails to perform on any of the platforms, your visitors may not come back. Many <b>web development companies<\/b> are aware of the fact that users browse websites on smart phones, tablets, PC\u2019s and even TV yet their clients complain of their designs not being responsive.<\/p>\n<p>What do you do then? Understanding what responsive design is, will open up the stage further. Responsive design is displaying information on all devices in a more organized manner using modern tools and techniques. A single layout solution for designers can really be working.<\/p>\n<p>High definition, low resolution etc, be whatever the capacity, these tips will help you design for better:<\/p>\n<p><b>Keep it simple<\/b>: The first thing you should do is to keep your HTML code and layout as simple as possible. Test your design with experiments like removing CSS styling from your website and displaying it on other browsers. Your design is good, if your content can easily be read.<\/p>\n<\/div>\n<div class=\"digital_marketing\">\n<h3><strong><i>Get rid of<\/i>:<\/strong><\/h3>\n<ul>\n<li>Purposeless Divs<\/li>\n<li>Inline Styles<\/li>\n<li>Useless Positioning Absolute or Float<\/li>\n<\/ul>\n<\/div>\n<div class=\"digital_marketing\">\n<h3><strong><i>What to use<\/i>:<\/strong><\/h3>\n<ul>\n<li>HTML 5 Guidelines and doctype<\/li>\n<li>A style sheet that resets<\/li>\n<li>A simple layout<\/li>\n<\/ul>\n<\/div>\n<div class=\"digital_marketing\">\n<p>Note: Relying much on CSS3 or any other modern tricks may be a cause of concern for your website. Instead, keep the design simple. Below is an example of correct relative positioning.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" class=\"size-full wp-image-725 aligncenter\" src=\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg\" alt=\"area\" width=\"698\" height=\"331\" srcset=\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg 698w, https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area-300x142.jpg 300w\" sizes=\"(max-width: 698px) 100vw, 698px\" \/><\/p>\n<\/div>\n<div class=\"digital_marketing\">\n<p><strong>Make use of Media Queries:<\/strong> Width conditions are critically important for a responsive design. Media queries can be used according to style and size. Besides, the clients width, you can load alternate style- sheet.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-726\" src=\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/stylesheet.jpg\" alt=\"stylesheet\" width=\"435\" height=\"195\" srcset=\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/stylesheet.jpg 435w, https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/stylesheet-300x134.jpg 300w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/p>\n<\/div>\n<div class=\"digital_marketing\">\n<p>Some examples according to the width are given below:<\/p>\n<p><i>200px to 640px<\/i><\/p>\n<p>@media screen and (min-width: 200px) and (max-width: 640px)<\/p>\n<p><i>Above 640px, Landscape<\/i><\/p>\n<p>@media screen and (min-width: 600px) and (orientation: landscape)<\/p>\n<p><i>Less than 380px, portrait<\/i><\/p>\n<p>@media screen and (min-width: 380px) and (orientation: portrait)<\/p>\n<\/div>\n<div class=\"digital_marketing\">\n<h3><strong>Categorize common resolutions: <\/strong>Common resolutions can be accommodated into 3 breakpoints:<\/h3>\n<ul>\n<li>Follow <b>&lt; 480px<\/b> rule for first generation smart phone in a portrait mode<\/li>\n<li>And Follow <b>&lt; 768px <\/b>rule for first generation smart phone in a landscape mode<\/li>\n<li>Follow <b>&gt;768px <\/b>rule for bigger tabs and desktops<\/li>\n<\/ul>\n<p><i>Note<\/i>: For desktops set the version above 1024px.<\/p>\n<p>Are we finished yet? No, we are not! We will right back on the same blog. Keep reading for further tips on, How to achieve a responsive design?<\/p>\n<p><i>*Subscribe our blogs @ <\/i><a href=\"https:\/\/www.zateron.in\/blog\/\"><i>https:\/\/www.zateron.in\/blog\/<\/i><\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website. In case, if your website fails to perform on any of the platforms, your visitors may not come back. Many web development companies are aware of the&hellip; <a class=\"more-link\" href=\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/\">Continue reading <span class=\"screen-reader-text\">How to Achieve a Responsive Design?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[552],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Achieve a Responsive Design | zateron System<\/title>\n<meta name=\"description\" content=\"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.\" \/>\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.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Achieve a Responsive Design | zateron System\" \/>\n<meta property=\"og:description\" content=\"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-09T08:59:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-26T12:08:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin\" \/>\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\":\"Organization\",\"@id\":\"https:\/\/www.zateron.in\/blog\/#organization\",\"name\":\"zateron System PVT. LTD.\",\"url\":\"https:\/\/www.zateron.in\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.zateron.in\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2015\/02\/sterco_logo.jpg\",\"contentUrl\":\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2015\/02\/sterco_logo.jpg\",\"width\":110,\"height\":94,\"caption\":\"zateron System PVT. LTD.\"},\"image\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.zateron.in\/blog\/#website\",\"url\":\"https:\/\/www.zateron.in\/blog\/\",\"name\":\"\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.zateron.in\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg\",\"contentUrl\":\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg\",\"width\":698,\"height\":331},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage\",\"url\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/\",\"name\":\"How to Achieve a Responsive Design | zateron System\",\"isPartOf\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage\"},\"datePublished\":\"2013-07-09T08:59:52+00:00\",\"dateModified\":\"2022-08-26T12:08:56+00:00\",\"description\":\"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.zateron.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Achieve a Responsive Design?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/#\/schema\/person\/5da5fe68eed52bf18ed7050d0404c3eb\"},\"headline\":\"How to Achieve a Responsive Design?\",\"datePublished\":\"2013-07-09T08:59:52+00:00\",\"dateModified\":\"2022-08-26T12:08:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage\"},\"wordCount\":422,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg\",\"keywords\":[\"How to Achieve a Responsive Design\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.zateron.in\/blog\/#\/schema\/person\/5da5fe68eed52bf18ed7050d0404c3eb\",\"name\":\"Admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.zateron.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bfd7681847fe091339e38f566b4df749?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bfd7681847fe091339e38f566b4df749?s=96&d=mm&r=g\",\"caption\":\"Admin\"},\"url\":\"https:\/\/www.zateron.in\/blog\/author\/blogadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Achieve a Responsive Design | zateron System","description":"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.","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.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/","og_locale":"en_US","og_type":"article","og_title":"How to Achieve a Responsive Design | zateron System","og_description":"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.","og_url":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/","article_published_time":"2013-07-09T08:59:52+00:00","article_modified_time":"2022-08-26T12:08:56+00:00","og_image":[{"url":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.zateron.in\/blog\/#organization","name":"zateron System PVT. LTD.","url":"https:\/\/www.zateron.in\/blog\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"https:\/\/www.zateron.in\/blog\/#logo","inLanguage":"en-US","url":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2015\/02\/sterco_logo.jpg","contentUrl":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2015\/02\/sterco_logo.jpg","width":110,"height":94,"caption":"zateron System PVT. LTD."},"image":{"@id":"https:\/\/www.zateron.in\/blog\/#logo"}},{"@type":"WebSite","@id":"https:\/\/www.zateron.in\/blog\/#website","url":"https:\/\/www.zateron.in\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/www.zateron.in\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.zateron.in\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage","inLanguage":"en-US","url":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg","contentUrl":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg","width":698,"height":331},{"@type":"WebPage","@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage","url":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/","name":"How to Achieve a Responsive Design | zateron System","isPartOf":{"@id":"https:\/\/www.zateron.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage"},"datePublished":"2013-07-09T08:59:52+00:00","dateModified":"2022-08-26T12:08:56+00:00","description":"If you have a website that caters to online business, it is hard to ignore that web and mobile browsers are platforms your visitors are visiting your website.","breadcrumb":{"@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.zateron.in\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Achieve a Responsive Design?"}]},{"@type":"Article","@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#article","isPartOf":{"@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage"},"author":{"@id":"https:\/\/www.zateron.in\/blog\/#\/schema\/person\/5da5fe68eed52bf18ed7050d0404c3eb"},"headline":"How to Achieve a Responsive Design?","datePublished":"2013-07-09T08:59:52+00:00","dateModified":"2022-08-26T12:08:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#webpage"},"wordCount":422,"commentCount":0,"publisher":{"@id":"https:\/\/www.zateron.in\/blog\/#organization"},"image":{"@id":"https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.zateron.in\/blog\/wp-content\/uploads\/2013\/07\/area.jpg","keywords":["How to Achieve a Responsive Design"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.zateron.in\/blog\/how-to-achieve-a-responsive-design-part-1\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.zateron.in\/blog\/#\/schema\/person\/5da5fe68eed52bf18ed7050d0404c3eb","name":"Admin","image":{"@type":"ImageObject","@id":"https:\/\/www.zateron.in\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/bfd7681847fe091339e38f566b4df749?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bfd7681847fe091339e38f566b4df749?s=96&d=mm&r=g","caption":"Admin"},"url":"https:\/\/www.zateron.in\/blog\/author\/blogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/posts\/724"}],"collection":[{"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/comments?post=724"}],"version-history":[{"count":17,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/posts\/724\/revisions"}],"predecessor-version":[{"id":2318,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/posts\/724\/revisions\/2318"}],"wp:attachment":[{"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/media?parent=724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/categories?post=724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zateron.in\/blog\/wp-json\/wp\/v2\/tags?post=724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}