How to manage mobile content

Modern smart phones above do not really “require” that you optimize your site for mobile. They are modern browsers capable of displaying “smaller” versions of your web site. You might think that this negates the need for a mobile experience. This is a mistake for at least two reasons.

First, mobile pages need to be lighter and faster. Most sites imagine visitors sitting at a laptop, wirelessly connected to the Internet sipping coffee. However, a mobile visitor may be sitting on a crowded train or waiting in line at a conference using a 3G connection. They will want a lighter page that loads fast.

Sccond, some (or most) of the content on your site is not important when viewing your site in a mobile context. If your visitor is visiting your site while waiting for a doctor appointment, they want quick access very specific content: locations, directions, maps, hours, prices or reviews.

Recommended rules for mobile content

  1. Never put your primary call to action in a sidebar.
  2. Never put required navigation in the sidebar.
  3. Never embed an image in content that exceeds 320px.
  4. Never use tables that can not be displayed at 320px.

So, your content body should ALWAYS use a good title, well written copy with keyword links to secondary pages and include a clear call to action.

Recommendations for images

If you follow the instructions for “Getting Started”, Ashord recommends that your media setting for medium images be set to 300px. With the additional styling, the image final width will be 320px fitting nicely within a iPhone in portrait mode. With this in mind, your content will always display nicely on a mobile and desktop experience.

The right image → shows a 300px image inserted into the content section of a front page.

Recommendations for tables

Tables are very useful. But they can be mistakenly implemented. The WordPress visual editor does NOT include a icon, but there are times when you might add a table for data. It is recommended that you design your table to be viewed at 300px wide.

Or using the and  short codes you can deliver 2 versions of the table: one for desktop and another for mobile.