How to Create a Mobile Version of your Website

Posted in Tutorials, Web Design • Posted on 41 Comments

These days the whole world is progressing towards the web. From small businesses to big firms to online schools, universities etc., all are pushing hard to make a big online impact because this is almost free advertisement for their brand and results in it reaching a wider  range of audience than using other manual ways to do so.

One big aspect of Website Design is a “Mobile Version” of the website because these days mobile phones with internet facilities are becoming too common and thus everyone wants to remain connected to their favourite websites on the go.

Today, we’ll be discussing some key aspects & techniques that a web developer/designer must follow to have a clean & professional looking mobile version of any website. So let’s get started!

Note: Oh, by the way if you are looking for some mobile app design inspiration, visit this mobile app roundup with excellent UI experience.

Mobile interfaces are usually small and so a developer has to adjust in pre-defined dimensions. To start with, below is a layout of a very basic “mobile-website”.

LAYOUT

Let’s discuss the different elements of the layout above:

  • LOGO:

One of the main things in the layout. You should try to make it as attractive as you can but at the same time take care of its size. Make sure that the size doesn’t exceed 2 KBs of size because images always take forever to load on mobile networks and you don’t want your site to load incompletely for different people!

  • WEBSITE NAVIGATION:

One of the most important things in the design. No matter what, you need to have the links to main pages/places/things on your website on this bar and this should always be at the top. As you know, typing on most mobile devices using the small QWERTY or the virtual QWERTY keypads is not easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly.

  • CONTENT:

This is the main thing on your mobile website. People actually come to websites on their mobile devices just to view the content. So make sure that you don’t make any single change to your content for mobile devices otherwise you might just end up losing a user.

While on Mobile Devices, people are usually on the go, so they don’t really have much time to view content. As a solution to this, you should cut down your content to some major value points but at the same time you should provide your user with a Link to the main article containing all of your content. (If you have an active blog then you can ignore this as you can’t really cut down content for each post separately every day!!)

We all know that images in content are a must. But in the mobile version of your website, you should make sure that you don’t have much graphics because most mobile phones would take forever to load heavy images. So use images and graphics as little as possible, only where contextually relevant.

And if you do wish to put images on your mobile website, it should be in .JPEG or .GIF or .PNG format as these files are pretty much light-weight. Plus make sure to compress your pictures to avoid zooming. And one more, today nearly all current devices display images, however, users may browse with the images turned off. So always use the ALT text property for the images which is a recommended practice. Also, you must properly size your images to avoid a situation where the reader/visitor has to zoom into the image to see it properly.

  • FOOTER:

There’s an old saying, “A Man is not recognized by the clothing he’s wearing but by the condition of his shoes!” This goes true for many websites. I always see blogs, marketing websites etc. OVER-LOADED with “garbage and dirty” Hyper-links in Footer. Like me, many others don’t like it and on mobile websites where the screen size is small, this could be one thing where you could lose a client or a reader. So make an attractive Footer!

So if you want your applications/website’s mobile-interface going successful, you should lay focus on its Layout. It should just be error-free as “Web-Browsing on Mobile Devices” will be the next big thing.


CODING

This is one thing where many new mobile-interface developers hesitate. Below are some tips that can help remove that hesitation:

  • VALID CODE:

Use proper code and make sure that its 100% valid because most mobile browsers aren’t as good as their PC (Personal-Computer) counterparts so you should make sure that it’s valid.

  • FLUID LAYOUTS:

It’s not always easy to discover how your layout will look on all mobile browsers as there are far too many mobile devices used for web browsing and to track them all can be a big pain. One way to address/bypass this problem is the use fluid layouts that will automatically adjust to the screen size.

To accomplish this avoid setting widths in pixels and use percentages or ems instead. For instance, instead of:


width: 400px;

use


width: 100%

or


width: 1.0ems

You can find more about the fluid mobile layouts and also download some pre-built ones by going to this link: Perfect multi-column CSS liquid layouts – iPhone compatible

  • SPECIFIC STYLESHEETS

You can always target various mobile devices for better user-experience. For example, for targeting users browsing your site using Handheld devices you can use this in your website’s <head>:


&lt;link rel=&quot;stylesheet&quot; href=&quot;handheld.css&quot; type=&quot;text/css&quot; media=&quot;handheld&quot;/&gt;

You can find more about these media types at this link: W3.org – Media Types.

  • SAY “NO” TO FANCY SCRIPTS

For your mobile website to go successful, don’t use Javascript or Flash or any other of those fancy scripts available out there. Because majority of mobile devices fail to interpret these and end up either freezing the device or just doing something stupid!

If you really want to use these then should give your user a Polite Option so that your user knows what his/her mobile handset is loading and opening up (and if anything goes wrong, it’s their fault and not yours because you already warned them).

  • TAKE IT EASY WITH THE ADS

This is one thing that almost everyone should take care of! Don’t fill up your mobile page with ads. And this is not only for the mobile page but also for the original website.

It’s an old saying, “One rotten Apple in a basket makes all others dirty”. It goes true for these websites which are full of ads. These websites don’t care about User-Experience but only care about the money that comes into their pockets (because CPM is high on mobile devices).

So my suggestion, just don’t fill it up with ads! “Just don’t make your page with colourful ads.”

  • MOBILE BROWSER DETECTION (AUTOMATIC)

For making your brand successfull you should also include an automatic “Mobile Browser Detection & Redirection” server-side script (eg. PHP).  You might also use this as User Agent detection, where a server makes a decision on what to serve based on how an incoming browser describes its capabilities. You might also want to use this as an alternative or fallback method to the previous one Mobile Browser Detection in PHP. Other implementations feature real-time JavaScript requests to databases like DeviceAtlas or WURFL that also supply information on what a device can do. A mobile version is not complete until it’s automatically triggered for every mobile user!

  • MAKE A DEDICATED APPLICATION CLIENT (if necessary)

Yes! You read it correctly. If you have a really high user-base, make a dedicated application targeting various mobile interfaces. Facebook, Gmail, Twitter, Yahoo and many other big-companies have done this and this is why they have been so successful. If you make an application for specific handsets then you no longer have to care about all the Fancy scripts etc. because you can then enhance the application your own way (you can’t change the mobile browser but definitely your own application).

MOBILE SITE BUILDERS

You must have seen those Fancy Website builders out there, haven’t you? Well, now we have websites which help you create websites for mobile interfaces as well!

1. MOBIFY

2. MOFUSE

3. WIRENODE

For users who use WordPress as their platform, there are many free as well as paid plugins available out there. Some of them are listed below:

4. MobilePress

5. WP-TAP

6. WP-TOUCH PRO

So we have pretty much gone through all the aspects and the techniques of “Mobile Website-Designing”. If you have any questions about anything regarding “Mobile Website Designing” then feel free to point that out in the comments!

4 Written ArticlesWebsiteGoogle+

Blog: TutorialsWalk Twitter: @abhishekwebin

41 Comments Best Comments First
  • thehalvo

    Friday, October 22nd, 2010 17:06

    9

    I would agree with @primestudios. I’ve built many custom mobile sites for my clients and the use of JavaScript and jQuery have brought the tailored sites to a whole new level. The Webkit based mobile browsers (iPhone, Android, and soon to be BB) control the current market, and they can handle most of the fancy stuff.

    +8
  • kees

    Friday, October 22nd, 2010 10:10

    5

    How does your website know it’s being visited by a mobile phone/ipad?
    Should I make a second page or can I make a mobile version in the original page?

    +5
  • Bernd

    Friday, October 7th, 2011 00:05

    26

    There are also desktop tools available to create webapp’s without any HTML knowledge. Try the WYSIWYG editor YouMinds WebApp Composer at .

    +5
  • Abhishek

    Friday, October 22nd, 2010 19:06

    11

    @thehalvo & @ Prime Studios I agree with you but in many countries those old WAP phones are still in use! And its not a small fraction, it quite big. But you can always detect phones using PHP or other server-side scripting languages and then redirect the old phones to a non-JS version of your mobile website. And for the other phones supporting JS, you can always have your regular website “including” JS.

    +2
  • Mansoor

    Thursday, April 5th, 2012 07:21

    33

    Hi,

    First of all i would like to Thanks the Author for the beautiful post.

    Question:-
    What is HTML5? And is it the language used to develop MOBILE VERSIONS OF THE WEBSITES??

    Anyone can Answer

    Thanks In Advance

    +1
    • Rean John Uehara

      Thursday, April 5th, 2012 07:30

      34

      Hi Mansoor,

      HTML5 is the latest version of HTML. It can be used to create websites, as well as games and applications. It’s not limited to creating mobile versions of websites.

      +3
  • Polin

    Tuesday, May 8th, 2012 00:59

    41

    That is really good. I will make my site mobile version asap.

    +1
  • Rohit Rathore

    Saturday, April 7th, 2012 09:51

    36

    its great informative article for me.

    +1
  • Carlos

    Wednesday, May 4th, 2011 04:23

    16

    Interesting post! Keep it up :)

    +1
  • Anita

    Tuesday, September 20th, 2011 17:30

    24

    Thanks a lot for taking the time to write this information. It is extremely useful!

    0
  • Enrison Johnson

    Wednesday, September 21st, 2011 22:09

    25

    Impressive article indeed. Yeah, I agree with you, There are lot of companies out there that they rely on online marketing. their sales are purely comes in online business

    0
  • John

    Wednesday, August 24th, 2011 10:52

    22

    Very Interesting, This is a service we are looking to offer our clients and promote to new business. Nice info.

    0
  • Tony

    Friday, September 16th, 2011 23:24

    23

    How to Create a Mobile Version of your Website topic has been useful to us and now we hope to build a mobile site for our news holiday business.Thanks

    0
  • Jaan

    Saturday, May 28th, 2011 04:33

    18

    Very useful publication man. I always follow your blog because it is full of attractive information about various things. I really like reading this entry about the drupal website because I have known so many new facts about it indeed. It is really great that I have noticed this entry. Thanks a lot one more time for sharing this informative article. Kind regards

    0
  • Phil Akalp

    Saturday, August 13th, 2011 00:08

    21

    I just spoke with a developer who quoted me 30,000 US to make a mobile version of our site . I think that’s WAYYYYYY too much. Thanks for the guidance on simply making the site fluid and lighter in graphics. Nice Post!

    0
  • Olof Charles

    Wednesday, November 9th, 2011 09:32

    27

    Thanks Mr. Abhishek for this informative article. I’ll infuse these ideas when I work on my own mobile version of my website using as my CMS. Brick&mobile has provided me good information on how to build and customize my mobile website. This article of yours would truly take my mobile website a bit further.

    0
  • Bryan

    Friday, April 6th, 2012 02:59

    35

    Hey, thanks for the guide, :). 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)?

    0
  • Todd

    Friday, December 30th, 2011 08:54

    28

    cool, I applied your thread and success on my phone. Thanks

    0
  • vijay rana

    Wednesday, April 11th, 2012 00:16

    39

    -1
  • Andy

    Friday, February 24th, 2012 04:57

    29

    Although we hired someone to design our restaurant website, I found on Google Analytics that a lot of people were visiting our website from their mobiles (iPhone etc.) so we created a mobile compatible website.

    -1
  • anguraj

    Wednesday, April 25th, 2012 14:34

    40

    My own business helped website

    -1
  • Elbakai

    Monday, March 19th, 2012 03:11

    31

    Thank you very much really a very important

    -1
  • Aryan Sinha

    Friday, March 23rd, 2012 09:50

    32

    Thanks a lot
    I have a domain for mobile website and i will apply it on that domain

    -1
  • Michelle

    Saturday, March 3rd, 2012 11:19

    30

    Thanks Thomas! Its an awesome free platform! I was surprised by their fast service too! Where you manage to learn this from?

    Highly recommended! =)

    -1
    • Thomas

      Tuesday, April 10th, 2012 02:13

      37

      From word of mouth.. from my friend.

      -1
  • Matt

    Friday, October 22nd, 2010 16:30

    8

    Nice writeup, but I have substantial reason to say that restricting the use of JavaScript because a small fraction of phones cant use it is a questionable outlook. If you are hip enough to need a mobile website, you need to consider if your user base is hip enough to have a phone from 2005+ that can make use of pleasing and useful JavaScript.. Ajax, media viewers, etc. use it and it really increases user experience on a mobile device.

    -2
  • Ahmad

    Friday, October 22nd, 2010 16:21

    7

    I have used Wp touch pro in the past its nice plguin

    -2
  • Rahul

    Friday, October 22nd, 2010 14:54

    6

    i have never read about this actually and i find it very important for people who want to profit from all the ways and this is indeed a good way , so i find this interesting and i know a bit about it now thank You !!!

    -2
  • Leon Yeh

    Thursday, October 21st, 2010 23:46

    3

    My apology, you did mentioned the point in your article. I read it too fast.

    -2
  • aerozeppelin72

    Friday, October 22nd, 2010 03:17

    4

    Very nice. This is perfect for someone who hasn’t gotten into the mobile scene.

    -2
  • Leon Yeh

    Thursday, October 21st, 2010 23:41

    2

    Thanks for great article. I have to say when we were building mobiten.com, I wish this article exists.

    You forgot to mention that the mobile website version of your website should contain a reduced content and it is not just a straight skin changes.

    Mobile user usually run on slower network than on PC, so you want to limit the amount of content you want to put on your site. Make sure to have your address and contact info front and center.

    Leon

    -2
  • Rene

    Tuesday, October 26th, 2010 16:46

    13

    Great article. Thanks :)

    -2
  • Gert

    Friday, October 22nd, 2010 17:39

    10

    NIce tutorial, but this page is not very mobile friendly :(

    -2
  • Ethan

    Monday, June 20th, 2011 23:28

    19

    Great! Thank for posting this!

    -2
  • Mohammad Raihan Mazumder

    Friday, June 24th, 2011 19:34

    20

    awesome useful info.

    -2
  • Bryce Wisekal

    Thursday, October 21st, 2010 23:21

    1

    Amazing tutorial! Something I will be making use of very soon! I’ve been receiving a lot of clients interested in tweaking their websites to be more friendly with mobility devices. This has given me a lot of insight, thank you.

    -2
  • Tony

    Wednesday, May 11th, 2011 23:41

    17

    Well done and well explained thanks

    -2
  • Brett Widmann

    Saturday, January 22nd, 2011 06:02

    15

    This was very useful and helpful! Technology is definitely focused on mobile devices!

    -2
  • Scott Sawyer

    Friday, October 22nd, 2010 20:03

    12

    We are developing a mobile version of our site, which is build on #drupal, we’re using the Mobile Plugin, and a customized Nokia Mobile Theme.

    Actually, reading this on my Android! Gotta go mobile

    -2
  • fareed khan

    Tuesday, November 16th, 2010 08:26

    14

    Thank you for the information to create mobile version websites

    -3
  • vijay rana

    Wednesday, April 11th, 2012 00:14

    38

    i want to know how to get a free .com or .in domain free for lifetime

    -7
  • Polin

    Tuesday, May 8th, 2012 00:59

    41

    That is really good. I will make my site mobile version asap.

    +1
  • anguraj

    Wednesday, April 25th, 2012 14:34

    40

    My own business helped website

    -1
  • vijay rana

    Wednesday, April 11th, 2012 00:16

    39

    -1
  • vijay rana

    Wednesday, April 11th, 2012 00:14

    38

    i want to know how to get a free .com or .in domain free for lifetime

    -7
  • Rohit Rathore

    Saturday, April 7th, 2012 09:51

    36

    its great informative article for me.

    +1
  • Bryan

    Friday, April 6th, 2012 02:59

    35

    Hey, thanks for the guide, :). 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)?

    0
  • Mansoor

    Thursday, April 5th, 2012 07:21

    33

    Hi,

    First of all i would like to Thanks the Author for the beautiful post.

    Question:-
    What is HTML5? And is it the language used to develop MOBILE VERSIONS OF THE WEBSITES??

    Anyone can Answer

    Thanks In Advance

    +1
    • Rean John Uehara

      Thursday, April 5th, 2012 07:30

      34

      Hi Mansoor,

      HTML5 is the latest version of HTML. It can be used to create websites, as well as games and applications. It’s not limited to creating mobile versions of websites.

      +3
  • Aryan Sinha

    Friday, March 23rd, 2012 09:50

    32

    Thanks a lot
    I have a domain for mobile website and i will apply it on that domain

    -1
  • Elbakai

    Monday, March 19th, 2012 03:11

    31

    Thank you very much really a very important

    -1
  • Michelle

    Saturday, March 3rd, 2012 11:19

    30

    Thanks Thomas! Its an awesome free platform! I was surprised by their fast service too! Where you manage to learn this from?

    Highly recommended! =)

    -1
    • Thomas

      Tuesday, April 10th, 2012 02:13

      37

      From word of mouth.. from my friend.

      -1
  • Andy

    Friday, February 24th, 2012 04:57

    29

    Although we hired someone to design our restaurant website, I found on Google Analytics that a lot of people were visiting our website from their mobiles (iPhone etc.) so we created a mobile compatible website.

    -1
  • Todd

    Friday, December 30th, 2011 08:54

    28

    cool, I applied your thread and success on my phone. Thanks

    0
  • Olof Charles

    Wednesday, November 9th, 2011 09:32

    27

    Thanks Mr. Abhishek for this informative article. I’ll infuse these ideas when I work on my own mobile version of my website using as my CMS. Brick&mobile has provided me good information on how to build and customize my mobile website. This article of yours would truly take my mobile website a bit further.

    0
  • Bernd

    Friday, October 7th, 2011 00:05

    26

    There are also desktop tools available to create webapp’s without any HTML knowledge. Try the WYSIWYG editor YouMinds WebApp Composer at .

    +5
  • Enrison Johnson

    Wednesday, September 21st, 2011 22:09

    25

    Impressive article indeed. Yeah, I agree with you, There are lot of companies out there that they rely on online marketing. their sales are purely comes in online business

    0
  • Anita

    Tuesday, September 20th, 2011 17:30

    24

    Thanks a lot for taking the time to write this information. It is extremely useful!

    0
  • Tony

    Friday, September 16th, 2011 23:24

    23

    How to Create a Mobile Version of your Website topic has been useful to us and now we hope to build a mobile site for our news holiday business.Thanks

    0
  • John

    Wednesday, August 24th, 2011 10:52

    22

    Very Interesting, This is a service we are looking to offer our clients and promote to new business. Nice info.

    0
  • Phil Akalp

    Saturday, August 13th, 2011 00:08

    21

    I just spoke with a developer who quoted me 30,000 US to make a mobile version of our site . I think that’s WAYYYYYY too much. Thanks for the guidance on simply making the site fluid and lighter in graphics. Nice Post!

    0
  • Mohammad Raihan Mazumder

    Friday, June 24th, 2011 19:34

    20

    awesome useful info.

    -2
  • Ethan

    Monday, June 20th, 2011 23:28

    19

    Great! Thank for posting this!

    -2
  • Jaan

    Saturday, May 28th, 2011 04:33

    18

    Very useful publication man. I always follow your blog because it is full of attractive information about various things. I really like reading this entry about the drupal website because I have known so many new facts about it indeed. It is really great that I have noticed this entry. Thanks a lot one more time for sharing this informative article. Kind regards

    0
  • Tony

    Wednesday, May 11th, 2011 23:41

    17

    Well done and well explained thanks

    -2
  • Carlos

    Wednesday, May 4th, 2011 04:23

    16

    Interesting post! Keep it up :)

    +1
  • Brett Widmann

    Saturday, January 22nd, 2011 06:02

    15

    This was very useful and helpful! Technology is definitely focused on mobile devices!

    -2
  • fareed khan

    Tuesday, November 16th, 2010 08:26

    14

    Thank you for the information to create mobile version websites

    -3
  • Rene

    Tuesday, October 26th, 2010 16:46

    13

    Great article. Thanks :)

    -2
  • Scott Sawyer

    Friday, October 22nd, 2010 20:03

    12

    We are developing a mobile version of our site, which is build on #drupal, we’re using the Mobile Plugin, and a customized Nokia Mobile Theme.

    Actually, reading this on my Android! Gotta go mobile

    -2
  • Abhishek

    Friday, October 22nd, 2010 19:06

    11

    @thehalvo & @ Prime Studios I agree with you but in many countries those old WAP phones are still in use! And its not a small fraction, it quite big. But you can always detect phones using PHP or other server-side scripting languages and then redirect the old phones to a non-JS version of your mobile website. And for the other phones supporting JS, you can always have your regular website “including” JS.

    +2
  • Gert

    Friday, October 22nd, 2010 17:39

    10

    NIce tutorial, but this page is not very mobile friendly :(

    -2
  • thehalvo

    Friday, October 22nd, 2010 17:06

    9

    I would agree with @primestudios. I’ve built many custom mobile sites for my clients and the use of JavaScript and jQuery have brought the tailored sites to a whole new level. The Webkit based mobile browsers (iPhone, Android, and soon to be BB) control the current market, and they can handle most of the fancy stuff.

    +8
  • Matt

    Friday, October 22nd, 2010 16:30

    8

    Nice writeup, but I have substantial reason to say that restricting the use of JavaScript because a small fraction of phones cant use it is a questionable outlook. If you are hip enough to need a mobile website, you need to consider if your user base is hip enough to have a phone from 2005+ that can make use of pleasing and useful JavaScript.. Ajax, media viewers, etc. use it and it really increases user experience on a mobile device.

    -2
  • Ahmad

    Friday, October 22nd, 2010 16:21

    7

    I have used Wp touch pro in the past its nice plguin

    -2
  • Rahul

    Friday, October 22nd, 2010 14:54

    6

    i have never read about this actually and i find it very important for people who want to profit from all the ways and this is indeed a good way , so i find this interesting and i know a bit about it now thank You !!!

    -2
  • kees

    Friday, October 22nd, 2010 10:10

    5

    How does your website know it’s being visited by a mobile phone/ipad?
    Should I make a second page or can I make a mobile version in the original page?

    +5
  • aerozeppelin72

    Friday, October 22nd, 2010 03:17

    4

    Very nice. This is perfect for someone who hasn’t gotten into the mobile scene.

    -2
  • Leon Yeh

    Thursday, October 21st, 2010 23:46

    3

    My apology, you did mentioned the point in your article. I read it too fast.

    -2
  • Leon Yeh

    Thursday, October 21st, 2010 23:41

    2

    Thanks for great article. I have to say when we were building mobiten.com, I wish this article exists.

    You forgot to mention that the mobile website version of your website should contain a reduced content and it is not just a straight skin changes.

    Mobile user usually run on slower network than on PC, so you want to limit the amount of content you want to put on your site. Make sure to have your address and contact info front and center.

    Leon

    -2
  • Bryce Wisekal

    Thursday, October 21st, 2010 23:21

    1

    Amazing tutorial! Something I will be making use of very soon! I’ve been receiving a lot of clients interested in tweaking their websites to be more friendly with mobility devices. This has given me a lot of insight, thank you.

    -2

Comments are closed.

54.82.121.218 - unknown - unknown - US