Mobile browsers are getting better at reproducing your website as you see it on your Desktop or Laptop, but the small size of the display and the slower connection speed usually makes it hard to effectively view your normal website.
There are a lot of times when your website visitors will only have their phones to view it, so what do you do? This article on mobile web design will show you what you need to know about making your website more mobile friendly.
Here are screenshots of our website with the normal desktop view and our mobile version. Right away you can see a differences.
Desktop version on 7in. tablet
Mobile version on 7in. tablet
Let’s look at what needs to be done so your business does not loose its mobile visitors.
Along with the smaller displays of most mobile devices there are things that mobile browsers have trouble doing. Certain triggers on your website that happen when you place your mouse over it is difficult when you are using a touch screen like that of a phone or tablet (our drop down navigation is a good example of this). When you look at a “mobile” version of a website you will notice a very scaled down version of that site, it looks almost like an app instead of a website.
Thumb Friendly Navigation
When designing the mobile friendly version of your website you have to think how the mobile visitor will be access it. If you are visiting a website on your phone most of the time your phone is in one hand and you are navigating with just your thumb, so the navigation you use on your mobile design must be “thumb-friendly”.
You can see our mobile site uses navigation that only requires a single touch to visit that page. On the main buttons that do have drop-downs, you will see how you get to a new menu screen with the sub-navigation.
Scale Down Images for Mobile
Large pretty images look great on a big screen with a fast connection. Waiting for them download when you have a slow connection on your phone is painful, so your mobile design will need to either scales these images down or remove them completely. You might be saying, “without images my website will be boring and not convert”.
You are partly correct, images play a huge role in the conversion of visitors to buyers but when a person is viewing the mobile version of your site they expect it. Waiting for your page to load is more detrimental to the mobile visitor.
At this point you are seeing we need to scale your website down to just the meat & potatoes, just the raw content that makes up the site. text loads fast no matter what kind of connection you have. Having a mobile site also means your copy must be spot on. Without images to tell the story, your copy is what will convert that visitor to a buyer, so make sure what you say is just as important as what your images say.
Think about if you own a restaurant, someone just got done seeing a movie and they are hungry, they only have their phone to find a place to eat. They search and find your restaurant. They want to know what you serve and where you are located. They don’t care about how fancy your food looks at that moment. This is why you need mobile web design.
Responsive Web Design
Another phrase you might be seeing that is tied to mobile web design is “Responsive Web Design”. Wikipedia defines it as:
Basically this means to have a responsive design you have to make it easy for it to be viewed on a desktop, laptop, tablet, phone or whatever device you use to view the Internet. Accessibility is the name of the game these days.
When you are in the market for web design for your business, make sure to ask about a mobile version of the design as well. Not having one could be costing you money, a lot more than paying what it costs for a mobile version of your website.