[anniebrion]

I've just got myself a Nokia Lumia 620 smartphone and noticed my website looked a little odd when viewed on the phone The font size seemed to have a mind of its own

Anyhow after a bit of a google session I have hopefully managed to get the site usable on mobile browsers (optimised for landscape 800x480 or bigger).

The site should now render with bigger fonts when on a mobile browser so it is easier to read.

As I only have one mobile browser could people please test with their devices and give some feed back.

Thanks.

URL: http://abcde.co.uk/

[albertd]

Looks OK using Safari on an iPhone 4.

[anniebrion]

Originally Posted by albertd

Looks OK using Safari on an iPhone 4.

Great Thanks.

Does the contact page have a map on it as I have removed some content to keep bandwidth down a bit for mobile users

[albertd]

Originally Posted by anniebrion

Great Thanks.

Does the contact page have a map on it as I have removed some content to keep bandwidth down a bit for mobile users

It did when I first looked, but the map is gone now.

Still comes up on Firefox under Vista.

[anniebrion]

Originally Posted by albertd

It did when I first looked, but the map is gone now.

Still comes up on Firefox under Vista.

Brilliant, thanks, I just added the code to remote it for mobile browsers.

The site has more eye candy when on a desktop Though most is plain text with CSS3 to tart it up ie. the site logo

[lettice]

On an iphone/ipad it does not show the map but a link 'FIND US ON GOOGLE MAPS', but if i change the browser id to firefox 17 windows it shows the map integrated.

It does the same with a Nexus 7 browser id.

[anniebrion]

Originally Posted by lettice

On an iphone/ipad it does not show the map but a link 'FIND US ON GOOGLE MAPS', but if i change the browser id to firefox 17 windows it shows the map integrated.

It does the same with a Nexus 7 browser id.

Great, thanks for testing.

[JulesandSand]

It displays OK on my HTC One X, the map is shown as a link.

[anniebrion]

Originally Posted by JulesandSand

It displays OK on my HTC One X, the map is shown as a link.

Thanks, I also tested on an iPad3 and it looks good.

I'm glad the change was not too painful, I borrowed the mobile detection php code and that looks to be good

[JulesandSand]

Originally Posted by anniebrion

Thanks, I also tested on an iPad3 and it looks good.

I'm glad the change was not too painful, I borrowed the mobile detection php code and that looks to be good

I've no idea what you just said but I'm glad it's working for you!

[s2k]

Formatting looks alright...wouldnt say the text size was notably large but no real need to zoom and if I do it basically all adjusts. The button images dont show up though, not sure if this was intentional or due to the browser not supporting fancy scripting.

No map is displayed but there is a text link which prompts to open in one of 3 things.. if I choose maps it shows up as snakey lane.

Using the standard browser that comes with Android (not Chrome).

[anniebrion]

Originally Posted by s2k

Formatting looks alright...wouldnt say the text size was notably large but no real need to zoom and if I do it basically all adjusts. The button images dont show up though, not sure if this was intentional or due to the browser not supporting fancy scripting.

No map is displayed but there is a text link which prompts to open in one of 3 things.. if I choose maps it shows up as snakey lane.

Using the standard browser that comes with Android (not Chrome).

Thanks for testing, the graphics have been removed to minimise bandwidth for people not using wifi. The graphics should appear on desktop browsers as they will mainly have less bandwidth restrictions.

I changed the text size to 24pt for mobile as on my WP8 the text was very small and hard to read without zooming, desktops get the font at 12pt.

[flagpole]

opera has the ability to show you how it renders in opera mobile.

most phones adjust the fonts to keep them above a certain minimum level.

[anniebrion]

Originally Posted by flagpole

opera has the ability to show you how it renders in opera mobile.

most phones adjust the fonts to keep them above a certain minimum level.

I don't have opera installed so cannot test on that, plus opera is changing its engine so I'm not too bothered about testing on opera mobile.

I found the resizing of fonts by the browser to be hit and miss so decided to turn this off using CSS.

[flagpole]

there is a meta command to disable zooming

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


<meta name="viewport" content="width=device-width" />

but it can be over ridden.

[anniebrion]

Originally Posted by flagpole

there is a meta command to disable zooming

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


<meta name="viewport" content="width=device-width" />

but it can be over ridden.

Thanks, I use:

text-size-adjust:none;
-moz-text-size-adjust:none;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;

[flagpole]

Originally Posted by anniebrion

Thanks, I use:

text-size-adjust:none;
-moz-text-size-adjust:none;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;

it'll works perfectly and looks nice in chrome on my nexus 7. but i can resize it.

[anniebrion]

Originally Posted by flagpole

it'll works perfectly and looks nice in chrome on my nexus 7. but i can resize it.

I don't mind the site being resizeable it was the mobile browsers resizing some of the text but not all that caused a problem.

Thanks for testing.

[tealady]

OK on skyfire, but more of a desktop view.
Do we get a discount?

[anniebrion]

Originally Posted by tealady

OK on skyfire, but more of a desktop view.
Do we get a discount?

Thanks and no

[Magic Cottage]

All looks fine running Chrome on my ICS smartphone.

[anniebrion]

Originally Posted by Magic Cottage

All looks fine running Chrome on my ICS smartphone.

Thanks, looks like the mobile device detection ode is OK and the HTML5 compliant coding makes it work as expected on all devices