6 Simple Steps to Making a Mobile-Focused Website
You’ll need a different mindset if your website is primarily designed for mobile users.
It’s funny when you think about it, but there was a time when websites weren’t really designed for smartphone screens. They were designed for the much larger monitors of desktop PCs. Of course, when you shrink those web pages you can hardly read and see anything, which became a problem when mobile Internet surfing became more popular. So the more farsighted website owners created their websites for PCs, and then they tried to have a different version for smartphones.
Nowadays, most serious websites have both a PC and a mobile version. In fact, more websites are actually being built for mobile surfing first, before a desktop PC version is created. That’s because more people are going online using the smartphones rather than their desktop PCs.
So how do you build a website that’s more focused on serving the needs of mobile visitors? Here are a few tips that can start you on your way:
1. Strip Your Pages Down
When you’re determined to build a website that’s actually geared for smartphone users, you can’t use overly complex webpages. You have to simply your web pages instead.
There are good reasons for this. One, with a small screen to work with you don’t want to overwhelm the user with too many details. A simple layout works much better so they know what to do. Two, with too many complex elements it’ll take too long for a web page to load, and we all know how impatient mobile surfers are. If it takes more than 3 seconds to load a page, chances are good they’ll press the back button and try another website.
2. Plan for Your User’s Needs
Will they be tapping buttons on the web page? If so, you need to make those buttons visible, and they should be large enough so that they can be tapped easily enough. Will they have to input a username and password? If that’s the case, you’ll have to put in a keyboard interface as well. What if they’re looking for a particular section? You may want to feature a clear outline of your site, and a search bar can certainly help.
You have to put yourself in your website user’s shoes. Pretend you’re the user and you need to find something on your website. You’ should then realize what kind of helpful elements you need to put in.
When you’ve designed your web pages, try them out first. You have to know for sure how they would work within a mobile browser.
3. Don’t Forget about Laptops
When you’re designing with a smartphone user in mind, at least you have a touchscreen working for you so your users can simply swipe along the way to navigate your site. But that’s not exactly the case when your mobile user is actually using a laptop. In some instances, they don’t have a mouse either.
What this also means is that you have to plan for various resolutions to make sure your web pages appear at their best. Laptops are often limited to 1024 x 768 resolutions, and that’s what you need to plan for. In fact, check out the various screen sizes of the most popular laptops so you can have a different version for each resolution.
4. Going with Responsive Layouts
Some people would rather opt for a responsive layout, rather than have a different type of website for each type of Internet device. With a responsive design, your website morphs to fit whatever type of resolution your website user is using.
This can be quite convenient for you. You’ll have the same HTML markup that works on all screens. You won’t have to go with specific stylesheets for different types of devices.
Since you’re focused on mobile users first, at least with this approach you take care of the needs of those using smaller screens. Of course, there’s a good chance that you won’t get an optimal look when you’re website visitor is using a desktop browser. But those are bugs that you can fix later. These guys aren’t your top priority after all.
To help you see just how responsive websites can work for different devices, you ought to do some research on the various responsive sites that are currently in operation these days. Just Google for them and you should find them easily enough. You can then cherry-pick the features that you want to appear on your own responsive website.
5. Don’t Forget about the Navigational Requirements
If you’ve been designing websites all this time with a focus on desktop users, then you’re probably more used to people who can just use a mouse to get around a webpage. That’s not going to fly with a mobile website.
For most website designers, the simplest solution here is to just have your page sections cascade down. Your visitors can just swipe downward to see more of your content. You can also have your links appear constantly at the top or at the bottom of the screen so that they can get around your site more easily.
Just don’t go overboard and put in too many links on your navigational menu bar. Just go with the basic root items instead.
6. Set Up Your Images Properly
Dealing with image content can be problematic when you have such a small screen to work with. One solution is to have a set of images solely for small smartphone screens, while you have another set for normal displays. However, you can’t overlook the need for high-resolution images for iPhone retina displays.
Another solution is to set up all your images to contract and then expand up to the maximum point. This can work just as well for desktop users too. Even HTML5 video supports this setup, so it’s convenient.
It does require a different mindset when you’re building a website that’s more focused on mobile users. The old ways won’t work if you’re used to traditional desktop websites. Whatever you do, just don’t forget to give it a test run on your own smartphone first!
Here are 5 Steps You Can Do to Prepare Your Website for Google’s Mobile-First Index
Founder, Editor-In-Chief // A native Angeleno. John studied engineering at UCLA; founded Schmoozd, an offline social tech networking event in LA with 30,000 subs; ran a startup accelerator (StartEngine). Worked for several major brands like Toyota, DIRECTV, Hitachi, ICANN, and Raytheon. A mentor at Loyola Marymount University (LMU) Entrepreneur School, Dr. David Choi. And advises a dozen local LA startups building amazing tech in various industries; and invested in some. // Let's Connect: john@lastartups.com
Related Posts
