Making a Mobile Version of Your Site with Mobify.me
1. Sign Up for Mobify Account
2. Enter the URL for Your First Page to Mobify and Enter the "Choose" Mode
By default, your site’s index page will load. Here you’ll choose what elements to include in the mobile version of your site. Choose content that’s interesting to your mobile visitors. Consider leaving header and footer navigation out of your selections. You’ll be able to add a mobile specific header/footer later. If you have Flash on your homepage, select those. You’ll have tools in the next step to deliver alternate content since Flash performs poorly (as of July 2009) in even the most advanced mobile browsers. If your layout has alot of nested divs, select the innermost element as best you can. You’ll see it outlined in red. Then, choose the "Expand" button near the top and your selection will grow. Once you’ve got your elements selected, choose the "Next" button in the upper right. This brings puts you in the "Design" mode.
3. Start Writing Your CSS / Bouncing Between "Design" Mode and "Choose" Mode.
Starting your Mobified CSS is the most daunting task. After selecting elements in the "Choose" mode, the rendered view will have you asking yourself, "What have I got myself into?" Ready? Breathe….The size and placement of images will likely look out of whack. Why? The rendered view is using your sites existing style sheets and those styles won’t translate well to the smaller, mobile screen. Mobify.me allows you to write CSS that overrides elements within the standard site’s main style sheet. I generally work with five tabs open.
- Tab #1: Mobify.me editing interface, opened in Firefox.
- Tab #2: The rendered HTML source of the full version of my site opened in Dreamweaver.
- Tab #3: The main CSS file for the full version of my site opened in Dreamweaver.
- Tab #4: The rendered mobile version of my site opened in Firefox. For instance, http://m.amystoddard.com.
- Tab #5: The source of the mobile version of my site opened in Dreamweaver.
I constantly check what’s rendered in tab #4 against what’s selected/outlined in red in tab #1’s "Choose" mode. If not, I select/deselect elements in tab #1’s "Choose" mode. Tab #1’s "Design" mode holds the CSS editing area for your mobile site, which saves every few seconds. If you’re in doubt, use Ctrl+C on the Mac or PC and the CSS will save. (Yes Mac users, Ctrl+C works in OSX). Then refresh tab #4 in your desktop browser or your mobile device.
Selection Advice for Tab #1’s "Design" mode: Start with basics, such as defining your site’s background color or pattern. Why would you need to redefine the background if site’s main CSS is still being obeyed? This boggled me too, but I concluded its because I select small groups of elements within the "Choose" mode and not the entire page. Its only a few extra lines of CSS in tab #1’s "Design" mode to get everything working properly. Be sure to use absolute paths to imagery.
4. Add Elements to Your Design that Don’t Appear on the Full Version of Your Site.
Mobify.me also allows you to add content that is only seen within the mobile view. I use this alot, especially with section dividers. The live version of my site is powered by Expression Engine and has a 2-column layout. 2-columns doesn’t work well in the mobile view. Instead, I align sections vertically and use dividers to make it read well. I defined a div class and use it all over. Adding mobile-specific design elements can save you the hassle of trying to override existing CSS or make existing imagery work within the design.
5. Omit Elements Within Selected Divs using Killer X-Paths
If you’ve been writing HTML and CSS, you’ve been using X-Paths all along, but probably didn’t know it. Killer X-Paths will allow you to omit certain elements within the div. Why is this helpful? Say you have a content block like this:
<div class="date">June 24, 2009</div>
<div class="author">Amy Stoddard</div>
Here is my content
We selected the entire "overview" div. We want to remove the div of class="author". To do that, we double-click on the "overview" div within the "Design" mode and enter:
//div[@class="author"] within the Killer X-Paths text box, Save & Close. The leading // tells Mobify to remove EVERY instance of a div with a class of "author". For a further explanation of how to use Killer X-Paths to remove content, check out Mobify’s article. The most comprehensive explanation is of X-Paths is at W3Schools.com.
6. Letting Mobify Figure Out Your Template Patterns
I really like how Mobify.me figures out what’s a template page and what isn’t. For instance, all of my portfolio pieces follow the same template. All I need to do was stylize one piece of work and Mobify knew how to handle the rest. Sweet.
7. Plugins for Handling Mobile Detection
8. Registering Your Custom Domain Name with a DNS CNAME Record
A DNS CNAME allows you to add a cool custom domain for your mobile site. By convention, the site name should read like this: http://m.yoursitename.com. But really, it could be whatever you want. My site is hosted at HostGator and they don’t allow editing of a DNS CNAME within CPanel. No worries though. Their support is awesome and they took care of my request within a couple of hours. In no time I had http://m.amystoddard.com registered and pointing correctly. Mobify has a great guide to DNS CNAME editing if you’re unfamiliar with it.
9. Add a Sweet Icon for Bookmarking Your Site on a Mobile Device
You have to admit its super cool to have your own iPhone icon. Mobify makes that part easy too. They take care of adding the scripts so if someone adds your site as a favorite within Mobile Safari and they choose to have that favorite featured as a quicklink in their iPhone or iPod Touch, your groovy new icon will appear. All you’ve got to do is output your icon to 57px square. There’s some sweet YouTube tutorials too if you want to stylize yours to look like lots of other iPhone/iPod Touch icons.
10. Going Beyond Mobify’s Free Service
The free Mobify service puts "Mobify" in the header of all your pages and a link in the footer. But to be honest, its bearly noticable. If it really bothers you, they offer a couple of plans for all your big clients that not only takes out that page title/footer issue, but adds a Google Mobile Sitemap and Meta.TXT, and emerging mobile sitemap standard that will boost the ranks of your Mobified site if its searched for using a search engine on a mobile device. Those plans begin at $24/month and you can read more about ‘em here.
Finally, I just want to give mad props to Igor Faletski, Founder of Mobify and his tireless team. These guys take their service seriously and I’ve never seen a such a fast response from support on any service or product I’ve ever used…let alone a free service. If you’re a designer/developer like me, give Mobify.me a try. They will go above and beyond your expectations to help you grasp the ease of making your site mobile-ready. I can only guess it is going to get better and easier with future features.
- Making a Mobile Version of Your Site with Mobify.me
- July 08, 2009