Targeting Mobile

[Steve2106]

Hi There,

I use Web Designer MX for most of my sites. Can someone tell me if there is a way to convert my site to mobile.

I don't really want to re-write my site to target mobile devices and I was wondering if there is a way to use what I already have.

There are some other website building apps similar to Xara's but they have a mobile option too.

Thanks for the help.

Best Regards,

Steve.

[steve.ledger]

Can someone tell me if there is a way to convert my site to mobile.

If your site is currently considered unsuitable for mobile devices, you'll need to create one this is, there is no 'converter'.
However, MX has better support for mobile devices than previous versions. What's wrong with your current sites when viewed in mobile devices?

[gwpriester]

Generally buttons, text are too small on a mobile device. Navigating or clicking on linked text can be a real challenge. And a content rich website can overwhelm a site viewed using a cell connection. Even a fairly fast connection.

It is more work, but in the end it is worth the effort to create a mobile version of your site.

[steve.ledger]

Pinch-to-zoom. Fairly standard practice on all mobile OS devices (unless you possess the eyes of a Hawk) but most of us do not.

More food for thought on this topic of keeping things thin on the ground for mobile devices:
Data quotas on mobile services are becoming a (relatively) non-issue in recent times (the result of fierce competition). Common uses for Mobile devices amongst the greater demographic (teens) include Instagram, FaceBook and YouTube, both of which are about sharing (large) photos and videos.

Lite-cut-down versions of websites designed to fit neatly into the standard smartphone screen viewport without needing ptz, are generally regarded as bland, boring and content scarce.
Better technology for the purpose is 'Responsive Design'.. Sadly Xara Designer is not capable of this.

[pauland]

Pinch-to-zoom. Fairly standard practice - as a way of coping with unoptimised mobile sites - it's a compromise to make the sites usable, not an excuse to not produce a mobile-optimised site.

Data quotas on mobile services are becoming a (relatively) non-issue
That's as may be, but download speeds aren't helped by that.

Lite-cut-down versions of websites designed to fit neatly into the standard smartphone screen viewport without needing ptz, are generally regarded as bland, boring and content scarce.

Aren't generalisations wonderful (and misleading)? It all depends. People's web browsing is completely different on mobile and while a travel site might have nice pictures for desktop browsing, when I want to know train times on my mobile, I don't need pretty pictures.

Websites optimised for smaller factors, download quickly, can contain images optimised for the form factor and have easy navigation without messing around scrolling over a page you can only see a small part of and using controls that are clumsy on a mobile platform.

Pinch-to-zoom just doesn't do it.

[Steve2106]

Generally buttons, text are too small on a mobile device. Navigating or clicking on linked text can be a real challenge. And a content rich website can overwhelm a site viewed using a cell connection. Even a fairly fast connection.

It is more work, but in the end it is worth the effort to create a mobile version of your site.

Hi Gary,

Thanks for the reply.

I am willing to create a mobile version of the relevant pages of the site but what I do not understand is how to name the files on the host server.
When someone browses to the site using a desktop pc they go to index.html. If they browse using a mobile, how do I set what page to show for the mobile. It will not index.html

Thanks for your help.

Best Regards,

Steve.

[Brazen]

Hi Gary,
Thanks for the reply.
I am willing to create a mobile version of the relevant pages of the site but what I do not understand is how to name the files on the host server. When someone browses to the site using a desktop pc they go to index.html. If they browse using a mobile, how do I set what page to show for the mobile. It will not index.html
Thanks for your help.
Best Regards,
Steve.

Steve,

You can accomplish url redirects via the .htaccess file on your web server. You can dabble with mine if you wish (copy-n-paste into yours). It works on my hosting company's server, so should work for you. Basically visitors land on your default url (www.blahlah.com) and if conditions are met, redirected to a page in either another name, or what I prefer is located in another directory.

# Send send no-cache headers for root (/) and (.htm) files
SetEnvIf Request_URI "(^/|\.htm)$" HTML_FILE
Header add Pragma "no-cache" env=HTML_FILE
Header add Cache-Control "no-cache, no-store, max-age=0, must-revalidate" env=HTML_FILE
Header add Expires "-1" env=HTML_FILE
RewriteEngine On
# stop condition
RewriteRule ^mobile/.*$ - [L]

# tests
# ----------------------------------------------------
RewriteCond %{QUERY_STRING} ^mobile$
RewriteRule ^(.*)$ /$1?m [CO=is_mobile:1:%{HTTP_HOST},CO=disable_mobile:0:%{HTTP_HOST},L,R]
        # set cookies, redirect...
RewriteCond %{QUERY_STRING} ^full$
RewriteRule ^(.*)$ /$1? [CO=disable_mobile:1:%{HTTP_HOST},L,R]
        # set cookies, redirect...
RewriteCond %{HTTP_COOKIE} (^|;)\s*is_mobile=0
RewriteRule .* - [S=6]
        # skip past mobile rules...
RewriteCond %{HTTP_COOKIE} (^|;)\s*disable_mobile=1
RewriteRule .* - [S=5]
        # skip past mobile rules...
RewriteCond %{HTTP_COOKIE} (^|;)\s*is_mobile=1
RewriteRule .* - [S=2]
        # go to mobile rules...
RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]

RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]

RewriteRule .* - [CO=is_mobile:1:%{HTTP_HOST},S=1]
        # go to mobile rules...
RewriteRule .* - [CO=is_mobile:0:%{HTTP_HOST},S=2]
        # set cookie, skip past mobile rules...
		
# mobile rules
# ----------------------------------------------------
RewriteRule ^$ /mobile/index.htm [S=1,PT]
RewriteRule ^(.*)$ /mobile/$1 [PT]

Notice above (bottom of code) "RewriteRule ^$ /mobile/index.htm [S=1,PT]" and "RewriteRule ^(.*)$ /mobile/$1 [PT]". They point to my mobile index.htm file located in a sub-dir of my root named /mobile . "(/mobile/index.htm)"

The line up higher in the code "SetEnvIf Request_URI "(^/|\.htm)$" HTML_FILE" can be edited to set a default file extension variable (in BOLD) as well. I set it to .htm as both desktop and mobile pages use that extension.

Hope this helps....
Jim

[Steve2106]

Hi Jim,

Thanks for that, very nice of you to share your code.

I cannot see where to put the .htaccess file in my hosting space (I use "1and1" & "dotnetpark")

Thanks again for your help, I appreciate it.

Best Regards,

Steve.

[Brazen]

Oh...... if you use an FTP program, such as the freeware FileZilla, you can usually view, edit, and upload the .htaccess file. (it's hidden by default) This was in my default .htaccess file from the host provider but I checked it out and looks to be unix compatible which most servers run.

[Steve2106]

Hmm,

My hosting servers are windows based.