How to Make a Different Website for Your Mobile Visitors
People are getting tired of the same old ads and pages on websites when they’re on the go. After all, they may have come to your site to read about smartphones or tablet computers, but once they get your attention, you’re going to show them a whole different side of your product or service – one that’s catered to their smaller screens. To help you along the way, we’ve compiled a list of everything you need to know about creating a mobile-ready website.
Create Different URLs
Even before people had started referring to themselves as “digital nomads”, those on the move had been discovering the power of the mobile web. They want to be able to visit your site from all different types of devices – desktop computers, laptops, tablets, and smartphones – and have the experience be tailored to their smaller screens. For instance, a smartphone user might want your homepage to be full of bright, bold colors and large, chunky images while a tablet user might want it to be a bit more textured and minimalistic.
To achieve this, you should create different URLs for your site. We’ll discuss the pros and cons of different URL structures and introduce a couple of handy tools that’ll help you decide which one is best for your needs. Let’s get started.
Mobile-Friendly And Scalable
When designing your mobile-ready website, you want to make sure that it works well on all devices and that it doesn’t break the bank at the same time. There are a few basic strategies you can use to achieve this. One of the simplest yet most effective ways is to make the site mobile-friendly. To be more specific, make sure that the fonts, sizes, layouts, and brightness of text are all optimized for mobile viewing. This will help ensure that everything from graphics to text is legible on a smartphone’s small display.
For instance, if you use a 12-point font (like Helvetica or Arial) and the text is set in bold, the user will be able to read everything comfortably on a mobile device.
Along with mobile-friendliness, you should ensure that your site is scalable. Just because the majority of your site’s visitors are now on the go doesn’t mean that all of your content is necessarily formatted for smaller screens. In fact, depending on how much space you have, you may decide to create different layouts for mobile users.
The same way you would on a desktop computer, you can use CSS to change the look and feel of your site when it’s viewed on a mobile device. To make your site look the same on all devices, you can use CSS to adjust the layout, colors, and fonts. For example, you may decide to increase the font size by about one or two points to ensure that the text is still readable on a phone screen. Similarly, you can change the colors by using the HEX values directly – like #333333 for bright blue or #FFFFFF for bright white.
These two components – mobile-friendliness and scalability – go hand-in-hand. If your site isn’t built with the former in mind, then the latter will be quite the task. Start by making your site mobile-friendly and then, if necessary, add in more features to suit tablet users or small-screen smartphone users. Doing so will help ensure a better overall user experience and help you avoid any unnecessary crashes or glitches – not to mention the support calls you might end up receiving from disappointed customers. So, as tempting as it might be to cut corners and save a few bucks, doing so could end up costing you in the long run.
Make The Nav Bar Vertical
When designing websites, especially those intended for mobile users, the nav bar is one of the first things you’ll want to get rid of. Unless you’re using a mobile-friendly template or a CMS that supports responsive design, your nav bar will almost certainly end up being displayed as several horizontal bars.
To fix this, simply make sure that the bar is displaying in a vertical manner when viewed on a smartphone. You can do this by using the meta viewport tag in the header of your website (this is the viewport’s role).
This tag takes the form of a single attribute with four values: width, initial-scale, maximum-scale, and minimum-scale. The first two values determine the dimensions of the viewport, while the latter two determine the scale at which your website will display itself to mobile users. So, by entering your device’s dimensions (most commonly, the width and height of your screen) into the initial-scale and maximum-scale values, you can ensure that your website displays in the correct proportion to your device’s screen size.
For example, perhaps your initial-scale value is set to 320 pixels wide and the maximum-scale to 400 pixels wide. This means that the website will display in a compact mode on your smartphone, with the nav bar stacked on top of one another. When viewed on a laptop or desktop computer, the website will expand to take up the entire screen – with the exception of the space taken up by the nav bar.
The downside to this approach is that if the user has a viewport that’s taller than the screens of the devices you’ve designed for, then you’ll either have to create separate layouts for different device types or find a way to show more content on the screen. But the upside is that it will make your website look a lot better than it would if it was still displayed horizontally on all devices.
Avoid A Full-screen-only Approach
Another common mistake when designing websites is to make the entire site available for viewing without any kind of scroll bar. While this might seem like a good idea in theory – after all, who wants to have to scroll to see all the content on a website? – in practice, it’s not very user-friendly. Especially on phones, where having to scroll is already an annoyance for the average person.
To create a better user experience on the go, you should avoid using this type of display. Instead, provide the user with a scroll bar or some other form of content navigation (either physical or digital – like a menu or carousel).
The downside to this approach is that you’re denying the user the ability to see the rest of the website if they don’t have enough storage space on their device to view it all. The upside is that it prevents the content from becoming unusable to those users who do have enough storage.
One Click To Access All Of Your Content
When you’ve finished designing your mobile site and want to give it a final go-ahead, the last thing you want to do is go through each section clicking on the corresponding link to access the content. In most cases, this won’t be possible since you’ll have to create separate links for each section.
To make it simpler for the user, provide them with one click access to all of your content. This can be done with the use of either a button or an area of highlighted text associated with a specific page topic. When the user clicks on this text, they’ll be brought to the corresponding section without any need to scroll or search.
The downside to this approach is that some sections of your content might not be accessible from all locations (like an opt-in / opt-out form for example). The upside is that it makes navigating your content much easier – particularly if you have a lot of content.
Keep It Minimal
Another important factor to keep in mind when creating a mobile-friendly website is to keep it minimal. People on the move don’t have a lot of patience so, if you want them to spend more time on your site, you’ll have to keep things simple. Reduce the amount of content you have and use icons rather than words to explain the different sections of your site.
The downside to this approach is that some users may find it harder to navigate your site without the use of images. The upside is that it makes the content more accessible to everyone – including those without any vision problems.
Avoid Fancy Gadgets
Even if your average joe can navigate your site easily enough, fancy internet gadgets might not be welcomed everywhere. If you want to create a better user experience for tablet users and small-screen smartphone users, then you should avoid using any type of gadgets or toolbars. People on the move don’t want to have to hunt down the icon for the search bar or the forward / back buttons – especially when they’re already trying to enjoy your content.