Seamless redirection of mobile, tablet and desktop devices
Yeah - we should all be building fully responsive websites by now - a single website that is seamlessly compatible across the board with all desktop and mobile web browsers.
However the reality is that this simply isn't always feasible to do for a variety of valid reasons. Sometimes a need arises whereby we have to differentiate between mobile, tablet and desktop visitors; and provide all with separate websites to view. It might be because there's an incompatibility in a webpage that we have no control over, or that we simply want to give mobile and tablet users a better experience - or cater better for their specific needs.
The Mobilize stack is a simple method to ascertain whether a person landing on a webpage is using one of three devices; a mobile, a tablet or a desktop web browser. You can then create links to redirect those users to alternative webpages or entire websites.
Mobilize was originally created by Nimblehost as a page type plugin for RapidWeaver; in the early days when the iPhone and iPod Touch had first hit the market. This was long before the idea of responsive or adaptive web design came in existence. Because most people are now using the Stacks plugin for RapidWeaver, we've rebuilt Mobilize as a new stack element. However there is still a 'Generate Mobilize Code' option in the stack, which will let you generate a code snippet for use on almost any RapidWeaver page type.
Follow these instructions for setting up Mobilize on a single webpage, like your homepage:
- Change the page extension to .php in the RapidWeaver Page Inspector
- Drag and drop a copy of Mobilize from your Stacks library into the page
- In the stack settings, choose whether to configure Mobilize for use on a mobile, tablet or desktop webpage
- Use the mobile, tablet or desktop options to create your redirects to different webpages or websites
- Provide the full, absolute URL (e.g. http://www.example.com) to the webpages you want to redirect users to
- Export your project to MAMP or publish to a live website to ensure Mobilize is working as expected
Tip: If you want to reuse the same Mobilize stack over all pages of your website (and you're using Stacks 3 for all pages of your website) you can setup Mobilize as a 'partial'.
Follow these instructions for setting up Mobilize on a non-Stacks page: Please note that the stacks plugin is still required for the initial setup. You can download a free demo version here.
- Follow the above instructions (steps 1 - 5) for adding a Mobilize stack to a Stacks pages and configuring it accordingly
- In the stack settings, click on the Generate Mobilize Code option
- Preview your webpage in RapidWeaver. You will see a box containing some custom PHP code. Copy the code to your clipboard
- Paste the code into the Settings > Code > Prefix box, in RapidWeaver.
- Go to http://mobiledetect.net/ and download the Mobile_Detect.php file. Uplaod this to a location on your web server
- Update line #2 in the generated Mobilize code to point to the Mobile_Detect.php file you've just uploaded
When setting up your redirect links, take particular care to avoid users getting stuck in a redirect loop! For example, don't redirect mobile users from a desktop website to a mobile website, and then have a Mobilize stack on the mobile website that sends them straight back to the desktop website. In such situations, it is quite probable the web server will throw an 'error 500' message or the web browser will display an error about there being too many redirects happing.
An example test website has been published here. It contains three webpages - mobile, tablet and desktop. Depending on what web browser or device you view the website from, you will only be able to access one or the three pages listed. More information is displayed on the demo site homepage.
How do I setup separate mobile or tablet versions of my website?
Borrowing from other websites like Google and Facebook, these websites have created subdomains like https://m.facebook.com/. You'll notice the letter 'm' before the domain name, which denotes that this is the mobile version of the website. Popular news websites have done the same. So with this in mind, you need to login to your web hosting control panel (like CPanel) and setup a new subdomain for your website. Into this subdomain you can then publish the mobile and / or tablet versions or your website.
Why do we have very broad detection of devices and not lists of individual devices like iPhone, Kindle, Firefox OS?
Simply because there are so many thousands of mobile and tablet devices on the market that all go by different names. Quite often the hardware and software these devices use is shared out over multiple screen sizes and types. A prime example of this problem is Firefox OS - which comes in multiple flavours and is often seen on smartphones, tablets, netbooks and even smart TVs. So to assume Firefox OS was only for smartphones would be wrong.
In Mobilize, we use powerful algorithms to detect mobile, tablet and desktop browsers reliably, based on several factors. We do not simply classify a device on a single factor like user agent, OS, or screen size. Several factors are taken into account, before a browser is placed into the mobile, tablet or desktop category.
Of course there always will be instances where a browser cannot be detected for one or more reasons. A user might have jail-broken, un-rooted or hacked their device to change important settings. It might even be a totally new device that is unrecognised in all the current tests. In such instances, the user would just see the desktop version of the website, as a fail-safe.
This stack requires RapidWeaver and the YourHead Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 6 or greater) and Stacks 3 or later.
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.
This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.
You may not resell or make this stack available for download, remove copyright credits or license information.
The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.
All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).
You are reminded to make use of the free demo version already provided on the website, to fully evaluate this stack for compatibility and suitability before purchase.
If you have questions that relate specifically to this stack, you should make contact via the support page. We aim to answer all messages within 12 hours, Monday to Friday.
If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Free demo versionsWe provide free demo versions of all our stacks, so you can try before you buy! In the free demo's, automatic updates are disabled, a credit is displayed below the stack, and the stack fades out of view after 60 seconds. There are no trial expiries or disabled features. Buy with the confidence of knowing what you're getting.
What is a Stack?A stack is a drag-and-drop component you can add to your webpages. These individual stack elements can be used to quickly add extra layout or functionality. Stacks work inside the Stacks plugin by YourHead software; an extremely popular plugin for RapidWeaver.
Learn more >
Customer supportQuestions, feature requests, bug reports, or advice required about our stacks? No problem, we're here to help you. Fast and friendly expert support direct from the developers. No lousy FAQs, canned responses, complicated ticket systems or outsourced support agents here!
Learn more >