In my series on mobile I discussed the various kinds of approaches you can take to mobile sites; with a responsive website as the clear leader. Yet I am seeing the term “responsive website” casually thrown around on many other blogs and realize that it is still the latest buzzword with a nebulous definition. Many people understand that it means the website will change to adapt to the size screen and device it is shown on. Yet a responsive website should be far more than just your existing website with breakpoints for tablets and phones. With the correct thought and approach, your church’s responsive website will provide value and not just another feature.
Context
As I alluded to above, stacking all of your content into one narrow column does make your website optimized for a phone. You need to consider the actions people will want to accomplish most quickly while on the go rather than sitting at a desk or surfing on the couch. Service times, directions, upcoming events, and contact information should all bubble to the top. While the three paragraphs of text that describe your tenants of faith and basic theology is important information, it is most likely not what your average phone browser wants to see.
Images
When not connected to a wireless network, cell phones must rely on the cellular data. The majority of data plans have a limit, so cutting back on the largest objects not only makes your site load faster, it is a courtesy to your users. Some responsive websites determine the browser or device and send a different set of images to mobile users. Often these images are re-sized for the smaller screen, of lesser quality, or at times are omitted altogether. Instead of showing a larger photo by default, load your page without it and offer to display the image by tapping on a link.
Interfaces
Does parts of your website rely on hovering a mouse over an element? Many navigation schemes use this, as well as help and information pop-ups on forms. Realize that you cannot rely on hovering, as there is no mouse. Also, links and other clickable elements must now accommodate fingers. The bulleted lists of links with only a few pixels of padding may have been easy to use with a mouse, but tapping on the wrong element becomes a major nuisance.
Action Item
While I could write an entire series on mobile design, these are just a few points you should take into consideration. The ability to show the page at different widths is the first small step in a journey to creating a valuable mobile experience. So next time someone mentions making your website “responsive”, elaborate on all of the variables you need to think through and you will not only sound smarter, you will help educate others on what the latest buzzword entails.
Note this article was partly inspired by the Big Web Show podcast, episode 118 “Responsive Images, Picturefill, and Web Standards“
Photo courtesy of Maicol de Angelis Oliveira
