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 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 aslo 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 is to install a plugin to turn your site into 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 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.
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.
Smart phones grow very fast, Most people browsing by their mobiles and checking mails, So create mobile website is very important step today. I will follow your step to do it, i see most steps is very clear. Thanks for sharing
Ehab Attia recently posted..Liver Bird Watching – Tours in Liverpool and Merseyside
I have been reading for quite a few hours now about how to start my project to make our website responsive. This is by far the most informative post I found. I have a semi-responsive design, but it easily stops working properly. I have mostly problems with the whole thing breaking down when people minimize it to less than 60%. If anybody can give me a hint on how to fix it I would be very thankful. Check it out here if you want to help a fellow webmaster 🙂
And to Evans, comment. I absolutely agree. My friend at google told me that in 2015 they predict that mobile search traffic will overtake home computer based search traffic. That is the reason why they just implemented a whole new array of products in their paid advertising.
Jason recently posted..Top 10 Comedy Specials
great tips mitz
having a mobile payout of version for your site is always great as it makes your size compatible with mobiles. many people use smartphones to access internet so it will convert them too
raj recently posted..Jetpack Joyride for PC Free Download APK for computer
Hi Mitz
All the tips are very useful to create mobile website. And i red yourWordPress Sidebar Etiquette article. Both are very interesting and very informative. keep it up, thanks.
lalithaa recently posted..The All New Chromebook – An Overview of Features
Thanks for the tips, Mitz. It’s hard to overstate how important mobile-friendly development is for anyone creating a website, as mobile Web browsing is set to outstrip desktop browsing in the next couple of years. Developing an effective responsive website can require a lot of technical skill, so it’s good to hear WordPress has some handy tools that can help.
mobile sites very popular nowadays.i have seen mobile sites as the growth of mobile internet users leads to this and you had briefly shown how to create a mobile site in a simple innovated manner… great!!
Very simple to understand steps you mentioned here to create an effective mobile site. They seems apparently so simple but very few bloggers know about them. Thanks for sharing such nice information.
Edson Hale recently posted..How to never lose a job?
mobile website is not a vanity anymore, it has become such a necessity. With responsive web design around, it isnt that hard to have one working either. thanks for the article Mitz, was a good read really.
Research on mobile website usability shows that mobile-optimized websites significantly improve user experience and satisfaction, which makes a positive impression if properly implemented. While most websites look fine on a modern mobile device, they can also be more difficult to use. You have given a great guide on how to create mobile website. Thanks for sharing this well-informed post!
yaps…
most of people now using mobile phones almost for every thing browsing websites, Facebook & twitter, so, the webmaster/programmer must considered to build web with mobile version. which fast loading, and nice fit to mobile-browsers.
mardino santosa recently posted..Cara Menambahkan Site Map ke Google WebMaster Tools
“In some parts of the world Mobile internet usage has surpassed desktop internet usage. So the demand is very high for the Mobile website, you have provided some really good tips, thanks for sharing.
“
most of people now using mobile phones almost for every thing browsing websites,Facebook& twitter.,so programmer must considered that and building more sites for being access by mobile phones.
Cornelia Lora recently posted..Newest Puffer coat Fashion for women
The principles of mobile design are different than those of conventional web site design. I have some rough idea about it. Mobile phones are really increasing in numbers, your post will help many to build the sites. Thanks for sharing.
Mobiles are growing in numbers, actually running! So mobile website is always necessary & going to be more. I really liked the points how you categorically divided professional way & easy way. Mobifi & Wirenode are some great tool to build. Good post, thanks for sharing.
That is a much needed tutorial. Mobile websites are the future. One must make his blog or website mobile ready to get more exposure. Thanks for the post.
Rinkesh recently posted..Pollution, Causes and Effects
Creating a mobile website is so much important and useful if you are a die hard blogger. Being able to easily control your blog through your mobile phone can be such a help. You have mentioned some amazing tips to create a mobile website. I will surely use them to create one. Thanks.
Hi Mitz by reading this post now it is easy to create a mobile website. Thanks for this step by step guide.
Mobile hand held devices are on the increase and people are now more than ever transacting business while on the move. Students are increasingly leaving their laptops at home, PCs are becoming devices to be used at home and therefore there is great demand for mobile website.
Your guide is well elaborated and easy to follow. Thanks for sharing.
Viren recently posted..Email Marketing Power At Work
Last few year Information Technology is very Growing sector in which mobile is first need of all of us so according to the user demand mobile company is making different mobile website & apps for mobile user. Hence, they are working on all those aspects that can attract a large volume of mobile audience.
Hey, Thanks for the guide! J I like your tips a lot. Basically the goal of every newbie in mobile website should have “Keep it clean and simple”. One thing I am bit lost on, however, is how to handle the mobile portion of our site. Do we basically need to recreate the entire thing as a separate entity? And how are ads handled on mobile devices? I am not able to understand this. Please help.
Mobile web development has become the primary need of the hour, as today accessing Internet for the users has become easier than ever; thanks to the frequent development of iPhone, Android, and other Smartphone. Incorporating the above-mentioned guides you have presented before us in relation to mobile web development is sure to pave a success route for your business.
Do the plugins that you list only work for WordPress? I’m looking for something like the WordPress mobile pack for other websites. Any ideas?
Amara recently posted..Vapir NO2 Screen Pack – 20 pcs.
No sorry I do not deal with anything else. 🙂
Having a pc version and a mobile version of your site can require more effort on the administrator’s part. The easiest way, and what I did, is just to get a responsive theme, that would easily resize. So far effective. But A responsive theme might not be applicable to some type of sites.
Jeff recently posted..Nikon D7100 Now Available on Amazon: See Comparison Here
Hi Mitz,
Thanks for share with me this informative post because I really apply your step it’s very awesome.
Deepak Mehra recently posted..Accounting Management Software
Creating a mobile version for your website is important but I agree that there are some drawbacks. My personal pet peeve is being redirected to a mobile version with less functionality when I don’t have an option of viewing the regular version. Webmasters should take this into their consideration.
Anothny recently posted..Fishing Charters in Florida
Do you think if you need a mobile version of the website for online shopping, the target audience – men 50-60 years old?
Putting in the work at the beginning of website development can prevent headaches in the future. By the way, there are lots of cool tools that make the transition into the mobile world easier – check out Mobify.
There are many different ways to make your website mobile. One thing for sure though is that it is a MUST – especially for businesses that heavily rely on their web traffic.
Amazing tips and easy to follow to create a mobile website i really enjoyed this article .. Thanks for share 🙂
abdelrhman recently posted..Muscle Building – The Somanabolic Muscle Maximizer Review
Due to the advent of the captivating Smartphone, the rise of the mobile websites is definitely on the rise. The post imbibes a lot of valuable tips for the creation of the website. But I would prefer to make use of the Plugins for the website creation, as it is lucid. Thanks for the share.
Aayna recently posted..What’s New in Microsoft Excel 2013?
Handheld devices are the next generation computers. Ignoring them is the biggest mistake a webmaster can do.
Utkarsh Bhatt recently posted..Top 5 Terrible Annoyances of Human Life
Yes you are right there. I am using my desktop computer less and less everyday! I miss it but the tablet goes with me and is very handy. 🙂
nice post mitzas more and more smartphones are being sold everyday and samsung is making new records. it is becoming important to make our website compatible with mobiles because people use mobile to search products and we should look to monetize this traffic also. i use WPTouch plugin to do this. it shows a separate website on smartphones however you can switch back to full site anytime
prabhat recently posted..Top 5 Best Google AdSense Alternatives
Really nice post Mitz…
Getting very interesting tips for making a mobile website here. Almost people used the different mobile version, but they never known that how it’s created, so they have to read this blog for getting some of knowledge about it. You also describe about install plugging. Also describe different way for create a mobile website. Thank you for this nice post.
I like your tips a lot -> basically the goal is to “keep it clean and simple” overall. One thing I’m a bit lost on, however, is how we handle the mobile portion of our site. Do we basically need to recreate the entire thing (at least what all we want accessible via mobile devices) as a separate entity? And how are ads handled (being that you said to try and stray away from things like scripts)?
It is one of the best how to article for creating mobile website. Actually, my main blog didn’t have any mobile website and visitors coming from mobile phones can’t easily navigate the website.
Samid Thakur recently posted..IPL 6 Opening Ceremony: Where to Watch Live Streaming Telecast Online
Purchasing elegant theme is the best option becoz it is optimized as well as best SEO friendly website. But price of the theme is not good for newbies like me.
Ravi Somani recently posted..IPL 2013 Schedule PDF Download of All Matches
Purchasing a mobile friendly theme is one of the best option because if you pay something then you will also get something return. Monetizing mobile friendly website will also provide something good return.
I have used plugin to optimize website for mobile friendly website. Making mobile website is the most important because most of (almost 30%) users comes from smartphones.
Pradeep Tiwari recently posted..P Chidambaram Google+ Hangout on Union Budget 2013 Live Telecast Streaming askthefm
I generally use responsive theme to enable my website as mobile friendly. Plugin is also alternative but is not recommended.
Taher Vora recently posted..Happy Holi 2013 SMS in English 140 Characters
Great post Mitz..Learned a lot about mobile friendly sites from here…As the number of mobile devices are increasing exponentially on a global scale, the development of mobile friendly sites becomes quite essential..Most big shot companies are already in the scene, making sure that they deliver the mobile experience that the customer is looking for.I am planning to do it myself this month..This post surely helped me to put things into perspective..Much appreciated.
Joe Hart recently posted..Dental Implants
I love the Article Mitz! It is important that people research all of their available options before moving forward with your mobile platform. Budget is a key factor that will determine which route you take (i.e. Brand New Website with Responsive Design vs. Do-it-yourself builder). I look forward to additional articles from you!
I work at a firm that provides a wide array of mobile solutions starting from free do-it-yourself all the way up to a complete overall of your web presence with new website & responsive design component with SEO optimization. I do customer support and can be reached anytime, feel free to reach out with questions!
-Steph
http://www.mobilewebamerica.com
Nice way for creating a mobile website. These tips are really helpful for me. Thanks for sharing this nice post.
Prakash recently posted..Top 5 Free and Best Virtual Assistant for Android | Siri Alternatives
Hey Mitz,
I’m not a tech Geek, and seriously I was hardly able to understand anything from the upper portion of this blog post. However I think using plugin is the easy and simple way for any WordPress user.
Aasma recently posted..MLM Software India
thanks for the guide. I really appreciate these tips a lot. There are also desktop tools available to create webapp’s without any HTML knowledge.
Hi,
there all technique you given how to create website for mobile is awesome. It was much needed for me. some technique are really useful for me and I thinks it gets more traffic on your site.
Thanks for share with me.
Deepak Mehra recently posted..Travel Portal Development
awesome post Mitz!!!
There is very helpful tips and for making a mobile website. Number of mobile users increasing continuous and peoples get information and apps through m sites and your ideas and tips help us .
Ashutosh recently posted..ecommerce website development
With the growing number of mobile users, a lot of business owners are trying to use mobile phones as a powerful media of business promotion. Hence, they are working on all those aspects that can attract a large volume of mobile audience.
I use the most simplest way in the world…And that is of course the use of WordPress plugins…It works like a charm…
Saqib Razzaq recently posted..101+ Ways To Dramatically Increase Blog Traffic Part I
nice share, and it has a growing trend of mobile phone surfing, so it’s good to provide a mobile version of your website for the mobile web user.
yeah mobile website creation are easy but knowledge the some tools and software like word press ,android etc.The website creation are many technology such as easy way and professional way.
so once modern era which use mini device generally so very important way prevention the security.
Anil Bhogia recently posted..Mobile Recharge Software
REsponsivness of the site is a vitally important thing for any online business owner. I know there are plenty of themes for different CMS that provide responsive layout and works perfectly and you have no problems to install it. Thanks for a good ideas about that point! Great job!
Evan recently posted..Agriculture WordPress Themes 2013
If I decide to do this the hard way, i.e. using Google’s Android emulator, is it safe to assume consistency across devices, even those which don’t use Android?