CODEWITHSUNDEEP
mobilemobile-website
Andy Hin
Andy Hin

Reputation: 31893

Mobile Web - Things to consider?

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?

Upvotes: 4

Views: 383

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 5

bobince
bobince

Reputation: 536379

Just create normal web pages with liquid layout and let the browser take care of choosing an appropriate width.

If you know your pages will scale down nicely to mobile screen sizes, give the browser a clue that it can show the pages 1:1 without zooming by default. Include in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

I would strongly recommend not attempting to disable zooming (user-scalable=no) as it's a useful feature that you gain nothing by blocking.

Upvotes: 3

Related Questions