Change the Viewport, be Ready for the iPhone!

submit to reddit

Sites for mobile

Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.

This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

Twitter for mobile

How to make a site visible in mobile …

Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.

You can see how it’s made on …

The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!

Don’t scale my site anymore:

<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>

Related posts:

  1. Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites
  2. Speed up the JavaScript. It can change dramatically the user experience.
  3. PHP: Mobile Devices HTTP_USER_AGENT Strings

You are a GREAT developer? Click here to answer the weekly quiz!

This entry was posted in micro tutorial, web development and tagged , , , , , , , , , , , , , . Bookmark the permalink.

4 Responses to Change the Viewport, be Ready for the iPhone!

  1. lorence says:

    Do this mean that the site will be OK on mobile?

  2. Stoimen says:

    Yeah, check that out! You can easily test on mobile.twitter.com. The site’s looking just great. With m.digg.com things are even better.

    You can compare how it looks within a browser. However you can test a sample page by removing the tag I wrote about and you’ll see the difference!

  3. arko says:

    THAT WAS EXACTLY WHAT I WAS SEARCHING FOR

    THANKS DUDE

  4. j. valladares says:

    Thanks, very good.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">