It’s hard to believe that it’s been almost nine years since Apple introduced the iPhone, arguably the first mainstream smartphone. (There were other companies that tried, but Apple was the first to truly break in to the general market.)
Since then millions of people have purchased iPhones and Android-based smartphones. Those folks are often texting, Tweeting, and Facebooking, sometimes sending email, rarely making phone calls, but most of all they’re surfing the web, all on their mobile devices.
Designing for Mobile
In May of 2015 Google reported that more searches were happening on mobile than on desktop or laptop computers in 10 countries, including the US and Japan.
If you’re designing a website today (and you’d better have a web presence for visitors, if nothing else), then you’ve absolutely got to design for the mobile web. That brings a whole slew of design changes to the table, but the good news is that there are more tools than ever to ensure your site creates a positive experience across any screen size.
In this first look at designing for mobile web, we’ll examine some of the different concerns present with mobile design. In a later post we’ll look at some of the incredible tools and frameworks that can make your life easier as you design.
Optimize Your Site’s Navigation
The single most important change you can make to allow for a better mobile experience is to ensure that your navigation is easy to use on a mobile device. This means optimizing how you get around the site for smaller screens, but, more importantly, it means making functional changes so that the nav works on a touch screen.
Hover menus are dead. The funeral is over and they’re resting comfortably next to the <blink> tag in the graveyard of web design. Our menus need to be short, audience focused, and easy to understand. A fictional Grace Lutheran Church website, for example, might have a top level menu like this:
- Home (Not on menu. Your top left logo goes home. Every time.)
- New to Grace?
- Adult Ministry
- Youth Group
- Children’s Activities
- About Grace (Utility Menu)
- Contact Grace (Utility Menu)
After we move the home link to the logo and add a smaller navigation for utility items we’ve got a short and sweet four item menu focused on our core audiences. By keeping the navigation simple and focusing on our core audiences we can enable them to hear our message regardless of what platform they’re arriving on.
Optimize Your Site’s Layout
Almost as important as your navigation is the overall layout of your site. The era of the separate mobile site has come and gone (they mostly served as a temporary solution when companies struggled to get something working for mobile devices). A site designed in 2016 needs to be responsive to the resolution at which it’s displayed.
This means using CSS3 media queries and HTML5 viewport settings to ensure that the mobile browser renders your content. By setting the viewport (by adding “<meta name="viewport" content="width=device-width, initial-scale=1.0">” to your <head>) you’ll let the browser know that your site expects the content to be rendered at full width on any given screen, not downscaled.
CSS3 (finally) includes features that allow designers to specify specific details for any media queries. For example, in CSS2 you could say “@media print,” but now in CSS3 we can say “@media screen and (min-width: 1000px)” to specify a set of CSS formatting rules that only apply to screens >1000 pixels wide. With clever use of CSS3 for site layout and design, we can create an experience which looks amazing on any size screen.
Remove Barriers
When we seek to communicate as Christians, our job is never to make the Gospel more effective. The Holy Spirit’s got that part under control. Our job becomes removing barriers to effective and clear communication.
By optimizing your church website for mobile visitors you can ensure that several key technological barriers are removed and that visitors to your website are able to quickly and easily find what they’re looking for, regardless of what device they’re using.
Learn more about connecting with visitors online! Downlod our free ebook “9 Strategies for Engaging Visitors with Your Church Website” by clicking below!
{{cta('81a00bba-43c7-41e1-8534-2fbe1b22d681')}}
![Ministry Goals: Defining Your Purpose [Webinar Recording]](https://content.cdntwrk.com/mediaproxy?url=https%3A%2F%2Fcontent.cdntwrk.com%2Ffiles%2FaHViPTY0NDU4JmNtZD1pdGVtZWRpdG9yaW1hZ2UmZmlsZW5hbWU9aXRlbWVkaXRvcmltYWdlXzVlYTk3MTQ5ZTBiMDAuanBnJnZlcnNpb249MDAwMCZzaWc9ODUwYjdlZTUyMzdkYmE3ZDA5MTE0YWE0MzU2OTk1MGE%25253D&size=1&version=1665679078&sig=200241dff68fb06c3395bbd97e5c7d0e&default=hubs%2Ftilebg-videos.jpg)