There are now more smartphone or tablet internet users than those surfing via desktop PCs.
This has led many savvy marketers to opt for a separate mobile-based platform where they could promote their brand and avail the traffic coming from portable gadgets. However, this practice requires additional expense as it involves designing and maintaining mobile websites along with the desktop ones.
Fortunately, these practices have now become almost obsolete thanks to the responsive web design that emerged with the advent of HTML5 and CSS3. Responsive web design purges the need for having a separate mobile website as it empowers the webmaster to present a website that can resize or fit itself to the screen size of any device: desktop, laptop, tablet or phone.
What may be less apparent to many designers and developers is that there are quite a few ways that your responsive design can fail. If you don’t want to waste your hard work by ending up with a mediocre or erroneous responsive website, I recommend you to be aware of the following four pitfalls, in particular.
Breakpoints
Many designers waste their time setting up a RWD layout that mainly relies on the “device width breakpoints”, in short device dimensions. Keep in mind if your mindset is affixed with device dimension, then you’re not talking about a true responsive web layout. Responsive layouts are those that can adjust to any screen size on which they reside.
Given that companies are now churning out devices of every screen size they have in the book, it is important to unshackle yourself from this practice and instead create layouts that uses “design based breakpoints” in which adjustments are made where the design determines.
Content
Often, designers hide or discard website content in order to make it fit to a smaller device or screen-size. This is not best practice. Mobile users expect and deserve to experience te same content desktop users. If you hide content only for the sake of adjusting the size to a smaller screen, you’ll deprive them of that experience. To acquire content parity, you’ll need to change the content of a responsive site so that it can be viewed by all.
File Size
Content parity doesn’t mean puffing up your site with unnecessary or excessive content to the point of making it slower. If you look around, you’ll find many websites that have files of such size that they become sluggish. It is important to remember that over 74% of mobile users will leave a website that takes more than 5 seconds to load. Therefore, don’t hesitate to cut back superfluous content while still delivering a great user experience.
Images
In conventional web designs, we never usually worry about using images of any size or type. This has led to situations where pages are scaled to fit different device screen sizes, but images are not. What you have to learn to do is include image management in your rsponsive web design techniques. We have to use adaptive image management techniques that automatically detect the screen size and rescale images as well as text containers accordingly.
Conclusion
Some of these pitfalls might seem to contradict each other, and make your task impossible. And yet, if you look closely, you’ll see there are ways to achieve truly responsive web design and still avoid the aforementioned pitfalls.
The essential key is to always keep the end user in mind. Refine your content so that it truly serves the correct purpose – and you’ll find it becomes much clearer what content should always be visible or easily accessible, and what can be tucked away to be retrieved with a click or a touch. Think about how your users might prioritize their content needs when on a desktop, laptop, tablet or phone and design and develop your web presence accordingly.
Two other essential points to keep in mind are that you should not let yourself become so involved in making the technology work that you end up coding to suit a device rather than coding to suit a device’s user, and to conduct proper user testing to establish what actually works and what doesn’t for your users.
With those caveats in mind, you’ll find that you can design and develop not only responsively, but responsibly and – ultimately – successfully.
Alexus Durwin
