It’s easy to create a mobile website anyone can view on just about any mobile device. There are two ways to do it—create a mobile website version of your existing website or create a fully-scalable version of your website which works on all devices.
Having a responsive website is very important in this day and age as more and more people are using small devices to access the internet and view websites. Any web master will tell you that website layout greatly affects your traffic and if a person is using a small phone to access your website then you must make sure they can make use of your resources.
Before You Create A Mobile Website
But before you create a mobile website using either technique, you want to set up your testing tools. If you already have a mobile phone or tablet with a Web browser—great. If not—or if you want to speed up the development of your website—try one of the following techniques:
1. The Easy Way: open a new window in your Web browser. Then click and drag one of the bottom corners towards the center until the Web browser window is small and shaped like a rectangular cell phone or tablet screen. Now you can get an idea of what your website looks like on a phone or tablet.
2. The Professional Way: Google provides a free Android emulator as part of its Software Development Kit (SDK). If you install it and install Android on top of it, you can see exactly what your website will look like on several Android-based phones and tablets, helping you create a mobile website which you know really works on mobile devices.
3. The Paid Solution: if you want to create a mobile website but you don’t want to go to the hassle of setting up an emulator, you can subscribe to a service which will take screenshots of your webpages as they appear on a number of different mobile devices, including Android and iOS-based phones and tablets. These services typically cost about $20 per month, so you can create a mobile website quickly and pay the fee only once.
If you own an array of devices you can simply investigate how your website looks yourself. You can also validate your site for mobile through the W3 Mobile Validator.
Create A Mobile Website Version
The first way you can create a mobile website is by creating a special version of your website optimized for mobile devices. If you frequently view websites on your cell phone, you’re probably familiar with website addresses beginning with “m.”, such as m.facebook.com and m.amazon.com.
To create a mobile website this way, you need to do three things:
1. Create a new sub-domain for m.your-site.com in you domain name management system. The steps for creating a sub-domain vary depending on your registrar, so check their documentation or call their support number.
2. Create a new website on the sub-domain, but link it to the database which powers your main website so all of the core content is the same. The instructions for this vary, but it’s pretty easy to do with the major free content management systems such as WordPress and Drupal.
3. Style the mobile version of your website with a mobile-friendly style sheet. See the section below about about how to create a mobile website stylesheet.
Create A Universal Website Version
Your second option to create a mobile website is to make your regular website work on all devices, from desktop computers with 30-inch monitors to palm-sized mobile phones.
Now, you may think your website already works on all devices—and it probably does, to a certain extent. But if you followed the advice earlier in this article and set up mobile website testing, you’ve probably discovered that your website is hard to use on a tiny screen.
But just because your website appears cramped doesn’t mean you should do the obvious thing and shrink everything until it fits on a mobile screen—that will make your website almost impossible to use on a full-sized screen.
So what do you do? Try the following advice.
Create A Mobile Website Which Works Everywhere
The best website layouts have two important features: they flow and they scale.
A website which flows shows your readers exactly what you want them to see when you want them to see it. Think about the typical amateur website design—several columns of text, images, links, and advertisements. You never know whether a particular visitor is reading your article, staring at an advertisement, or trying to find an item on your navigation menu.
Then think about a website which flows, such as a major online magazine or retailer website. Navigation and search is at the top, then comes the main content, then comes an advertisement or two, then comes some more content, then finally there are links to more information or products.
What’s missing are extra columns or other material which distracts the reader from looking at your important content or your important advertisements or your important end links. You can see my sidebar etiquette article for some ideas about distracting visitors.
This sort of website flow works well for full-screen computers, but it works even better for mobile devices which don’t have the space to display multiple columns at the same time.
But to create a mobile website which works on full-screen computers, you also need all of the elements to scale. Scaling applies to both text and images.
For text, the main problem is preventing unending lines. If you’ve ever tried reading a Wikipedia article on a 30-inch wide-screen monitor, you know what an unending line is—it’s a line of text with more than about 80 characters in it.
Beyond 80 characters, most people have difficulty following a line of text, and unending lines of text can easily have more than 200 characters in them—making them practically impossible to read.
What’s the solution? Make sure you limit the lengths of your lines. There’s a great but underused CSS option which can help you limit the width of any element on your page, the “max-width” option.
The max-width option takes one argument, a size. For text, I usually use “40em”—that means that a paragraph won’t grow any wider than the width of forty capital letter Ms. (The word em is typesetting jargon for M.) Forty em is about 60 regular characters wide, which is just about the perfect width for text.
The other thing you need to scale is images, and here max-width can help you again. Instead of manually scaling your images down to a size that’s convenient for mobile devices, max-width can force them to fit into the size of the screen. To do that use max-width with the argument “100%”. (Or use a slightly smaller number, such as 98% or 95% if you want the image to have some margin.)
When a Web browser sees that max-width option, it will dynamically shrink the image down to 100% of the screen size, so the whole image fits on the screen at the same time. Mobile users will still be able to zoom in on the image to see it at higher resolution, but you can be assured that the image won’t slide off the side of their screen unless they want it to—which is the ideal we try to attain when we create a mobile website.
The Non-Technical Mobile Site
The non technical and easiest way to make websites mobile friendly is to install a plugin to create a mobile website or install a new theme that has a responsive design. This works a treat if you have a WordPress website or blog.
#1. Install a plugin
You can turn your existing WordPress website into a mobile website by installing a plugin. Be warned though, this is not always the best solution as every theme is different. Sometimes you will be faced with compatibilities issues and other times everything will work perfectly.
Three free mobile website creator plugins to help you create a mobile website:
WP Mobile Detector is a popular free plugin that will easily adapt your site for mobiles in a couple of clicks. This plugin supports more than 5,000 web-enabled phones, smartphones, tablets and small-screen devices such as tablets.
The WordPress Mobile Pack is a comprehensive plugin which gives fine-grained control over your mobile website. The most popular devices can be identified by user agent or domain mapping. A single elegant theme is provided although it’s available in four different color schemes.
WP Mobile Edition is a new WP plugin with all the great features but has not actually had too many reviews yet.
#2. Install a Responsive WordPress theme
I always say that minimalist WordPress themes are the best but this is not the only thing you will need for your mobile website. Sure they might be minimalist but they also need to suit mobile devices. This is where a responsive theme comes in.
Thankfully most new WordPress themes are built to be responsive. For example the elegant themes site has 15 new responsive designs which all happen to be all of their latest creations. In other words, they are only making mobile device ready themes now.
Below is a screenshot of the Nimble design. Click on the image to see more. I particularly like the blog page for this theme as it has round thumbnails and nice easy to see “read more buttons” under each post.
How To Make Websites Mobile Friendly
Final Steps To Create A Mobile Website
Whether you created a special version of your website just for mobile users or you decided to use a theme that works for all devices, mobile or otherwise, you should now have a website that flows and scales well.
But now you need to take a moment and make sure your new website design really does work for your users. You should do this before you spend too much time with the new design or you may end up losing loyal readers in the long term.
There are many ways to test your new design, but the easiest way is to announce to your most loyal readers that you just went to all the effort to create a mobile website and would they please check it out.
If your loyal readers like the design—or are indifferent about it—you have a success. But if they don’t like your new design, it’s time to go back to the drawing board and try again to create a mobile website.
More Business articles from Business 2 Community:
