Errors that should be avoided by responsive WEB design

English Original: Mistakes to Avoid with responsive Web Design by Ramya Raju

At the moment, especially when almost everyone has a smartphone or tablet, the importance of developing a user-friendly website for mobile users is self-evident. As a result, business owners will be able to touch the idea of interactive web design by designing an interactive Web site that can bring an unusual experience to users of different platforms (desktop-to-mobile-to-tablet). Developing a Web site with responsive interaction design makes sense because it can run on different devices, so you can save on the cost of developing different sites for different platforms.

However, to make the most appropriate Web page design, some errors you should avoid.

Don't give priority to desktop design

One common mistake developers often make is that they prioritize the desktop when designing a site, because it's a breeze to turn desktop-based Web sites into responsive web designs for other devices in the worst case. However, this error, which occurs in the planning phase itself, can become a very big problem. It can even cause rework, and of course, a lot of bugs will spread out.

However, mobile-based development sites may take some time and will be difficult at first. This is because it forces you to make a choice on what is contained and to think in a way that you are not accustomed to. However, doing so will make the content and design as a whole more excellent. Roughly speaking, you can first try on a smaller device. Once you've made a good design on your phone, it's easy to fit on a larger screen.

The trouble with the navigation bar menu

When designing for the mobile side, the problem with the navigation bar design can be a curse for you, so you have to avoid having trouble. Rather than a fixed-width design, responsive design navigation should be determined based on the device type (so the smartphone's navigation menu may differ from the tablet and, of course, the desktop version of the navigation menu).

Many designers will find themselves devastated by such a task-trying to design a navigation menu that adapts to all screens. In many cases, the designer struggled to convert the horizontal list menu to a vertical list menu, especially when the smaller phone screen was adapted. However, because the navigation bar is not designed to be based on the screen, this can lead to a poor user experience.

Content should not be hidden

Responsive design often has less room to display pictures and content, but that doesn't mean your content should be ignored. You have to take a way to rearrange the content so that it is easy to read. This is easier to implement by creating navigation links and using anchors, which users can see on a page that they have been looking for. Those that control the content through CSS layouts should understand that the content will still be loaded, so it's no big deal to give the user a complete viewing experience. Simply put, users should not be "punished" by developers for the devices they use.

Separate mobile website address

Assigning an address to a mobile website individually the whole thing is a disaster, which destroys the purpose of our interaction design at first, and is arguably. When users are redirected to a mobile version when they visit a website, the result is that they have to waste a lot of valuable time. In addition, this can have a very serious impact on your search rankings. But, of course, there are many advantages to using different URLs. It ensures that you can architect mobile websites with lighter pages and perform better on smart devices. The site can also take care of performance and performance on a specific platform. Unfortunately, the negative impact of having a separate mobile website address is far greater than the positive impact.

A bad user experience

You can't simply compress desktop content into a mobile version, and doing so will affect your users ' experience, and users may abandon your product. It is important to create a friendly interface within the limited space of your phone. You can take steps such as using a drop-down menu instead of the navigation bar on your desktop, which saves you space. This is usually not a headache if you design the mobile side first.

Don't neglect the cross-scenario Convention

When you're doing a responsive design, you can't just consider desktop and mobile devices, you should also consider other types of devices. People may access your website through an embedded browser's smart TV or set-top box. Now, even handheld computers have different types. However, this does not mean that you can create the same user interface for all your devices, and you might want to create different sites for different devices. All you need to do is create a responsive navigation and a design that users can easily understand. This navigation is created to clearly preserve the context of the device.

Do not neglect the load time of the page

With the popularity of broadband, Web developers began to get used to the large number of pages on the use of relatively large resources. However, when we use mobile phones, our users are using slower 2G and 3G networks. Similarly, users who keep Minf international, they pay for the amount of bandwidth they use.

A page is loaded quickly on the desktop, but loading a page on the phone can take a long time or use extra, expensive bandwidth. Even worse, when users are forced to wait for the page to load, they will leave the page for a few seconds, and you will lose your traffic.

Do not develop for touch screen devices

Most handheld devices today use touch screens, and even a lot of laptops start using the touchscreen. So, when you design responsive design, it's important not to ignore the importance of dealing with touch. There are two reasons: first, clickable items, such as the button to take into account the size of the user's finger (do not let the user zoom click). Second, you have to handle the touch events correctly. This can be done to overcome the 300ms click event Latency.

Summary and Discussion

As a result of negligence, these errors will inevitably occur. Try to avoid them and make sure your responsive design works on all types of devices.

Would : "Do not first design on the desktop side," Frankly speaking, just a comment, I will not be too serious to treat;

Den McHenry : You may be right, but in the example in this article it is indeed the right choice.

Will: The article title is "error that should be avoided by responsive web design" and "Do not design for desktop" is an example. There are two natural segments to explain why you should not design your desktop, or expand your ignorance of responsive web design. Why is it wrong to first design on the desktop side? Suggestions may be wrong, blindly follow the bandwagon rather than understand why you are doing this is a bigger mistake.

Den McHenry: I understand your subconscious reaction to the trend, but the first design principle of mobile phone is not like flat design or other design. This is true, based on a lot of evidence, when this view is acquired by the audience, it focuses more on what is most important and provides the best experience for cross-device. To make an analogy between two established ways, the desktop first gracefully degrades, and the moving end is the progressive enhancement. In the first case, you create the site you want and decide what you need to remove or how to make a change that has adapted to the device that it cannot match. In the second case, your build is exactly like building a house from the ground and considering the best experience for various views. This is not to say that you cannot make the ideal design of the desktop side before the start of a real design (such as requirements, build, test, iteration) and in the build, but in terms of adaptability and usability, subtraction does produce more errors and increase time costs than doing addition. Imagine a car manufacturer building an expensive model first, and then making the components more adaptable. Imagine a architect designing a house and then planning a room to meet your needs. You lose structural integrity and cohesive design while introducing new bugs at each stage. To be honest, the flaws in the first development on the desktop have been written very clearly, I do not understand what you mean, it seems a little bit black feeling.

would: I'm sorry, I don't accept your point of view. Your analogy doesn't make sense, because in web development, you can actually easily reduce space to fit into smaller spaces. In addition, mobile phone side How to avoid these problems first? You subjectively forced to reduce the display of these conditions. I think it is feasible to design the mobile terminal now and make the design on the experienced desktop side, but it may lack a better user experience. That's why I think X is stupid first. The focus is on the user experience, not "first for mobile phone terminal development". Speaking of which, by the way, your opinion is more instructive than the article. It's good work. All articles will say "This leads to rework and a lot of errors", but developers should not blindly follow this advice without understanding the cause.

Errors that should be avoided by the responsive Web design