As more online businesses turn to responsive design, it is important to understand the limitations that come with it and how to work around common issues. By now, responsive sites have become the industry standard. Even Google announced that Responsive Web Design is its preferred design option.
Nowadays, mobile devices come in hundreds of different screen sizes and resolutions. With a responsive design, your website will quickly adapt to any device. In turn, your brand will reach an even wider audience. You will get to offer users the most dynamic experience possible. We have listed a few of the common problems you might encounter with a responsive design and how to make things better.
- Pinch & Zoom
Designing with multiple screen sizes in mind is essential in the delivery of the website. But just because the website fits on your phone, doesn’t mean it’s actually “responsive.” Open the site on your mobile device. Does it look the same as on the desktop screen but you have to pinch zoom, and move around? If so, your site is not responsive. It’s also going to appear differently on different devices. A responsive website is meant to change layout based on the window size of the browser. The layout is fluid and uses CSS media to change styles.
Solution: If your site is supposed to be responsive, it should have specific elements within their HTML source code. Check the master stylesheet file. Can you see the words “responsive” or “@media” in the home page source code? This indicates that there are CSS Media Queries, which are present in themes that are coded to be responsive.
- HTML Tables
Many web developers are most familiar with table-based layouts. While sites made with tables do behave responsively, they can be a nightmare to manage. Not only that the markup is time-consuming to tweak. It can also give your SEO a hard time. If your site is using a table-based layout, then you’re steering away from the recommended best practice. CSS layouts have several advantages including visual consistency, better search engine rankings, saves bandwidth, easier to re-design, and pages load more quickly.
Solution: If you want your website to meet industry standards, update the code. In doing so, you will see a huge improvement in site performance. It will boost your organic SEO since CSS layouts create a better code to content ratio. After the update, it will also increase your website’s dependability across multiple devices and OS.
- Horizontal Scroll
Bring up your website in a mobile browser. Does it look cut off on one side? Do you have to scroll to the right or left to see the rest of the page? This indicates that your website may not be responsive or mobile-friendly. The usual suspect could be a page element that isn’t responding properly or at all. Headers, footers or merchandising banners may also be at fault.
Solution: Check the stylesheet and make sure there are no elements causing the horizontal scroll. Otherwise, you need to correct your CSS so it can respond properly to appropriate media queries. If there are no offending page elements but the horizontal scroll still exists, the next step will be to break out the inspector/devtools/firebug for inspection. It could be a mis-applied margin or padding to an element causing it.
- Scrolling Marathon
The overall height of your website naturally increases on mobile. This is because the horizontal elements become stacked. This issue is more common than you’d think. However, if the distance between your product rows require too much scrolling, it could be a problem. Long-scroll sites are annoying and can break a user’s interest.
Solution: Using your favorite web inspector tool, you should check for a crazy margin or a misapplied percentage. It could also be caused by a missing overflow property or the wrong use of position. Once you’ve identified the offending element, it should be an easy fix.
- Stair Stepping Effect
When elements don’t respond correctly, it could result to a common layout issue called ‘stair stepping’ effect. Sometimes, it’s barely noticeable. Other times, it can be a terrible mess of jumbled images making the page near unusable. If a web page appears broken, users will assume it is broken. They will move on to a new website and it will be a lost conversion for you.
Solution: This broken layout can be pretty easy to fix. It is likely caused by a few errors in the CSS. First, all floats should be cleared between product rows. If you’re using display:inline-block; set the vertical-align property to display correctly. Be sure you’ve also used vertical-align:top; Inline-block requires that you set a width and height on the element.
- Font Size Gets Smaller
It’s important to account for font sizes as it can contribute to the user experience. For instance, 14px might look great on a 1080 desktop screen but would be near impossible to read on a hi-def smartphone. A big heading may take up only a single line on a desktop but will take four lines on a phone. The right font size will not only increase visual impact but improve readability and usability. One of the challenges you might encounter is when the font size gets smaller or never changes.
Solution: CSS offers a variety of methods to affect the size of text. One easy solution is to use em’s or rem’s instead of px when declaring your font sizes. In this case, you should adjust the font sizes inside the media queries. For instance, the “<p>” element may need to go from .9em to 1.2em and your “<h1>” might go from 2.4em to 1.8em.
What to Keep In Mind:
To avoid these problems, make sure to conduct a thorough evaluation of your site using different browsers and devices. If you see something out of the ordinary, it is highly likely that your users will notice it too. It’s best to fix them sooner as soon as possible.