Web Developers → Making a mobie friendly page?

I have decided to make a webpage on my website for people that visit it with their smart phones. Just for fun really as my websites are just small personal websites.

So I'm guessing that there really is not much difference in designing a mobile friendly web page other than certain parameters that should be followed. My webpages are just plain old HTML so nothing fancy there to convert anyway. I just basically want to take some html pages and format them so that they look right if someone with a mobile device visits them. Then I'll place those mobile versions of my site in a separate folder called mysite/m and forward mobile visitors there.

Can anyone tell me what those parameters might be or a place where I can read them in simple plain English and not too technical. I'm guessing the important things are the size of the page, size of images, make sure you make large links so they are easy to click with fingers, etc... that kind of thing would be very helpful.

TIA

Rather than forwarding mobile users to a special folder and having to maintain two sets of content, you can do it all with one set of pages. It's called "responsive design" and with a little bit of CSS (and maybe a tiny bit of JavaScript) that's supported in all modern (last 3-4 years) mobile devices as well as all modern browsers. In addition to eliminating the need for multiple sets of content, it eliminates the need for cumbersome mobile browser detection and redirections.

The trick is a thing called "media queries" where the width of the browser is used to determine the style of the page. Think of the media queries as being able to change any part of the style depending on the screen size of the device.

The best part is a lot of the leg work has already been done. There are a few frameworks such as Twitter's Bootstrap that can get you started in the right direction. When you go to that site (and the sites below), resize your browser window and you'll see the responsive design in action as the content moves around and reformats itself.

Other things to look at:

- GroundworkCSS
- Responsive Grid System
-The State Of Responsive Web Design
- 5 Key Responsive Web Design Elements

Thanks. That makes sense. I'll begin reading there.

One of the tricks with responsive design is designing the least common denominator first. Design it from the mobile sized page, and then scale up, rather than designing the large page, then scaling down--it'll make things much easier.

What size is "the mobile sized page"?

Using something like twitter bootstrap does make it much easier to begin your responsive design. To get an idea of sizes, check out »responsive.is/ and see how it shows some different sample sites on different devices and how they look.

»mobile.smashingmagazine. ··· p=135167

Here's a list of device resolutions, as well as a lot of tips. I suggest basing the design off of devices likely to visit your page, for starters.

Modern day method is the viewport meta tag, there are a few examples here: »dnsredirector.com/faq/118.asp

Old method is based on browser user agent, then redirect to another page.

Thanks guys. Very helpful.