Layout Design
Many people choose to design the layout of their web pages using a graphics application such as Photoshop. This can be a very useful approach if you know what you are doing. By this we mean you should understand the following:
Web pages are based on HTML, not graphics. Except in very rare cases, you should not use image files to create a web page. Rather, you create the web page using HTML and CSS and add image files as required. If you are using a graphics app for design, the idea is to create the layout in the graphics app, then convert the layout into HTML/CSS. Image files should almost never be the sole content of the page.
Why Not Use Image Files For Web Pages?
Just to clarify, we are talking about using only image files as the content of your web page. Images themselves are fine of course, it's only a problem when you don't have any decent HTML, CSS, text copy, etc. Here are some of the reasons why using only images is a bad idea:
- Images have much bigger file sizes than text, making them slow to load and requiring more bandwidth. Some people don't have images enabled, or have slow connections that make images very slow to load. These people will never see your content. Search engines cannot read image files, so your site will be invisible to them. Images cannot resize to fit the user's browser window. Images cannot be used with accessibility features such as text readers for the visually impaired.
- And finally, anyone who knows anything about websites will see what you have done and know that you are an amateur.
Making Image-Based Templates
Here are some more tips:
- Decide whether the page is going to be fixed width or dynamic (variable). Fixed-width will obviously be easier to design in a graphics app. You will almost certainly want to use layers for different page elements; for example, the header, body, footer, navigation menu, etc.
- You will probably use a combination of text and image layers. Text layers, especially those used for the main text copy in the page, should use a common font suitable for web text. Don't use unusual fonts if they will be converted to text in the HTML page.