Thursday, April 18, 2024

Web Developer Class: How to Create Consistent Web Layouts

Web page design has become quite complicated due to the rapid advances in technology. Still, you can make your life much easier if you plan your web site in advance of building it. Below are some tips to help you with the design process.

1. Who is Your Audience?


Before you even begin to build a Web site, consider your audience. Before you spend a lot of time and effort, it is necessary to do some do keyword research to see if your product or service is a viable solution. One service I recommend for this purpose is Market Samurai. A free solution is the Google keyword tool.

2. Create a Storyboard


There is an old expression in programming which states: “The sooner you start to code the longer it takes to finish.” With that in mind, the first step you should observe is to create a storyboard, essentially a flow chart that you build on paper. If you run into problems, they are much easier to fix here than during the process of building your Web site.

3. Visit Forums and Blogs


Another important research technique is to find out what users actually want. In this case, visit forums and blogs that cater to your interest and find out what users have to say on the subject.

4. Viewing Size


Viewing size is how the user will see your finished design. Unfortunately, this can vary widely depending on the size of the viewing area and whether the browser is maximized or not. According to some online research, a good starting point is to design your Web pages for a maximum viewing size of 776×424 pixels in order to reach 95% of visitors. If you decide to design for a larger viewing size, be aware that some users might have to scroll to see the entire page, which will detract from your overall design.

5. Consistency


A big problem with Web site design is a lack of consistency. To fix the problem, consider using templates. In many cases, you will save yourself a lot of time and effort. One option to consider is to use WordPress to build your sites. It offers many templates, both free and professional.

6. Use CSS


CSS (Cascading Style Sheets) are very important for maintaining consistency. Simply making a change to your CSS will immediately update the entire site (assuming that the CSS document is linked to all pages).

7. Keep it Simple


Too many Web designers are seduced by technology and wind up building unnecessarily complicated sites. In reality, simple is better. Your message will be clearer and more direct.

8. Image Slicing


Occasionally, a web designer will want to use an image that covers the entire page. The down side is that such an image is likely to be quite large and could take quite awhile to load. This poses a danger because if the image takes too long to load (roughly ten seconds), you run the risk of losing your audience. The solution is image slicing, which breaks the image into sections that load a bit at a time. This lets the user know that the image is in the process of loading and they are more likely to wait until the process is finished.
Another option is to consider creating a web gallery. In this case, one page would show a number of thumbnails, which, when clicked upon would open another page which contains a larger image.

9. Use Stock Photography


Building a Web site is often a time intensive process, especially when it comes to creating images. One simple (and often inexpensive) solution is to use Stock Photography. Many options exist, such as rights-protected or royalty-free imagery.

10. Use Comps


A comp is a low-resolution image that you can download from many Stock Photography sites and use as part of your layout. With such an image you’ll be able to see if your design “works,” or not.

Additional Notes


One of the issues you’ll face when designing for the Web is how much space of your design is taken up by the browser, so it’s important to preview your design to make sure that it’s working. It’s also useful to upload your pages to test them. As an example, if you use include files, these might not display properly in different browsers.

About the Author


Nathan Segal has been working as a technical writer for 13 years. His specialty is taking complex subjects and turning them into language that anyone can understand. To improve your photography, image processing and results, visit: DigitalArtistU.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured