Professional Web Page Layouts by Click-IT

A guide for clients using the Click-IT website system

PROFESSIONAL

Help & Inspiration

he big advantage of self managed websites like the Click-IT website system is that you can create & edit your own pages and galleries whenever you like without paying someone else to do it for you. The disadvantage is that unless you are familiar with professional page layout design, then you could end up with a website that looks somewhat less than professional.

his guide has been written to help and inspire those of you who would like to create a more professional looking website, and encourage you to experiment with the powerful editing facilities that the ClickIT website system provides. Scan through these pages and select a page layout that appeals to you. Then look at the hints and guide section that explains how to achieve the same result on your own website.

The page layouts in this book all use the same horizontal navigation template, but they can easily be applied to any template design.

Contents

Page Layouts Using Tables Layouts Revealed Pages... what pages? Useful layout tools Website Factoids Website Makeovers ePortfolios

Example professional layouts for photographers & artists How to use tables in the page editor to arrange text and photos Hints on how to re-create each of the example page layouts A guide on what pages you really need on your website Essential tools to help measure and resize photos for page layouts A few simple facts that will help you improve your website Our makeover service - we will create the layouts for you The new marketing revolution designed to increase your exposure

1 - 20 21 22-25 26 27 28 29 30

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras gravida sem ut massa. Quisque accumsan porttitor dui. Sed interdum, nisl ut consequat tristique, lacus nulla porta massa, sed imperdiet sem nunc vitae eros.

Wedding Photography Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet metus. Nullam tincidunt posuere ligula. Aenean volutpat ultrices ligula. In tincidunt. Aenean viverra suscipit tellus.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

3 Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum in, sapien. Donec sit amet justo. In velit. Vivamus turpis pede, dignissim sed, scelerisque nec, pretium sit amet, dui. Nam nec felis non turpis hendrerit varius. In ultrices ornare lorem. Quisque bibendum.

4 Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum in, sapien. Donec sit amet justo. In velit. Vivamus turpis pede, dignissim sed, scelerisque nec, pretium sit amet, dui. Nam nec felis non turpis hendrerit varius. In ultrices ornare lorem. Quisque bibendum.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Onec sit amet justo. In velit. Vivamus turpis pede, dignissim sed, scelerisque nec, pretium sit amet, dui. Nam nec felis non turpis hendrerit varius. In ultrices ornare lorem. Quisque.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Wedding Photography

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography

Onec sit amet justo. In velit. Vivamus turpis pede, dignissim sed, scelerisque nec, pretium sit amet, dui. Nam nec felis non turpis hendrerit varius. In ultrices ornare lorem. Quisque.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Portrait Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Wedding Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Contact

Portrait Photography Donec sit amet justo. In velit. Vivamus turpis pede, dignissim sed, scelerisque nec, pretium sit amet, dui. Nam nec felis non turpis hendrerit varius. In ultrices ornare lorem. Quisque bibendum.

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Portrait Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Contact

Click-IT Studios Home

About

Services

PHOTOGRAPHY Gallery

Portrait Photography Cetur ridiculus mus. Aliquam vel quam ut tellus gravida faucibus. Vivamus justo est, elementu vitae, malesuada eu, fermentum.

Contact

Using Tables... Some of the layout designs in this book are created using the Insert/Edit Table icon on the page editor toolbar. This allows you to create a table of any size with any number of rows and columns. Each table cell can then be used to hold text, images and slide shows etc, and you can apply any text formatting and alignment to anything in the cells. MEMO: Always resize your photos to the correct display size BEFORE you upload them.

Tables are a quick and easy way to arrange text and photos on your page in a wide variety of layouts.

qtips

Always set the border size to zero to make the table borders invisible. To make the table fit the full width of your page set the width to 100% If you make a table less than 100% then set the alignment to centred.

Layouts Revealed... Created using a table with 2 rows x 2 columns. Photos resized to display size before uploading.

Created using a table with 2 rows x 2 columns.

Created using a table with 2 rows x 2 columns. Right cells merged to hold tall photo.

Merging table cells... Click and drag to select (highlight) the cells you want to merge. Then right click and select Cell/Merge cells

22 1 2 3

4 5 6 7 8 9

Full page width photo inserted and centred between title & text. No table required. Photo banner montage created at full page width size in PhotoShop. Inserted between title and text and centred. No table required. Created using a table with 1 row x 3 columns. The left cell has background set to black and text in white. The middle column width is set to 50 pixels. Inserted full width photo banner below text and centred. No table required.

Inserted full width photo banner montage between title & text and centred. No table required.

Inserted full width photo with overlaid text montage above text and centred. No table required.

Created 2 full width photo banners and inserted below titles. No table required.

Created 1 full width photo montage and inserted between title and text. No table required.

Created using a table with 1 row x 2 columns

Created using a table with 2 rows x 2 columns Photos cropped square.

Created using 2 full width photo montage banners with overlaid text. Can also be created using a table with background image in cells.*

Created using a single photo montage in PhotoShop. No table required.

10 11 12 13 14 15

16 17 18 19 20

Created using a single photo montage in PhotoShop. Can also be created using a table with background image in cells.*

Created using a single photo montage in PhotoShop. Can also be created using a table with background image in cells.* Created using a table with 2 rows x 2 columns. Photo montage cut into 3 blocks and inserted into cells. Cell padding & spacing and image margins set to zero to create flush join. Created using a table with 2 rows x 2 columns. Right cells merged to hold large photo. Large photo created as montage in PhotoShop.

* Tables and cells can be used to hold background images as well as colours, which means that you can display photos in cells and still be able to write text over them. This is an advanced option which requires some knowledge of styles, and how to work with the page editor in source mode. Please contact support if you would like to try these page layouts.

Pages... what pages?

1: Home Page - what do you do?

It is always tempting to add lots of pages to your website, especially when there are no limits to the number you can have, but what pages do you really, and I do mean... really need?

This is your main introduction page, and it should do just that... introduce you and your services. Nothing more... nothing less. A visitor to your website needs to be presented with the WOW factor, which for a photographer or artist, should be one or two outstanding pictures (or a short slide show) plus a short paragraph or two that outlines what you do, and where you are (also very important for SEO).

Think about what your visitors are looking for when they visit your website. They simply want to... 1. View your photos or art. 2. Check if you provide the services they are looking for. 3. If they like what they see, be able to contact you.

2: About Us - who are you? This is optional, but it can enhance your credibility as a professional if you can list your credentials and experience. If you donâ&#x20AC;&#x2122;t have much experience, then leave this one out.

3: Services - what do you offer? Obvious and essential. You have to make it clear what you do and what services you can offer. Donâ&#x20AC;&#x2122;t just list them, illustrate them with a few impressive photos.

Point 3 is the most important point of all, so everything on your website must focus on achieving that one result. This means, presenting your website in a professional style (ie: use 4: Gallery - how good are you? stylish page layouts), make it simple to view your very best Essential of course, but vary rarely is this done well. photos, and provide an easy way to contact you. Only display your VERY VERY BEST work. No-one will

through pages of galleries or long slide shows, so Adding more pages than you need can have a negative result, wade keep them short and impressive. Remember... less is more. making it difficult and confusing for your customers to make that essential final decision - to contact you..! 5: Contact - how do I contact you? Display your telephone number as well as the email form.

Useful (essential) layout tools Laying out your text and photos on a web page can involve a lot of guesswork when it comes to resizing your photos to fit in the required place. What you need is a browser ruler. This add-on for Firefox is an essential gadget that you will use over and over again. If you are preparing hundreds of photos for your galleries then you also need a batch image resizing tool. This will make short work of resizing and renaming all your photos to the correct size.

Browser Ruler - MeasureIt Brilliant tool for measuring areas on your website in pixels. Use it to measure the actual display size for your photos Firefox browser add-on.

Batch Image processing tool Allows batch processing of images for resizing and renaming. Ideal for preparing images for gallery upload. Also perfect for quick resize, crop and edits of individual images. www.irfanview.com Also available: FastStone Photo Resizer

Website Factoids... ...a few simple facts that can make a world of difference to your site Ÿ People don’t read websites like magazines, they scan pages for useful information and look at pictures. Ÿ Professional looking websites always win more business, so never neglect your website. It’s your shop window. Ÿ Unless you are writing a blog, always keep your pages as short as possible to avoid having to scroll. Ÿ Limit your text to a few short paragraphs, and use no more than 2 or 3 photographs to attract attention. Ÿ Visitors don’t have time to sit through long slide shows. Keep them short or your photos will be wasted. Ÿ The same rule applies to galleries - most people will only view the first 2 or 3 pages of a gallery. Ÿ Don’t include your service rates. If they like your work they will contact you. If they can see your rates, they may search for someone cheaper.

Website Makeover Service

From this... ...to this for £3.95 If you need help with your page layouts, or even if you don’t have the time to spend on your website, then you can use our website makeover service. Just send us a few suitable photos (via our file transfer facility) and any text you want to include, and we will create the professional page layouts for you. Tell us what you want, or select one of the page layouts examples from this book. We can even create photo montages and slide shows etc, for just £3.95 per page. Contact us for more details.

ePortfolios - the new marketing revolution Photographers and Artists have one thing in common... they all need a portfolio to exhibit their work to potential clients. In the ‘old days’ before websites, the portfolio was a large format album with plastic sleeves that held mounted prints. They are still used today, but are largely replaced by the website. But now they are coming back... as virtual Portfolios. Websites have limitations when it comes to presenting photos and artwork. They are limited in size and presentation, such as font styles and layouts etc. Slide shows are great, but they are slow when it comes to presenting lots of images, and people just don’t wait around for slide shows to finish. ePortfolios offer unlimited layout styles, just like a book or magazine, and with unlimited fonts. This page layout guide is an example of an ePortfolio that we have designed as a manual. ePortfolios are fully portable, which means they are not tied to any website. You can add links to your books on emails, Facebook, MySpace, Twitter, Blogs and any website. Visitors can view them in full-screen, and send them on to their friends. Publishing your own photo book is now a reality... and they are fast becoming an essential marketing tool. View our demo books to see how we can help you join the new eMedia revolution.

Click-IT Publications

01257 273361