Web Design Tips for Graphic Designers New to Website Design

For graphic designers who are new to web design this article will provide some very useful tips to optimize your websites and images to maintain a visually dynamic website without slow load times.

Everyone should want a website that is attractive, engaging, and easy to navigate. More often than not, you can spot websites that were created by graphic designers and sites that were created by programmers. Generally speaking a website created by a graphic designer will be visually engaging but is probably not Search Engine Friendly, while a programmer's site will be set up beautifully with CSS streamlined for Search Engines and quick load times. For obvious reasons the best websites are usually created by a team of professionals working in tandem.

It sure seems to me that most people designing websites have an "either or" attitude, either it looks good but loads slow or you focus on code and appear more generic. I've seen plenty of websites that contradict this thinking and I personally believe every website should be visually stunning and streamlined for search engines and download time. Every year less people are using dial up to connect, however there are too many to ignore. I really don't worry too much about dial up users anymore, because most of the websites I design are targeted at fairly web savvy searchers. However, just because I don't worry about dial up doesn't mean that I can neglect to streamline my websites for its users.

This article will provide some quick and useful tips on how graphic designers new to web design can optimize websites and images and still keep them looking hot. If you're just starting out then you're probably not going to know a lot about CSS. No worries! Just start designing your layout in Photoshop. A good document size to start with would be 950 pixels wide by 600 pixel high set to RGB at 300 dpi. When you've created the layout that you want you are ready to slice up your document and export it as an html document with an image folder.

1. In Photoshop you can use the slice tool and manually create slices organized in rows and columns for Dreamweaver or drag "guides" where you want to slice your page and just click the "slice from guides" button at the top of the Photoshop menu bar. Note: you can combine slices by shift clicking multiple slices then holding down the control key and clicking to select combine slices. (You can define your text and background colors easily in Dreamweaver).

The image below is an example of how I sliced this Photoshop document up.

a. Hold down shift + option + command + s to export the slices. Click "Save" and then select export html and images.

b. Open all of your images in Fireworks and resave them at 80% quality and jpg format. Now you have nice looking images that have a small file size and are easy to load.

2. Another quick tip is to learn to set up your web pages using .php includes.

The basic set up for a php page is a "header", "body" and "footer". In a nutshell what we are doing is breaking one complete html page into three separate html files and letting the server put them back together as one complete page. Why would we do this? We do this, because there are many beneficial advantages to creating your pages this way. For example if your navigation is in the header document and you need to make a change to your navigation you only need to do it once, not for every page. Also the server loads your images once and not for every page which makes your site quicker to load and use.

a. In Photoshop you proceed the same way using the slice tool or guides to  create slices organized in rows and columns for Dreamweaver. Except this time you are turning the one file in the example shown previously into (3) separate files. Break your main Photoshop document into three sections, a header, the body, and the footer. Label each Photoshop document accordingly. Samples shown below.

Header File:

Body File:

Footer File:


b. Hold down shift + option + command + s to export the slices as html and images for each of the three Photoshop documents.

c. Your head document named: "header.html" change to "header.php"

d. Replace the   and information found at the top of your "index.html" page with this simple code:
include("header.php");?>

e. Replace the / tag found at the very bottom of your page with the following footer include.
include("footer.php");?>

Note: Re-save the "body" which is your index.html as index.php
Note: You will need to upload these files to preview the entire page, but on the positive if you use these same header and footer tags on the rest of your pages your website only needs to load the header and footer images one time making  your site display much quicker. This idea works with background images as well (if you re-use the images they only have to load once).

Reference #1:
Here is what the basic html looks like in the header.html file:
These brackets {} used in place coding of actual code for placement purposes only.

{html}
{head}
{title}Your Title Goes Here{title}
{table}
{table}

Reference#2:
Here is what the basic html looks like in the index.php file:

{?php
include("header.php");?}

{body}
{table}
{table}
{?php
include("footer.php");?}

Reference#3:
Here is what the basic html looks like in the footer.php file:

{body}
{html}

When you upload these files and images the server will put them together as one complete page. Now you can create new pages and content and keep your header and footer information the same using the header and footer includes.