Designing a new website? Maybe you’re a brand-new startup creating a platform for your business for the very first time. No matter what you do, you need to make sure your design is responsive and adaptable to the many mobile devices modern visitors use when they land on your website. It’s just a part of becoming welcoming!
Having a “fixed” design (these are the designs formerly used when designing for a mostly desktop-centric viewing experience) is fine – but only for people on desktops. It does allow for a ton of space, fancy formatting, and columns.
So, what’s the problem?
Attempting to view that type of design on a mobile device makes your pages look small, distorted, and difficult to read. Everything becomes so large or confusing to navigate that it feels a bit like wandering through an awful maze, leading mobile users to move on without giving your site a second glance.
Traditional caveats of responsive web design claim it’s too limiting, but “responsive” doesn’t need to equal “terrible and boring.” It simply means your site needs to be coded in a way that automatically forces it to load with a different layout on a mobile phone or tablet. Use these best-practices to ensure you get it right.
Overview
Avoid Separate Site Versions
Some older schools of thought had website developers creating one URL for desktop users and a separate URL (like m.yourwebsiteurl.com) for mobile versions. There are two main problems with this solution:
- Old-school mobile site versions still mostly only cater to one sort of mobile layout, meaning a site that looks great on Android may look awful on iPhone.
- Separate URLs, even as subdomains, present SEO issues. You will technically have to create two separate SEO strategies to get the desktop and mobile versions of your site to rank properly. That’s a lot of unnecessary work.
So, with that in mind, let’s tuck into a few more ways to get responsive right.
Responsive Theme Sizes
Your responsive website theme should have three core layout sizes:
- Small (under 600px) for phones
- Medium (from 600-900 pixels) for tablets or bigger phones
- Large (over 900 pixels) for computers.
You can include a lot of the same visual elements on each theme size, but they need to be adjustable in terms of how they’ll show in each layout for ease of navigation.
Mobile users make up more than 50 percent of all visitors for the vast majority of websites on the Internet. A mobile-friendly design translates out well to a desktop or personal computer, while a larger design will not always look right when made smaller. Keep the mobile user in mind first throughout the design process to ensure you strike the right balance for just about anyone.
Make Navigation Visible
Make it easy for your mobile viewers to navigate your website. If you don’t, you risk them wandering off to your competition instead. Any navigation menus need to be simple, easy to follow, and easy to find, too.
Of course, this doesn’t mean you can’t have a drop down menu, but if you do, it needs to be very visible and easy to find. Consider putting your top four or five main links in a more visible location so they are easy to see and find as well. This not only makes your mobile site easier to navigate, but also gives you a little more control when it comes to directing traffic to the deeper pages you want them to see.
Graphics and Speed
Graphics and banners look great on laptop and desktop devices, but they can take up too much screen space and slow loading speeds on a mobile device. Keep the graphics on your site’s mobile designs small and simple. Make sure the sizes are condensed so they are as small as possible to increase loading speed.
Performance goals come into play here, too. Set a minimum/maximum standard for the size of each of your pages. Consider those guidelines whenever you feel you need to add new content or additional elements. Will adding something new put you over your maximum budget? If so, you need to reconsider the design or figure out what other element needs to be removed. This will ensure you are always within a size range that keeps your site operating quickly and efficiently.
Keep Touch Screens in Mind
Site visitors who land on your site from a computer are using a mouse to navigate your pages. This means they have a small arrow they can use to pinpoint small links, even if multiple buttons or links are close together. Users on mobile devices are often using touch screens, which means they’re using a large finger to hit a comparably tiny button on a small screen.
Your site’s design needs to consider ease of navigation for those who are touching instead of simply clicking. Why? Because trying to hit a 5-pixel-square button with a 45-pixel fingertip is a bit maddening (not to mention prone to errors). Keep your touch targets large and well-separated to reduce annoyances like these.
Don’t Forget to Test
Your website will look different on a computer, iPad, iPhone, Android based phone or tablet, or any other mobile device. You must test, retest, split test, and test again until you ensure that all views work; don’t just test the view on desktop and call it a day. Oh, and just looking on your own phone won’t cut it, either.
All of this said, you don’t need to invest in a ton of new devices for proper testing. Find a testing tool that gives you the ability to view your responsive website in a variety of formats. Use it to ensure it is user-friendly across the board.
Your Hosting Provider Matters
Have you modified your page elements, compressed your images, and done everything else you could think of to make your pages move faster across all platforms…yet, you’re still struggling with the slowest website online?
It may be time to consider whether or not your hosting provider is the problem.
Providers often sell low-grade hosting packages from shared servers. These packages force share all resources from the same server across multiple clients (with protections in place to prevent cross-access of data). That’s a great way to keep hosting affordable, but a terrible way to set yourself up with enough resources to support growth over time. Eventually, your site (and other sites) demands too many resources at once, leading to chronic slowdowns or even downtime.
Hosts sell package options for a reason. They want to get you to pay for faster speeds and loading times – it’s better for them, and eventually, better for you, too.
If you’ve tried everything else, take a look at whether or not upgrading your hosting package is a viable solution. If not, you may want to start looking at other hosting platforms. Who knows, maybe you’ve grown to the point where your IT team needs to get you set up on your own server.
Responsive web design is no longer optional. A website that is not responsive to mobile users is not considered user-friendly and offers your visitors a poor experience. Worse yet, Google will penalize you in the search results if it feels your site isn’t mobile-friendly and isn’t measuring up. Make sure you are checking your site regularly to ensure it functions well across all devices. Your bottom line will thank you!
It really helpful tips..thanks for mentioning!
Thanks for reading!