Critique my redesign

[mrbelfry]

Hey there crew

I'm about to launch the redesign of my church site at http://new.lighthousecc.co.uk

Not all the content is in place yet but I would appreciate some of you looking it over and making sure nothing is missing or could easily be improved! I've asked other forums in the past (that unfortunately are no longer that active) to check out my stuff and I've found it really useful getting other peoples points of view. I hope to get the content together over the next week or two before I launch so you have until then to stop me making a big mistake!

Thanks in advance

[mrbelfry]

lol - I guess this means you don't like it

[McDLT]

I'm on dial up, so it took a minute or two to load.

The Find Us map is cool. Is there a way to print out the directions too in text format?

I like that the pictures change. You may want to take out the names of the people in your alt tags.

You will want to edit some of the pages to make it easier to read. Example: Saying that your modern (although I believe you are using the word modern in its other meaning) may not be the best thing now-a-days because of the modern/postmodern debates.

You may to always have something in the news and events category and the Coming Events, even if it's just the Sunday service.

I like the layout and it's really easy to read.

Just some of my thoughts.

[David Gillaspey]

lol - I guess this means you don't like itNo, that wouldn't be a correct conclusion. To be honest (writing as forum administrator), it's my observation that, to date, members of this forum haven't really rushed to critique other's sites, even when invited to do so.

That's OK ? I've thankful that forum members are willing to invest any time at all ? out of their already busy schedules ? to participate in the forum. Plus, it's summer here in Northern Hemisphere ? I state the obvious because we have a member from Australia now (and maybe from other areas), where it's winter ? and, here in the United States, Daylight Savings Time is in effect. The combination of the two means forum members will likely be away from their computers a lot for the next few months.

(I'm trying to encourage you here; I realize it might sound like a rebuke, but that's not the case. I do want to encourage all members to invite critiques of their website, because this forum certainly seems like the place for it.)

I myself have been busy with other projects lately. I'll check out your site tonight and share my thoughts.

Sincerely,

David Gillaspey
President
Great Church Websites

[David Gillaspey]

Hi mrbelfry,

First, I love the design ? it's kind of a cross between Modrian and modular. The images of people of different color (or colour, to you) helps reinforce the message that your church is multicultural.

My comments:

On the "Who we are" page, you mention the Footsteps course. That has no meaning to an outsider (including me); consider adding a few words of explanation.

On the same page, you mention homegroups. Christians would understand what that means, of course, but not a person who has never been to church at all. Again, consider adding a few words of explanation.

At the bottom of the page, you say, "If you need more information about our ... core beliefs, contact us." No, that's what websites are for. Put the core beliefs on the website. No one should have to contact a church for more information about something and await a reply.

Pictures on the bottom right of this page are too small for the subject matter. The bottom-most photo, for example, is a group photo. But the photo is barely more than an inch wide, so you can't see any faces. I'm not saying don't use pictures that small, just select pictures with only one or two faces in them, or closeups.

On the homepage, there's just a blank space under the News and Events title, but I assume you're going to fill that in with something, maybe vertical scrolling text. (Horizontally scrolling text is an outdated technique, but vertically scrolling text is still OK.)

From the homepage, clicking on the News and Events title (or link) takes you to a page with a calendar. That calendar is so small I don't see how it can be useful. You do, however, have an "expand" button that make the calendar full width. On the full width calendar, however, there is no corresponding button to revert the calendar back to its former size.

On the calendar, I see a star and the instructions to click on the star to see events for that day. When the calendar gets filled with events, or stars, that's going to be a less than helpful way to present information. Would it not be possible to have the day's events appear as what Tony Whittaker (web evangelism expert who lives in England) calls "hover text"? That is, as you mouse over a square in the calendar that represents a day, the events of that day get displayed somewhere else on the page?

On the Contact Us page, on the left, your address information is centered, like this:

Lighthouse Christian
Centre
Sandy Lane
Chorlton
Manchester
M21 8TZ

with no punctuation. Now I get that "Lighthouse Christian Centre" is one phrase, but because that is so, why shouldn't I think that "Sandy Lane Chorlton" is one phrase, also? The problem is, as an outsider, I don't know. So I am suggesting either make the type smaller so that it looks like this:

Lighthouse Christian Centre
Sandy Lane
Chorlton
Manchester
M21 8TZ

or use punctuation, like this,

Lighthouse Christian
Centre,
Sandy Lane,
Chorlton,
Manchester
M21 8TZ

On the same page, you provide email addresses for the staff, but the absence of an email contact for the senior pastor (and for you, the webmaster, for that matter) is glaringly obvious.

Above that is a contact form. Consider adding some radio buttons allowing people to select the subject of correspondence, for example, prayer request, praise report, need more information about church, please contact me, etc.

Pictures at bottom right on this page are also too small for the subject matter (group photos).

On this page, you use the word "enquiries". But perhaps that's an English spelling for our "inquiries".

On the home page, there is a link to LIM/Missions, which takes the user to a page which does nothing more than tell the user that LIM Missions has their own home page. That's a waste of the user's time. On the home page, the LIM/Missions link, when clicked on, should directly open the other website.

Consider making the logo/type "Lighthouse Christian Centre" at the top of all the pages a hotlink to the home page. I realize that there is a "Home" link on all the pages, but that's a a pretty small target compared to "Lighthouse Christian Centre". It's easier for me to click on the logo to get to the home page.

Add a link to "Webmaster" (yourself) at the bottom of the home page. This makes it easy for visitors to report problems to you.

Looks like you're still working on the Childcare page.

Photos across the top of the page all have a web or fishnet background. I have to be honest and say I don't understand the point of that. I understand the need to make photos "cool" and exciting. The problem here is that the web or fish net background is too believable. The resulting photos actually appear as if the people in them really were standing in front of such a background. (Which, actually, could be the case.)

McDLT mentioned photos changing. I didn't see that, using Firefox on the Mac.

(I have previously, in another post, expressed my admiration for the animated directions to your church available from the home page.)

Those are my thoughts. But, still a very nice looking website. Let me know when the site is live. I want to add it to my database.

Sincerely,

David Gillaspey
President
Great Church Websites

[mrbelfry]

Hi David

Thanks for your excellent criticism. You mentioned lots of good things that I might have missed or maybe dismissed. I'll work some of your suggestions into the design. There is still a lot more content to go on and the content that is on there is really just saving a space for different content.

The pictures rotate using php - so your browser shouldn't affect it as far as I know. Could you please confirm that behaviour? The pictures that rotate are the 'who we are' and 'what we do' buttons - although there is only a choice of 2 each at the moment! - and the gallery images along the right hand side of some pages.


First, I love the design ? it's kind of a cross between Modrian and modular This sounds really cool but I have no idea what it means. Please forgive my ignorance - an explanation would be cool so then i can tell my pastor that the site is a modrian modular hybrid and try and blind him with science.

I'll let you know when it is live. Are you going international?

[David Gillaspey]

Thanks for your excellent criticism.You're welcome.

Are you going international?Not intentionally, but yours would be the second church in England to be added to my database.

Sincerely,

David Gillaspey
President
Great Church Websites

[mrbelfry]

Hi

My newly redesigned site is now live at www.lighthousecc.co.uk

I would be very happy for you guys to comment and tell me what is good and what is bad. I'll be making subtle changes over the next few weeks (had to hit a deadline!) but that is pretty much it (other than updates, obviously).

[brand1m]

I would have to say that overall its ok. The net thing behind all the pictures really bothers me ? a lot. It overpowers the images and I can't figure out what it is, but not in an intriguing way; in an annoying way.

my .02

[xhtml]

Haven't been on here in some time - but saw your posting and thought I'd help you out with some problems you have in your markup...

First off - I like the look of the web site - nice - compact design that seems to have all the important info readily available.

You have your pages coded as XHTML 1.0 Strict but checking it in the W3C validator produced 49 errors on the home page. Looking at the source I find the following:

<htmlxmlns="http://www.w3.org/1999/xhtml"> - This is not well-formed: should be: <html xmlns="http://www.w3.org/1999/xhtml">

In the <head> element you have a javascript that contains the language attribute which does not exist in XHTML/HTML Strict documents should only read: <script type="text/javascript"> The comments inside the script element should be removed and replaced with // <![CDATA[ at the top and // ]]> at the bottom, but to avoid this you should just call the script from an external file with the src= attribute

You should move the <script> call in the body into the <head> element too.

You have numerous <img> elements that are missing the required alt attributes - if the img is decorational only then include alt=""

In your <object> element, all the <param> elements are missing the end tag />... Also there is no <embed> element in any version of XHTML/HTML, even though some browsers expect it. Compliant browsers will render the content without this invalid element. That <embed> element itself is causing numerous errors. About the only way you can avoid this is to fall back to the XHTML Transitional DOCTYPE which allows deprecated elements, etc.

All of your links that are passing values such as:
href="http://www.streetmap.co.uk/newmap.srf?x=382766&y=392926&z=1&sv=buckthorn+close&st=6&tl=Buckthorn+Close,+Manchester,+M_21&searchp=newsearch.srf&mapp=newmap.srf"
have unencode '&' which must be changed to '&amp;'.

There are a lot of things to consider if you're going to use XHTML on your pages and I suggest you read the following article to get a better idea of what you're up against. It isn't hard to do at all, but a lot of things don't work the way you might expect if you don't follow the guide lines.

Article: The Perils Of Using XHTML Properly
http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml_properly/

I'm not trying to be critical here, just wanted to tell you the problems I found on the page - should be relatively easy to fix them. As I mentioned before, if all else fails - fall back to XHTML 1.0 Transitional or HTML 4.01 Transitional

Be happy to help out if you like

Regards,
Ed Vasser
Frankfort, KY

[mrbelfry]

Hi Ed

Thanks for your comments - I thought I'd done a validation on the home page maybe I validated an early draft and then messed it up!?! I'll check out the link you suggested and do some more work.

Thanks

[xhtml]

mrbelfry;

In pointing out the little things that needed to be fixed on your site - I failed to mention how great it is to see a site being done the "modern" way. I had problems at first with using (X)HTML/CSS, but once I did my homework and got used to doing sites this way - I'd never consider going back to the 1995 table and tag soup design methods. I should also note here that the use of CSS and properly coded HTML doesn't require using XHTML.

In looking at most of the church web sites I've found - practically none of them will validate and that's a real shame, since in my opinion, a church site above all, should be accessible to everyone.

Good going and keep up the good work

Regards,
Ed

[flutem3]

Ed wrote:

"In pointing out the little things that needed to be fixed on your site - I failed to mention how great it is to see a site being done the "modern" way."


Hi,

I am a bit dense on this, but could one of you whizzes explain to me what the "modern" way is as opposed to the "old-fashioned" way. I am afraid that I don't know.

When I look at a website, it either has good content or not, navigates well or not, and looks decent or not. I have no idea how any given website was "born" the way it was. What are the advantages of the "modern" way?

Thanks to anyone who takes the time to try to fill me in on this. Maybe it would help me with our website too. I know I need to redesign it. That I know. How I am going to do it I don't know at this point.

I start with an outline on paper and go from there after I have established two goals. For the church website, I am maintaining the goals I have and will try to meet them better. And I need to make it load rapidly enough that dial-up users do not have to wait night and day. In our church 70% of the people use dial-up. That is a third goal...to have the files small enough that they load at a reasonable speed so people don't leave.

Happy Holidays!! :D

[xhtml]

flutem3;

I'll try and keep this as brief as possible considering the question, so here goes...


When I look at a website, it either has good content or not...


Exactly! The content of any web site is what matters, not just how it looks. Many web sites have and continue to be designed first with the content more or less an after thought.

Modern web site design separates content from presentation by using properly marked up (X)HTML for the content and CSS (Cascading Style Sheets) for presentation. A properly marked up web page, can be styled in many ways without resorting to the old way of improperly using HTML elements to get a page to look a certain way in a particular browser.

If you ever look under the hood, so to speak, when you visit a web site by viewing the source for the page and see things like:

<table ....>
<tr>
<td><img src="spacer.gif" width=10 height=5><font size=7 color=#f00000>&nbsp;&nbsp;<br><br>&nbsp;Welcome to my site&nbsp;&nbsp;</font></td>
</tr>
</table>

That's the old way of doing it... using deprecated (read: obsolete) elements like <font> - using tables and tables nested inside tables in an effort to make the page look like printed material. The web is not print and even though a site designed this way may appear to look the same in one or two browsers, it will fall apart in modern standards compliant browsers, if the user does something as simple as changing the font size or is using a screen reader, or text only browser (and a lot of folks do)

Why do it that way, when the web page should look like this instead:
<h1>Welcome To My Web Site</h1>
<p>Some text in a paragraph</p>
<h2>Another Page Heading</h2>
<p>More text in a paragraph</p>

All the elements show in the preceding example can be styled in any number of ways. Just because most browsers show an <h1> element in the largest font size, doesn't mean it has be displayed in that font size.

You'll also see improperly nested elements like: <p><b><em>Some Text</b></p></em>. Most browsers will attempt to correct this sort of markup (not well-formed), but that adds rendering time on the page along with the unnecessary use of tables, spacer images, etc.

Something you won't see on most web sites is the <!DOCTYPE> element that is REQUIRED for all modern web browsers to properly render the page. Without it, browsers go into what is known as "quirks" mode and will attempt to read the page as best they can rather than how you really want it to be displayed.

The <!DOCTYPE> element also allows you to validate your pages to insure that you don't have improperly nested or missing elements, invalid elements, etc. and helps to ensure that your pages will display as you intend.

As an example: attempting to validate the home page of this site (no insult intended Mr. Gillaspey - honest!) produces 82 errors, most caused by the <!DOCTYPE> element not being valid and <script> elements outside of the document (before the <!DOCTYPE> and page <head>. This throws browsers into quirks mode and most of the errors could be corrected by simply moving the <script> elements into the <head> section where they belong and correcting the <!DOCTYPE>.


What are the advantages of the "modern" way?...


Modern site design eliminates the use of tables and other "tricks" and the advantages are numerous - easier site maintenance - reduced page sizes (as much as 60% smaller) - less use of band-width, to name just a few.

Another important point is that you won't be limiting your audience by designing your site for a particular browser and/or screen resolution. Even if the users browser can't render the page as you intend, they can still access the content, and that's the most important factor.


And I need to make it load rapidly enough that dial-up users do not have to wait night and day....


Using the combination of (X)HTML and CSS you'll reduce the rendering times for your pages drastically! As noted above, page sizes can be reduced by as much as 60% and rendering times reduced accordingly.

I'm working with a friend on fixing his site (hobby related) and the site he had designed using FrontPage was taking 7 minutes (yes minutes!!!) to render on a 56K modem! It was using nested tables, font elements, spacer images and downloading huge images, just to display a thumb nail image! The preliminary redesign I've done using HTML 4.01 and CSS now results in a page rendering time of about 10 secs on a 56K modem. This is an extreme example, but it shows the difference between the old method and the new method.

There are all sorts of web sites that show you the proper way to do web page coding, but try this one out for starters:

http://www.htmldog.com/

The first thing you'll notice about this site is its nice clean look and it's done without using tables. He has some really good tutorials on that site.

If you want futher information, just let me know and I'll provide you with a list of web sites where you can find out much more (and described much better than I can). I know my stuff, I'm just not that good at putting it down in print!

Regards,
Ed

[flutem3]

Ed wrote:

If you want futher information, just let me know and I'll provide you with a list of web sites where you can find out much more (and described much better than I can). I know my stuff, I'm just not that good at putting it down in pri

WOW, Ed. That was quite an explanation!!! I hope you type rapidly. :D I appreciate the time. What you were describing seems to me to be much easier than html. I am not too certain that I understand the major differences, but I did see that the example certainly used much less "stuff" than what I have seen others use. If I am going to change, and I must be honest with you, I don't know if I have the energy to do so, it would seem that is the direction to go. I will check out the link you provided, and I will see what I can learn.

I am not averse to learning-far from it. But I just don't have some of the discipline that I used to have for some of these things. However, I do want a decent website which people with dial-up can use. I don't know how long our index page takes to load, but it is too long.

Thanks!!

Carol

PS I appreciate everyone who takes time to explain things. It is just great!!!

[xhtml]

Carol;

Contrary to what some folks will tell you, if you're going to do web sites, then you must learn HTML. There is nothing difficult about it as (X)HTML is simply a markup language that defines how a page is laid out - more or less you are doing an outline of the page content (I never was too great with outlines in school - but this is easy). There aren't that many elements (what some folks improperly call tags) to get familiar with, but as simple examples:
If it's a page heading then use <h1></h1><h2></h2><h3></h3> elements;
if it's a paragraph, then use the <p></p> element;
if it's a list of items (such as a menu) then use the <ul><li></li></ul> elements.

You don't do things like:
<br><br>this is some text<br><br>
to achieve spacing between paragraphs - it has no semantic meaning and the <p> element can be styled to space your margins and line-heights any way you like.

One thing I should point out is that a lot of people have been lead to believe that if you go to the standards compliant way of doing web sites, then you must use XHTML. This is not true! The same things that apply to XHTML/CSS also apply to HTML4/CSS and they are both recommended standards. HTML 4 introduced the concept of separating content from style (the way the web has always been intended to be) and XHTML 1.0 is a reformulating of HTML 4 as an XML application.

Also there is a big debate about whether or not you should even serve most web pages as XHTML because in the majority of instances, the XHTML is being served as text/html rather than application/xhtml+xml as it should be.

The most used (and bug laden) browser (IE) does not understand XHTML so it simply reads the XHTML as invalid HTML and relies on its error correction to ignore things it doesn't understand (i.e., <br />, <img ... />, etc.). In fact, if IE encounters a web page that is served properly as application/xhtml+xml it will not display the page at all and will attempt to download it! If you like I can provide a demonstration for you on my testing server.

Anything you can do with XHTML/CSS you can do with HTML4/CSS and IE will render it better and faster. XHTML is actually designed to be use with XML applications.

I personally prefer XHTML because it is stricter than HTML, and I think it's the best way for folks to learn proper HTML coding as it won't allow you to omit closing tags, unquoted attribute values, etc. - provided you validate your pages as you should always do.

You can use (and should use) the same coding practices with HTML as you have to with XHTML - quote all attributes - close all elements - use lowercase element tags - etc. I've coined a term for this method that I like to call HTML+.

Don't mean to get so technical here and hope I'm not confusing you (I can confuse folks very quickly) but just want you to understand that learning the proper way of marking up pages is not hard and the end result is worth it.

As we have both mentioned - it's the content a web site contains that really matters - not just what it looks like - although even the simpliest pages can be made very attractive using CSS. Also think of another important aspect - if you are selling a product or an idea on the web, do you want to limit the number of people that can access your web site? Of course not, but that's what you do when you go with the old way of doing web sites.

For some great examples of what you can do with CSS - check out this web site: http://www.csszengarden.com/
There is a menu on each page that says "Select a design" and by doing so you'll see some outstanding page designs applied to the page - which incidentally is the exact same page for each design.

I don't claim to be an expert on this stuff, but I spend a lot of time learning the ins and outs (an ongoing process) and I sure understand a lot more about it then I did a few years ago. I guess some folks get put off when they are confronted with stuff like this and I sure hope that is not the case. I just want to pass along things that can help other folks out. If I can master this stuff, anyone can.

One last important point - for testing your web pages - use a standards compliant browser first then check the pages in IE (if that's what you are using). I recommend Firefox - it's the best and once you start using it - you won't use IE for anything except pages that require it (such as Microsofts update pages, etc.) You can download it free of charge from here:
http://www.mozilla.com/firefox/

Boy, I'm long winded!!!

Ed