CSL 004 – How do I Set up a Mobile-Friendly Church Website?

Welcome to ChurchSpring Live, Episode 004!

What You’ll Learn

Did you know that 70%+ of website traffic on average comes from mobile devices? Is your website ready for mobile visitors? Tune into ChurchSpring Live, Episode 004 to learn how to set up your church website with a responsive (mobile-friendly) design.[truncate]

We explain what a responsive website design is, why a mobile-friendly website is so important (hint: it affects your search engine results!), and answer any questions that you have! Plus, we share some practical How Tos to customize your ChurchSpring website images. You’ll learn how to upload custom images and use the image alignment feature.

Watch Now

Helpful Resources

  • Upload custom images to your ChurchSpring website with recommended mobile-friendly sizes. Click here to learn how to optimize your images.
  • Resize your images for free with Canva (check out their free premium plan for nonprofits!)
  • Use Google Mobile Friendly Test to identify if your ministry website is mobile friendly.
  • Attend a free ChurchSpring demo webinar—our founders will take you behind-the-scenes of ChurchSpring and answer many frequently-asked-questions. Sign up at churchspring.com/demo.
  • Try out ChurchSpring for free at churchspring.com/trial

Show Notes

  • Welcome to ChurchSpring Live, Episode 004 and Introductions (00:00)
  • What’s your #1 desired outcome you want from your church website? (05:58)
  • How do I set up a mobile-friendly church website?
    • What is a responsive website design? (07:35)
    • Is every website already responsive? (11:36)
    • Is having a mobile-friendly website really that important? (17:47)
      • Yes! 70%+ of website traffic on average comes from mobile devices. Plus, it affects your search engine results.
    • Are all 3rd party integrations/plugins on your website automatically optimized? (21:46)
  • Action Step: Check if your website is responsive (25:06)
    • Pull up your website on your phone
    • Use Google Mobile Friendly Test
    • Be honest with yourself if your church website is easy to use on a mobile device.
    • Sign up for a free 7-day trial with ChurchSpring to check out our awesome, mobile-friendly website platform!
  • Q&A (28:48)
  • ChurchSpring How To (35:08)
    • Select your image alignment so that you can make custom images changes to the responsive format (36:11)
    • Upload your own images to your ChurchSpring website (38:23)
  • Closing Prayer (44:44)

CSL 004 Transcript

Isabelle Faletti (00:00):

Hello, welcome to ChurchSpring Live episode zero zero four. We are so excited to have you here today. Today, we are going to talk about how you can set up your church website with a responsive design. So how can you make your website look great on every single device, your phone, your TV, your desktop laptop, all of that. So I’m Isabelle, I’m part of the customer success team. And today I have Rohn Gibson with me co founder of ChurchSpring. Right now I’m hearing some feedback on myself. So for all your live listeners. Okay, great live stream. You gotta love it. If you are new to ChurchSpring we are a software provider committed to the great commission. So what that actually means is that we help church leaders by providing really practical tools to help aid in growing the local church for the glory of Christ.

Isabelle Faletti (01:00):

So this ChurchSpring Live, this is one of the ways that we are wanting to partner alongside with you. We want to hear from you during this livestream video. So drop your name, where you’re from your church in the comments below, you will need to give string yard access so that we can show your name and your comment in the video here. So please comment, engage with us. We did this for you, so we want to hear from you, we want to have a conversation with you. The great thing about this age that we are in is that we can have a conversation when we are States away. So Rohn here, will give a couple of notes before we jump in and talk about a responsive website design. Okay,

Rohn Gibson (01:42):

Awesome. So if you are just now joining us, I see we’ve got people jumping on. So tell us where you’re from and the comments we would love. Just hear from you guys. So definitely do that. So we will answer again as many questions as we can during our time today. So feel free to drop those in the notes, leave us a comment. We are also going to wrap up at the end of our time today with prayer. So if you have a prayer request, I see we also, we already have a few of those in the the comment section. So we will be sure to pray for those. So if you do have any prayer requests, things going on at your church that you can share here publicly, that we can pray for please share those. There in the comments section. So we’ve got some people, let’s see,

Isabelle Faletti (02:29):

Looks like we have Priya. I think I’m saying that correctly.

Rohn Gibson (02:33):

Tell us more, tell us if we’re saying that wrong, but that’s awesome.

Isabelle Faletti (02:38):

Yeah. We’re excited to have you. Thanks for joining.

Rohn Gibson (02:41):

Yes. Yes. So those who are just now, again, jumping on, feel free, share where you’re from, even if you’re watching this afterwards, we’d love to know where you’re from. So feel free to comment as well. If you’re watching this after the fact we will have a rewatch available. So again, both here on Facebook, under the videos tab, you’ll see it there as well as on our website. So if you want to watch it on our website, that’s where I would recommend that you check it out because we will have show notes. We’ll have tons of resources available on there. You can rewatch this live stream at churchspring.com/csl004. Again, that stands for churchspring.com/csl004. Again, you’ll be able to watch this video. There’ll be our little wrap up on there as well as we’ll give links to the resources that we mentioned and all those things.

Rohn Gibson (03:29):

So don’t feel like you have to sit there with a pen and a piece of paper and write down every single thing we talk about. We’re going to make that conveniently available for you there at that link again at churchspring.com/csl004. So one thing I failed to mention we don’t want you to miss out. We’re going to be doing a ton of these. I mean, every single week for the foreseeable future, we’ve even brainstorm some ideas of even adding multiples throughout the week. So we don’t want you to miss out. So make sure you like our page. You can even click to be notified when we go live. So definitely do that as well as we’d love it. If you would share this video you can share it with your friends. We know that many times church leaders are connected with other church leaders who have a lot of the same challenges that they face other people in people in ministry face as well.

Rohn Gibson (04:19):

So if you wouldn’t mind, you can, even right now, if you’re watching, you can do a watch party, you can share it live. But after the fact, you can also just share it there. We would greatly appreciate that. Or if there’s somebody that you would love to even join the live stream, why we’re on right now, maybe somebody in your team, you can even tag them in the comments to kind of invite them to join. So that would be really, really cool there as well. Awesome. You said it right? Good. Thank you for the Priya, right? Is that how you pronounce it? So thank you for joining us. We’re, we’re thrilled to have you here with us today. So we are going to jump into questions and again, like Isabelle said earlier, today’s session is going to be focused on a website design, specifically responsive design. So we’re going to dive into that, but if you do have questions again, any questions, or maybe as we explain something and it just didn’t quite land with you correctly, and you’d like further explanation, please feel free to put that out in the comments and we will address as many of those things as we can. So without further ado, let’s dive in to the question.

Isabelle Faletti (05:25):

Awesome. I cannot wait to talk about today’s topic. So Rohn, you and I were actually just talking about why a mobile website is so important just minutes before we went live with the show. So I’m excited to get into the meat to talk about again, why do, why do you need a responsive website design? And what does it actually look like for ministries? So let’s just dive right in and Rohn, can you explain to us what exactly is a responsive design?

Rohn Gibson (05:58):

Let’s define that term. So then we can unpack that later on. Yes, absolutely. So we’re going to do that and I forgot to mention one thing. So I’m going to come back. This topic of, of website design is very important. A lot of people look at it as, Oh, it’s just an aesthetics thing. It’s just an, you know, it’s, there’s not some concrete rules on how it should be done. And while there is a lot of liberty and what some people like versus don’t like there are also hard, fast rules. The important thing with anything related to your website is that, you know, what is the result that you’re looking to achieve with your website? Okay. So I’m curious for those who are joining and those who even watch after the fact and the rewatch, I would love for you to share in the comments, what is the desired result that you want to see for your church website?

Rohn Gibson (06:48):

So that could be, I hesitate to give examples, but I want you to kind of know the context in which we’re looking for your feedback here, because it will really help us understand more of what type of content that we can provide in the future to help you achieve the desired outcome that you have. So an example of a desired outcome for your church website, it could be simply, I want more people to find me, find my church online and come visit my church. It could be, I want existing church members to be able to find information as easily as possible. So they don’t miss out on events. If they do mention it let’s say a service that they can come back and listen to it online. What is it? So if you had to pick one, what is one the most prominent, desired outcome or goal that you would like to have your church website help you achieve?

Rohn Gibson (07:35):

So if you would put that in the comment section below, again, whether you’re watching live or later, we would love to hear that because that will help us even on this live stream. And this video will help us really be able to address that and help you get the outcome that you’re looking for. So back to the question of what is a responsive website design. So in the simplistic of form, responsive means that whether you’re on your desktop computer, your laptop, computer, whether you’re on an iPad and even iPad these days, there’s all kinds of different sizes of iPads, whether you’re on a smartphone, all kinds of different makes and models and sizes of iPhones. Now you even have web browsing on television screens because it’s smart televisions and things that are going on there. So when we talk about responsive design, what we mean is that the design of your website responds to the format in which it’s being viewed.

Rohn Gibson (08:31):

So again, just to give kind of comparison here, if somebody visits your website on their laptop and they’re pulling it up and they’re browsing it, it looks great. So it’s providing an incredible experience for them based on the format that they’re viewing it. And conversely, let’s say that somebody on their mobile device, which we’re gonna talk more about that, but let’s say that they’re on the mobile device, that website then responds and basically changes the format of the design to provide the best viewing experience for those people who are viewing it on that smartphone device or laptop. Again, all the different devices we make that what’s called responsive design. So we’re going to dive more into that, why it’s important, but there’s when we start talking design people, think of communication. They think of verbal communication. They think of written communication. Well, there’s also such a thing as visual communication and people will make a judgment. We were just talking earlier of some research that we’ve done, that people are literally making a judgment based on your church within 0.05 seconds. That’s seeing your website.

Isabelle Faletti (09:41):

That’s not much time. I blink and I’ve made an opinion on that.

Rohn Gibson (09:48):

Right? So you probably, at that point, haven’t even read, read three words yet. Maybe not even a word, but just because of the design of your site and what that looks like in their viewing experience, they are going to make a judgment about your ministry. That is not something to take lightly. That’s not like, Oh, well, it would be nice to have responsive design. It’d be nice to that’s like saying, well, it’d be nice to communicate effectively, but you know, whatever, it’s kind of optional. It’s not, it’s not optional. It’s something that every ministry needs to be thinking about in the, in the world, in which we live, people are making 0.05 seconds. They’re making an opinion on you and whether, and that’s much based on visual communication and much of that is based on, are you applying responsive design to your church website? So that’s a little bit about what responsive design is. We’ve kind of gotten into why it’s important. We’ll even talk more about that, but hopefully that gives you some groundwork to that. So I see, let’s see, do we have some questions?

Isabelle Faletti (10:48):

We had a couple people comment on what they hope to achieve from their church website. So Courtney, she said room for the church to grow offline, kind of a, a bridge between your online,

Rohn Gibson (11:05):

Such an important thing. I’m so glad Courtney that you shared that because sometimes we can not realize it’s about human interaction. It’s about that, you know, especially in a local environment, it’s about that face to face communication, living in community with believers and while technology can be great. I mean, we’re a church technology company. The whole point of that technology is to basically bring those people together so they can live in community with each other. So I think that’s a great goal. It’s a room for the church to grow heartily agree. That’s awesome.

Isabelle Faletti (11:36):

And then Priya, she said to access information with ease – yes, it should not be a complicated process for visitors for your current members to go to your website and learn about an event or know how to sign up for a small, this is huge. I love that. This is your goal. Yes. Awesome. Yep. And then Priya, you also said to to bring a community presence. This is awesome. Thank you for sharing. Keep sharing it below. URohn, I love what you have said about what a responsive website design is. Ureally is what I had in my mind is that it’s, it fills the space that it is in. And so you, whoever you are, you’re the church. We need to make sure that the website is filling that space. Whether it’s a TV screen, a phone or a tablet, whatever it is, that’s filling it well and in a beautiful manner and in a really easy way to engage with, to access information with ease. Uso love, love how you described that. Uso is every website already responsive once someone signs up for a website, is it kind of, is it ready to go out of the box? How, how they can, how can people tell if a website is mobile friendly, responsive in that way?

Rohn Gibson (12:52):

Yeah. So first of all, just to answer the question directly as every website already responds to the answer is no. So there are many website providers out there, both in the church space, specifically, as well as outside of that, we come across them all the time. We have literally hundreds of, of pastors and church leaders on a regular basis that come across that we’ll see their sites. And they think they’re responsive, but they’re not responsive. So it’s easy in today’s world to assume that every church website is responsive, but please understand that’s not the case just because your church website comes up on a screen. If it basically just shrinks down your desktop, you know what you see on your computer, if you basically see just a shrunk bound version of that on your smartphone, that is not responsive design. So yes, it’s about filling the space, but it’s also about filling the space appropriately to create the most engaging experience possible for the visitors to your church website.

Rohn Gibson (13:53):

So we’re going to talk about some tools here in a minute, but no, not every church website is responsive. Please don’t make that assumption and just assume that it is because that could be a critical error. Imagine you assume so, where does that leave? So you assume that your church website is responsive. We just talked earlier about in 0.05 seconds. Somebody makes a decision about your church and makes it has a judgment or an impression of your church. So let’s say you assume that it is, and you’ve got hundreds of people coming to your church website. I mean, probably thousands in a month. Well, let’s just say hundreds every single month, coming to your website on a mobile device and your church website, isn’t mobile responsive. It doesn’t create an engaging experience and they get a, just an immediate impression of that. And they’re like, no, I’m not gonna, I’m not gonna deal with that.

Rohn Gibson (14:39):

I’m out of here. So that’s really where the rubber meets the road with this, right. It’s not just about applying technology and just being like, okay, I want to have all the latest and greatest technology it’s about reaching people. Let’s always apply it back to why is it important? Well, we feel called, you know, our, our goal is to provide tools, discipleship tools that equip the church. So therefore, if we look at that that’s reaching people, that’s teaching people and then that’s sending people to do his work. So when we look at at and we look at responsive design, it has a part to play in each one of those components. So it’s very important that you understand is your church website responsive, many are not. So don’t assume it is. And we’re going to talk about a resource where you can know for sure, is my website responsive or is the not, and we’ll talk about that.

Isabelle Faletti (15:28):

Yeah. And to add onto that this is really in relation to your question, but I just wrote it down here. So when you have a response to the website, it will look different from your desktop and your mobile version. And that’s okay. You actually would prefer that. So I know for ChurchSpring, our, any ChurchSpring powered website is automatically optimized for mobile for any different device. So that’s for one thing, you guys, that’s amazing because you don’t have to do any tweaking, any changes of image sizes. I’ve done that before and it’s, it takes a lot of time to change your website to fit mobile, to fit tablet, to fit desktop. So yeah, another reason why ChurchSpring is amazing. I mean that truly and it’s OK again, when you see a different layer on your phone, versus when you’re looking at your website on your desktop, because that means personally for ChurchSpring, that means that our designers, our developers, Mike and Rohn our co-founders, Harrison, one of our lead developers, they’ve taken the time to really think through what is the flow for the user, for the visitor, visiting your website on each different device. And so if there are certain best practices that recommend not to show five images stacked on top of each other, then they’ll hide some elements on your phone, whereas you’ll see it on your computer. So I wanted to share that because I know that is a question that we get sometimes on the support team. Why isn’t this image showing up on my phone? I see it on my laptop. And first off, that’s great that you’re looking at it on your phone because you can see how images are appearing. Maybe you need to change your, your, your image size. So keep the questions coming and actually see that Comfort. You have a question here. Hello, Comfort. I know we’ve been emailing actually a couple times this week you asked what do we do to get the picture we have to fit into the box?

Rohn Gibson (17:34):

You are in the right place.

Isabelle Faletti (17:36):

This is great. I’m glad. Yeah.

Rohn Gibson (17:37):

Isabelle is literally going to show us I’m here in just a few moments. Exactly how to do what you’re talking about. You’re in the right place. Sit tight. We’re going to answer your question.

Isabelle Faletti (17:47):

Yep. Stayed tuned. Awesome. All right. So Rohn hopefully by now we have given a case for a responsive website. However, if we do have some listeners who are not quite convinced that it’s actually that important, let’s unpack the question is having a mobile friendly website really that important.

Rohn Gibson (18:12):

Yes. So it’s extremely, extremely, can I say that again? Extremely important. Yeah. So we’re seeing and, and this will vary somewhat depending on your location. So I want to say that, however, on average, 70, over 70% of the website traffic that visits your church website, because it’s going to come from a mobile device. Let me say that again, over 70% of the website, traffic, the visits, your church is going to come from a mobile device. So we like, we like to use the term mobile first. So when we design, when we look at things, we’re looking at it from a mobile first perspective, because that means the majority of the visitors are going to be visiting your site on a mobile device. So therefore, that’s the first thing we need to keep in mind when it comes to the content, when it comes to the design of your site, when it comes to the way the site’s even laid out and the flow of the site, all of those factors are extremely, extremely important.

Rohn Gibson (19:15):

So is it important? You tell me. Is having an experience that’s great for the majority of the visitors over 70%, is that important? Well, we all know it is. It’s very important and that’s why we’ve made ChurchSpring to be responsive. So there’s some questions that are going to come in. We’re going to address those as far as images and alignment and things like that. So we’re excited to jump into that, but number one, ChurchSpring is responsive. However, with that said, there are still some things you need to keep in mind. And that’s what we’re going to talk about with one of the questions. I think it was comfort asked about you know, the images and, and aligning those correctly and how to move things around. So you can have that content show yes. On a computer for the, you know, maybe 30% of your traffic, but how does it show up correctly for the 70% we’re going to show you how that works here as well.

Rohn Gibson (20:06):

So one of the other factors with this, so is again, is having a mobile friendly website, really that important Google also their desire is to send traffic to a website that provides a great experience, right? So when somebody does a search for, let’s say, Baptist church, Columbus, Ohio, or whatever, church, Columbus, Ohio, Google is going to show results, right? Those results are very important because that’s how people, many people will find out about you. So you want to make sure that your website is optimized for Google, so that when somebody does a search for church Columbus, Ohio, or your specific denomination or whatever that might be, that your website actually shows up on that first page. Ideally the first few results, Google looks at mobile friendliness. It’s a ranking factor. It has been for many, many years. It’s not like this is just some brand new thing that’s come out. It’s been that way. So they don’t want you to have separate sites. This used to be a thing where it’s like you had like a separate mobile site and then you had your desktop site. They don’t want that. They want one website that provides a great experience and adjust to the visitor based on the device that they are visiting your website from. So that the question I would ask is ranking highly on Google, important to you while it is, or it should be anyway. So therefore, yes, having a mobile friendly website is not only really important. I would say if you want to be found, if you want to accomplish one of the goals that were shared over here, as far as having new people find you and then come engage with you offline having a mobile responsive, a mobile friendly website is very, very important.

Isabelle Faletti (21:46):

Yeah, that’s great. So it’s so important. Yep. Priya, you have a really good question here about how to know if or how to make sure that your website is responsive. We will address the, actually after this next question, as Rohn will kind of lead into that question there. So stay tuned. I do see your question for that. So run are all third party integrations or plugins on a website automatically optimized. So you have a website that’s perfect. However, depending on what your, who you’re using for your website, sometimes you’ll have a ton of plugins or you’ll be embedding some forms onto the website. Does that automatically change on the, the device you’re viewing on? Or is that something else that we need to be talking about?

Rohn Gibson (22:37):

Yeah. Yeah. So every single plugin, so we use the word plugin plugin is, is very synonymous. Yeah. Very synonymous across different content management systems, which is the, the program that you actually log into to update your church website. So many of those, one of the most popular ones out there, I think it runs, I forget what percentage of the internet which we actually have a lot of people come to us from that platform it’s called WordPress. They have plugins, plugins are created by third party providers in many instances. And so, for example, let’s say you have a vanilla website, it doesn’t have sermons functionality where then you could go out and find a sermon player that then you can embed in your church website. So people could come and listen to the sermons and other great example that we see all the time is people who they don’t have a calendar feature integrated directly into their church website.

Rohn Gibson (23:27):

So maybe they’re taking a third party calendar and embedding it on on their website. So each one of those plugins and depending on how they’re set up, cause there’s a lot of different factors there, but many times those are not responsive. So somebody can look at it on your desktop or on a laptop computer and be like, Oh, it looks great. And then you go look at it on a mobile device and it’s unusable, right? Because you can’t even get to the buttons to click play for a sermon or you can’t get to the buttons to look at multiple events on a page. So it’s critically important to realize that really each plugin or each add on that you do to your church website, you really need to look and understand is this is this mobile responsive? Is it going to look good on a mobile device?

Rohn Gibson (24:18):

So one of the benefits of ChurchSpring is that it doesn’t require any third party plugins. So I gave some examples. I could give a lot of other examples from sermons to giving to a lot of different things. So for us, for sermons, for calendar, it’s built right in. So there is no third party plugin that you have to worry about as a Workrite does it not work, right? Whatever. we’ve done all that for you to make it just super, super easy and simple for you to do. So again, the, the, the real takeaway there is, if you do require, let’s say you’re not using ChurchSpring and you do need something else for your sermons, make sure that it is appropriate. And it looks good on a mobile device. Because again, like we said, over 70% of the traffic is what’s going to be, is going to come from mobile.

Rohn Gibson (25:06):

And that’s what they’re going to be engaging with. So make sure it looks good for them, or just sign up for a ChurchSpring and it’ll save you time. Yes. Yes. Well, it’s time for action. Right? So let’s take action. And this is actually going to answer one of the questions we’ve had come in. So the first thing, easy test you can do go to your website on your smartphone. Does it look good? Is it easy to engage with many times as the creators? We can look at something and say, Oh, not good, not good phrase. It’s good enough. It’s good enough. Well, is it good enough for 0.05 seconds to somebody get an accurate representation of your local church? And if the answer is no, and you’re honest with yourself, then there’s some work to do. So let’s be honest. Let’s be honest with ourselves.

Rohn Gibson (25:55):

Sometimes we have to tell ourselves inconvenient truths so we can deal with those things. There’s encouraging truth and there’s inconvenient truth. So sometimes we just have to embrace the inconvenient truth and address that thing. So pull it up in your phone. Does it look good? Does it give a great representation of your church and 0.05 seconds? Okay. The next thing you can do, and we will link this up in the show notes. So again, you can go to churchchurchspring.com/csl004, to get this link. But Google actually has a tool called the Google mobile friendly test, where then you can put in your website and it will literally tell you, is your website mobile friendly? It’ll give you a, basically a red or a green check Mark, I believe. And you can know for sure. So we’ll link that up again.

Rohn Gibson (26:41):

In the show notes that you can check that out, or you can just do a Google search for Google mobile friendly test. It’ll be the first result you can click on it. That’s Google. So anyway, so you can click on it and very quickly see does it pass the mobile test? And again, it’s so important. So if you’re not sure, let’s say you don’t use ChurchSpring and, and you know, your website’s not mobile friendly and you desire it to be, cause you want it to represent well, you want it to be a great tool for the 70% plus people that are gonna visit your website on a daily basis. And you want to learn more about ChurchSpring. I’d highly encourage you to join me as well as my co founder, Mike on our demo churchspring.Com/Demo, select a time that works for you.

Rohn Gibson (27:21):

And we will in a about a 55 minute to 60 minute demo, walk you through how to launch your site, how to maintain your site. And I’ll all of that will work for you from a, from a responsive design, as well as many others, many factors to look at for an effective church website. But we’ve notched that one for you quite easily. Or if you’re like, Hey, I’m just ready to go. Like what you’ve shared. I know I’ve got this issue. I need to solve it. We’ve created a seven day free trial. So risk-free, you can sign up for ChurchSpring, kick the tires we like to say, look under the hood of ChurchSpring. How does it work? Is it going to meet my needs? Great, go sign up churchspring.Com/Trial. You fill out your information, you can set up your website.

Rohn Gibson (28:05):

We haven’t limited it in any way. You get full access to the account level that you sign up for. So I would encourage you to sign up for the top one, because then you get full access to everything you can play with it, make sure it’s a good fit for your ministry and you gonna be ready to go. So if you don’t know if your website’s mobile responsive, or if you do know it’s not, and you know that you have maybe some inconvenient truths that you need to deal with, that we need to get this addressed. We need to accurately visually represent our local congregation in a true, authentic way. And our current website doesn’t do that. I would highly encourage you to go sign up for our seven day fry, a seven day trial at churchspring.Com/Trial and give it a shot and see if it’s a good fit for your ministry. And if not, no worries. You can cancel at any time. Yeah.

Isabelle Faletti (28:48):

Yeah. So I want to wrap back around to Priya’s question here. She brings up some really good questions. I know that we answered it mostly. So she’s asking you really two questions. Are you going to talk about how to make the website responsive? So how do you, if you go to the Google mobile friendly test and it is a red check Mark or red X, and it says it is not friendly, what, what do you do? And we did talk about a little bit, but Rohn, if you could answer that, and then also what characteristics form a website, a responsive website. So Priya that’s a great question. And we didn’t really give specific examples yet of what you should actually be looking for specifically. So we can also talk about that after Rohn, you, you discuss, how do you make your website responsive?

Rohn Gibson (29:37):

Yeah. So responsive design is very much related to the well, there’s many factors, first of all that it impact responsive design. So this is a really good question. Honestly, it’s a, it’s a difficult one to answer cause there’s just, there’s so many parts and pieces to it. We say it’s related to the programming. So when we design church websites, the language that we use to actually make a design look a certain way is called CSS. So yes, we use Photoshop. We use all, all of those tools to create the beautiful designs, but then it’s how they’re programmed ultimately through what’s called CSS or markup, which really then dictates and really tells a browser, okay, they’re coming on this browser, therefore format at this way. Like that’s how responsive design works. So in a nutshell, you want to choose a design that is already made to be responsive.

Rohn Gibson (30:38):

You don’t want to try to take a desktop, a website. That’s been just really from the beginning designed for a desktop computer or a computer. And I use desktop computer, but I mean, laptop, desktop, whatever and try to like, re-engineer that that’s a very time consuming and I would pull my hair out. Honestly. It’s way more complex. What you want to do is choose a design. That’s already optimized for mobile friendly. Cause like we say, where we’re starting the design process from a mobile first perspective. So we’re designing it first for mobile and then we back it out from there because we know that 70% of the people are going to be visiting from mobile. Okay. So the thing there is just make sure you choose a website design that’s already responsive. And if you, if you’re a ChurchSpring member we’ve already got you covered, you don’t have to worry about doing anything.

Rohn Gibson (31:31):

There’s still some best practices. And that’s what Isabel is going to talk about as far as how you format your images and to make sure that you think about those things. But choose a design that’s already responsive. If you’re a ChurchSpring member, you’re already squared away. If you’re not maybe sign up for ChurchSpring, or if you use a different provider, ask them for, you know, a website design that is already mobile responsive. So hopefully that answers that question. And then it’s a, or what characteristics form a responsive website design. So the characteristics really, when we think about responsive, we’re thinking about changing to the format of the screen. So like we’ve talked about, so those are the characteristics that I, I’m going to assume that this means more of like, how do I know if my website’s responsive or not? That’s how you would know. So prior if we’re, if we’re missing that question if you could clarify for, I want to make sure we get your question answered, that’s it? Perfect. Got it. Thank you. Wonderful.

Isabelle Faletti (32:31):

Really you want it to be easy for visitors to click the button. If you have a form, it needs to be simple for people to actually fill out the fields and submit it. Imaging

Rohn Gibson (32:41):

One easy example. That’s just like so obvious because when we start talking about images or some of those things, there can be some gray area, but one of the main areas is navigation. So when you look at the main website and there’s, you should have a logo or at least the church name at the top, if you’re on a computer, it’s going to have the navigation all layered out, right? So there’ll be like five, six. We, we work with our churches and really put some limitations to optimize best practices, as far as how many items actually do show up in the main navigation. But when you’re on a mobile device, you’ll see that there’s like this little three-line or what we call a hamburger. A lot of people call a hamburger menu and then you select that. And then you see your navigation. That is a perfect example of effective responsive design, right?

Rohn Gibson (33:26):

Cause when you’re on a computer, well, you don’t want an extra click to have to get to all of that information. You just want to be able to click and get where you want, whereas on a mobile device, you want to chunk up the information and make it easily consumable in that very small screen. Well, some aren’t so small anymore, but on a relatively small screen, we’ll say where that’s, when we chunk it up, we make it available there under that, that three-line hamburger menu. They can select that to get to exactly what they’re looking for. So I think that sounds like we’ve, we’ve kind of hit the mark on that. So great question. And I’m excited to get into yeah, really getting into some of the images, how to adjust them, how to, how to make those available for those who already have a responsive design are already using ChurchSpring. How can they make those really the most optimized? So I don’t want to plow ahead if there’s another question we need to address.

Isabelle Faletti (34:14):

I think we’re good. So for all the listeners and whether you’re listening live right now, watching live or after the fact drop your question or comment below, and then we will get to it right now or after the show. So I just want to kind of jump right in. I know that we’re already 35 minutes in our show here for those of you who are new. Rohn and I love websites, we love technology. We love equipping the church. So we get really excited about the topics and we can just talk and talk and talk. So we are trying to keep this at 45 minutes so everybody can hold us accountable. We may go a little, a little longer. So I am just going to shift real quick and show two really practical ways that current ChurchSpring members can optimize their images for mobile for any type of device.

Isabelle Faletti (35:08):

So like Rohn mentioned every single church, spring powered website, every design is already optimized to automatically change for each device. However, as Rohn also mentioned, there are some best practices that you need to do to make sure that images that you upload look super great on every single device. So I will run through two different features, our image alignment feature, which has kind a new fun feature that our team just launched. And then how you can upload images to your website that are recommended image sizes for your site. So I’m just going to go ahead and share my screen here and we will dive right into this. And as I’m going through this, if you have any questions again, just drop it in the comments here. And Rohn will let me know when we have a question. So I am on my demo site, it’s on the Flourish plan.

Isabelle Faletti (36:11):

So maybe a little different layout if you are a ChurchSpring member and you’re on a different plan here. So I’m just going to go to my events page. I am live streaming and on my website. And so you may see a delay and what I am doing here. So have grace, if there is a delay, thank you for that. So right now on your website, you have a background image on each of your page on your sub pages. So this is another best practice for websites for mobile, because you need it to be image heavy, to really capture the audience’s attention. So you upload an image right now, the focus on this image is more of the guitar. However, if I want the focus to be more so on the person’s face, and I want that to stick on every device, then I will change the alignment of this image.

Isabelle Faletti (37:12):

So to get to that, you’ll go to the page that you want to change the image, place your mouse over background. You’ll have two options that will pop up, click on the alignment option, and you’ll see this really cool little grid pop up that will come up. All you have to do is just click the button to see the alignment change. So as you can see, when I click that top circle the focus or the alignment went on the top section of the picture. So if I would want the focus to be really on his, on his head, that is what I want the focus to be, no matter what device people are viewing on, then I’m going to click this right this right button. So you can play around kind of just see the different focus that you can do.

Isabelle Faletti (38:00):

So again, once you select your alignment it will stick (is what I use as the layman’s term) on every single device. So you can really select how you want it to look on, on mobile, on tablet. So that’s the background image alignment. If you have any questions about that, send us a support ticket or drop us a question below and we’ll, we’ll help answer that. The other thing that I wanted to review here is how you can upload your own images for your website that will look really good on every single device. So with ChurchSpring, we do have a, an image library with images that are already optimized. What I mean by that is that it is the correct size for areas on your website, that image will automatically reformat to look great on every device. You can also upload your own images.

Isabelle Faletti (38:57):

We, we recommend that you upload your own images to make it you know, be a reflection of your own church, of your leadership of your small groups. That’s a great way to add personality that way. So kind of two things the first is that we do have again, recommended image sizes for any images that you’re uploading. So we have a resource for you it’s churchspring.com/help. Rohn, I think we have a banner on that face on to put that on the screen here. So again, if you’re a current member, go church spring.com/help. And then we have frequently asked questions, recommended image sizes, click on that article, and you’ll see recommended image sizes for your home page, for your leadership, for your your background photos right here, follow that format. And you’ll be set. I wanted to just review real quick, how you can upload images on your website, on the leadership page.

Isabelle Faletti (39:55):

So you will need to resize some images that you have based on what we recommend. If you do not have a photo editor on your computer, we recommend is called canva.com, canva.com. It’s really an amazing free tool where you can easily resize any images. So I won’t go into the details of that right now. However, if you would benefit, if you would love to know more about how to use Canva, how to edit your photos or graphics, let us know, just drop a comment and let us know. And we can do another ChurchSpring Live specifically on how to resize images, how to use Canva. It’s a great powerful resource, and we want to make sure that we’re giving you the tools that you need. So I I’ve already gone ahead and resized my leadership images to what we recommend, which is a square format.

Isabelle Faletti (40:53):

So 500 by 500 or 1000 by 1000. So I’ve already done that in Canva. I downloaded it to my computer and then I’m on my leadership page. So all I have to do is click into the pencil icon to edit the section. And then whenever you see this this image that says select image and kind of the default head here, that means you can just click into that section and upload an image. So you upload a file directly from your desktop. So you do have to click the upload file button, and then I will go ahead and find that file I’ll upload image. And then it will automatically add to my own personal image library, I’ll click insert image, and then you’ll see that it adds right there, click save, and wa-la! You’ll see that I just super easily added an image. And because I, I uploaded it and the recommended image size, which is 500 by 500 for the leadership photos, it will it will look great on every single device. So Mike and Harrison are super smart team. They’ve designed our website turret spring so that this photo will automatically kind of resize based on the device. So that’s how you upload an image to your ChurchSpring website. It’s really simple. I believe anybody can do this, whether you have a lot of tech experience or you’re really, really new to websites, you can do this.

Rohn Gibson (42:29):

Yes. Yes. Awesome. Well, thank you for that. I think that would be super helpful. I know with some of the questions we get and even then I’ve come in, I think that’s going to be super helpful in his answered some of those,uPriya we’ve had, let’s see a couple of questions come in from Priya,urelated specifically to,uFacebook live video uploading. Uso we’re not gonna have time cause we’re actually,uabout needing to wrap up here. So what I would ask you to do go ahead and reach out to support. Uso you can do that, email us, or submit a ticket through your settings area, and we will follow up with you exactly how to do that. It’s great that you’re using Facebook. UFacebook is one of the platforms we recommend for live streaming, cause it’s just such a great tool to be able to use, to reach a lot of people and a network that already exists.

Rohn Gibson (43:15):

And there’s a lot of people that don’t know that you actually can set up your live stream in a way that doesn’t require people to have the fake Facebook account, to be able to see your live stream. So anyway, if you have questions on that, we’re running out of time here. So if you can reach out to us, we want to make sure we get all those questions answered. Specifically on embedding those Facebook lives. You can absolutely do that. We can walk that through that with you. And then the beauty of Facebook is it makes it super easy just from a responsive nature and those sorts of things, as far as people viewing it, as well as after the fact. So we’ll answer all those questions there. Priya, we want to make sure we get those answer. We’re just running out of time today. So the Canva website address, if you do a Google search for Canva, C-A-N-V-A, which I think yet it’s C-A-N-V-A and I believe it’s just C-A-N-V-A.com. But we’ll link that up in the show notes

Isabelle Faletti (44:10):

As a banner. So you can take a look at that, but yeah, it will be in the show notes or you can Google it

Rohn Gibson (44:15):

Perfect. And they do have paid plans. So just, just so everybody’s clear if you get there and you say, Oh, there’s paid plans where you can do a ton of stuff for free. So just understand a lot of what we’re talking about. You can do for free,

Isabelle Faletti (44:27):

For a nonprofit. You can get the paid plan for free. So Canva offers a free paid plan for any nonprofits. So churches ministries, that would be you, you have to go through a process, but again, we can talk about that maybe on a separate ChurchSpring Live.

Rohn Gibson (44:44):

Awesome. Cool. All right, well, let’s wrap up with some prayer requests here. Prayer is so important and we, we got a lot of prayer requests. We send out emails every single week asking for prayer requests. We want to pray with you. We don’t want to just be a software provider. We also want to be a partner in ministry. So I’m just going to answer one question, but while I’m answering that question, go ahead and submit your prayer requests. If you have any, and we’re going to pray for those Comfort asks, “Can we use Photoshop?” Absolutely. That’s what our, our design team uses. We utilize Photoshop, but for those that don’t have access to Photoshop that need a free kind of web based easy access tool canva.com can be a great resource for that. All right. So I know we had a prayer request come in earlier from John and John is maybe even right now as we speak actually having surgery. So it was a back surgery. Let me see you just said minor surgery. So we want to pray for pastor John and the surgery that he’s having. And then we also had another prayer request that came in from, from Joel Rodriguez, specifically asking he is actually the one having cervical spine surgery. So asking for healing, praying for healing there. So we will keep both of those and our prayers I’m missing any others?

Isabelle Faletti (46:07):

No, it looks like that is what I have also. Okay, perfect.

Rohn Gibson (46:14):

All right, well, let’s go ahead and pray. And then we’ll talk about a couple of quick wrap up items and I will jump off. So let’s pray, dear God, we thank you for your love for us. Lord, you are so good to us and what I just thank you for those who were able to join the live stream and those who will watch it after the fact, God, I pray that you would, or just help them to, to walk with you Laura, to sense your presence in order to surrender and obey or what you ask of them, Lord what you ask of us. So I pray that you would continue to work in us Lord and work through us to accomplish your will. God, I do ask that you would be with the requests that were mentioned, or I think of Joel Rodriguez is he is either having or will be recovering from cervical spine surgery. God, I pray that you’d be with him. Lord. I pray that you would give grace and mercy and healing. Lord, we know that you, you alone are the great physician. And Lord, we ask that you would work in him, that you would heal him and Lord that he would be able to sense your presence and know that you are good. And Lord that your, your mercies are new every day.

Rohn Gibson (47:23):

Lord, because of who you are ultimately. So God, we pray that you would be a Lord there with Joel Lord. We also ask that you would be with Pastor Scott Lord as he’s also having minor surgery. God, I pray that you would be with him. Lord. We know he wasn’t being able to, to be on the live stream here today. But Lord, we do know that you are with him and that or do you are the God of all comfort. So Lord, we pray that you would comfort him or give them peace of mind, give him healing. And Lord, I pray that Lord in both of these instances and many others, God, that you would bring people across their path to meet the needs that they may have Lord through this healing journey. So Lord, we thank you for who you are. And Lord, we ask that you would continue to yeah, Lord to bring peace Lord. We pray that Lord you would be with churches who are still walking through the the journey of regathering as a local congregation. Lord, we pray that you would give discernment

Rohn Gibson (48:31):

And Lord that you would give an abundance of grace or through that process. But ultimately, our desire is that we would be used by you or to reach a world that doesn’t know you. So Lord we again, thank you for your great love in Jesus’ name. Amen. Amen. Alright. So a couple of quick wrap up items. So we’re going to shake things up on you for next week. We’ve got some scheduling things here. So we are going to adjust next week. Live stream is actually going to be Tuesday, June 23rd at 10:00 AM central time. So again, next Tuesday. So we’re changing it up. It’s not going to be next Thursday. It’s going to be next Tuesday, June 23rd at 10:00 AM central time. And again, if you have questions, you can even put them in the comments below. Even on this video, we do get alerts for those, you know, to potentially be addressed on a future episode.

Rohn Gibson (49:28):

So please, if you have questions, if you have things that you would like us to talk about, provide some teaching on or some resources on, please let us know that in the comment section, you can also reach out to us at churchspring.com/contact and submit the form there to reach out to us. But thank you for all who joined us today was great. Love the questions. And again, we know that there’s a couple that have questions that we weren’t able to address. So please do reach out to us whether it’s through, if your current church freeing member to reach out through a support ticket or even just shooting us an email, we’d be happy to address all of those questions. There is also, am I missing anything? I think we’re, I think we’re good to go. All right. Well have a blessed day, everyone.

Rohn Gibson (50:10):

We can’t wait to see you again. Last reminder here. When are we meeting Tuesday next Tuesday? Exactly. I feel like as a Sunday school class, what do we mean? Right. So next Tuesday, June 23rd at 10:00 AM central time. We’ll look forward to seeing you then until then God bless. And we look forward to seeing you next Tuesday. Bye bye.


Watch each live stream on our Facebook Page, @gochurchspring.

More Post

Get weekly email notifications for free!

Subscribe to the Full Focus newsletter for the latest insights and strategies in goal achievement.