Browse
Responsive Website Design

Responsive Website Design

Posted November 14, 2012 by Jerod Clark

Are you familiar with the concept of responsive web design? If not, then it may be time to learn a little bit about it. Responsive web design is a new way of building websites that eliminates the need to think about a separate mobile version of your website for each of a variety of platforms.  Instead, you spend time designing one site that works on any platform: desktops, tablets or smartphones.

How does this work?  Well, to answer that, we’ll have to get a bit technical. Traditionally, websites are coded to determine what web browser a visitor is using.  Based on that, the most optimized version of the website is loaded for that user. For example, if someone is using Google Chrome on their desktop computer, they’d get a full version of the site. But if someone else is using the mobile version of Apple Safari on their iPhone, they would get the mobile version of your site (if you have one). 

Responsive design doesn’t care about the devise someone is using. Instead, it looks for the screen size. Responsive sites are designed with chunks of information. Those sections reshuffle in size and placement based on the screen size. So the site might look similar in style on a smartphone or a desktop, but the information will be shuffled in a different way.

Here’s an example from Mars Hill Church

See how there’s a similar look to each version? Yet, the content is rearranged and resized to best display on whatever device someone is using. You can see how it works in real time. Pull up their website and start dragging the bottom corner or your web browser. The site will change as browser size changes. Bethlehem Baptist Church's website is another good one to play around with.  Starbucks has a great responsive site, too.

Why is this important? Glad you asked. Here are some of the reasons I see:

  • It makes you think about mobile. Today, more than half of Americans and Canadians have smartphones. And mobile browsing will only grow in importance.But the way we’ve traditionally designed websites makes mobile an afterthought. With responsive design, you have to think about mobile from the beginning. Many people call it a “mobile first” way of building websites. You are forced to think about what the simplest version of your website will be and then scale it up from there for the full desktop size.
  • You’ll have to organize content and that’s a good thing. Websites can easily become an unorganized zoo of information. We keep adding more content without thinking through where it belongs. Responsive design works because information is gathered into clusters that move and resize based on what device people are using.  Because of that, you’ll have to be more strategic in how content is grouped together and how you’re navigating people to click through to find more information. Ultimately this makes your website cleaner and easier to use.
  • Devices of the future will affect you less. Nothing is truly future proof, but responsive design in a step in the right direction. A website that scales means you don’t have to worry as much about what your site will look like on the newest mobile devices. If Apple changes the screen size of the iPhone, you’re ready. If Samsung releases a different tablet size, you’re good to go. 
  • You have one site instead of many. Traditionally, desktop and mobile versions of a website were looked at as two different entities. Responsive design makes it a single project. Yes, you have to think about the differences of how content will be displayed in different sizes of a responsive site, but it’s a lot less of a hassle than building two separate projects.

Responsive design has really accelerated over the past couple years and is becoming more popular. We’re hoping to make Church Juice a responsive site next year. While it can certainly be done for a custom website design, responsive technology doesn’t have to be expensive. Lots of affordable responsive Wordpress templates are available, too.

Are you using responsive design?  If not, do you hope to make the switch?

(The responsive web design header illustration is courtesy of Shutterstock.)

Filed under: Website, CMS, Design/Layout, Mobile

About the Author

Jerod Clark

Jerod joined ReFrame Media in 2007 and built Church Juice from scratch. He poured all his passion for branding, marketing, and messaging into the ministry, publishing e-books, blog posts, and speaking at conferences to help churches energize their communications. He also served as ReFrame’s in-house graphic designer. Before beginning his work at Church Juice, Jerod was a local TV news reporter. In 2016, Jerod stepped away from the ministry to pursue interests in marketing and communications on new horizons.

Don't miss a post

Join our email list

Comments (4)

  • wlion
    1:28 PM
    Thu, Nov 22, 2012

    The website designed by HTML5 is just superb. you’ll see the standard of HTML5 by viewing the websites. These area unit thus sleek in operating that no such real issues happens whereas making websites……responsive website design

  • Tyler Rominger
    10:55 AM
    Wed, May 1, 2013

    Hey!  Just wanted to send some kudos on a great article!  (full disclosure: I am the one of the founding partners of MinistryDesigns.org. a ministry that helps churches communicate by providing a user friendly content management systems).  Everything you said is right on, so keep up the good work!  If any churches are looking for a super powerful church website builder. we would love to have you check us out!

  • http://desktopwebdesign.com
    7:13 PM
    Mon, Oct 7, 2013

    We absolutely love your blog and find nearly all of your post’s
    to be what precisely I’m looking for. Does one offer guest writers to write content for you?
    I wouldn’t mind creating a post or elaborating on a few of the subjects you write concerning here.
    Again, awesome web log!

  • Tyler Rominger
    11:43 AM
    Mon, Oct 13, 2014

    I’m just updating my post from May of 2013: Since that post we have moved our site to Ministry Website Designs .  Thanks again for putting out great stuff!  Love the blog!!

Leave a Comment

Share your thoughts about this blog post with us.
All fields are required.

Recent Posts

I Notcied a Typo inn the Bullitin: Let’s Talk About Making Mistakes
I Notcied a Typo inn the Bullitin: Let’s Talk About Making Mistakes
4

Posted July 10, 2018 by Dave Hartwell

As church communicators, our work is out in the open: we write web copy, bulletin announcements, social media posts, and mass emails. Every once in a while, we make a mistake. Mistakes are inevitable; how we deal with them isn't.
Juicy Website Winner 2018: Hope Church NYC
Juicy Website Winner 2018: Hope Church NYC
0

Posted July 4, 2018 by Bryan Haley

Hope Church in New York City is The Juicys’ 2018 winner for the website category. Here’s what makes Hope’s website great.
The Power of Facebook Events
The Power of Facebook Events
0

Posted June 25, 2018 by Ernesto Alaniz

Facebook events are a cheap and easy way to get your church’s event in front of your entire community.
6 Social Media Tips for Your Church
6 Social Media Tips for Your Church
0

Posted June 21, 2018 by Bryan Haley

Social media is a great tool that churches can use to build and expand relationships, as well as a tool for outreach. Here are six tips to help your church utilize social media better.
5 Ways to Use MailChimp for Church Marketing
5 Ways to Use MailChimp for Church Marketing
0

Posted June 19, 2018 by Robert Carnes

There are lots of platforms your church can use to promote its message and mission. MailChimp is just one, but has many different uses. This is an overview of some of its most useful features.
Congratulations to This Year’s Juicy Winners!
Congratulations to This Year’s Juicy Winners!
0

Posted June 14, 2018 by Bryan Haley

We recently concluded The Juicys award season and are excited about these five church communication award winners!
The Reason Your New Process Won’t Work
The Reason Your New Process Won’t Work
0

Posted June 12, 2018 by Jeanette Yates

Having a communications tool for your staff is essential because collaborating without a system, process, or tool is complicated and inefficient. Before choosing a tool, ask yourself (and your team) these questions.
The Juicys Award Show
The Juicys Award Show
0

Posted June 4, 2018 by Bryan Haley

Join us for The Juicys Award Show!
Mobile Websites vs. Mobile Apps: Which One Is Better?
Mobile Websites vs. Mobile Apps: Which One Is Better?
0

Posted May 24, 2018 by Jason Caston

While it is a given that any organization has to have a mobile accessible presence, many churches are unaware of whether a mobile website or an app is the better choice.
5 Key People You Need to Create a New Church Website
5 Key People You Need to Create a New Church Website
2

Posted May 22, 2018 by Brad Vos

Creating a church website is not a one person task. To do it right, you need multiple types of people on a team. Here are the folks we recommend.