Please how do i go about designing the mobile version of a site such that the contents of the full site would be the same on the mobile site without updating each of them seperately.

Well, this happens to be how my site works. Hmmn, different sections of my site work differently and yet the result is the same.

Okay, i know what to do, i will explain only one method. How did you make your website? Is it with direct php coding or cms or a framework?

I designed it with a cms.

^^^what cms did you use?

1) You can make use of a stylesheet with the "media" attribute set to "handheld"
2) You can take advantage Responsive web design (google it)
3) You can take advantage of CSS media queries

Regardless of which of the above you choose, the concept remains the same:
You have the same code with the same css styles, only that if your main site had a DIV with ID of "main" is 900px for the main site, it might be 200px for the mobile site. If you are observant, you can see how this can get real messy in a second as there are tons of mobile devices of various screen resolutions.

A better, albeit tricky approach is to code using percentages and ems (for font) as opposed to px. I say "tricky" because percentages work well for widths of HTML but not images.

In the future, consider using a framework (I prefer jQuery mobile) which does all the dirty work for you.

Good luck!

Well, it may not be so so easy like that all the time. But that is the principle. My own site for instance uses different structure entirely for the pages. So despite the content being the same, i detect if the page is mobile with php and render a different TEMPLATE and DIFFERENT CSS.


Take a look at mobile version of my home page http://www..net/index.php?mobile=1
Take a look at full version of my home page http://www..net/index.php?mobile=0

Dont be mistaken, the mobile=1/0 was just something i used to test the site back then, and i decided i liked it and left it so. But the automated switching from mobile to full version is done with PHP.
Then the technique of allowing uses to specify whether they want full version or mobile version is cookie based.

Ayam seeing many new things i need to look into, when i get home.
Thanks pals for been there

passing by

there are tons of tools to use, first if you are using a CMS like Joomla in MVC manner just render a mobile view, second you can create another folder and at the index page at the top put a UserAgent Sniffer that will redirect if they are on a mobile phone, there is Jquery Mobile which is a lot easier, but if you are looking for a structure and modular mobile app try Sencha Mobile or Dojo's Dojox.mobile, but frankly jquery mobile is lots easier, then the next question is what type of mobile browser, wap,xhtml, does the phone support webkit should it ave animation or just a basic view. look at one i did for my aunt http://sourcedepots.com/mobile i made it for webkit and css 2.1 phones with Dojox.Mobile

No redirection @guru, we all know that is easier. He wants something like my website.

If you are using CMS, i just do the patches inside the template directly, sniffing and all. Rather than coding custom extensions.

ok same page but different view.

I already gave an example with my website.
Take a look at mobile version of my home page http://www..net/index.php?mobile=1
Take a look at full version of my home page http://www..net/index.php?mobile=0

i've never accessed ur site with a phone maybe that's why i haven't seen that yet

My site has a button that allows you to switch to mobile even if you are in desktop view.

If you click this, you will see mobile version of my homepage. http://www..net/index.php?mobile=1

@all thanks for your tips and contribution, would take my time to go through them one after the other.

@dhtml. Can u do me a pc nd mobile site diff. muperfectgenius@gmail.com lets talk. Tx