Blog, Kirien Sangha

Today, when a company is initiated into digital life, what determines the success of its website, to a great extent, is if and how it provides a uniform experience across all devices that a customer uses. Moreover, in a world where even a second of interruption could lead to distorted user experience, companies cannot risk being even minutely inefficient when it comes to design and intuitiveness of their website. Making your website efficient and intuitive To ensure efficiency of web pages, Google suggests Restrictive Loading – that is, the website can have prioritised content, such that above-the-fold content, is loaded first, while the remaining is loaded in the background. Google suggests that the server response time should not be more than 200ms; add another 200ms as the maximum time to render the remaining above-the-fold content. Other tips for a responsive website include reduction in number of redirects, not using external blocking CSS and JavaScript in above-the-fold content, and optimisation of JavaScript rendering time. The problem of heavy web pages Web pages are becoming heavier – today, the average size of a web page is 1532kB, and this number is rising daily! With constantly escalating page weight, slow performance and high bandwidth rates follow. Such heavy page weight are most unfavourable for mobile users. Particularly those who use 3G will not be able to access the one quality that sets smart-phones apart – information anytime and anywhere instantly. Responsive Web Design to the rescue Responsive Web Design (RWD) emerges as an efficient solution for the issue of heavy page weight. With responsive web design, the entire site layout is designed to suit all types of screen resolutions. The use of word ‘responsive’ implies that the layout of your web page responds according to screen resolution of the user’s device. RWD was invented to allow a uniform/continuous experience to the user, irrespective of screen size of their browser or device. Traditionally, coding was done for particular screen resolutions. But with increasing number of devices and screen resolutions, we end up with a complicated bunch of stylesheets. When you employ Responsive Web Design, the different mobile resolution aspects are inherently taken into account, and one doesn’t have to worry about external CSS properties. The only thing to remember is – “What is the smallest possible display screen you are developing for?” You can use the traffic data of Google Analytics for this purpose. While you might not be able to get the website working on every possible device, you can focus on a majority depending upon average width of the screen.


Becoming mobile responsive and mobile responsible Here are seven ways to make your website more mobile responsive: Select an mResponsible Framework The previous section introduced Responsive Web Design. Such frameworks as available on Foundation and Twitter Bootstrap enhance the speed of heavy web pages. The main objective of such framework is to lay out a platform for rapid prototyping of varying mobile functionalities and layouts. This allows designers to divert and invest their energies into exhibiting the brand with greater precision and uniqueness. Preparing for Text Wrapping When the device you use is narrow, the content would get automatically wrapped and this could cause a display issue. You can use plugins like Fit-Text (jQuery plugin) to resolve this issue. They will permit the minimum and maximum size of texts and can also auto-update the font size. Designing for Mobile-First While desktops can handle complex functionalities, mobiles have limited capacities. When diving into developing website for mobile devices, it is important to follow the mobile-first approach where you add functionality depending on features of mobile devices. Resize image to sync with screen The mobile web performance can be altered greatly by fitting the images according to size of the screens. The optimal image sizes have to be mentioned according to the mobile device. Since images eat up the highest amount of kB, there is a need to compress and alter them into other image formats like WebP, which can decrease size of the image without lessening the quality. You can also use adaptive images for easing the task. With adaptive method, you can detect the screen size and instantly create cache to supply the required reduced and embedded HTML images without modifying the markup. Adaptive images make use of a single PHP file, a line of JavaScript and one htaccess to identify screen size of the user device. Push Down the Content, Pull up the Performance Performance of a site is hugely dependent on the amount of content on it. You can reduce the number of scripts by moving them to end of HTML templates. This will do away with unnecessary blocking. Limited HTTP Requests While the number of HTTP requests is considered a technique for web performance traditionally, things take a twist with responsive designs. With responsive web design, the network overhead for every HTTP request is of utmost importance. Instead of using data URIs, you can use CSS sprites for mobiles. This will reduce the request of images. Make sure the CSS file is at top of the document as modern browsers do not operate unless they encounter a downloaded CSS. Sticking to a Single Domain According to Google, you can improve the SEO score on your responsive websites by sticking to a single domain. With a single URL for all devices, publishers will not need to redirect a high-cost browser from mobile to desktop site and vice and versa.