Handi Mobility‘s mobile design and hosting platform, Mobify.me has scored some significant wins lately. A number of web and product designers are using it to create mobile versions of their own sites. Here are a few of the design sites using Mobify.me
- Jeffrey Zeldman’s A List Apart, one of the top web design sites in traffic and influence.
- Web designer and Creative Director at Twitter, Douglas Bowman’s personal site, Stopdesign.
- Graphic and Web designer Veerle Pieter‘s blog.
- John Boardley’s I Love Typograhy.
- Commercial packaging design site, The Dieline.
- Graphic, Web and product designer Jacob Cass’ Just Creative Design.
So what is Mobify and what makes it so popular with designers? In a nutshell, Mobify is a web based design tool that is used to create “mobile views’ of existing web sites with a high degree of control over their appearance.
To use Mobify, you start with the Content Selector (image above) where you point and click to choose the elements of a page that you want to include in a template that will control one or more pages of the mobile view of your site. Mobile views are not static, they are updated dynamically to reflect the current content of your desktop site. Mobily will resize images for the mobile view but does not paginate. You need to keep in mind the limitations of the devices you are targeting and not select too much content to avoid creating a mobile view that is too large to load.
The next step is the Design Screen (image below) which displays the blocks you have chosen in the right pane and the mobile CSS that Mobify has generated on the left. You edit the CSS to optimize the appearance of the mobile view. You can also move blocks up or down, delete blocks and add additional content including text blocks, a menu or header and footer. Mobify updates the right hand view as you edit to show the effects of each change. At any point you can preview the page in a choice of mobile simulators.
When everything looks the way you want your are ready to deploy. Mobile views created with Mobify are hosted by Mobify. You specify the subdomain you want to use, for example mysite.mobify.me. and set up a CNAME record with your hosting provider to redirect traffic from that subdomain to Mobify. Mobify also supplies plugins or addons for WordPress, Expression Engine, Drupal and Django and a JavaScript snippet, any of which in conjunction with the CNAME record will automatically redirect mobile browsers to the mobile view.
Mobify is similar to enterprise level tools like NetBiscuits and InfoGin’s VDT but is priced and targeted to be attractive to individual designers, bloggers and mid-sized publishers with traffic of 5k to 500k unique visitors per month. The basic Mobify package is free. It allows creation of unlimited mobile views. The Plus version at $25/month removes the Mobify branding from your mobile view and adds SEO features including a Google sitemap. The Pro version at $99/month includes premium support, advanced analytics and SSH/HTTPS. All packages include hosting.
It is possible to create very high quality sites with Mobify. The A List Apart mobile view validates with no markup or CSS errors and gets a perfect score on the Ready.mobi and MobileOK tests. To achieve good results it helps to have a good standards compliant desktop site, Mobify can fix some but not all bad markup. Mobify is a slick and powerful tool. It works best in the hands of an experienced designer with at least basic CSS skills. Handi Mobility also offers design services for publishers who prefer a turnkey solution.
Disclamer: I’ve done some unpaid consulting work for Mobify.
Related Post: A List Apart Mobile