Jul
08

Making a Mobile Version of Your Site with Mobify.me

July 08, 2009 | Tagged in Mobify, Tools, CSS, iPhone, iPod Touch, Mobile

Amy's Mobified SiteI recently asked my Detroit friend and fellow Michigan graduate Jin Kim how he goes about deploying mobile sites. The variance of browsers in the mobile space proves it’s far worse than the desktop.  Not to mention so many different screen sizes.  It’s a mess! Detecting for mobile browsers should take place at the server/CMS level. Detecting with JavaScript could result in latency between the server calls and what’s rendered in the browser. Rather than deal with all of this, a few minutes with Google searching for "mobile websites" led me to Mobify.me. Mobify.me takes out the guesswork of mobile browser detection and makes it easy to serve up a pretty, mobile version of your HTML/CSS/JQuery-driven site. If you’re a designer/developers like me, you’ll love the flexibility of Mobify.me. I like it cause its free and it works! In the free version, Mobify.me simply puts a subtle grey link back to their page in the footer and "Mobify" in the page title. Here’s a summary of how I got it to work for me.

1. Sign Up for Mobify Account

The intro screen shares some templates used by famous developers such as A List Apart. These example templates allow you to poke around Mobify’s tools and are not intended for use on your own site. Your site will run off your CSS, your JavaScript, etc. Next, enter your site’s URL in "Ready to create a new mobile view?"

Site Summary

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.

Mobify Choose 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.

Mobify Design Mode

Mobify Editing Within Design Mode

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="overview">
       <div class="date">June 24, 2009</div>
       <div class="author">Amy Stoddard</div>
       <div class="recap">
         Here is my content
      </div>
    </div>

 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

Once you’ve mastered bouncing back and forth between the "Choose" and "Design" modes within Mobify, you’ll be ready to deploy your site. If your site is powered by WordPress, Drupal or Expression Engine, you’re in luck. The brains at Mobify wrote plugins so you don’t have to handle the redirect to your mobile site with JavaScript in your site’s header. If not, they provide a nice little JavaScript snippet.

Deploying Your Mobify Site

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

Amy's iPhone Icon 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.

 

Abbreviated Bio

My Picture

My name is Amy Stoddard and I'm a balanced left/right brain that can design a comp and code well-written HTML & CSS, JavaScript, PHP and mySQL. Actionscript 2.0 is my old flame. Read More About Me

By Category
All
7 Entries
Coding
5 Entries
Gadgets
1 Entries
Just for Fun
1 Entries
Korea
3 Entries
Technology
1 Entries
Videos
4 Entries
Web Tools / Applications
3 Entries
By Entry Date
January 2011
March 2010
December 2009
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009