The thing about free webdesign for Churches and charities

Did you ever have to work as a web designer for a Church or charity website?

Do you feel like you were called to do so, and think you should do it for free because it is your calling? Well, here are few thoughts to consider before you start creating some awesomeness in Photoshop & Sublime text.

Professional web design is work not a hobby.

I am a new born christian and I am a part of Church that I really love. The leading pastor has spoken a lot into my identity as a young christian, and I decided to support the Church with my talents as a web designer and online marketer. I actually felt like it was my calling to do so.

Define the work before you name your price.

From the begining on it was normal that I will do it for free. As we began to define the project plan, I realised it was a pretty big job. The work included professional custom design on top of CMS that would be able to present and sync events managed through external Church Management Software. It should also sync and present small groups that were managed in the other external software (written in pyton as custom work of local programmer). Not to mention it should also be able to deliver the API for the Sermons and Team groups for the app that was to be develop next to the website. Behind all that the Website should of course be responsive and optimised for accessibility. The similar websites that were given as a reference:

Does this still sound like hobby work to you?

As I revised the work I was to deliver, it became clear to me that I can simply not do it for free. It turns out I would have to do 250+ hours of work for free.

The time and energy it included, sounded more like I am doing the website for the middle size Company. Which in a sense my Church is, concerning roundabout 400 attendees and about 40 people working within (mostly voluntarily).

To free or not to free work – decide for yourself

Question came to my mind: “Am I still Serving if I charge for it?” Well, if you have rich parents and you heart beats for the Church and Jesus explicitly told you to to so, please go and do it. If you are a designer with not such luck, and have to pay the bills like the rest of the world, I bet there is no way around.

“Are you still serving your Church if you charge?” Well yes, as in all other projects you are even more about to deliver high quality, since you are doing it for God and His Bride, the Church. Unless the Church needs just a simple presentation and sermon times which you can do in HTML template in max 2-3 days. I would say highly recommend you charge for it. Your gift for the Church will be the quality and the lower price if you decide so. I would suggest not to go lower than 50% of your hourly rate. Cause you are delivering 150% quality for Him.

Help your Church to realise the charge problem.

Based on the Nuschool article from the reference on the bottom, you could try to convince your pastors about the value of the website and how they can profit with it. Getting more attendees will also get more donors. Getting more satisfied (existing) attendees will help them to present where the Church resources go to and will make them proud of their church website and more open to invest more. They will also, most probably be happier to share the link of your church website or the link to the latest sermon that touched them so deeply. Once because you will take care of the easy sharing social link and also because they are in love with new professional design.


Yet, there is no money problem…

Well, since Church also has to pay the bills just like any other organisation, it means it has to have it financial resources. The bills for the electricity are paid, the rent is paid, the band equipment is paid… Well everything is paid because the Church needs those resources. There is a point. If the Church needs a website it should be taken into account and paid. If something is not worth paying it is probably not necessary. No company starts with a project that does not bring value to it. At least none of successful companies. Rather help your church gain ideas of how to fund the website project. You can find many ideas in google.


I have been speaking with my two of my colleagues who did the Website for their Church. Both of them worked for free and both of them told me not to do the same mistake. Pastors usually do not understand the work behind the “Simple CMS and Sermon listings” and will believe you can do it as as your hobby within few days. But to be honest, Church is an organisation and organisations have complex websites. Your work will also not end when the website is delivered. Your work of teaching and offering support just starts. If you still decide to make it for free, be ready to work double hours in order to finance your free work, and hope it will be appreciated, cause in the end, it did not cost anything…


Centering Images as IMG tag or Background Image

This is just a quick hack on central positioning of images within your website. I allways forget how to do this so I decided to write it on my blog as a quick reference.

Positioning Images via background css property

Default background-position is 0 0 which means left top, so if you need it central just make it background-position center top or 50% 0. This will position the pivot point of the image in the center and position that point in the center of your container. Beware: positioning the background image with left: 50% will set pivot point to begining  of the  image.

background-image: url(whatever.jpg);
background-position: 50% 0;

See the Pen The Difference Between background-position and left by Chris Coyier (@chriscoyier) on CodePen.


Positioning image with img Tag

If you indeed need to position the image it self in the center there is a nifty little CSS3 hack for that.  Simply set the img to left: 50%; and translate the image pivotal point manualy to the middle of the image via transform: translateX(-50%); Note: the container has to be position: relative;

<img src=”whatever.jpg”/>

img { position: relative; left: 50%; transform: translateX(-50%); }