Carrie’s Catering, Revision 1

In an effort to become better at web design and markup, I have decided to create a sample website for a fictitious catering company. I have incorporated some new (to me) ideas into this page, as well as continued to develop some coding skills that I had previously known. All-in-all, I learned a few things:

1. Designing before markup makes life easier. I approached this project by marking up a basic layout first. I continued to add elements as I felt necessary, but towards the end I realized that I wanted to scrap the whole design and start from scratch. Next time I will lay out the site with Photoshop, adding and deleting items as I find aesthetically pleasing, and then figure out a way to code it all.
2. Keep your headings, even if you replace with images. The Carrie’s Catering title at the top of the page is a graphic, but there is also an h1 in there too. The reason why I had to keep the h1 tag was because it is essential for SEO and accessibility. The method I used to replace the h1 with a graphic was to supply a background image via CSS, and intent the text -9999 pixels off of the screen. The problem with this is that a print preview doesn’t show any text or image, as background images are not printed by default. To correct this, I created a separate stylesheet for printing only (media=”print”) that reversed the negative indent. There is a much more in-depth discussion of this procedure as well as a selection of different methods of accomplishing it at A List Apart.
3. Consider creative background options. When I showed my wife the site on my widescreen monitor, she wondered why there was so much flat color on the edges of the page. I explained that it was to accomodate for people who are still using 800 x 600 monitors, and after I resized the window, she understood. However, I began to think that there might be some better options out there other than leaving the majority of the screen a boring flat color. As far as I can tell, there are three options:
   1. Use JavaScript to determine the screen resolution of the viewer, and create a stylesheet that compliments that resolution.
   2. Use more interesting textures that tile in that background space. A good example of textured whitespace is at Bart-Jan Verhoef’s site.
   3. Have content divs that float next to each other and resize dynamically based off of screen width. This technique can be used to spread out the whitespace that is created on wide monitors.
4. Use high-quality images when appropriate. Again, my wife pointed out that the “wedding,” “corporate events,” and “private parties” buttons were too boring. At this phase of the site, it isn’t even clear whether you should click on those pictures or simply appreciate them as a creative list of what the company does. I should have added text above them to make it clear what the pictures are for. I also should have included a photograph on each one, to make them look more exciting.