Why You Cannot Push a Pig Through a Keyhole
Building an effective responsive design website entails much more than simply designing a responsive theme. The primary purpose for using a responsive design is to have one website that works with all viewing devices, from desktop monitors down to small smartphone displays. Unfortunately, a theme may be mobile ready, but the web site may not be fully compatible with mobile devices.
Successful responsive websites require a balance between the information a website owner wants to display and what they actually need to display. Pages loaded with images create a lot of overhead to download and therefore are bandwidth hogs that slow down the rendering of a page on any device with a slow Internet connection. Web pages have to be streamlined for compatibility with the “lowest common denominators”, which in this case are smartphones with limited viewing area and limited bandwidth.
Bandwidth is the amount of information that can be downloaded in a given time period. The most common analogy for bandwidth is a hose. The larger the hose, the more fluid it can pass within a specific time span. The smaller the hose, the longer it will take to pass the same amount of fluid. We cannot control a user’s bandwidth, but we can control the number and size of everything required to render a page. The total size of all code, images and other objects downloaded to a device is called the page weight. Without considering other restrictions, the smaller the page weight, the faster everything will download and render on a viewing device.
Here are some of the important issues to consider to achieve compatibility with mobile devices.
- Limit the number and size of images on each page. Image-rich designs are not efficient designs for mobile devices. A media query is used to detect the width of the screen on a user’s device and then render an appropriate display for that mobile device. We can easily control which images display for small screens and it’s generally a good idea to limit the number of images displayed on smartphones. However, whether a image is displayed or not, it is still downloaded to the user’s browser, so limiting the display of images for small screens does not reduce the page weight.
- Image sliders using large images are a bad idea. Five or six large images can easily add 500,000 to 1,000,000 bytes to the size of the download. This can cause long rendering delays for first time visitors with smart phones. Slow rendering issues cause mobile users to abandon a site in a heartbeat.
- Be aware that older smartphones, such as the iPhone 3, will not display videos wider than 640 pixels. Videos files can be incredibly large and can create bandwidth bottlenecks when they are set to autoplay. Most smartphones resolve this problem by preventing the download of videos until the user clicks a button to start streaming the video to the device. If you have a 50 megabyte video, regardless of the dimensional size that the video displays on a small screen, a 50 megabyte video file needs to be downloaded in order to play. For the most effective compatibility with mobile devices, it’s a good idea to limit the rendered width of video file to 640 pixels and the length to one or two minutes. Try to keep the video file size under 10 megabytes. Under 4 megabytes is better.
- Not all videos are compatible with responsive designs. For example, YouTube videos are not yet fully responsive. They do resize horizontally to fit the width of a viewing device, but the vertical dimension does not resize proportional to the width. The video is therefore squished and distorted. YouTube may solve that problem in the future, and some smartphones may resolve that problems automatically, but YouTube and other video sources are not naturally compatible with smartphones. Sometimes a WordPress plugin can resolve this issue. YouTube videos are not considered to be a page weight issue because they play on YouTube and merely display on a website where the code has been inserted. However, they can still be very large files that do not play well on small devices.
- Limit the number of objects downloaded to render a page. Every individual object (code file, image, video, CSS file, JQuery file, etc.) requires a separate request to a web server. Some of these objects are cached for subsequent visits to a web page, but all need to be downloaded for a first time visit. Keep the number of requests to a minimum and a page will render faster.
- Textual content downloads quickly and renders efficiently, but mile-long web pages with thousands of words will likely never be read by anyone with a mobile device. Make sure you put the most important points near the top of the content area so users see this first. Also, every character in the text is another byte to download. If a significant percentage of your visitors are using smartphones, it’s a good idea to limit the textual content to 300 to 500 words.
Limited bandwidth is the most serious issue to consider when building a mobile ready website. The trick to an efficient design is to avoid building web pages with excessive page weight. Excessive page weight is the proverbial pig that cannot be pushed through a keyhole.
We frequently see web pages that have a page weight of over 1 megabyte. It is not unusual for a page to be over 2 megabytes without any videos. Today, the practical page weight limit is about 300,000 bytes or 300kb for your website to be mobile ready. The less information that has to be downloaded to a mobile device, the faster and more professional your site will appear to be.