There are many reasons to consider responsive web design (RWD) when you already have an existing desktop website but need a mobile website as well. For one thing, RWD is cheap and an efficient way to take an existing desktop design and ensure it works efficiently on a mobile device as well.
However, when RWD is treated as an afterthought or lazy add-on, the benefits of properly implemented RWD can be lost. Here are five ways to ensure your RWD efforts will stand out and enhance your mobile web presence and brand image.
1. Take the differences of desktop and mobile into account (but don’t overthink it).
In the early days of mobile, it may have been appropriate to view desktop web visitors as static and mobile ones as viewers on the go. Those stereotypes no longer hold with the reality of mobile device usage. Today, people surf the web while watching television, lying in bed or even while having a quick bite to eat.
Ideal RWD will address the reality that mobile devices are used for both static and roaming purposes.
That is not to say, however, that there are not key differences between mobile and desktop. Navigation, font sizes, website buttons and similar website elements should be treated differently, but it is no longer safe to assume that mobile is simply an “on-the-go” web browsing experience.
2. Think big by starting small.
When starting the RWD process, think about the big picture by designing for the smallest practical screen first. It is far easier to design upward to larger devices than it is to start by designing for large screens and moving downward.
When defining breakpoints, ensure that the steps are not too large. Around 200 pixels between breakpoint steps should suffice. These steps could be as simple as floating images or a change to font size. Making these simple tweaks and focusing on the “small” details of RWD will make a big difference for your RWD performance.
3. Treat RWD as a solution, not a compromise.
As mentioned at the outset, the key benefits of RWD are lost when lazy and half-measure solutions are implemented for the mobile version of the website. RWD is not a compromise. Instead, it should be viewed as the means by which your mobile website can include mobile-specific features, such as offline support and geolocation tools.
Users will also appreciate it when your RWD process does not hide content or use browser sniffing that compromises the mobile website’s functionality. By avoiding these mistakes, users will appreciate the enhanced user experience.
4. Emphasize user-friendliness.
Enhanced user-friendliness is a natural extension of treating RWD as a solution and not a compromise. There are a few essential user-friendly elements to RWD that all websites should take into account:
- Context: RWD is about more than fitting a desktop website to size on a mobile device. You also need to consider the website’s industry and viewing audience. For example, a brick-and-mortar store with a physical address should include a functional and easily accessible “Store Directions” page that takes advantage of geolocation and provides a mobile-accessible phone number.
- Simplify:The smaller nature of mobile means that cluttered and unfocused pages are unacceptable. Include essential information, images and the like, but trim the excesses that serve no practical purpose on mobile.
5. Prioritize performance above all else.
Finally, if a mobile website does not perform well, all the RWD development efforts are moot. Users will not stay on the website for long unless the website performs admirably.
For example, attractive visuals are an important element of RWD, but these files can be large in size. The appeal of sumptuous images has led to slower web pages, with the average site now operating at a size of 2.1 megabytes. RWD should focus on striking the proper balance between effective visuals and reduced file sizes that enhance performance.
By implementing these key RWD design points, the resulting mobile website will be a true standout.