Building a Mobile Website “the EASY way”

Building a Mobile Website “the EASY way”

by Dave Curtis on 08/28/2014 · 1 comment

in Mobile,Mobile Search

A Good FREE Mobile Site Option Is The WPAppTouch Plugin for WordPress

First let me make clear to those of you who are clients and not developers, coders or SEOs that practically nothing we ever do works properly right out of the box the first time around as promised by the site ads, and as with anything new, what we think will take five minutes requires an initially frustrating learning curve requiring five days instead. This isn’t deception on the part of the developers, it’s just that they’re so familiar with the ins and outs of the product and all of its feature sets that they forget what a learning curve is involved. So that said, here goes for the rest of us:

I used to create mobile friendly sites by installing (but NOT activating) the WordPress Yoko theme and replacing the default header image (via FTP) with one more representative of the site or business I was working on. Then I installed the wpapptouch plugin and chose the Yoko theme as the mobile theme. There is a set of instructions on just how to do that with the wpapptouch plugin.  Once the wpapptouch plugin is properly configured and activated the site then goes mobile for mobile devices only. Desktop users never see it.

One problem with the wpapptouch plugin though is that it uses your own server’s limited resources and the images from your site. This causes issues because of mobile data bandwidth download speeds still downloading large images from your server’s actual location. What would work better is if multiple caching servers placed throughout the nation were delivering mobile optimized content as close to the location of the device as possible to reduce router hops and bottlenecks due to network congestion. I can’t give you any precise instructions on this setup but it does work fairly easily as long as your site is straightforward and doesn’t have all kinds of wonky code added to it.

The Solution I Prefer is the Easy to Install, Inexpensive & Robust Mobile Site Generated by DudaMobile

DudaMobile – the “(Mobile) Site for Life” option

30-day-money-back-duda-mobileThere are a few plans here, one is for a full site and mobile site, but if you already have a site you don’t need their full site option, just the mobile. Using DudaMobile http://www.dudamobile.com/ takes just a few minutes to set up an account, and then it does the whole site on its own in under a minute for the free demo you can share.

While this first test drive has plenty of color scheme options to choose from, the really cool part is that it’s flexible in that you can create a whole new front page for your site just for mobile visitors. This is important because your desktop version of the site may be using some technical things like iFrames, image mapping, post and page embeds, sidebars etc (think the desktop version of “Facebook” on your phone – way too much for your little screen) – then think just how much work, overtime, headaches, and hair pulling sessions your non programmer webmaster or SEO is going have making everything play nicely with the mobile page.

As a word of warning, there’s a WordPress Plugin that’ll do a redirect for you, but it didn’t work for me. There’s another method I tried using some javascript in the header which also didn’t work. There are a few other suggestions to insert code directly into the index.php etc – which I didn’t do because they had something that works via the .htaccess file via the rewrite engine – which is the way to go for me so I did it that way. The code is simple and straightforward and all you need to do is place it within your existing .htaccess (after you first backup your .htaccess file!!) without deleting anything. It looks like this:

######### Set cookie for users who return to desktop site
RewriteBase /
RewriteCond %{QUERY_STRING} no_redirect=true [NC]
RewriteRule ^(.*)$ - [co=dm_show_classic:true:.example.com:7200:/]
# check no 'dm_show_classic' cookie is set
RewriteCond %{HTTP_COOKIE} !dm_show_classic
# check if no_redirect was sent in the url
RewriteCond %{QUERY_STRING} !no_redirect=true [NC]
# check if the user agent matches supported mobile devices
RewriteCond %{HTTP_USER_AGENT} ((.*iPhone.*)|(.*iPod.*)|(.*BlackBerry.*)|(.*Android.*)|(.*webOS.*)|(.*Windows\ CE.*)|(.*IEMobile.*)|(.*Opera\ Mini.*)|(.*Opera\ Mobi.*)|(.*HTC.*)|(.*LG-.*)|(.*LGE.*)|(.*SAMSUNG.*)|(.*Samsung.*)|(.*Symbian.*)|(.*Nokia.*)|(.*PlayStation.*)|(.*PLAYSTATION.*)|(.*Nintendo\ DSi.*)|(.*TMO-US_LEO.*)|(.*SEC-SGH.*)|(.*BB10.*))
# check if the request isn't for a static file
RewriteCond %{REQUEST_FILENAME} !\.(jpg|gif|png|css|js|txt|ico|pdf|bmp|tif|mp3|wav|wma|asf|mp4|flv|mpg|avi|csv|doc|docx|xls|xlsx|ppt|pptx|zip|rar|tar|gz|dmg|iso)$ [NC]
#### If empty query string then no need to include it ##############
RewriteCond %{QUERY_STRING} ^$
# extract the current page url including the query string
RewriteCond http://%{HTTP_HOST}%{REQUEST_URI} ^(.*)$
# redirect the request to mobile domain and pass the page url as a parameter
RewriteRule ^(.*)$ http://mobile.dudamobile.com/site/your-site-name?url=%1 [R=302,L]

In the case of the above code redirecting to “http://mobile.dudamobile.com/site/your-site-name” you can use an m. alias if you have access to the hosting server and do a full traditional redirect via that means to m.yoursite.com instead. (further advanced dudamobile redirect instructions)


JUMP ON THE BRANDWAGON

DudaMobile uses Amazon related Content Delivery Network server services and has put together a nice mobile site creator plan

dudamobile-site-for-life-dealTheir site does get a bit confusing with a flurry of various offers that may seem to overlap yet be very closely priced – and someone who isn’t a webmaster or an SEO would have a hard time understanding the differences – the more you dig around before deciding, the more confused you may become (I certainly was at first – and this is what I do for a living!). On one tab there’s an annual fee of $7.50/mo (annual plan) and on another tab what looked like the same plan was $7.20/mo – anyway, to avoid any confusion about signing up for the Site For Life offer and not getting stuck in a “Sorry, you can’t get there from here” situation I emailed DudaMobile.com for support and asked about the Site for Life plan and told them I was only interested in Mobile and here was their reply:

The $299 site for life offer is available for DudaOne sites, and there’s a $159 site for life offer for DudaMobile sites you’re welcome to use if you choose. You can upgrade to either one by selecting the ‘site for life’ option when upgrading your site either from the editor’s “publish” button or the “upgrade” button on your dashboard at my.dudamobile.com

 

That also confused me (sorry – I’m a good reader and it says I can “upgrade” – I’m not thinking of a server asking me if I want to supersize that order (in advance of placing the order) but of purchasing and THEN upgrading. So I asked for further clarification:

“Can I just do it from the start and not have to go for the $7.20 a month and upgrade it? …and this was what was done – a link to a video they made just for me to show me how to do it from scratch without first signing up for any other plans: (sorry for the poor audio quality)

So whether you’re a business owner with a website and you yourself fee that your site needs to be made mobile (if it isn’t already mobile friendly then it does), or if you’re an SEO or Webmaster who wants to start selling mobile websites (and suggest this to current clients) this is the best plan I’ve seen to date.

One last word. Google looks for mobile site content too and definitely rewards businesses with mobile sites with higher rankings to mobile searchers. Getting mobile and getting ranked means ranking higher and bringing in even more mobile visitors than before, and with better conversion and transaction rates. I’m not a re-seller or affiliate of DudaMobile, but after working with this service for a while I’m seriously considering it.

Previous post:

Next post: