By now, having a responsive site is becoming the industry standard. You know you need one, you probably already have one, but do you know what makes or breaks a responsive site?
There are hundreds of different screen sizes on the market and in use today, with hundreds of different resolutions. Some people hold their devices landscape, some portrait. Some people are left-handed; some are right. Some have great 20/20 vision, others, not so lucky.
It seems to be a near impossible task to ensure that your site is ready for the masses, but it’s not that hard. We’re going to walk you through a few of the common problems we see, how to fix them, and offer some professional suggestions on how to make things even better.
Honey, I Shrunk the Site!
Just because it “fits” on your phone, doesn’t actually make it “responsive.” 55% of Gen Z purchases are made on a cell phone. Therefore, this an important aspect to consider with your website.
Does the site look the same on the desktop screen as it does on the phone, but one is a lot smaller and you have to pinch, zoom and move around? If so, then you have a pretty nice device, but your site isn’t responsive, and it’s going to behave differently on different devices.
Solution:
If you’re confident that your site is supposed to be responsive, check your master stylesheet file and ensure that there are media queries present. If they are, make sure their implementation is correct:
@media only screen and (max-width: 768px) {
// styles here will display for window widths 768px and less
} // end of media query
If you do not have any media queries, you’re most likely not using a theme that is coded to be responsive.
But I’ve Had That Table for Generations!
No longer the most common issue, but by far the most painful. If your site is using HTML tables for page layout, you’re breaking every recommended best practice and industry standard.
We’ve seen sites made with tables that DO behave responsively, and some have even looked decent at first glance, but they’re a nightmare to manage. They cannot be trusted across multiple devices. The markup is horrendous and beyond time consuming to even minimally tweak/correct. It’s brutal on your SEO. It’s just a very bad idea.
Solution:
We recommend one of two courses of action.
- Update the code on your site to meet industry standards, which will not be any fun, but you will see a huge improvement in site performance, organic SEO and dependability across multiple devices and operating systems.
- Or, use one of our responsive templates for your product catalog.
That Horizontal Scroll! – Responsive Site
If your site causes a user to scroll to the right or worse, the left, then something isn’t quite right.
The biggest offender is normally a page element that isn’t responding properly or at all. We typically see headers, footers or merchandising banners being the most common culprits.
Solution:
Ensure there are no elements that are visibly forcing the horizontal scroll. If you can identify the offending page elements, correct your CSS to respond to those page elements properly within the appropriate media queries.
@media only screen and (max-width: 768px) {
// styles here will display for window widths 768px and less
#page-wrap { max-width: 768px; }
//just one example, there're dozens of ways you can do this
#page-wrap #header { width: 100%; }
} // end of media query
If you cannot visually see any page element forcing the horizontal scroll, but it’s scrolling none the less, then the solution isn’t different, just trickier to find.
Solution:
You’ll need to break out your inspector/devtools/firebug to inspect the page. In these cases, it’s commonly a mis-applied margin or padding to an element causing it or a parent element to extend past the page container.
It’s a Scrolling Marathon – Responsive Site
Your site looks great on a desktop, not bad on your tablet. Maybe a little long, but on mobile, well – it’s like the distance between the earth and moon when it comes to your product rows.
This issue is, unfortunately, more common than you’d think. Sometimes it’s a crazy margin, a misapplied percentage, a missing overflow property or the wrong use of position, but the problem is impossible to miss. Abnormally large amounts of negative space between products causing the user to scroll seemingly forever.
Solution:
The solution is an easy find-and-fix once you’ve identified the offending element. Break out your favorite web inspector tool and get that hiccup fixed!
Your Product Results Turn into a M.C. Escher Illustration
When elements on your page do not respond correctly, a common issue is a “stair stepping” effect with your layout.
Sometimes it’s slight, other times it’s so bad the page is near unusable. Either way, if it appears broken, users will assume it is broken. The likelihood of getting a conversion with a broken layout is slim to none!
Solution:
It’s a horrible eyesore, but usually pretty easy to fix. A broken layout like this is caused by one of a few errors in the CSS.
- Ensure that all floats are cleared between product rows.
- If you’re using
display:inline-block;instead of floats, be sure you’ve also usedvertical-align:top;. Using inline-block requires that you set the vertical alignment property to display correctly in several browsers. - Another solution is to declare a static height and to set the overflow property.
A Bad Case of Overlapping.
Other problems we often come across are layouts that wrap/respond but in all the wrong ways.
There’s no crazy horizontal or vertical scroll, nothing stair steps, but only because elements are not respecting the elements around them. A common place we see this is with long horizontal elements such as navigation, but it can sneak up all over. It’s wrapping that hasn’t been accounted for in the CSS. The browser does it’s best to make it work, but it needs explicit help.
Solution:
It’s pretty easy to diagnose. Open your site and begin to squeeze the window. As the window shrinks and the page responds, scroll up and down looking for any elements that wrap and overlap with other elements. When you find the offending element, correct it in your CSS. Fix its block level by declaring it’s display property, height/width properties, margin/padding properties or clearing any necessary floats.
It’s So Small – That’s What She Said!
A common oversight is not accounting for font sizes or other elements.
Example: everything on your site responds correctly, but the font size never changes, or gets smaller. 14px might look great on your 1080 desktop, but what about on that super hi-def smartphone. It’s near impossible to read. Or what about that big bold and beautiful heading. On your desktop, it takes up one single line, but on your phone it’s four lines long and almost takes up the entire screen. Not good.
Solution:
There are two easy solutions we recommend, and honestly, we recommend you do both.
-
- Use em’s or rem’s instead of px when declaring your font sizes.
- Adjust your declared font sizes inside your media queries. For example, your
"<p>"element may need to go from .9em to 1.2em and your"<h1>"might go from 2.4em to 1.8em.
Where Does the Sidebar Go?
First, you have to have a sidebar before you know where it’s going to go. Seems like a no-brainer, but many platforms and themes do not account for the basics of faceted navigation, and it’s easy to overlook if you don’t already have one.
Searchspring adds a ton of awesome functionality to your site. And yes, we do add “to” your sidebar, but we need a sidebar to hook into to do so. If you don’t have one, we have to create one. To do this, we have to dramatically alter your current site layout to make room for the sidebar. We have to decide for you how that sidebar will behave at different window sizes. And the most problematic part, we have to decide how it’s going to look. Not a problem for us, but to be blunt, Searchspring doesn’t “design” client sites. We take what you have and make it super-smart and behave incredibly awesome. We trust our clients and their design decisions. We can and may offer professional opinions, but we rely on you to dictate what things need to “look” like.
Solution:
Our ideal solution that will make the mockup and integration process efficient as possible is for you to provide us with a fully styled and coded page with a sidebar for us to use as a reference.
If that’s not possible, we do offer other solutions, but each will need to be discussed and cleared on a case by case basis with your Account Manager.
Well, That’s New…
While those are all the most common things we come across, there are always quirks here and there that pop-up.
We recommend a thorough evaluation of your site with a few different browsers, with a few different devices. If you see something odd, or something that doesn’t behave as you’d expect it to, more than likely, your users are going to have an issue with it.
If you find issues, it’s best to fix them sooner than later. If you need help, we’re always just a few keystrokes away!
Additional Resources:
If you want to dig deeper, here are some resources to get you started:
