Providing resources for people with a passion for Christ and the web
Celebrate the holidays
Articles :: XOOPS and ImpressCMS :: Themes and Templates

Theming Your Church Website

Page Layout, Visual Components and Efficient Designs

If the Blind Billionaires don't care about the appearance (style) of your website, why would you care about how it looks? Well, to begin with, the search engine giants don't view your websites, your readers do. And, your readers are do appreciate a nice looking website. Remember the message delivered on a rock? How you say something and your presentation do influence the message you are delivering.

The pages in ImpressCMS and XOOPS have regions, in which you can place blocks of content. There is also the main content area, the header and footer. You can see how the page is structured in the image at the left. All these positions are available for use and blocks can be assigned to each of these positions, except for the content area. This is where modules will display their pages. Older themes will not support the bottom center positions, so be sure you are getting an up-to-date theme. With ImpressCMS, you have the ability to create additional block positions you can add to your theme, giving you greater control over your page layout. You have a tremendous amount of flexibility simply by selecting which areas you will use.

Page layout for Christian Web ResourcesFor example, here at Christian Web Masters, I do not use the right column, at all. I also do not use the top center right or top center left positions. If you look at the home page, you will see how this works. On the inner pages of the site, I don't use the bottom right or bottom left block positions, either. I suggest you experiment with the different options and see what you can create for your site. Just keep the relative look on each page consistent, or your human visitors will have a difficult time learning your page layout. This is where your creativity helps make your site unique and fit the style of your church or ministry. Theme designers will also rearrange the major sections of the theme, sometimes putting the left column to the right of the content area, or changing the center blocks, putting them all side-by-side, or having the left and right blocks above the center blocks. The possibilities are endless.

The visual components are completely subjective. What one person thinks is an awesome design, another will have difficulty appreciating. What you need to take into consideration is the visual style already being used by your ministry. Your print materials, your decor, the style of clothing worn by members are all visual clues you can use to select your web site's theme. For consistency and identity, stay within your current style.

Efficient designs are products of the best theme designers. They understand the user experience, have the creative abilities to build something visually appealing and they also understand how the web works. Images take longer to display than text does, so images are designed and used with this in mind. Every page element the browser needs to request takes extra time. To explain this last point - let's say you are going to display 10 images on a page. If each image is a separate image, the browser will make 10 requests for the images, 1 at a time. It actually takes longer for the browser to request the image, than it does to send the image. So, if the 10 images were combined into a collage and the designer used CSS to only display the appropriate portion of the image in each of the 10 locations on the page, your page will appear to load faster. The concept is called 'css sprites' if you are interested in learning more about this.

The principle of minimizing the request for page resources applies to images, CSS files, Javascript files and the HTML for the specific regions. So, if you download a theme and just look at the total number of files included with the theme, you'll have a pretty good gauge of how it is going to perform. I've seen some pretty fantastic looking themes, but when I downloaded them, I found they had 8 CSS files, they've broken the HTML into 8 different files and they use 15 - 20 different images. You can vastly improve performance with some simple copy/paste actions on the HTML and CSS files, but it will take a bit more to combine the images into a single image, because it also means altering the CSS to use the correct portion of the image.

One last thing to consider for a theme is the code-to-content ratio. This is really part of the efficient design process. If the theme uses more text to describe the content than the actual content uses, your design does not have a good code-to-content ratio. As an example, in 2 recent themes I downloaded, 1 had a single HTML file that was 6.6 KB. The other had 10 HTML files that totalled 15.4 KB. The latter has a much higher code-to-content ratio and is less efficient than the first. Not only is the file size greater, but the number of http requests is higher, adding to the time to load the pages. In addition, the 2nd theme had 8 CSS files, totalling 35.2 KB. The first - 2 files, totalling 15.0 KB. While not necessarily bad for search engine results, it does affect your user experience.

If any of this is overwhelming, it should be. It is for me. I understand all the concepts, but still do not have the skills to produce a theme that is a 'Wow!' I can take a theme that has all the visual components and make it more efficient, though. I can work with the validators and minimize the validation errors. This is something you should seriously consider having a professional do for you. It is a small investment you can make to effectively communicate your message.

  1. There's More Than Meets The Eye
  2. Semantic Markup - Form and Structure
  3. Page Layout, Visual Components and Efficient Designs
  4. Wrapping It Up
<< XOOPS Meta Tags Basics

  • URL:
  • Trackback:
API: Toolkit PM Email PDF Bookmark Print | RSS | RDF | ATOM
Copyright © Steve & Christian Web Resources
The comments are owned by the poster. We aren't responsible for their content.

Bookmark and Share!

Join Us On Facebook