By Ramya Raju
Nowadays, when it seems like everyone has a smartphone or tablet, the importance of creating mobile friendly websites cannot be overstated. As a result, business owners have lapped up the idea of responsive web design because it can give a complete experience to users on different platforms – from desktop computers to smartphones to tablets. Creating a website with responsive design makes sense because it works across different devices and as a result you saved money on developing different websites for different platforms.
But, to make the most out of responsive web design, there are some mistakes you need to avoid.
Don’t Design for Desktop First
One of the common mistakes people make is design a website for desktops first because they think it will be easy to turn it into a responsive design for other devices. But this mistake during the planning stage itself can become a huge issue for you. It can cause rework and errors can creep up too.
It might seem time consuming or difficult to create websites for mobile devices first. This is because it can force you to make trade-offs on what content to include and to think in a way you are not used to. However the content and design on the whole will be a lot better. As a rule of thumb you can start with smaller devices first. Once you have the right design for mobile, it can be easily adapted for bigger screens.
The Trouble with Navigation Menus
When designing for mobile, the problems with navigation design can become the bane of your existence and have to be avoided. Unlike fixed width designs, navigation for responsive design should be done according to the device type (so your smartphone navigation may differ from your tablet navigation and still differ from the desktop navigation).
Many designers find themselves overwhelmed by task of trying to create a navigation menu that works across all screens. In many cases designers struggle to convert horizontal list menus to vertical list menus, especially to fit smaller mobile screens. However, since the navigation menu is not designed according to the screen, it can create a poor user experience.
Content Shouldn’t be Hidden
Responsive designs generally have less space for pictures and content but that doesn’t mean your content should be neglected. You will have to re-arrange it in a way that it can be read easily. You can easily do that by creating navigation links using anchors that can lead users to the content they have been looking for on the page. Those who hide content using CSS need to realize that the content still gets downloaded, hence you have nothing to lose by giving users a complete viewing experience. Quite simply, users should not be penalized for the device they use.
Separate Mobile URLs
Having a separate URL for your mobile site can be a complete disaster and, arguably, defeats the whole purpose of a responsive design in the first place. Users end up wasting precious time as they are redirected from the website to its mobile version. Moreover it can seriously hurt your search engine rankings too. But, of course, there are some benefits to having different URLs. It ensures that you can construct mobile sites with lighter pages that perform better on smart devices. The site will be more catered for viewing on specific platforms as well. Unfortunately, the negatives of having separate mobile URLs outweigh the positives.
Creating Poor Mobile UX
You cannot simply compress content meant for desktop into a mobile version; doing that will affect the viewing experience for your users, who will be put off. It is important that you create an appropriate user interface to work within the constraints of space of mobiles. You can use strategies such as using dropdown menus in place of navigation bars that are used in desktop versions as this will save you space. If you design for mobile first, this usually isn’t an issue.
Don’t Disregard Cross-contextual Conventions
When you are working on responsive design, you can’t just think of desktops and mobile devices because there are many other devices that have to be factored in. People may be visiting your site from Internet-enabled smart TV’s or set top boxes that contain a brower. Even tablets come in a wide array of form factors nowadays. But that doesn’t mean you have to create an indigenous user interface for all devices – you would be better off creating different websites. What you can do is create responsive navigation that keeps the context of the device in mind and creates a design that’s easily understandable to users.
Don’t Ignore Page Load Times
With the pervasive access to broadband on desktops, web developers have gotten used to including relatively large resources on their web pages. However, when dealing with mobile, our users may often be on slow and limited 2G and 3G connections. Also keep in minf international users who often have to pay based on the amount of bandwidth they use.
The point is, even though a page may load easily on a desktop, it could potentially take a long time on mobile devices or use excessive, and pricey, bandwidth. To makes matters worse, when users are forced to wait, even if only for a few seconds, on their device for a site to load, they will often leave the page and thus you will lose your mobile traffic.
Not developing for Touchscreen devices
Most handheld devices today use a touchscreen. Even many laptops are now coming touch-enabled. Hence it’s important that when you are creating a responsive design that you don’t overlook the importance of handling touch. There are two aspects to this: the first is that clickable items, such as buttons, take into account the size of a user’s finger (don’t make the user have to zoom to click); the second is that you properly handle touch events (doing so can also overcome the 300ms delay for click events that still exists on some devices).
Conclusion
These are few simple mistakes that often happen because of oversight. If you manage to steer clear of them you will ensure that your responsive design works well across all types of devices and makes its mark.
“Don’t Design for Desktop First” that’s more of an opinion in all honesty. I wouldn’t take it too seriously.
That may be true, but in this case it’s a correct opinion.
The title is “Mistakes to Avoid With Responsive Web Design” and “Don’t Design for Desktop First” is given as an example. There’s exactly 2 paragraphs explaining this, or rather expanding nothing about it. Why exactly desktop first is a mistake again?
Opinions can be wrong. Following fads without understanding why you do something is a bigger mistake.
I understand the knee-jerk reaction against trends, but mobile-first design isn’t like “flat design” or other superficial fads. It’s a solid, evidence-based approach that focuses on what’s most essential while reaching the broadest possible audience and providing the best experience across devices.
To make an analogy with well-established practices, desktop-first is to graceful degradation as mobile-first is to progressive enhancement. In the first case, you create your ideal site and decide what to pare away or how to alter it for devices that fail to match. In the second, you build entirely from the ground up, considering what the best experience will be for various viewports.
This isn’t to say that you can’t have a desktop ideal before the real design (i.e., planning, building, testing, iteration) begins and build toward it in the process. But it’s a very costly mistake in terms of time, adaptability, and usability to design by subtraction than by addition.
Imagine a car maker building a luxury model, then pulling components to make a more accessible model. Imagine an architect designing a home, then erasing rooms to try to fit your budget. You lose structural integrity and cohesiveness of design, all while introducing new bugs at every stage.
Honestly, the text above is pretty clear on the pitfalls of desktop-first, so I don’t understand your beef. It seems almost political.
Sorry, I don’t buy it. Your analogies don’t make sense since, in web development, you can actually remove rooms for smaller houses easily. Also, how is mobile first avoiding this anyway? You are forced to render less content in both cases.
I know the advantages of mobile first and experienced desktop first websites that are responsive, but don’t have great UX. That’s why I think x-first is silly. It’s about UX, not “mobile first”. Talk about that.
Btw, your comment is way more instructive than the article. Great job. All the article says is “It can cause rework and errors can creep up too”.
People shouldn’t blindly follow advice without understanding.
Will, you aren’t seriously basing your determination of the value of mobile first based upon your view of Den’s analogy are you? However, his analogy is perfect. When designing the house, every room, in theory, had a purpose when it was designed. So, removing rooms becomes difficult.
The same goes for trying to convert a desktop to mobile. Sure, you can “hide” content, but a) that’s not a great strategy as the article notes that the content is still there and downloaded, just hidden, resulting in larger downloads on mobile that aren’t necessary and b) the content was there for a reason meaning that your either going to fight internally at your company about who’s content is removed or you offer your users an incomplete version of your web site (or both).
That being said, no one is forcing you to accept the advice (which has been given from many experts prior to this article based upon years of experience). Feel free to try to build it. Perhaps the experience will change your mind.
I have tried mobile-first, didn’t think the benefits were worth it.
” resulting in larger downloads on mobile that aren’t necessary” — How exactly are you saving bytes when designing mobile first? Lazy loading has nothing to do with mobile vs desktop first.
“So, removing rooms becomes difficult.” — how is this easier compared to adding rooms as the screen gets bigger?
” going to fight internally at your company about who’s content is removed or you offer your users an incomplete version of your web site” — but aren’t you having the same internal conflicts of who’s content has higher priority? in what order does the content appear as the screen gets bigger?
“which has been given from many experts prior to this article based upon years of experience” — I don’t take advice based on authority. I would however be more than happy to read more from these experts if you can provide me some links.
I’m probably missing something here. Would gladly accept some clarification.
You should think “mobile-first” through the website’s complete “design” process, meaning the decisions about content, UI and UX.
In that sense, when you think mobile first, you also consider the limitation that come with the use of mobile devices. Limited bandwidth, probably slower internet connections and limited browsing time (people on mobiles have shorter browsing sessions) etc
Based on those you could make decisions like leaving out that very heavy jquery library that you need just for that one UI element, rethink the use of those HD images on the background and design the UX so you can guide the user to the end goal in the fewest clicks possible and with the fewest kb downloaded. I could go on and those may be silly examples, but I hope you are getting what I mean.
That being said, I think you are missing the point in the sense that, sure, no one is saying those things are impossible to do when you design desktop-first, but it jus seems easier to do it the other way around; The perfect developement team would have the same optimal result in both cases, but since none of us is perfect, this mobile-first approach seems to fit our minds a bit better.
Setting the limitations right from the beginning, nicely defines your frame of thinking, resulting in better decision for the mobile device implementation, than the ones you would make by starting the other way around.
“it jus seems easier to do it the other way around;” – – fair enough. I didn’t notice but it probably works for others. Perhaps the unconventional work flow makes people concentrate more and perform better?
In any case, excellent response, many thanks!
“seems to fit our minds a bit better”? All you can ever do is talk about YOUR mind, and when you do, remember the NLP (Neuro Liguistic Programming) research that demonstrated that all humans and their minds fall into predominantly visual learners, predominantly auditory learners, predominantly kinesthetic learners and predominantly olfactory learners – and ANYWHERE in between.
Nonetheless, your article is much appreciated.
Elaine unfortunately and although this is an interesting topic (although slightly off-topic), I don’t have the knowledge required to discuss it in depth.
I do think however, that my sentence has nothing to do with how people learn, rather than with the thought patterns we develop to tackle problems and people of the similar profession seem to be develop similar way of thinking when it comes to work issues (especially in IT, where we are all exposed to the same information). Then again I might be wrong:) oh well…
Thanks for the support !!
Web design company in India
Modern design and development world as we attempt something fresh, innovative, and exciting to keep the internet feeling like the creative outlet that it is.thanks
Great Article !! Couldn’t be any better. Responsive web design is the need of new era. A website that is compatible for both; laptop as well as smart-phones. And it is also quite necessary though. Otherwise there will be two separate versions of same website for two different platforms. Responsiveness has saved a lot of time and budget. But there’s also a few things that you might need to know before making a Responsive Web Design that I have mentioned in my article – Do and Do Not Tips for Responsive Web Design
This plugin is very silmpe to use. 1 click install!!! It will find a template for the device that is being used and display it on the mobile device.. Pretty awesome! Plugin WP viewMobile *I also attached a link to the top 10 plugins for this