![]() ![]() This means keeping them in the center of the screen because it’s more difficult for thumbs to reach the sides and corners of device screens. Other interactive elements should also be easy to reach.People typically expect the main desktop navigation to be at the top however, on mobile, it should be at the bottom.These differences significantly change the way mobile UI designers design tap targets and other important UI elements with which users interact. Desktop users typically have their computers on a surface, whereas mobile users hold their devices in their hands. Responsive design UX is tricky in the sense that users will interact with the desktop website via clicks but the mobile version via taps and swipes. Here’s a terrific example of eliminating friction: Since mobile user interfaces are typically harder to navigate, it would be best to switch to a one-page checkout for mobile eCommerce stores and only enable multi-step checkout for desktop eCommerce stores. What’s more important is that we focus on the primary objectives of the user first and eliminate any unnecessary friction that aids neither the primary nor the secondary objectives.Ī primary objective could be the purchasing of a product, whereas the secondary objective could be signing up for a newsletter (which could lead to a purchase later). Responsive Design Best Practices Eliminate FrictionĪs mentioned earlier, a mobile-first approach to responsive web design will help designers evaluate what’s really necessary in order for the user to achieve their main objective.Īs we build up to the tablet version (and later the desktop version), we can then begin to think about secondary objectives and the microinteractions, user flows, and CTAs (calls to action) that make those user objectives achievable. One example of this could be that, while Google Chrome supports the CSS property overscroll-behavior: (which defines what happens when the user scrolls too hard towards the edge of the viewport), it’s not supported in any other web browser. Responsive design isn’t just about “making everything fit”-it’s also about adapting to the capabilities of the device hardware and web browser as well as the device resolution. As you can see, there is a wide range of resolutions, so neither mobile, tablet nor desktop is dominating the market share right now-what this tells us is that designers should consider all of them when thinking about responsive web design. Here are the most common screen resolutions across mobile, tablet, and desktop users worldwide. What Screen Resolutions Are Relevant for Responsive Web Design? For now, let’s talk about which devices, screen sizes, and web browsers are relevant today. We’ll take a look at some responsive website examples in a moment. What’s the primary objective, and what visual elements help users achieve it?.Is this visual effect worth the time that it takes to load on mobile?.How can we design something minimalist for mobile first that will later scale up well for desktops?. ![]() Is this feature/function really necessary?.Here are the questions that need to be asked: Would you even consider the non-optimized version?ĭesigning a website as a mobile-first responsive site forces designers to ask a number of important questions because there is less screen real estate to work with. what it would look like if it weren’t mobile-optimized. Take a look at this mobile-optimized version of eBay vs. 83% of mobile users say that they should be able to continue the experience on desktop if they wish. You can take Google’s mobile-friendly test here.ĭoes any of this mean that mobile is more important than desktop? No. It’s way too easy for users to hit the back button and try a rival business instead, and Google even ranks websites that don’t use mobile responsive design lower in their search. By the end of 2018, it’s expected that the global traffic share for mobile devices will grow to 79%, which is an exceptional increase.īusinesses without a mobile website are falling behind at an alarming rate, because 8 in 10 visitors will stop engaging with a website that doesn’t display well on their device. Responsive websites are websites that adapt to all screen sizes and resolutions, not only on desktop but also on mobile, tablet, and sometimes even TV.Īccording to Statista, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website not well optimized for mobile devices is losing out on approximately half of its traffic. ![]()
0 Comments
Leave a Reply. |