Mobile Template

**jamesd** · 07 March 2013, 08:33 PM

Hi, I have been trying to create a page that works well on moblie phones without having to use pinch-zoom in portrait or landscape.
Here is what I came up with, you can preview it here.
I have attached the .xar and I would be delighted if anyone was to use or change as they please

.
It is not perfect and could do with some tidying up. It is 320px wide has named colours and a site navigation.
Works well on my Galaxy S2, tested it on a mobile emulator(but I find they are not always accurate) so comments are welcome

.

ps. If you are adding more pages make the nav layer visable and then hide it when finished adding pages, there seems to be a glitch in the push feature

**steve.ledger** · 07 March 2013, 09:04 PM

Looks great for phones James. Good job.
Tablet/iPad users will probably still zoom?

**Egg Bramhill** · 08 March 2013, 12:21 AM

Hi James,

Creating sites for mobiles is a nightmare.

For years we had to create sites at 480 x 640 and had internet speeds of dial-up standards and file sizes had to be kept to a bare minimum.

Slowly most of us got broadband and had monitors capable of 1024 x 768 minimum displays and suddenly all of the above restrictions were removed. Valhalla.

Then some prat came along and decided it would be great to access the internet on a screen the size of a credit card.

So we've had to go all the way back to the beginning. No roll overs, no images above the size of a gnats ****, no Flash, no drop-down menus, no javaScript etc etc. All so some spotty faced youths who have never had to wear a pair of glasses in their lives can view your site on their iPhone!

But seriously, mobile sites are not generally viewed over wi-fi connections. Users have to pay data charges to download your pages so try not to use images etc etc.

Test out your site performance on sites like:

http://http://validator.w3.org/mobile/

http://http://ready.mobi/launch.jsp

This will all change next month/year/decade so nothings set in stone but this is where we are today

**FrankSA** · 08 March 2013, 10:16 AM

Thanks James
Just what I was looking for. Can anyone tell how to include a script which detects if you are on a mobile device, and switch you onto the right page? (Main or Mobile website)

**FrankSA** · 08 March 2013, 10:50 AM

Just found this PHP script whic should work like a charm. Detects Phones and tablets.
http://mobiledetect.net/

//Frank

**CPIbruce** · 08 March 2013, 03:05 PM

Wonder if you could put the mobile code into the HTML. looks like a useful template!

**Cloud** · 08 March 2013, 05:39 PM

You can do the following:

Paste the following script into the <head> section of a placeholder (Web Properties> Placeholder> HTML code (head) simply replace the green text with the url of the mobile site

<script type="text/javascript">

</script>

Or for iphone/ipods/ipads use this code

<script language=javascript>

</script>

**TXAlba** · 09 March 2013, 03:00 PM

Great thread to bookmark

i have checked the site and on my HTC Wildfire i still have to scroll left to see and use the menu. Perhaps the menu would be better on the left.
Also checked wifi and not;when not on wifi the site takes an age to load the images but then im not in even a 3g area.

**jamesd** · 09 March 2013, 06:48 PM

@ Sledger - Thanks for the compliment

I think most websites display fine on Ipads and Tablets in landscape so this is more for smaller devices

@ Egg - Thanks for the links to the mobile validators, I think it is hard to do a page optimised for mobile using xara. I done a test with just a text link nav and some text on a page no images at all and ran it through those validators and it still got low marks

. I think Xara will have focused on this for the next release.
I remember when I got my first smartphone it was before I done anything with websites so I didn't understand kb, I think my phone provider was charging 0.2c per kb of data at the time. When I got my first bill it was €450

, I quickly learnt not to use the phone to browse the internet unless I had a wifi connection

. Now I can get 1gb of data for €5 per month and if you are on pay as you go it is free for 30 days when you top up by €20. Even public transport is supplying free wifi, so I think the days of people paying a high premium for data connection are on the way out

@ Tx200man - I changed the viewport meta data it looks fine on the emulator see it here I have also attached the file

@ Skech - Thanks for the redirect code

**Egg Bramhill** · 10 March 2013, 02:29 AM

Hi James,

@ Egg - Thanks for the links to the mobile validators, I think it is hard to do a page optimised for mobile using xara. I done a test with just a text link nav and some text on a page no images at all and ran it through those validators and it still got low marks

ME - I also believe mobile validators are very suspect or outdated re the current mobile optimization but it's still worth considering their findings. I often find the same using Joomla Mobile cms sites, the resultant scores are very disappointing but the site loads perfectly.

I think Xara will have focused on this for the next release.

ME - I'm sure they will, if not they're missing the boat and Xara as a web site designer will disappear.

I remember when I got my first smartphone it was before I done anything with websites so I didn't understand kb, I think my phone provider was charging 0.2c per kb of data at the time. When I got my first bill it was €450

, I quickly learnt not to use the phone to browse the internet unless I had a wifi connection

. Now I can get 1gb of data for €5 per month and if you are on pay as you go it is free for 30 days when you top up by €20. Even public transport is supplying free wifi, so I think the days of people paying a high premium for data connection are on the way out

ME - Couldn't agree more. A lot of my early sites were created using Flash to keep file size down to a bare minimum but over the years these restrictions reduced and the need to keep file sizes to a minimum slowly reduced. However that's the point I was trying to emphasis that with the advent of mobiles, file size did suddenly start to matter again. I'm sure it will disappear within 12 months knowing the advancement of the web but we're not quite there yet.

Another big issue we're going to have to face is DPI. We're all used to a 96 dpi Windows Standard (a 72dpi Apple Standard) which has remained unchanged for quite a few year now and we've all become happy working with this (these) resolutions. However the iphone 5 is capable of 326 pixels per inch and I believe the latest Samsung is going to reach almost a thousand pixels per inch, so how to create web site from there.

My eyes are getting old, I sit round my daughters and watch a movie in HD. Looks exactly like the old film to me! Goes over my head.