Responsive design mobile-ready websites–also known as fluid designs–can solve a range of issues and will increase the mobile usability of your website, but there are some issues to consider if you want to site to be effective with a wide range of mobile devices.
Most site owners build a responsive design website primarily because of the compatibility with smaller screen devices, such as smart phones and tablet computers. The major benefit with responsive design is that one website works seamlessly with all viewing devices, regardless of the screen size. But if the site is not planned carefully, it is not likely to retain mobile visitors long enough for them to view your offerings and learn about what you do.
Mobile devices must be viewed as a lowest common denominator with web site designs. Mobile connections are most often much slower than the type of high speed connections offered from an ISP. In fact, with most mobile connections, the bandwidth speed is so slow that it can take minutes to load a large web page that takes only seconds to load with an ISP connection.
The real issue is that mobile users will not wait minutes for a web page to load. The tolerance threshold of the average mobile user for wait time is only 3 to 5 seconds. That means responsive design web pages must be lightweight in order to load quickly on smartphones and other mobile devices.
Here are some important factors to be considered that can make or break the success of a mobile-ready website.
- The layout needs to consider the fluid nature. The layout needs to consider how the design reshapes itself and flows as the device display gets smaller. With responsive designs, as the screen gets smaller, the right columns drop down and flow into the area beneath the current viewing area. Graphically intensive designs, large images or large image sliders do not work well. Complex designs in general do not work well. Two or three column designs often work best and have a more predictable flow.
- Be aware of the page weight. Page weight is the total number of bytes that must be downloaded to a user’s browser in order to render a web page. This includes all HTML, CSS and JavaScript code, as well as all text, images, videos and other web objects. The total page weight must be small and lightweight to meet the 3 to 5 second tolerance level. Large images, large JavaScript or CSS files, or large videos can dramatically slow down the rendering of a web page.
- Adobe Flash may not work. Most smart phones do not recognize Adobe Flash. The use of Flash has never been a good idea for website design, but it is a significant problem with mobile devices. Avoid all use of Adobe Flash.
- Videos may not work. Many designers are not aware of this, but some smart phones, such as the older but still popular iPhones, will not display videos wider than 640 pixels. If you need to include videos on your website, keep the width at or below 640 pixels and keep the size of the video files as small as you can make it. On this site we use video dimensions of 640×360 pixels, and we keep the time duration of the video short. The combination of smaller size and shorter video length is a good compromise for mobile compatibility. Many cell phones do not initially download a video with the HTML code and web objects. The viewer must select the video and download it separately. This is a good way for browsers to deal with the video issue, but not all smartphone browsers do this.
- Mile-long pages may never get read. Sometimes long pages with lots of textual content is necessary to create an effective article. However, mobile users will get bored easily and may never see an entire article. If mobile users are a primary customer target, limit the the textual content of the articles to a maximum of 400 to 500 words
A properly constructed responsive design will need to limit the number of images and avoid graphically-intensive designs. If a site is planned correctly,