The popularity of mobile searches is continuously growing. This means the amount of people searching the internet through their mobile device is increasing along with the need for mobile friendly websites. It is now more important than ever to ensure your site is optimized for mobile devices – especially with Google’s mobile first indexing rolling out.
There are several ways in which your goal for a mobile friendly website can be achieved. The two we are discussing today include a separate mobile site that almost mirrors your desktop site, and a responsive design that automatically fits your website to the screen size of the user.
Some sites optimize for mobile devices using a separate site. The mobile site URL will include an “m” at the beginning of the URL. For example, if Connectica had a separate mobile URL it would be m.connecticallc.com. For those sites who have a separate mobile URL, the important thing is to make sure that the content on the mobile site is the same as on the desktop site. Often, the information on the mobile site is limited and content can be hidden. When Google moves across to mobile-first indexing, it will first account for your mobile site. This could cause you to rank lower in a search if your content is not of the same standard. A positive to having a separate mobile site is the optimization. Mobile sites would be very well optimized for mobile devices already. On the downside, it is a separate site that you would have to maintain and update. Meaning, you would have to keep two sites up-to-date with information – mobile and desktop.
Responsive web deigns are the most ideal way of ensuring that your site is mobile friendly. They essentially make room for one website, one URL, to automatically update to fit the screen of whatever device a search is made from. You can see how this would be ideal. SEO is a constantly changing game and if you have an online presence you need to stay ahead. The thing to remember with responsive sites is that you need to optimize for mobile devices. Though they fit the screen of any device used to view the site, you still want to ensure what you put on your site can be accommodated by a mobile device. Images have to be compressed to help with page loading time and links have to be easily clickable without being on top of each other. Placing links too closely may end up in user frustration if they have to zoom in and scroll around to click the correct link.
If you think of your website from the user’s perspective, you want the page to appear in such a way that all information is loaded visibly – no horizontal scrolling required, no searching around for hidden content. With so many options in a search result, the chances are high that any user dealing with this will move on to the next site, even if the actual content of the next site is inferior to yours. A website that is neither a mobile URL nor is responsive may load slowly and will take a lot more effort for the user to navigate on a mobile device.
From your perspective, you have several main aims when designing a web page. First, you want to make sure that your content relative to the search result is present and visible. Next, you want to ensure that your branding and calls to action (CTA) are where they should be – right there in front of your user without annoying them and covering the page or taking the place of other content. Lastly, you want the user to stay on your page and become familiar with your content and offerings. Maybe, you even want them to give you a social media share – much easier with a single URL than a separate mobile URL.
In order to achieve these aims – keep your site working at optimum level and gratify your key demographic – in a world of Mobile-First Indexing there are technical steps that need to be employed.
The first technical step is to code your grid to be fluid so that the way the information appears on the page shuffles into a reader friendly view. This requires setting the maximum width to adjust to 100%, and minimum height to adjust so that text breaks don’t “break open” the fluid grids. It may result in the page loading as either having a single column or a double column where a desktop allows for more.
Probably the most important step in the key is to make use of media queries. These are ways of styling and coding your content to enhance the user interface. These queries allow you to pre-set images to load according to the width of the device screen, accounting for the pixel width of the screen of any device. It can also be set to adjust if the screen is rotated. This can either condense your content appropriately, move information further down the page, or even leave out large images that interfere.
Once your information has been arranged and your images set to auto-fit the screen, then you can start to work on a layout scheme that uses padding and white space to create a better balance – mobile sites typically need to look less cluttered without leaving out important information from immediate view – a challenge when you are trying to resize to a smaller device screen. If your grids have been rearranged and your images resized, then it makes sense to come in and brush over the fine lines of the breakpoints, making it clear to the user where each section starts and ends.
In your efforts to create a page that fits onto smaller screens without compromising on valuable content that Google will use to rank you, the next thing you want to do is think about how to ensure that your brand and calls to action don’t disappear. Within your design layout, incorporate your branding in clever ways and make sure that your calls to action are not part of the information that gets pushed to the bottom of the page.
There is only so much information that will be present on that first landing page. Navigation is what will inform the user’s experience here, and a clever use of tabs that don’t completely disappear will be beneficial. Google won’t be ignoring content that is “hidden” but it will impact on your site’s user-friendly status, which Google can’t ignore either.
Now that we have gone through the basic key to getting your site Mobile-First index ready, let’s address the drawbacks of these changes. It is a bit of a stretch to find any, as keeping up with Google is generally in your best interests.
Any white space created to help your layout transpose better to any screen might not be the best thing for desktop viewing.
There is the issue of different browsers. It might be worthwhile to create three different sized layout designs to run on different browsers.
There may be a drop in rankings for sites who simply can’t make the change quick enough – these changes take up resources, after all – but Google’s aim is to ensure that sites are ready by providing a guide on how to get your website mobile friendly and responsive in time, as well as advice on other options.
As stated, it is best to keep up with Google updates. There are always updates as the online world continues to grow and refine itself. Keeping a budgeted amount to ensure that valuable changes can be made at critical times is a worthwhile consideration. It helps to employ the services of a business that will keep you abreast of these updates, and offers maintenance on websites for changes such as these. Allowing your website to stagnate in the current business environment is not wise. Give Connectica a call for a quote on getting your website mobile ready.