Mobilize Your Website Today

Options for creating mobile versions of your websites.

By Kevin RR Williams

BLOGGING This blog primarily focuses on health. A source of stress for many bloggers is the loss of visitors because of incompatible browsers. In the past month, nearly half (46 percent) of the visits to this site have come from mobile devices. Two thirds of that number have been smartphones. Until now, mobile compatibility for this blog has relied on the Safari Reader button or perseverance of the visitor.

An article by fellow blogger Lilach Bullock at Sociable in the UK helped realign my search for a viable mobile version of this site. [1] A seamless solution is preferred. Ideally, this means the site detects a smaller device and adjusts accordingly.

Weigh Advantages of Different Methods

It is possible to provide a mobile page without extra monthly fees by simply enabling a button somewhere on the page that saves a user preference (if cookies are enabled). This option uses the same content but applies a different style sheet. One downside is that more content, including larger graphics, may load into the smaller device and slow page access. Modern smartphones usually scale Web pages to fit their screens. This brings up another drawback. That tiny page can make a manual link more difficult to find. Users can leave a page without ever realizing the optimized link exists.

Mobile site development should also take into account the different behaviors of visitors. Google identified three main categories: 1. Repetitive Now (seeking recurrent data), 2. Bored Now (seeking distraction or entertainment), 3. Urgent Now (seeking location data, e-comerce, or reviews). What is important to a mobile user may differ from that of a desktop visitor. [2]

A distinct advantage of either manually selected or automatic detection of alternate style sheets is preservation of original links. In contrast, managing duplicate pages with different URLs has the potential to cause confusion when visitors bookmark pages, pin images, or visit your site from search engine result links. You will need to manage device-specific redirects. Keep the disadvantages of alternate URLs in mind when considering mobile options.

Your Site Could Be Mobile Today

Looking for easy, inexpensive solutions? Implement the dual stylesheet method by adding some javascript to your pages. Visit theSiteWizard to snatch the code. The hardest part is reconfiguring the template pages and alternate CSS. In general, page widths and font styles are best expressed in percentages rather than fixed pixel dimensions. Graphic elements dependent upon hovering cursors (prominent here) are depreciated on touch devices.

CSS stands for Cascading Style Sheet. Rather than formatting elements locally (inline), one or more separate pages contain the page markup. This makes it possible to alter the CSS page and have the entire site (or specified pages therein) updated.

WordPress plugins abound. Since ClinicalPosters.com is not a WordPress site, I provide no objective comparisons of the five listed by Sociable: WPTap, MobilePress, Duda Mobile Website Builder, Responsive and WPtouch Pro[1] Some site themes include mobile CSS so check before adding a redundant plugin.

I did investigate some services that convert content into miniature versions of themselves. The Winksite homepage does not describe the process up front. You must create a free account and go through the steps of building one or more pages to find out. It provides some social media integration. Content for the alternate URL it creates is provided through RSS feeds. You can upload your logo, a background, and select compatible colors fairly quickly. If feeds are truncated, the same is true for the mobile site. A link is included to continue reading on the original full-size page that is not formatted for the device. I built a simple sample site if you want to take a look. When visiting from a desktop device, the mobile version is graphically simulated.

Free for personal use, Wirenode also uses alternate alternate URLs for mobile pages from separate content; it does not appear to be pulled from an existing site. The five pricing tiers rise to $259 per month. You can host content yourself on a subdomain or have Wirenode host the site(s) for you. Sample layouts do not appear to offer any advanced HTML features and look somewhat outdated.

Through GO MO, Google offers free mobilization with styles similar to Wirenode[3] Choose a template. Add text and widgets. Pick a color.

The free option for MoFuse is a limited-time trial but monthly fees begin as low as $8 for 1,500 page views on one site. Within five tiers, prices rise to $199 for large organizations with up to 5 sites and 1.5 million page views. [4] Though not specifically mentioned, it is logically assumed that page counts are limited to activated mobile devices and exclude desktop page views. All plans include email support. The premium plan also includes phone support. If you aren't comfortable editing HTML, the company can provide customization for a fee. This service also employs alternate URLs.

A Little Exciting News

I spent about two days editing CSS and integrating this site with Mobify[5] To be clear, you can get a few pages or standard layout across all pages up and running within an hour. Rather than using RSS feeds, Mobify actually optimizes code and and images dynamically. Select which parts of the page you wish to appear and, without changing the URL, the viewer is presented with an optimized mobile page from a server in close proximity to the smartphone issuing the page request for improved response. Support for e-commerce solutions is available. In most cases I have omitted sidebars to shorten page depth. An optional checkbox can serve mobile sites to tablets with no difference in smartphone layout other than increased visible width. (Would you like it activated here? Let me know in the comment section.)

The Mobify implementation appears to offer comprehensive options but a knowledge of coding is highly recommended. To go beyond the few basic layouts, you will be typing in hex values for colors and editing style sheets. This will be an obstacle for most users. Mobify is trained by the user to redirect classes of div tags. The interface makes selection relatively easy. You then locate the corresponding class within the original CSS and modify the style sheet presented within the Mobify site studio. If you change CSS for the main site in the future, you will need to update Mobify. It can even support HTML5 standards. [6]

Blog: There's More to Disqus

Disqus Javascript supports mobile devices. However, Javascript code does not appear within the Mobify site studio by default. With better knowledge of js.query or Zepto.js, specific scripts can be enabled. Mobify documentation is a bit vague. An email for assistance returned with a solution to activate Disqus.

function () {
    $scripts = $('script').remove();
    return $scripts.filter(function() { return this.outerHTML.indexOf("disqus") > -1 });
}

The free option includes Mobify branding and offers a generous threshold of 100,000 monthly page views and 10 adaptive templates for one site. It can be deployed on WordPress sites. Support is provided through a blog and weekly webcasts. If you require more support, need up to 1,000,000 views or more than 10 templates, you may be stymied by the next tier. There currently is nothing in between free and $995+ per month. Fortunately, most bloggers fall into the free category.

Best Options for Mobile Sites

Mobify might not be the most expensive solution—at least not up front. Sitefinity charges a one-time standard licensing fee of $1,999. Professional edition costs $7,999. Enterprise and multisite editions require custom quotations. This buys you device-responsive layouts supporting broad mobile strategies that include e-commerce. Of those mentioned, Sitefinity offers perhaps the most advanced page options. There's a developer marketplace for extensions, controls, modules, themes and templates. It integrates with many corporate servers including ASP, .NET, CMS and SQL. So let's just say that Sitefinity can justify the existence of IT personnel.

Mobile Site Services Review
Option Content Alt URL Price
GO MO Detach Yes Free
Wirenode Detach Yes Free
Winksite Snippet Yes Free
MoFuse Snippet Yes $7.95-$199 mo
Mobify* Linked No Free-$995 mo
Sitefinity* Linked No $1999-$7999+
* WP compatible

"Best" is relative to complexity and technical background of the site owner. Each third-party solution has tradeoffs. The favored implementation for ClinicalPosters.com at this time is the previously implemented mobile store alongside Mobify for the rest of the site. Colors are compatible though the page layouts differ. Each is auto configuring so it's evident only when visiting from a smartphone without typing in an alternate URL. Many thanks to Lilach for her article.

Tags: how to make your site work across multiple devices, reviews, SEO

References
  1. How to make your website mobile friendly. socialable.co.uk ^
  2. 3 Modes of Mobile Usage. mobify.com blog ^
  3. GO MO: Mobilize your business. google.com ^
  4. A Review of the Web-Service: Mofuse. htmlgoodies.com ^
  5. Mobify your site. mobify.com ^
  6. "Mobifying" Your HTML5 Site. html5rocks.com ^