Responsive Mobile Design for Your Church
Matt Adams
I have a tiny computer in my pocket. I bet you do too. I won’t lie, I’m super excited about that. According to an Internet trends report by Morgan Stanley, by mid 2013 more people in the U.S. will have the Internet on their smartphones than desktops. In many parts of the world, the smartphone is the only Internet because over the air technology is all the country really has that is even close to modern.
So what does that have to do with church marketing you ask? Everything. More people will be surfing the web on their phone than on their desktops. Yes smart phones can display most websites at a scale, but how much fun is that? Tiny text and drop down menus make me leave a site pretty quick. We can fix this tiny, zoomed out view by building media responsive websites.
What is Responsive Design?
Technically it’s fluid width content and site styles. It’s making content 100% of the available width and letting the text wrap to fit the screen size. Phew, that was easy right? OK seriously, you want a great looking site, blocks of content left, middle and right, dynamic sliders, recent sermons on the home page and the list goes on. So how do you get an amazing dynamic site that is equally amazing on a smartphone?
Great sites that work on all devices have a clear focus on the content, what’s important, and priorities. All sites and churches will have different needs, but I can guess that communicating who you are, when you meet, and how to get there are at the top of your list.
So first off, work backwards. What are those top key things and how does a user get there? What are the top five most popular pages on your site now, and how do people get to those pages? Really getting into the weeds with your content, site analytics, and knowing your audience will be critical in your planning.
Responsive Sites in Action
Visit these sites, and resize your browser window (sorry IE9 and under users, IE does not support media queries and just displays the desktop view)
• Starbucks
• Travel Oregon
• Build Windows
• Missio Dei Communities
Notice on all four how not only do they squeeze to fit, but the content re-wraps, images adjust and menus update to fit the finger friendly needs of a smartphone.
So How Do We Get Responsive?
First off, we need to create break points. A break point is a set screen dimension where we chose to make more drastic changes. For example a desktop may have a three column layout, but scale that down to a phone and you have three very narrow columns, so let’s break that layout to be one column, stacked.
Most desktops are 1024 pixels wide or wider, So let’s call 1000 pixels our max width. On to tablets. An iPad landscape is also 1024 wide, so nothing crazy there. iPad in portrait mode is 768 pixels wide. Now if you want to talk Android tablets we have a much longer list. iPad is a very large segment of the tablet market, so I personally tend to just stick with the iPad as the key number. Most smartphones in landscape are between 480 and 550 pixels wide. Some are 600. Most smart phones in portrait mode are between 320 and 440 pixels wide.
So we have the following widths to plan for: 1024, 768, 480 and 320. You don’t need a plan for all of those, but you should know when/if you need a break point. Some simpler designs can skip a few points. On a recent project we decided we really liked the 768 width for the desktop too.
The Design
If you have all of your content priorities in order, you will know that the smartphone is the most critical of space. Sure you can force all the content to fit, re-wrap, and so on, but it may be more content than a user needs. So I like starting with the desktop and the smartphone at a very early stage. Using wire framing tools start outlining all the core elements in each platform until you have a design you can be happy with.
The Code
The HMTL of all this is pretty straight forward, nothing new in my opinion. Stick with the HTML5 you already know and love. The real magic of the responsive design requires CSS3 media queries. CSS3 has the capability of defining these break points in your CSS style sheets, and only displaying the appropriate styles for that screen size.
How to Organize Your CSS / Media Query Stack
CSS is read by the browser top down. So if you say a selector is 1000 pixels wide, then later say that same selector is 500 pixels wide, well the last declaration wins.
So with that said, I find building a website for one size, and working the opposite direction down. So I often start with core styles, backgrounds, fonts, etc. Then move to the mobile-based design. Because the sort order of the CSS I can simply override the mobile with the tablet, and the tablet with the desktop. So my CSS is very top heavy. One site in mind, the desktop specific CSS in only a handful of classes. Where the mobile is quiet deep.
Ready to start coding and learning how? Check out these great sources:
• Responsive Web Design by Ethan Marcotte
• Responsive Web Design on SitePoint
• Inspiration: Media Queries
• Inspiration: Best Web Gallery
The above article, “Responsive Mobile Design for Your Church” is written by Matt Adams. The article was excerpted from: http://www.churchmarketingsucks.com web site. July 2013.
The material is copyrighted and should not be reprinted under any other name or author. However, this material may be freely used for personal study or research purposes.
