<p>Published on <a href="https://blog.prototypr.io/responsive-design-best-practices-and-considerations-a3ae5ef7de75?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Daniel Schwarz </p>
<p>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.</p>
<p><a href="https://www.statista.com/topics/779/mobile-internet/">According to Statista</a>, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website <em>not</em> well optimized for mobile devices is <strong>losing out on approximately half of its traffic</strong>. By the end of 2018, it’s expected that the global traffic share for mobile devices <a href="https://www.zenithmedia.com/mobile-forecasts-75-internet-use-will-mobile-2017/">will grow to 79%</a>, which is an exceptional increase.</p>
<p>Businesses without a mobile website are falling behind at an alarming rate, because <a href="http://www.ironpaper.com/webintel/articles/web-design-statistics-2017/">8 in 10 visitors will stop engaging</a> with a website that doesn’t display well on their device. It’s way too easy for users to hit the back button and try a rival business instead, and <strong>Google even ranks websites that are not responsive lower in their search</strong>.</p>
<p>You can take Google’s mobile-friendly test <a href="https://search.google.com/test/mobile-friendly">here</a>.</p>
<p>Does any of this mean that mobile is more important than desktop? <a href="https://www.impactbnd.com/blog/mobile-marketing-statistics/">№83% of mobile users say</a> that they should be able to continue the experience on desktop if they wish.</p>
<p>Take a look at this mobile-optimized version of eBay vs. what it would look like if it <em>weren’t</em> mobile-optimized. Would you even consider the non-optimized version?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*avRl-nL9hXTj4H54.png">eBay: not mobile-optimized vs. a mobile-optimized responsive website</p>
<p>In order to design websites that can compete on today’s internet, <a href="https://www.toptal.com/designers/web">web designers</a> <strong>must</strong> be experts at responsive web design (RWD). Where should they start?</p>
<h3>A Mobile-first Approach to Responsive Web Design</h3>
<p>Mobile-first web design means designing the mobile website first and working up to the desktop version. There are a number of reasons why this approach works well.</p>
<ol>
<li>Mobile websites have more usability concerns (this is mostly due to the lack of screen real estate), so it’s practical and more efficient for the primary focus to be on mobile design.</li>
<li>It’s easier to <strong>scale up</strong> the mobile version than it is to <strong>scale down</strong> the desktop version (again, because of the lack of space on mobile websites).</li>
<li>Mobile-first web design helps to reevaluate what’s visually and functionally necessary.</li>
</ol>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TrR6j3KTnz_MYBpv.png">Designers ought to consider taking a mobile-first approach to responsive web design. (source: <a href="https://usabilla.com/">Usabilla</a>)</p>
<p>Designing 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. Here are the questions that need to be asked:</p>
<ul>
<li>Is this feature/function really necessary?</li>
<li>How can we design something minimalist for mobile first that will later scale up well for desktops?</li>
<li>Is this visual effect worth the time that it takes to load on mobile?</li>
<li>What’s the primary objective, and what visual elements help users achieve it?</li>
</ul>
<p>We’ll take a look at some responsive web design examples in a moment. For now, let’s talk about which devices, screen sizes, and web browsers are relevant today.</p>
<h3>What Screen Resolutions Are Relevant for Responsive Web Design?</h3>
<p>Here are the <a href="http://gs.statcounter.com/screen-resolution-stats">most common screen resolutions</a> across mobile, tablet, and desktop users worldwide. 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.</p>
<ul>
<li>360&#215;640 (small mobile): 22.64%</li>
<li>1366&#215;768 (average laptop): 11.98%</li>
<li>1920&#215;1080 (large desktop): 7.35%</li>
<li>375&#215;667 (average mobile): 5%</li>
<li>1440&#215;900 (average desktop): 3.17%</li>
<li>720&#215;1280 (large mobile): 2.74%</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WBIIG6dSMMGGS8iPSlliSw.jpeg"></p>
<p>Just as with device breakdown, we should segment the data by location to match the user demographics (or anticipated user demographics) of our target audience. It’s also worth catering to resolutions that are gaining popularity, because while some screen sizes are currently not that common, they may be in the future. This will help <a href="https://www.toptal.com/designers/responsive">responsive designers</a> craft futureproof UX that will work even when the market share changes.</p>
<p>For example, 360&#215;640 resolutions (which correspond mostly with Samsung devices using Android) have risen by 5.43% in the last year. Designers can use valuable insights like these to decide on key responsive breakpoints before starting a website design.</p>
<h3>What Web Browsers Are Popular Today?</h3>
<p>Responsive web design is about offering a seamless experience on any device, and since different web browsers render web pages in different ways, websites must be tested to ensure that they’re compatible with a variety of mobile and desktop web browsers.</p>
<p>Even though making a website scale to the correct responsive breakpoints is primarily the responsibility of a web developer, it’s the web designer that decides exactly how a responsive website will adapt to various screen sizes in order to create an optimal user experience.</p>
<p>Here’s a worldwide breakdown of <a href="http://gs.statcounter.com/browser-market-share/">web browser market share</a> for mobile and desktop.</p>
<ul>
<li>Chrome: 55.04%</li>
<li>Safari: 14.86%</li>
<li>UC Browser: 8.69%</li>
<li>Firefox: 5.72%</li>
<li>Opera: 4.03%</li>
<li>Internet Explorer: 3.35%</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*rQlUroUAoOiJDR6a.jpg"></p>
<p>Responsive design isn’t just about “making everything fit” — it’s also about adapting to the capabilities of the device hardware and web browser <em>as well as</em> the device resolution. 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 <a href="https://caniuse.com/#feat=css-overscroll-behavior">not supported in any other web browser</a>.</p>
<h3>Responsive Design Best Practices</h3>
<h3>Eliminate Friction</h3>
<p>As 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.</p>
<p>As we build up to the tablet version (and later the desktop version), we can then begin to think about secondary objectives and the <a href="https://www.toptal.com/designers/product-design/microinteractions-better-ux">microinteractions</a>, <a href="https://www.toptal.com/designers/ux/guide-to-ux-analysis">user flows</a>, and CTAs (calls to action) that make those user objectives achievable. What’s more important is that we <strong>focus on the primary objectives of the user first</strong> and <strong>eliminate any unnecessary friction</strong> that aids neither the primary nor the secondary objectives.</p>
<p>A 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).</p>
<p>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 <a href="https://www.toptal.com/designers/ux/ecommerce-ux-mobile-experience">mobile eCommerce</a> stores and only enable multi-step checkout for desktop eCommerce stores.</p>
<h3>Design for Thumbs</h3>
<p>Responsive web design is tricky in the sense that users will interact with the desktop website via clicks but the mobile version via taps and swipes. There are physical differences as well. Desktop users typically have their computers on a surface, whereas mobile users hold their devices in their hands. These differences significantly change the way <a href="https://www.toptal.com/designers/mobile-ui">mobile UI designers</a> design tap targets and other important UI elements with which users interact.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*XmdijDG9liiFCSdq.png">Thumbs can reach the center of the device screen better than the corners. (source: <a href="https://alistapart.com/article/how-we-hold-our-gadgets">A List Apart</a>)</p>
<p>Let’s take a look at some examples:</p>
<ul>
<li>People typically expect the main desktop navigation to be at the top; however, on mobile, it should be at the bottom. Thumbs don’t reach the top comfortably.</li>
<li>Other interactive elements should also be easy to reach. 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.</li>
<li>So that they can be tapped with ease, important links and CTAs should have a height of at least 44px (smaller tap targets are bad for usability).</li>
</ul>
<p>Recommended reading: <a href="https://www.toptal.com/designers/mobile-ui/fundamental-guide-mobile-usability">The Fundamental Guide to Mobile Usability</a>.</p>
<h3>Take Advantage of Mobile Devices’ Native Hardware</h3>
<p>Mobile hardware (like the device camera, or GPS services) isn’t specifically reserved for native apps, and as mentioned earlier, responsive web design isn’t just about “making everything fit.” It’s also about adapting to the capabilities of the device. In the case of mobile web design, since mobile devices have easy to use cameras, some microinteractions — such as data input — are actually easier on smaller screens as long as websites are taking advantage of the available native hardware.</p>
<p>Let’s take a look at some examples:</p>
<ul>
<li>Credit/top-up card scanning (because forms are often tricky on mobile)</li>
<li>Photo-sharing on social media, because the media is already on your device</li>
<li>Two-factor authentication (because you’re already on your mobile device)</li>
<li>Quickly checking stocks/analytics (because mobile apps simplify information)</li>
<li>Performing a <a href="https://www.toptal.com/designers/ui/designing-a-vui">web search with voice</a> (because hands-free is easier than typing)</li>
</ul>
<h3>Make Layouts Fluid/Adaptive by Default</h3>
<p>Not every user will have their desktop browser maximized. This means that while designers need to consider the responsive breakpoints of the devices that users are using today, they also need to account for what happens in between those breakpoints.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GW48RW2kjy9x4BvN.png">A fluid vs. fixed web layout for responsive web design</p>
<p>Responsive breakpoints should be used to “reflow” the layout and content to a new device, but to account for all the sizes in between (just in case), layouts need to be otherwise <strong>fluid</strong> (that is, they naturally adapt/stretch as the browser resizes).</p>
<p>Keep these tips in mind when designing fluid/adaptive layouts:</p>
<ul>
<li>Percentage units will allow elements to be fluid.</li>
<li>Setting minimum and maximum widths can enable the “but don’t go smaller/bigger than this” scenario.</li>
<li>SVG image formats can be scaled up and down without losing quality, and are resolution-independent (as opposed to JPGs and PNGs, which are not).</li>
</ul>
<h3>Don’t Forget about Landscape Orientation</h3>
<p>We talked about specific responsive breakpoints earlier, but we also need to consider that those mobile viewports can be displayed in landscape orientation as well. While implementing a fluid layout will technically make the content adaptive, losing a fair chunk of the <em>portrait</em> viewport can be a hindrance to the usability and accessibility.</p>
<p>Navigations are usually safe (sometimes they’re better, actually, since users typically navigate landscape orientation with <em>two</em> thumbs), but scrolling becomes significantly harder, which is less than optimal since the user is required to scroll more on landscape.</p>
<p>Designers may want to consider designing for landscape breakpoints as well; for instance, tiled elements that stack vertically on mobile could be displayed as a slider with left and right navigation buttons, meaning the user doesn’t have to scroll.</p>
<h3>Remember, Typography Can Be Responsive Too</h3>
<p>Even though <a href="https://www.toptal.com/designers/ux">UX designers</a> typically use pixel units to design websites, on the actual web, one point doesn’t necessarily equal a pixel anymore, because different devices have different resolutions. The iPhone X, for example, has 458 PPI (Pixels Per Inch), so where pixel sizes are getting smaller, we’re able to achieve crisper graphics in the same physical space (Apple calls this “Retina” technology, and Android calls it “hDPI”).</p>
<p>This means that a 16px font size, for instance, would look bigger or smaller on some devices depending on its resolution. Web developers will typically <a href="https://www.smashingmagazine.com/2016/05/fluid-typography/">use em units to define font sizes</a>, which are a type of responsive unit where 1em is equal to 1 point.</p>
<p>Design handoff tools like <a href="https://zeplin.io/">Zeplin</a>, <a href="https://sympli.io/">Sympli</a>, <a href="https://marvelapp.com/">Marvel</a> and <a href="https://invisionapp.com/">InVision</a> can help designers collaborate with developers on matters that are a joint responsibility. While designers execute the design, and developers execute the code, as a whole the product design workflow is a team effort that requires solid communication.</p>
<h3>Responsive Design Performance Optimization Tips and Best Practices</h3>
<p>Responsive web design isn’t just about how it looks but also about how it acts and feels. Adapting websites so that they load faster on the intended device is equally important.</p>
<h3>Lazy Load Non-vital Images and Videos</h3>
<p>Images and videos are what make up a large chunk of the total download size of a website, but you don’t need to load them all at once. There are two scenarios where the rendering of media can be delayed: Below-the-fold content can be loaded as the user scrolls below the fold, and render-blocking media should be made to download only after the layout and content has downloaded. This practice is called lazy loading, where the loading of heavy, non-important elements is delayed to improve page performance.</p>
<h3>Conditional Loading</h3>
<p>Some website elements are not intended for mobile users, or at least aren’t worth the extra cognitive load. We want our mobile websites to be simple, so it makes sense to hide elements in certain scenarios. That being said, we have to make sure that we aren’t wasting browser resources and bandwidth by loading these elements even when they’re hidden; hence, it’s best practice to only include these elements in certain conditions.</p>
<p>Once again, a developer can achieve this with code; however, designers can improve page performance by communicating the conditions of when and where certain elements should and shouldn’t exist.</p>
<h3>Responsive Images</h3>
<p>As mentioned earlier, some devices display more pixels per inch, which can result in images becoming blurry if they’re not exported at the correct resolution. Depending on the resolution of the device, some will require images at double (@2x), triple (@3x) and even quadruple (@4x) the size. Web browsers now support the &lt;picture&gt; element, which chooses the correct image resolution depending on the device.</p>
<p>Designers crafting responsive websites can tailor images to the correct device by making sure to export at all the resolutions used on today’s devices (if you’re unsure, ask your developer — communication is key when it comes to responsive web design).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*4IQWy9eYRe5DPUbC.png">Exporting image assets from Sketch @2x for responsive web design</p>
<h3>Conclusion</h3>
<p>Wireframing can help to iron out the creases early in the design process, and this works well when taking a mobile-first approach to responsive web design. Perhaps there’s a responsive breakpoint that needs some extra attention, or maybe there’s a concept that just isn’t effective in terms of mobile responsiveness. It’s better to find the bumps in the road sooner rather than later (i.e., before adding visual aesthetics).</p>
<p>Modern design tools like <a href="https://www.adobe.com/products/xd.html">Adobe XD</a>, <a href="https://marvelapp.com/">Marvel</a> and <a href="https://invisionapp.com/">InVision</a> enable teams to test prototypes on real devices, discuss feedback in context, and generally collaborate as a team until the layout works in all scenarios.</p>
<p>Employing a lean UX workflow where responsive design is driven by internal testing and feedback will ensure that the user experience works seamlessly across all platforms and screen resolutions before being presented to a real user for the first time.</p>
<p>Responsive web design entails the process of designing websites that adapt to all devices, platforms, and screen sizes in terms of both form and function.</p>
<p>Breakpoints are the key moments when a design is adapted to a new screen size; for example, a breakpoint could be defined at 320px, which is the horizontal size of most mobile device viewports.</p>
<p>Designing mobile friendly websites means to adapt websites to mobile devices. Google defines mobile friendliness by whether or not tap targets meet the minimum requirements of being at least 44x44px, whether fonts are large enough to read, and whether or not content is cut off by the viewport, among other things.</p>
<p><em>Originally published at </em><a href="https://www.toptal.com/designers/responsive/responsive-design-best-practices"><em>www.toptal.com</em></a><em>.</em></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a3ae5ef7de75" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/responsive-design-best-practices-and-considerations-a3ae5ef7de75">Responsive Design — Best Practices and Considerations</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Responsive Design — Best Practices and Considerations

Top Stories