Many articles ago I talked about a content strategy document, which outlines every major piece of content on your church website. Additional information such as its primary purpose, the responsible party, and how often it should be updated can be layered in as well. Yet this document is the key to truly getting a mobile website correct. Because of the constrained screen size, your navigation, branding elements, text, images, video; everything on your website will be shifted to suit these devices. In this article I will outline how to update content priority and create guides that will help you design great layouts.
Identify
By now you should understand that because of the context in which mobile devices are used, as well as their size constraints; your existing page templates should change. If you have not done so already, inventory your various page templates and layout. Ensure that your content strategy document indicates which page uses which content. If you do not have a website, or are accomplishing a complete redesign, then document this as you flesh out each page during your project.
Prioritize
Great progress! Armed with your listing of templates, pages, and content components, you can begin to prioritize them. Global elements, such as the header, primary navigation, and footer, can be tackled first as most of the time they will retain the same priority regardless of the template they display. With that out of the way, you can move on to items such as the primary content for the page. A title and headers obviously more important than the body content, as they introduce and summarize portions of your text. Depending on the intent of the page, images can be secondary (photo of volunteers working in your neighborhood), or they may be more primary (photo for staff biography page). Lastly, the least important objects such as ads or secondary calls to action can be documented. This is a great time to see if any of these make sense for a mobile device
Redesign
Here is where it all comes together. Based on the intent of the page, order your content into a one column template for phones and maybe a two or three column format for tablets (depending on if they are holding it in landscape or portrait view). With that mindset, begin shuffling content pieces into place. Note that priority does not always equate to being higher on the page. Primary calls to action, such as a button to get more information about membership may be very important, but given their context you may need to put them at the bottom of the page so the user can make a decision after reading the preceding content.
Action Item: This is a very broad overview of how to move your content from a typical desktop website to a version more ready for consumption on a mobile device. Honestly, entire books can be written on this subject, but I want you to know the general process. If you find more users are on mobile devices, invest more time and dig deeper with more analysis on usage. It may seem like a lot of work, but this documentation will only make future updates easier to navigate.
Photo courtesy of Chris
