Giant thanks to Abi for the idea and for sharing her template. I translated our new eyeTricks website into a mobile site.
Scan the QR code with your smart phone and view the site in landscape orientation (sideways).
Printable View
Giant thanks to Abi for the idea and for sharing her template. I translated our new eyeTricks website into a mobile site.
Scan the QR code with your smart phone and view the site in landscape orientation (sideways).
Have any of the 106 visitors to this thread been to the website? And if so, any comments?
I don't know about any of the other 105 but I don't happen to have a QR reader on my phone, because I try not to use it for the internet too much.
I did scan your code on this page just to test it the other day.Quote:
Originally Posted by gwpriester
The result is the same as your other thread on my Galaxy phone.
For those interested in what happens when you scan a QR code via an app on a smart phone: The app starts your phone camera, focuses on the image and reads it.
If it reads it clearly then the URL is shown and a button to go directly to it.
Attachment 90361
Qr code worked fine and the site displays fine for me in portrait and landscape too.
I personally think QR codes are butt ugly. But they are very effective on a device which is very difficult to enter a long URL.
QR codes are excellent for a Realator to place on a for sale sign so the person driving by the house for sale can scan the code and go to a mobile designed site with photos and info about the home.
Good job GW, this is something I have been looking for for a while, a way to create a site with Xara that looks OK on a mobile phone. This site is better than the one we looked at earlier from abi, that one kept sliding left and right, not 'locked' in that orientation. This one is the most promising yet, as it seems more 'locked' in portrait mode and fits nicely into my iPhone screen. One slight hiccup with the android version is that it needed a refresh or double tap to get the page to fit and then it was very slightly wide for the screen, and this was a big 4.5 incher, but nicely 'locked' again after that.
I checked the source-code to see that you used Xara before i got too excited, as I was always hoping there was a way to get Xara involved in my mobile site creation. The menu works very well too, it looks like a great introduction to mobile sites on my favo(u)rite (BRIT living in USA) forum. Thank you for sharing it with us most Emeritus Dude, Sir. ( Too much to ask for details? or is this just a project or would you sell the template to us?)
Andy, it's simple to create your own page template for a mobile site (Gary used 346px wide page).
WD MX and DPX now include a meta to align the page to mobile viewports, which earlier versions did not.
Also, you say "android version is that it needed a refresh or double tap to get the page to fit "
That was not the case on my Galaxy S2 running Gingerbread.
Thanks Andy. Sledger, I have to tap twice on my Windows phone as well. This is not a perfect situation and it would be good if somehow a code could be added to automatically center the page in the mobile device.
Andymack - There is nothing to share that was not in Abi's template. The main thing is to design for the small screen as it were and to simplify when and if possible. A mobile device that has access to a WiFi network will work great. But if the device is using the mobile provider's network, it can be slow to very slow.
If you want to design a mobile site that will be viewed in landscape mode, then make the page width 480 pixels and this will fill the landscape screen of many mobile devices. It is not a perfect solution. Portrait is a better orientation but at the expense of image and text size.
Experiment is probably the best way.
Yes well, this is exactly why Xara's HTMLfilter now adds this on export:Quote:
Originally Posted by gwpriester
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
On load a page will open at 1:1 zoom and be top/left.
This is one of the new features of version 8 for mobile support.
So maybe it's the browser on your phone which is not understanding this meta?.
I use Opera mobile.
Portrait requires a few taps per page. But landscape loads fine. A Windows phone would naturally have IE installed.
This site worked and looked excellent(ly) on my Android phone. The QR code took me right there, the drop-down menu worked perfectly, and the look is great. I'm very impressed. (I did notice one typo, forget which page but there is a "so" where there should be a "some" or something very similar.)
Maybe I missed it, but we really need a tutorial on mobile web sites. (Unless I missed a lot) this is a big hole in Xara's capabilities. I'm sure the pages can be easily designed using Xara but at least I need to know how to identify when a mobile device is viewing and redirecting tips etc.
Mobile sites are very quickly going to be the standard with usage far outpacing sites reached via a computer.
Looking at Gary's own website, now mobile, this is so close to being really usable, it just needs a double-tap to fit it onto the screen then it is perfect. It then stays locked in position in portrait mode and does not slide left or right. The whole thing is nearly perfect, if we can only avoid the initial double tap. I know we are in good hands with GW, if anyone can get Xara to do something, it will be him.
sledger - Perhaps this explains why the the site fits perfectly into Landscape mode. Do you think this statement does not effect the Portrait mode and hence the need to tap twice?Quote:
Yes well, this is exactly why Xara's HTMLfilter now adds this on export:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I viewed this website on my phone with much anticipation that it would show well, but it has the same problem that i have with viewing the desktop version website i created (www.wellbeyond.com.au) - the text on my website and the text on the eye tricks mobile website do the exact same thing.... the text runs off the page and so the end of the sentances cant be viewed. My phone is Android 4 - ice crem sandwich platform Samsung Galaxy S3. I know they show OK with Iphone but not everyone has one of those. I was going to create another website but am reluctant to touch xara and do it myself until I was able to get it resolved. Anybody have an idea or somewhere they can steer me in the right direction to get the text issue resolved ?
p.s Ive tried making the text an image which works better but then i dont get search optimisation
cheers
Kristine
I am not sure how the Android phones work, but did you try viewing the site in landscape orientation?
Or in portrait did you tap once or twice on the screen to make the page fit?
Android doesn't use the same @fontface technic as desktop does or even Iphone/pad
This means if you use a (non websafe)font on your site it will be subsituted by the nearest websafe font,
which might be a larger/wider spaced font.
Therefor the text will run of the screen.
For more info http://www.fontsquirrel.com/blog/201...-face-problems
Hans
This is great that you guys are discussing Mobile options more frequently, we all agree it is more vital each day as more and more mobile devices are used for web browsing. One of my own clients commissioned me to create a Mobile landing page for his website and I am sure more will be doing so over the coming months. Anyhow, with the help of you guys here, I have created a mobile option for this customer and added a couple of snippets of code that (normally) takes iPhones and Android phones to the Mobile 'optimized' site automatically. I know it works for iPhones and iPads for sure but some Android tablets do not get redirected, which is not too bad, as the mobile sites actually a bit 'amateur'? on a tablet screen.
I also have a way to enable iPhones and Androids to actually view the full website without redirecting and getting stuck in a loop.
If anyone is interested in opening a permanent thread, of some sort, regarding Mobile options, I would be really interested in discussing this topic in greater detail. I would also be grateful if you can type in this URL ( or use the QR code) to see if your phone is redirected: www.omegagpstracking.com
Many thanks for your help with this.
Attachment 90750
Here is my QR graphic...
Attachment 90778
Look just like my QR code. ;)
The site works fine. Nice job.
A client of mine discovered that it does not matter how you hold your camera (portrait or landscape) to read the QR code. It must use the three corner squares to determine which way is up.
When I go onto a clients website (www.victoriabeautyilkley.com) (not created for a mobile phone) it looks perfect on my iphone in both landscape and portrait versions, it fits the window perfectly without having to double tap, the only problem is that the text is hard to read and you have to zoom in to view it, which got me thinking, if I create a website to say 800px (anything larger than the mobile browsers window (in iphone 4 at least) forces it to show the site fully fitted to the window) in width but have the text say at 24px and then view it on my iphone it looks and operates perfectly, combine this with the auto-detect for mobiles and you have the perfect solution. You just have to have all the buttons, text etc larger than the desktop version. I will try this and post up a link to the site.
If I am using the auto-direct script and it works perfectly and takes a person viewing the site on a mobile device to the mobile version of the site and I want to put a button for people who wish to visit the full website om their mobile, will the script not take them back to the mobile site again, in effect they will be stuck in a loop., any way around this?
That was my thought on this script and why I have not used it.
You're right about the aspect ratio. I looked at the site on my Nokia Windows 7 phone and it works perfect in each orientation.
I was thinking that the script is present on the index.htm page of the main website so how about linking the 'full website' button on the mobile site to another page, maybe a duplicate of the home page but called 'homepage' instead of index.htm with the script on it. or would the script pickup the auto-detect when the visitor clicks on the home page again.
I thought about creating my mobile website as a seperate cut down site creating a sub-domain of my main domain i.e. http://mobi.fineceramictiles.co.uk, graphic rich with sparse text but links to main full size site
And you were saying everyone has 17" monitors. ;)
But your site would adapt well to the small screen.