mobile web site design question

python01 · 13th Jun 2012, 11:05 AM

I am working on small mobile website.
The issue I have is with the width of the page.
When I set the width of page to 320px and i test it on my phone which has screen
resolution of 320pixels by 480 pixels the page looks very small, when I set it to 800 it feels the screen. I am using <body style "width:800px">
Why is there the difference?i thought that for this phone 320 would fill the whole screen

Jay Moreno · 13th Jun 2012, 02:48 PM

don't use the body tag like that just leave it as <body>

instead put the following snippet in your header before the </head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

Then take a look at your site on your phone...

If you dont set the viewport width as above with that meta tag what happens is it sets the viewport to display a width of 980px which makes your intial <body width = 320px> take up about a 3rd of the the screen... likewise with the 800px wide its taking up a much large portion of the screen which is what you where experiencing.

For a really good explanation of the use of viewport check this out:

https://developer.apple.com/library/...eViewport.html

Hope that helps

Cheers,

Jay

python01 · 14th Jun 2012, 07:03 AM

Jay,
Thanks for great explanation.
Since now my Web page will adjust its width to the device is there a way to actually read the width so I can also adjust picture sizes for each device?

MarinaMary · 19th Jun 2012, 09:59 AM

I have designed mobile sites and am currently in the process of finding a mobile site design with a CMS backend. I have heard alot of discussion about mobile sites lately, as alot of people are now getting iPad (and other jabroney tablets) and are realizing that thier company website looks like crap on it. More so the companies that have flash website, like architecture and engineering firms.
And I know I would resell a product like that. Especially if it makes my life easier.

JohnE · 19th Jun 2012, 02:20 PM

Originally Posted by python01

Jay,
Thanks for great explanation.
Since now my Web page will adjust its width to the device is there a way to actually read the width so I can also adjust picture sizes for each device?

Hi Python01,

One way to adjust the picture to fit the width of a mobile device is to set its width to 100% (height to "auto") in your CSS code, with 320px as the actual width of the image.

The one issue with this is that for devices with wider screens, the image might stretch to the point where its quality starts to suffer, ie, the image becomes blurry and simply doesn't look professional; especially since, to begin with, images are reduced to a bare minimum size-wise (bites) so that they load fairly quickly on a mobile phone.

A way around the issue is to set a "max-width" to say 500 or 600px (along with the 100% for the "width"), depending on the original quality of the image. For devices with wider screens, the image won't stretch any further than the set "max-width". Example CSS code:

width: 100%;
height: auto;
max-width: 500px;

This way you'll cover the vast majority (if not all) of smart-phones.

Hope this helps,
John

Jay Moreno · 19th Jun 2012, 03:22 PM

Originally Posted by python01

Jay,
Thanks for great explanation.
Since now my Web page will adjust its width to the device is there a way to actually read the width so I can also adjust picture sizes for each device?

As John mentioned you can use css to scale the image, the only downside to this as John has also already mentioned is that you have to rely on the phones processing power to do the scaling. Depending on the size of the original image it shouldn't be too bad if you have optimized the image ready for mobile.

Another option you can look at it if you want to get a little technical is to use a framework to render your images - if your interested take a look here...

Sencha Docs - IO 0.3.3

cheers

jay

13th Jun 2012, 11:05 AM	#1
python01 Warrior Member Join Date: 2012 Posts: 19 Thanks: 1 Thanked 0 Times in 0 Posts	mobile web site design question Share on: I am working on small mobile website. The issue I have is with the width of the page. When I set the width of page to 320px and i test it on my phone which has screen resolution of 320pixels by 480 pixels the page looks very small, when I set it to 800 it feels the screen. I am using <body style "width:800px"> Why is there the difference?i thought that for this phone 320 would fill the whole screen

13th Jun 2012, 02:48 PM	#2
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,271 Thanks: 301 Thanked 449 Times in 309 Posts	Re: mobile web site design question Share on: don't use the body tag like that just leave it as <body> instead put the following snippet in your header before the </head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> Then take a look at your site on your phone... If you dont set the viewport width as above with that meta tag what happens is it sets the viewport to display a width of 980px which makes your intial <body width = 320px> take up about a 3rd of the the screen... likewise with the 800px wide its taking up a much large portion of the screen which is what you where experiencing. For a really good explanation of the use of viewport check this out: https://developer.apple.com/library/...eViewport.html Hope that helps Cheers, Jay
	Sorry, I am too busy helping people to think of a cool signature!

14th Jun 2012, 07:03 AM	#3
python01 Warrior Member Join Date: 2012 Posts: 19 Thanks: 1 Thanked 0 Times in 0 Posts	Re: mobile web site design question Share on: Jay, Thanks for great explanation. Since now my Web page will adjust its width to the device is there a way to actually read the width so I can also adjust picture sizes for each device?

19th Jun 2012, 09:59 AM	#4
MarinaMary Warrior Member Join Date: 2012 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts	Re: mobile web site design question Share on: I have designed mobile sites and am currently in the process of finding a mobile site design with a CMS backend. I have heard alot of discussion about mobile sites lately, as alot of people are now getting iPad (and other jabroney tablets) and are realizing that thier company website looks like crap on it. More so the companies that have flash website, like architecture and engineering firms. And I know I would resell a product like that. Especially if it makes my life easier.
	Machines