hi, web gurus in d aoz i'd lyk some advice on hw to make a website mobile freindly ....i av heard of many methods bt i'm still not sure which is best to go with. all opinions wil be very much appriciated

You have two options:

1. Create a mobile version of your site and upload the files to a sub-domain like: http://www.mobile.yourwebsiteurl.com or you just upload the folder like: http://www.yourwebsiteurl.com/mobile. Then you will use javascript to serve it when a user is using a mobile device of certain width. Let's say, if the width is less than 480px, then mobile version will be fired up.

2. Create your normal website and use css @media query to target different mobile device resolutions. It will be the same website, but it will display perfectly in every device both mobile and desktop.

The first option means that you will be creating the website in two different versions. The second option means that you will be overridden initial styling in css to target different device widths. The choice is yours. However, the second option is what is now been used to target mobile devices. For instance, open http://www.starbucks.com in desktop and mobile. The desktop version has a mega drop down menu. The mobile version still contains everything because the website is responsive. They didn't use mobile version. They used @media query.

If you need help creating any of the two options above, let us know.

thanx so much for replyin ....i dont tink it'll be easy to maintain 2 website @ a tym...so ill go wit d second option..bt again i'm not sure i knw much about css queries so i'll be happy to get ur help

CSS @media query is simple, but a bit technical. Basically, how these things work is that you are restyling what you have styled in order to target certain view-ports. The two images below illustrate what responsive design do. The first is for the normal desktop, laptop and some ipads. The second is for tabs, ipads and phones.

There are certain basics you should know to be able to do a responsive web design. I suggest you google up tutorials and articles written exhaustively on this subject.

However, let me give you a quick tutorial on what to do and how to do it.

1. Responsive typography.
You will have to set your font-sizes to em and not px. Pixel is static and rigid. Em is liquid and responsive. How do you convert px to em? Simple. The default font-size of every browser is 16px. And 16px is equal to 1em. So if you want to set the font size of your h1 tag to 32px, then set it to 2em. If you want to set a p tag to 12px, you will now set it to 0.75em. Yes, em accepts floating number unlike pixel. So you can have 0.75em. To get the value of em for any font-size you want to set, just divide the font-size you have in mind with 16. Your calculator should be handy when designing a responsive website. So if you want to set 24px to an element, just do, 24 divided by 16 = 1.5. So you will now write 1.5em.

2. Responsive images.
Make sure that your images are optimized. Use save for web and devices in photoshop to save your images. If you think a particular image is too heavy, like 300KB, you may have to optimize it further with image optimizing tools. If it's png image, use http://www.tinypng.org. If it's jpg, use http://www.jpegmini.com.

Again, in the css part of the media query, you will have to write this code: img{max-width:100%}. This will force every image in your html to respond to its containing parent. So as you re-size your browser, the image will be responding and re-sizing proportionally with the width of the browser.

3. Meta Viewport.
Add below line of code in the head of your html. Reason, some mobile devices scale websites by default. So the code is overriding their default setting and forcing them to adapt to your own media query styling.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

4. Refloating.
This is where the bulk of the work lies. If you look at the first image below, which is a desktop version, you will notice that logo, navigation, content and sidebar were floated. Logo was floated left, navigation was floated right, content was floated left and sidebar was floated right.

In order to target mobile devices, you will have to refloat them back. The overall width of the website wrapper is 1000px. How do we target mobile devices from 0 to 480px width to display the website without a user having to scroll left and right?

To start with, I must point out now that your media query must be at the very bottom of your desktop styles. As you know that in css, the last command always overrides the former. So what we are doing is to override the desktop styling when a user is using mobile device. So instead of using the desktop styles, it will now use the media query style at the bottom.

To start writing media query styling, you will have to write this block of code:

@media all and (min-width:0) and (max-width:480px){}

All the new styles that will override the desktop styles will be written between the curly bracket, otherwise, it will not work.

So back to my question. How do we make our website which has 1000px wrapper width to display perfectly in a mobile device of at most 480px?

Now, in desktop styling, we did this:

#wrapper{
width:1000px;
margin:0 auto;
}

.logo{
float:left;
width:150px;
margin-right:50px;
}

.navigation{
float:right;
width:800px;
}

.content{
float:left;
width:700px;
}

.sidebar{
float:right;
width:300px;
}

.footer{
width:1000px;
}


In our media query, we will now do this:

#wrapper{
width:100%;
}

.logo{
float:none;
width:100%;
margin-right:0;
}

.navigation{
float:none;
width:100%;
}

.content{
float:none;
width:100%;
}

.sidebar{
float:none;
width:100%;
}

.footer{
width:100%;
}


Now, this will settle 0 to 480px mobile devices. There will not be any horizontal scrollbar. Everything will appear perfectly.

But, you are not done. What of mobile devices with the width of 481px to 740px?

So you will go again to the bottom of @media query of 0 to 480px and add another media query. This time, we will write:

@media all and (min-width:481px) and (max-width:740px){}

Then you copy the styling codes above and tweak the styles. In this one, since the width is relatively wide enough, you may float logo and navigation like they were in desktop version, but not with the width set to pixel.

Desktop:

.logo{
float:left;
width:150px;
margin-right:50px;
}

.navigation{
float:right;
width:800px;
}

@media query for 481px to 740px:

.logo{
width:25%;
margin-right:5%;
}

.navigation{
width:70%
}

You should note at this point that what you want in a particular query that is in desktop styles, should not be repeated. Media query is meant to override desktop styles, not to repeat it. So if navigation is floated right in the desktop styling and I want navigation to be floated right in the media query of 481px to 740px, I will not write, float:right again. I should leave it because the browser will be intelligent enough to know that since I didnt override it, that means I wanted it.

Then after this one, you will have to do the one that will cover 741px to 999px. Which means, there is no gap. No room for horizontal scrollbar to appear. The website will display perfectly on every device.

This is just a quick and simple tutorial on this. There is however, other technicalities when it comes to making a big website responsive. Or website that has lots of floated elements. But as you learn about this and read more about it and practice, you will get to know how it works.

Cheers.

U c y I respect professional devs... instead go in to anoda persons Syt to mobile-ize ur Syt,y not learn d neccesary code lyk wat my uncle-frm-anoda-aunty(graphic+ )just commented...dats a classic n basic CSS of any mobile web app anywhr

CODE-EATER:
U c y I respect professional devs... instead go in to anoda persons Syt to mobile-ize ur Syt,y not learn d neccesary code lyk wat my uncle-frm-anoda-aunty(graphic+ )just commented...dats a classic n basic CSS of any mobile web app anywhr

yeah i knw i nid 2 learn...more..bt dat doesnt mean i cant get quick help at least dats part of d reason there is a forum nd for ur info im nt a pro yet...im just a studnt nd d website islyk a project

@graphicplus im so glad u could help tnx so much.....

swagrr..01:
yeah i knw i nid 2 learn...more..bt dat doesnt mean i cant get quick help at least dats part of d reason there is a forum nd for ur info im nt a pro yet...im just a studnt nd d website islyk a project

m no pro either but since its lyk a project I sudjest u take it as a test 4 itself...trust me u will build experience n skill from dere...

k,tnx

thanks graphicplus alot for dat.
this is wat we nid from u.
happy with u