Question

So I am creating my first webpage catered to mobile browsers. What are some things to consider?

1. How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?

2. How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?

3. What are some other things to keep in mind?

Answer 1

There are a ton of good practices to follow. Here are a few:

1. make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
2. develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
3. do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
4. in your css, add extra line-height for easier reading.
5. in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
6. retain a link back to the full site, for those who want the full content.
7. include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
8. add padding to a hrefs so that it is easier to click/touch a link.
9. use HTML5 form types so that modern browsers will use the appropriate keyboards… http://diveintohtml5.ep.io/forms.html