web design

My Recent Redesign pt. 2

Yesterday I began writing about the recent redesign of our church website, what platforms I considered and how I chose Joomla as our CMS.  Today I thought I’d write about the actual process of the redesign and move to Joomla.*  I will share the challenges and the things that made the move easier. Challenges

I should say that most of the challenges didn’t remain challenges for long, because the support for Joomla is truly amazing.  On 2 occasions I twittered about my frustration before I went to bed and when I woke up, there were @ reply answers.

Installing Joomla – I didn’t really know what I was doing and had never used Joomla at all.  So I started with the “Getting Started” articles on Joomla.org and I read the absolute beginner’s guide.  It was helpful.  I was originally planning to move our host, so I was reading up on other shared hosting when I happened across this article.  This made installing Joomla so simple it was unbelievable so I stuck with Go Daddy.  It would have been easy to do manually, but a bit more time consuming.  My only real fear was setting up the MySQL database.  The moral of the story is, Go Daddy set up Joomla for me.  All I had to do was tell it what directory.

Choosing a template – I said yesterday that there is a staggering number of free templates available for Joomla.  And there are several that cost just a few dollars.  I chose the template called Jamba from Joomlashack because I liked the modules and because it seemed very flexible.

Learning my way around the template – This was really the most difficult part of the entire process for me, things were just not quite as intuitive as I expected.  Mostly it was an exercise in trial and error.  I would change one parameter and reload the page to see what it did.

In particular I had great difficulty figuring out how to edit the footer.  Reply #5 on this post was helpful to solve that problem.

The only outstanding problem I have is in the twitter feed module.  It makes improper line breaks within web addresses and often flows over the boundaries of its enclosure.  I’d be glad to accept any help I can get for that one

Making iFrames and javascript work – This was by far the most frustrating issue I dealt with during the redesign.  Our messages page has a javascript player built in to each entry.  Joomla’s default was not to allow any code.  So the code of the script and the player’s parameters were just showing up as text on the page.  I read great things about a plugin called jumi.  All I can say is that it didn’t work for me.  It would hide the code from the script, but it didn’t actually process the code.  One night I twittered about this and went to bed.  When I got up I had a reply from @saadiallan recommending a plugin called Sourcerer.  It worked perfectly allowing me to embed the javascript player as well as the google map and calendar.

Installing plugins – I did not realize just how powerful joomla really is.  There are plugins to allow almost anything I desire and it is amazingly customizable.  If you use the dashboard, then installing plugins could not be simpler

Moving to the root directory – This was by far the most frightening thing to me in the site build.  Once I got to the point that I was ready for the public to see the new site I needed to move it all from the test directory to the root.  I copied everything to my hard drive then I moved the entire database to the root directory.  Then I edited the configuration.php file.  (there are many instructions in many forums about how to do this, but basically I edited every line that had http://domain/olddirectory to just say http://domain/)  It was also necessary to clear the cache, but with only one small panic I got it working.

Helpers – This is where I received the help that made everything do-able and pretty smooth

  • The forums at joomla.org are teh awesome
  • Ryan Thomas who designed our logo and generally gave design guidance
  • Paula Durand our church secretary who is keeping the Google calendar up to date and keeping content current
  • The readers of this blog who gave me editorial advice.  Especially Caroline who gave me 4 pages of copy edits which I am still not finished with
  • churchwebsitehelp.com who did a review of the site.  I haven’t implemented all his suggestions yet, but the review was very helpful and it was free.

* I know that much of this post is written in gibberish for most of my readers.  I'll try to get back to writing in English tomorrow.

My Recent Redesign

I recently redesigned the church website.  The old site was functional, and even useful.  When I built it 3 years ago I was terribly proud of myself for my l337 internet skillz.  I actually used like 2 PHP commands to make it work properly. But I have learned a lot about websites in the last 3 years, and there were a host of technical and design issues with the old site.  Also, in its prior format, I was the only one who could edit or alter the website in any way.  There was no question, a redesign was necessary.

As I considered the redesign, the first thing I had to do was decide what platform to build it on.  Because I wanted it to be simple for others to use, I had to build it on a Content Management System (CMS).  I considered wordpress.org because I am familiar with wordpress.com (obviously, since you are reading this blog there), and I figured that it would be simple enough and that the learning curve would be shallow.  I also considered moving everything to squarespace.  It looks very simple, very customizable, and intuitive.  I chose against it, because the cost was more than our current hosting plan.  It would cost roughly $200/year.  Currently we pay just over $80/year on Go Daddy.  This is not a great difference, and squarespace is definitely not cost-prohibitive, but I figured it wasn’t the best use of God’s money.

In the end I decided to move it to Joomla because I [unfairly?] consider wordpress mainly a blogging platform and I wanted a bit more flexibility.  Also because there are a staggering amount of free joomla templates out there and the support for joomla is incredible.  I chose to use the Jamba template by joomlashack.

The newly redesigned site should be useful to visitors as well as church members.  it has the latest calendar, our twitterfeed, and our latest announcements.  There are feeds for announcements and a podcast of the latest message for our deployed soldiers and those people who cannot hear the message that week.  It is also full of information for visitors to our church.  But most importantly, it is editable by people other than myself.

Tomorrow - the challenges of the move to Joomla and the template

Your Help Please

If you follow me on Twitter you know that I have been in the process of redesigning the church website.  I needed to move it to a content management system so that others besides just myself could update it .  I chose Joomla because of the amazing plethora of free templates, and the flexibility.  Also because I tend to think of wordpress.org as being just a blogging platform.  I will have a post later about the move, but in the meantime I need your assistance. I am close to going live with it, but it needs a once-over.

I'm not as far along as I thought I would be by the time of this post.  Some of it is unfinished, I think those parts will be obvious to you, (Like the ministries page which I've decided to reformat but haven't) but let me know your thoughts on the template, the functionality, how it can be improved, and obviously any errors or proofreading mistakes.  You have been very helpful to me in the past

I would like your suggestions of any way that the site can be improved, either through design or through content.  It's pretty easy to change things now that I have a feel for this template.

The new-and-improved site can be found at lagrangeparkbc.org/new. Check it out. Hit me with your suggestions.

Also.  I'm in the basement for a few days, so if comments need moderating it may take a while.

Uggh...

For the last few months I have been bothered that I couldn't get a media player object to work on our church's media page except for in IE. And I've been kicking around the idea of a site redesign. Therefore...

I have spent the last three hours trying to get the scripts on this O'Reilly page to work with the sermons.  I can't code JavaScript at all, so I hoped that I could just copy the scripts and make them work.  Let it suffice to say that I never got close.

So, I gave up. I just put in a flash based player.  I guess it works, but there is no volume control and I don't think you can skip ahead until it has completely buffered, but it should work on virtually every computer.

My concern is the "chipmunk effect" that some computers apparently experience.  Try out one of the files and let me know if you have any issues. Also I'll accept any help or feedback anyone wants to give.

<update> Apparently i should have just read the site i got the player from.  It explained the chipmunk problem.  It has to do with the bitrate I encode at. I've been encoding at 48kbps. (No need to go higher for just voice and I can save bandwidth.) I'll need to change it</update>

Finished...I hope

I think, after a couple of hours work this morning, I finally finished the website for Drop Tine & Spurs Outfitters. Feel free to visit and point out any corrections that still need to be made.

Also, thanks for your help from this post.

I think my next project will be to either cleanup or redesign the church website. Feel free to vote here. should it be a redesign, (probably still a sidebar navigation) or just clean it up so it looks right on IE and Opera? I'm leaning toward a redesign. I've leaned so much about web design since I built it, that it won't take much work to improve.

Also, follow me on twitter. I'll try to pass along interesting stuff when I see it.

A favor for me

I have a vast army of over 5 regular readers on this blog. So I would like to ask you to do some work for me please visit this site that I am building for my aunt & uncle. If you have a moral objection or are offended by the idea of hunting, don't visit.

http://DTSoutfitters.com

and look at it closely. Let me know about formatting issues, spelling errors, broken links. I need people to use different browsers, (although I have used the Opera browser, b/c I know no one else uses it) particularly safari for my Mac readers. Also, read it. I need to know if it suffers from doesn't-make-senseness

Here's stuff I already know is messed up

- The logo in the header is just a placeholder. the final (which will be similar) is coming in a few days and will be actually transparent rather than looking like it's showing through static

- The who are we page is incomplete

- I have another question or two to answer on the faq

- No sitemap (it's coming)

I am not a real web designer, I am self taught and don't have anyone else to do the proofreading and testing so I would appreciate your help. I will accept any general criticism, or commentary.

Also I am curious, do y'all think the colors on the site need to match the logo colors exactly, or does it look okay as is? it is a simple fix to make it match. Also, if they should match should I change the logo to match the site or vice versa? (in other words, which green and orange do you like better?)

You can send me an email or just comment here in the comments