{"id":193,"date":"2016-03-03T11:00:49","date_gmt":"2016-03-03T09:00:49","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=193"},"modified":"2017-03-28T19:10:01","modified_gmt":"2017-03-28T16:10:01","slug":"important-things-consider-building-responsive-web-design","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/","title":{"rendered":"The most important things to consider before building a responsive web design"},"content":{"rendered":"<p>There&#8217;s no doubt about the importance of responsive websites. The\u00a0excessive usage of cell phones\u00a0make it necessary for every website to work on a wide range of devices. The biggest challenge for web development services is to create a design that degrades gracefully on cell phones, and appears as good as it does on PCs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-194\" src=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\" alt=\"responsive website design\" width=\"320\" height=\"184\" srcset=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg 320w, https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design-300x173.jpg 300w\" sizes=\"auto, (max-width: 320px) 85vw, 320px\" \/><!--more--><\/p>\n<p>So what should you do to take on this challenge? The best option for you is to know how professionals do it. Most <a href=\"\/articles\/importance-hirig-professional-web-design-service\/\">web design companies<\/a> consist of skilled designers and developers who can work on Windows, Apple and Android devices with ease who have the potential to create high quality websites for mobiles.<\/p>\n<p>While you learn from the gurus of the trade, you can learn a few tips on creating a user-friendly website that runs on PCs and mobile devices alike.<\/p>\n<h2>General guidelines<\/h2>\n<p>These are some general guidelines regarding appearance of webpage on cellphone.<\/p>\n<ul>\n<li>Test results on different devices: It\u2019s better to use actual devices under normal circumstances. Start with iPhone and test the webpage. Then, test it on other mobiles. You can also use emulators to see the results but they won\u2019t give you the actual feel.<\/li>\n<\/ul>\n<ul>\n<li>Page should degrade smoothly: Use wide-screen browsers that are flash enabled, to write your pages. Be careful about important information as it should be visible on tini est of screens without any trouble. Make sure they don\u2019t have special features like XHTML Basic may fall beyond the reach of certain cellphones. For iPhones, avoid using flash on your website because iPhones don\u2019t support flash.<\/li>\n<\/ul>\n<ul>\n<li>A wireless specific page\u00a0your website should be easy-to-find. The most effective way is to place wireless page link at the top and hide it from devices that cannot handle the link, via media type.<\/li>\n<\/ul>\n<h2>Navigation and links<\/h2>\n<p>You can improve navigability of your webpage in following manner:<\/p>\n<ul>\n<li>While creating a link on the webpage, make sure the link has 3-5 words; otherwise people find it hard to tap on one-word link.<\/li>\n<li>You can use CSS\/JavaScript to hide navigation and make them appear when user asks.<\/li>\n<li>Keep short URL\u2019s because most adult users find it tiresome to type long URLs.<\/li>\n<li>Do not put navigation on top. Mobile web pages have headline and other content at the top, while navigation is below the content.<\/li>\n<\/ul>\n<h2>Web layout<\/h2>\n<p>Most smartphones use Webkit browsers, such as Chrome (for Android devices) and Safari (for iPhones and iOS devices). Make sure the website appears good on each of these browsers. In this way, you can be sure of your website being good on majority of cell phones.<\/p>\n<ul>\n<li>Divide your webpage into small pages and divide long text into multiple pages, in order to give a better user experience.<\/li>\n<\/ul>\n<ul>\n<li>Toronto web design company will tell you that cellphones condense columns into tiny window, making it hard for the users to navigate. Instead, one long column is much easier to read.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s no doubt about the importance of responsive websites. The\u00a0excessive usage of cell phones\u00a0make it necessary for every website to work on a wide range of devices. The biggest challenge for web development services is to create a design that degrades gracefully on cell phones, and appears as good as it does on PCs.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-193","post","type-post","status-publish","format-standard","hentry","category-articles","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The most important to consider before building a responsive web design<\/title>\n<meta name=\"description\" content=\"There&#039;s no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The most important to consider before building a responsive web design\" \/>\n<meta property=\"og:description\" content=\"There&#039;s no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-03T09:00:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-28T16:10:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"The most important things to consider before building a responsive web design\",\"datePublished\":\"2016-03-03T09:00:49+00:00\",\"dateModified\":\"2017-03-28T16:10:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\"},\"wordCount\":501,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\",\"articleSection\":[\"Articles\",\"CSS\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\",\"url\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\",\"name\":\"The most important to consider before building a responsive web design\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\",\"datePublished\":\"2016-03-03T09:00:49+00:00\",\"dateModified\":\"2017-03-28T16:10:01+00:00\",\"description\":\"There's no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg\",\"width\":320,\"height\":184,\"caption\":\"responsive website design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The most important things to consider before building a responsive web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The most important to consider before building a responsive web design","description":"There's no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.","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:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"The most important to consider before building a responsive web design","og_description":"There's no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.","og_url":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2016-03-03T09:00:49+00:00","article_modified_time":"2017-03-28T16:10:01+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"The most important things to consider before building a responsive web design","datePublished":"2016-03-03T09:00:49+00:00","dateModified":"2017-03-28T16:10:01+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/"},"wordCount":501,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg","articleSection":["Articles","CSS"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/","url":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/","name":"The most important to consider before building a responsive web design","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg","datePublished":"2016-03-03T09:00:49+00:00","dateModified":"2017-03-28T16:10:01+00:00","description":"There's no doubt about the importance of responsive websites. Excessive usage of cell phones make it necessary for websites to work on a range of devices.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/03\/responsive-website-design.jpg","width":320,"height":184,"caption":"responsive website design"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/important-things-consider-building-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"The most important things to consider before building a responsive web design"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":1,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/193\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}