Knowledge Base: Best Practices

Note: a great place to learn about Best Practices is our Support Site

Overall

1. Pick content most relevant on mobile: top stories, search, directions, maps and contact information.
2. Spend as much time as you can on the stylesheet - it will wow your mobile audience
3. Leverage the template feature as much as possible - if you're finding yourself mobifying too many individual pages, something is not right!
4. Be conservative with the amount of information that is shown on mobile - long pages are difficult to read on a small screen (and might not work at all on older phones with less memory)
5. Deploy an m.yoursite.com subdomain and a redirect plugin/snippet to make it easier for your audience to discover the mobile view.

Web Design

1. MOBIFY attempts to generate a "mobile stylesheet" with an optimal subset of your existing styles, adapted to mobile. Try to minimize the amount of new styles created and re-use what you've already done!
2. Do not specify relative width sizes for large images (such as width="50%") as the resizing through CSS does not work well on older phones. Instead, rely on MOBIFY device-specific resizing.
3. Do not use font pixel sizes (ems and x-small/small/medium work best), as the outcome will vary wildly across different mobile screen resolutions.
4. Keep in mind that MOBIFY supports forms, sessions and log-ins so you can make features like Login, Comments and Search work. To mobify "result" pages, simply perform the appropriate action in the Choose step and select content blocks after the new page loads.
5. Use Firefox with the Firebug plugin during the mobile design process - it will save you lots of time!

Promotion

1. Be sure to use one of the Mobify redirection plugins (WordPress, Expression Engine and Drupal downloads are currently available on our Support Portal. Read how this will help with Twitter and Google use cases on our blog
2. Have a link to the Mobile View in the header and footer of the source website. It increases awareness of mobile and provides an easy path for your users to go back and forth if required.
3. Try to set up a DNS CNAME for the mobile view (like m.yoursite.com). This will allow you to achieve perfect SEO and branding for your website. Working with DNS is not as easy as it could be, make sure to read our Guide to DNS setup.
4. Be sure to upload a nice icon for your mobile view, then encourage your users to save the site to Favorites (Homescreen on the iPhone). This will help you attract repeat users to the website.
5. Submit all your sites to the Mobify Gallery, which is available both in the source site and its mobile view. We will promote your mobile view to our entire audience!