Responsive web design is popular among web designers because it allows them to create one site that scales, or responds, to the screen size of the device that is displaying the site. Relying on media queries to call the right style declarations depending upon the size of the screen, a responsive site serves up the page in a manner that preserves the integrity of the design – in theory that is. The reality is that even if a site is built to be responsive, there are likely some elements of your site that aren’t optimized for mobile devices making your site incredibly difficult to use.
Popup ads
While popup ads have a love-hate relationship with web designers, there is no doubt that when they are not intrusive and unrelated they are effective. With the luxury of a wide, desktop monitor, a visitor who is not interested in what the ad has to offer can easily use their mouse to close it. On a mobile device, that isn’t always so easy. If the ads are not built to scale to the screen’s size, your visitors have to swipe or pinch their screen in order to locate that x. If that x to close the ad is too small for the visitor’s fingers you add another level of frustration.
You can fix this by making sure your CSS includes a media query that sets the popup box div to a width of 100% rather than a fixed width. This helps ensure that your visitors will not have to search for the close button. Additionally, you need to make sure that the close button, as well as your call to action button, is not too small for them to tap. When designing your popup ad buttons, make sure that they are large enough for mobile users and that you test this. You may even consider using a JavaScript timer that fades out the popup after a brief time period.
Small buttons
Popup ads aren’t the only place where small buttons make for a poor user experience. When we rely on responsive design, we run the risk of navigational elements–and other interactions that use buttons–being too small for a visitor on a smart phone or other small screen to use. Apple recommends that interactive buttons be no smaller than 44 by 44 pixels. Most buttons find their way dropping down to 25 pixels. Make sure your CSS does not drop these button sizes lower than the recommended size.
Zooming
Some assume that when a website is responsive, the visitor’s ability to zoom in should be restricted so that the design and experience is not disrupted. However, people are different and not everyone can read small text or see images when they are scaled down on a smaller screen. To make a site useable for all visitors, zooming should be permitted by ensuring that the user-scalable property in the viewport meta tag is set to yes (user-scalable=yes).
Poor page design
On a responsive web site, if you scale your browser to the size of a tablet screen and smartphone you can physically see elements of the page resize and move around to fit within the constraints of the screen. Sometimes, some elements don’t quite fit the right way when the page scales to these different screens. Images may not scale properly if their width is not set to 100% in the CSS, if any images are used as background elements then the background-size property needs to be set to contain. Avoid using fixed widths and heights for your images as well. Instead, use an image editor to set the sizes you want for the desktop browser and then let your CSS adjust the sizes for the different devices.
Any form inputs also need to have the 100% max-width. Another consideration is for any fixed positions set in your CSS, to avoid potential problems make sure that your media query contains the position: static property to override this.
Knowing that you are designing for a large percentage of mobile visitors, you need to consider your content as well. Large walls of text just don’t work on mobile devices. Break up written content to make it easier to read for your mobile audience. Add proper spacing and make sure to use headings to help separate paragraphs.
Navigation
One of the hardest things for a mobile visitor to do is navigate a website that isn’t built with them in mind. Even a responsive site may encounter issues with the site’s navigation in terms of interactive buttons. When part of a navigation bar–in the header or along the side of the page–has buttons that are too small it becomes hard for the user to effectively navigate to where they want–especially if they have larger fingers. Recent trends in web design address this. Scrolling sites, or single page websites, are built with the responsive/mobile user in mind. The thought here is that the visitor can scroll, or swipe, through the website’s content rather than having to click or tap on navigation buttons.
Another area of concern is when a site relies on popup content. This is common with restaurant websites and when a user wants to view their menu. Instead of taking the visitor to a new page, the menu pops up. On larger screens this works, but the smaller screen makes the content harder to see. If you are designing a responsive site, go through your pages and make sure that you redesign any of these pages so that the popup feature is removed.
Opening a new window
The heart of the World Wide Web is the hyperlink because it is used to connect relevant pages to one another. Some designers have balked at hyperlinks that send a visitor to another site though because it doesn’t keep them on their site. To compromise, the target=”_blank” attribute is often added to the HTML because it opens the linked site in a new window. This is even used to keep certain pages open when linking to other content within your site. While this helps keep visitors on your site, and keeps the original page open, it makes things harder for mobile users because the back button is not functional (there is no where to back up to).
First off, remove all these attributes because users find them annoying even on desktop browsers. If your content is good and your site is helpful you don’t need to trick visitors into keeping your site open. They will come back. Next, understand that this creates a poor user experience for your mobile users. Sure they can open up all their windows and find the original page, but why would you want to make them work so hard? Let them use their back button to go back to your content.
Slow loading times
Google’s search engine spiders hate web pages that take too long to load and if your site is slow it will affect your page ranking with search engines. If your visitors think that your site takes too long to load they will become frustrated and will ultimately leave. On a mobile device, your visitors often don’t have the luxury of high-speed connections. They may be in a limited coverage area where the data speeds are less than ideal.
Again, page design and the content you choose to display is key here. Large images and embedded videos are one cause; however poorly optimized JavaScript is one that is often overlooked. Other things that could cause your site to load slowly include:
- Using a content management system, such as WordPress, that is not optimized
- Social sharing buttons that rely on JavaScript
- Add network code
- Insufficient server-side caching
- Using a low quality web host
- Using shared web hosting
- Poorly designed HTML
- Poorly designed CSS
Responsive web design is great for creating sites that will scale to different screen sizes, however it is not the only thing to consider when designing a website that is friendly to mobile users. Skilled web designers understand that in order to have a truly mobile first philosophy you have to look beyond the solution that you use to serve up your site on different devices. The focus, instead, needs to be on how the site is built: the code, the content and the design.
In order to ensure that your mobile visitors have the same experience as your desktop visitors, you need to look at every element of your site to see how the smaller screens display them. If you find that something negatively affects the mobile user experience of your site, you need to get it fixed or remove it completely.