Programming Websites For Mobile Devices

Question

I am curious how to make a website mobile device friendly.. so what are the best dimensions and how do i make the website figure out whether or not they are on a mobile device. also what do i need to limit on my design and coding to make pages more glitch-free and faster loading...

Answer 1

There are really two major schools here and it depends on your audience:

If you're talking about current mobile browsers, the majority of the market is using full-featured browsers like on the iPhone, Android variants, Palm Pre, etc. These can handle things like complex javascript and modern css. For this crowd, you mainly want to focus on things like streamlining layout for very limited page-widths (>800px), minimizing the amount of data it needs to load (since mobile connections can be very slow), and optimizing font-sizes and line-heights for readability.

However, in the developing world (Africa, South America, parts of Asia) then mobile browsing is A) extremely important, and B) about 5-10 years behind in hardware capability. Mobile internet is a major means of getting information in those areas, but you really need to be writing HTML like it's 1999 (minus the tables of course). Keep your markup very clean and very simple, limit any fancy styling, and don't rely on javascript, flash or anything else.

For that type of audience, you should be very concerned with what your page looks like without any stylesheet applied. Semantic markup is king. Of course you will be able to style it, but keep it as minimal as possible.

Hope that offers some basic ideas.

Answer 2

You might take a look at the W3 Mobile Web Initiative. They have many best practices as well as some good tools such as the Mobile Web Validator.