{"id":2788,"date":"2016-02-17T07:37:09","date_gmt":"2016-02-17T07:37:09","guid":{"rendered":"https:\/\/www.branex.ae\/blog\/?p=2788"},"modified":"2016-02-17T07:37:41","modified_gmt":"2016-02-17T07:37:41","slug":"a-better-responsive-design","status":"publish","type":"post","link":"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/","title":{"rendered":"A Better Responsive Design"},"content":{"rendered":"<p>If you are looking for the most preferred and highly embraced method of website development, responsive web design is your answer. If you have a highly responsive website then chances are you can easily drive traffic your way. No more running from a non-mobile-friendly website\u00a0if you give the visitors a responsive web design.<\/p>\n<p><span style=\"font-weight: 400;\">However, even with a responsive web design in place, it becomes a complex matter to keep the visitors on your page. If you don\u2019t know how to pull off a quality responsive design then this will surely interest you. A better responsive design is what you are looking for to make all your efforts count. Ahead are some best practices for a responsive web design that actually works.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Basic_Function_Cross-Device_Platform\" >Basic Function: Cross-Device Platform<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Beyond_%E2%80%98fitting_screens_Context\" >Beyond \u2018fitting screens\u2019: Context<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Content_Priorities\" >Content: Priorities!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Beware_Image_Quality_VS_Download_Speed\" >Beware: Image Quality VS Download Speed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Use_of_Icons_A_Wise_Option\" >Use of Icons: A Wise Option<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.branex.ae\/blog\/a-better-responsive-design\/#Font_Size_Pay_Great_Attention\" >Font Size: Pay Great Attention<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Basic_Function_Cross-Device_Platform\"><\/span><strong>Basic Function: Cross-Device Platform<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Keep in mind that the basic purpose of a <a href=\"https:\/\/www.branex.ae\/blog\/a-brief-guide-to-your-responsive-web-design\/\" target=\"_blank\">responsive web design<\/a> is to provide a better experience to users on various mobile devices. Nonetheless, a small screen is not the only matter at hand. Remember, it needs to fit all the screens and prove to be beneficial for all. Responsive designs are directly associated with mobile screens because mobile users make up the largest percentage of the traffic. Keep a mobile-first approach and take it from there.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beyond_%E2%80%98fitting_screens_Context\"><\/span><strong>Beyond \u2018fitting screens\u2019: Context<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When a website is converted to a mobile page, it becomes a little more than just about fitting it. Single column layout is now a span of multiple columns as and when the size increases. You wouldn\u2019t want the layout to change really for the essence of ensuring relevance to the visitors is context. Based on the usage of different devices, the content that is most relevant should be a part of the UX decisions which may include location, past visits to the site, device, etc.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Content_Priorities\"><\/span><strong>Content: Priorities!<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Doing away with multiple columns to a single column layout for a smaller screen is a regular trait of the responsive site. For instance, take into notice a website that has a list of articles with featured stories on the right and images on the left of the list. When viewed over a mobile device, it may reduce to simply a list of articles hence making it easier for the viewers to view and select the articles. You need to prioritize differently for various situations.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Beware_Image_Quality_VS_Download_Speed\"><\/span><strong>Beware: Image Quality VS Download Speed<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">For websites that have images as primary visuals greeting the users, the good quality image size will make the size of the file to grow. When going responsive, you need to work out a balance between visuals and the performance of the overall page. Eliminate any rich visuals that are unnecessary or reduce the 4 images to a single image for less animation scripts as well as images. Optimize the rest of the images.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Use_of_Icons_A_Wise_Option\"><\/span><strong>Use of Icons: A Wise Option<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Icons can help replace lengthy text if need be. For small screens, where space can really be a sensitive matter, icons can play a positive role in traffic conversion. Deliver the icons to a website using the SVG file format as they are good mobile-friendly sites and can be resized, without adding a little extra to the image size.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Font_Size_Pay_Great_Attention\"><\/span><strong>Font Size: Pay Great Attention<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Typography is amongst the fundamentals of the overall website design which cannot be ignored. The type designs need to change as well, alongside the other aspects in the overall layout. To choose the right typeface, do not rely on the one that fits well on the desktop version. What if it\u2019s barely readable in a small device? It will certainly not be acceptable. Maintain a good line-height with the wider column with a 16pt body type to work well with all sizes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While these may not be the end of the world or the only components to a better responsive design, you can take up on wise approach as you deem fit. Whatever you do, don\u2019t forget to test the design on all devices, yourself!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You may not be the best judge of how you have done but the basic mistakes can be improved even before they are implemented. So test it before going live. If you are not an expert, call a <\/span><a href=\"https:\/\/www.branex.ae\/\" target=\"_blank\">web design company<\/a> <span style=\"font-weight: 400;\">and a team of professionals will be at your service to do the needful.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are looking for the most preferred and highly embraced method of website development, responsive web design is your answer. If you have a highly&#8230;<\/p>\n","protected":false},"author":16,"featured_media":2789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[132,90,133,86,134],"class_list":["post-2788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-a-better-responsive-web-design","tag-responsive-design","tag-responsive-design-services","tag-responsive-web-design","tag-web-design-company"],"_links":{"self":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/2788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/comments?post=2788"}],"version-history":[{"count":0,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/2788\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media\/2789"}],"wp:attachment":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media?parent=2788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/categories?post=2788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/tags?post=2788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}