Advertise with Google for Practically Nothing

If someone does a Google search for churches in your city, how would you like to be the first result?

Lots of people these days – especially the under-45 crowd – search online instead of the phone book. Google has created Google AdWords. They offer a starter edition, which will be perfect for us rookies.

How to Do It

Once you clicked the “Sign Up” button they’ll ask about which edition you want (starter), and your business’ (i.e. church’s) country and phone number. Odds are they know you already, but if they don’t you can fill in your information.

The exciting part is you get to write two lines of text up to 35 characters each – roughly a short sentence. You get to give your potential visitor a short message. It’s tough to think of. If they’re looking for a church, they need something. You want to tell your visitor what need your church can fill. You can change it later, so think seasonally. I’m writing this in November, so think Christmas. Maybe your church is family-focused (enticing parents with young children), or maybe it’s a place of healing (for depressed people, who only get worse around the holidays).

After that, you get to pick who sees your ad by selecting keywords. Google suggests a bunch based on popular searches. Go ahead and pick some, but also type in some in the box on the left. You can change it later, so don’t sweat getting it perfect the first time.

What’s it Cost?

Time for the money part! You get to tell Google how much you’re willing to spend per month. You only pay when someone clicks your ad. Once your budget has been reached your ad won’t show up until next month. It’s pretty simple, and gives you a lot of security against wasting money.

And that’s pretty much it. Once you give them your billing information they’ll start running your ad. You can update your ad whenever you want, maybe to promote a big event or season. If you get comfortable with it, you can move to the standard account (instead of the starter) and run multiple ads. It’s really flexible, and Google does everything they can to make you comfortable, especially with money.

Wrapping Up

There are people looking for churches. If you want to be found, you’ve got to make it easy on them. Since Google is the most common search tool around, it makes sense to focus on it.

Of course, you’ll want to have a great website for these visitors to go to. Next time we’ll pick up the Dynamic Church Website series by going over how to design the look and layout of a site. There’s a few basic principles to follow to make it appealing and effective.

Websites 101: HTML/CSS

Code is scary – wait, wait, don’t run yet!  Keeping up a website is crucial to church outreach these days.  It’s becoming the most common way visitors look for churches to visit.  There are ways to get websites without learning code – even free ways – but I have to break the bad news: they’re lousy.  Learning at least a little code is the most effective, cheapest, and I believe easiest way.

If you’re totally uninitiated to acronyms like HTML or CSS, this post is for you!  If you know that stuff, feel free to skip.  If you’re still here, get ready for a bare-bones primer on web coding.  I’m assuming you use Windows, mainly because I’ve noticed Mac users are a wee more computer-savvy.  If you’re on a Mac and can’t translate what I’m saying, drop me a comment and I’ll set up a Mac-friendly primer.

Get the Right Tool

HTML and CSS are written in plain text, so Notepad will do.  However, I’m going to suggest Notepad 2 (not actually associated with Notepad).  It’s very similar, but if you’re editing code (like we are!) it hightlights the code-bits in different colors to be easier to read.  If that sounds neat, download and install it.  If not, regular Notepad will work fine.

HTML Grammar

There are two parts to know: content (which is all the stuff you want on your site) and tags (which tell browsers how to display the content).  HTML is called a language, but it’s really more like grammar, formatting your words to be read properly.  You always bookend content with an opening tag and a closing tag.

Tags

Tags are written inside carrots.  For instance, to designate something as a paragraph you start it with <p> and end it with </p> (“p” is HTML for paragraph).  All closing tags use a forward slash.  Sometimes tags will be inside other tags.  For instance, to bold a word inside a paragraph you’d start your paragraph with <p> then bracket your bold word with <b> and </b> then close your paragraph later with </p>.  That’s called nesting (like Russian nesting dolls).

Just like the dolls, it’s best to close the inner tag before closing the outer tag (so <p><b></b></p> instead of <p><b></p></b>).

Jump Right In

So open up your preferred Notepad version.  Write all this out:

<html>

<head>
<title>Test Page</title>
</head>

<body>

<h1>This is a header</h1>

<p>This is a paragraph</p>

<p>This paragraph has <b>bold text</b> in it.</p>

</body>

</html>

Save it as test.html or somesuch (just make sure it ends in “.html”), then right-click it and “Open With…” the browser of your choice (probably Internet Explorer).  Keep the Notepad version open, too.  Notice a few things here.
 

1. Your whole document is contained by the <html> tag.  This tells the browser what it’s looking at.
2. There’s a <head> section, which doesn’t show on the page.  It gives the browser some background information.  Look at the top of your browser and you should see “Test Page,” which went in the <title> tags.  That’s the kind of stuff <head> is good for.
3. Everything in the <body> tag shows up on your page.
4. The <h1> tag is a Header, while the <p> tag is a paragraph.  They have default formats that are so-so, but we’ll change those later.

 
That’s basically how HTML works.  We’ll talk fancy stuff later.  What’s important now is that you understand the principles.  The easiest way to learn new tricks and techniques is experimentation, and we’ll experiment lots in future posts.

Oh yeah, and add lots of extra line breaks between things.  And tab stuff to organize it outline-style.  The browser doesn’t care about the extra spacing, and it makes things easy for you to read.  You can even add line breaks inside tags – the browser ignores them!  Seriously, three or four line breaks between tags goes a long way.  Group similar things, spread out different things, and tab over nested things.

CSS

Now that you know HTML, we can talk how to make your content look the way you want.  CSS (cascading style sheets) is a separate file you make that dictates the styles of all your tags in HTML.  If you don’t style something it sticks with a default.  It’s a lot like HTML, so we’ll just dive in.

Open a new file with your preferred Notepad.  Type the following:

body { background-color: silver; }

h1 {
text-align: center;
font-family: Sans Serif;
color: red;
}

 Save your file as test.css and open your test.html file.  Add a new line after the </title> tag and before </head>, and add the following:

<link rel="stylesheet" href="test.css" type="text/css" />

Make sure you save both files, and leave them open for now.

Here’s a good time to mention an exception to the opening/closing tag format.  In only a handful of cases a tag is totally stand-alone, meaning it doesn’t format any content.  This is one such case – the <link> tag tells the browser to reference a second file.  In such a case, you end the tag with a space and “/>” instead of something like </link>.  Images do this, too.  It’s otherwise so rare you won’t need to worry about it – so don’t worry!

Open that test.html file in your browser again and see how your styles work.  The background should be a pale gray, and the header should be centered, red and in a different font.  Let’s break down the essentials of the CSS file:

 

1. You don’t need special opening tags to the whole document, like the <html> tag on your .html file.
2. Each piece of CSS is a reference to a tag in HTML.  For instance, we referenced the <body> and <h1> tags.
3. The syntax is simple: write the tag name (without carrots), a space, and use the curly brackets around all the elements you want to change (like font color or positioning).
4. For each element, you write the element name (like “background-color”), a colon, the change you want to make (like “silver”), and end each one with a semi-colon.

What I said about adding spacing applies here, too.  Puts lots of space between things so you can read it easily.

So What HTML Tags and CSS Elements Are There?

Okay, I’ll level with you – there’s a lot of them.  Yes, it’s a specific list – for the most part you can’t make your own up.  If you want a list, I recommend w3schools.com (see their HTML and CSS tutorials).  If you’re comfortable experimenting, have at it!  The files you made aren’t online anywhere, so nobody but you will see them.  For the record, I know a lot of tags and elements but I almost always have to look some up.  You’ll never learn them all, but you will remember ones you use a lot like <p> and <h1>.

What Now?

That’s it for the primer.  Next time we’re going to start putting this know-how together with WordPress and go through all the steps to make the Parkway website I mentioned before.  You need to know the principles of HTML and CSS going in, and now you do!  Hopefully it wasn’t too boring.  It gets cooler from here.

Making a Dynamic Church Website, Part 1

Dynamic is a fancy word for something that changes.  In web design, it means a website that changes automatically (that is, without you making the changes manually).  We’re going to walk through the steps for using blog software to manage your church website’s content dynamically.

Instead of explaining, let’s use an example I put together for my home church, Parkway Presbyterian.

Dynamic elements include:

• Navigation (just under the blue header; ‘Home, About Parkway, etc.’)
• Pictures (they’re a slideshow!)
• “Upcoming Events” announcements
• Subpages (the stuff besides the homepage)

Using WordPress as a Content Management System (CMS)

Just like this blog, I use WordPress as the bones of the site.  You can download your own copy at www.wordpress.org.  You’ll need to already have webspace, a domain, and access to your FTP (comment or e-mail me if you have no clue what those things are).  You should have a little experience with websites and installing programs; if you don’t, try to find a helper in your congregation (or ask me!).  The WordPress site has instructions for installing.

It’s All About Themes

WordPress uses what’s called “Themes,” which dicate the look of your site.  You can also write your own or modify an existing theme – which I did for the example.  For those with some HTML know-how, you basically find the parts of the site that are dynamic (written in PHP) and do your HTML around them.

For the far less savvy, just download a Theme you like.  There are free and pay themes.  The two places I like to check are SmashingMagazine.com and ChurchTheme.com.

Later on I’ll discuss how I customized a free theme to create the Parkway site.  Your own church website will probably have some similar needs and some different.  Drop me a comment if you’ve got a specific idea you want to try and we’ll work through it here.

Mission Statement

THIS BLOG HAS MOVED. I’m moving my tips to JeremyHenson.com – my website for my web design and consulting freelance work. Check it out.

This blog is for church workers (paid or unpaid) who want to catch up with technology quickly, cheaply and painlessly.  I’ll cover tips to save time, new tricks for your old website, some cheap pieces of hardware that can go a long way, and most importantly: answer your questions.  Read more on the About page