7 Tips For Beginner Web Designers


So maybe you have a copy of Photoshop and can find your way around Dreamweaver, but you’re not too concerned with things like server-side scripting, or hand-coding just yet. You just want to design. Here are some essential things to consider before you get started.

1. CSS is VERY important. Not only is it compliant (which yes, probably will be a factor if you decide to design commercially) it’s efficient. If you can learn it first thing, do it. If you’re too intimidated, learn to layout with tables, THEN learn CSS. On second thought, just go with CSS. I find it to be easier then trying to manipulate tables. If you use it, you won’t run into some of the other problems I address later in this article.

2. Internet Explorer is not web compliant. This means you will be faced will a barrage of technical difficulties unique to Internet Explorer. Something that renders beautifully in the Firefox or Safari (two web compliant browsers) will often be glitchy or non-functional in Explorer, and vice versa for websites that were designed solely for Explorer, which now only accounts for a little over half the browsers. Unfortunately, since it is still the most common browser, you have one of two choices: resign yourself to the use of hacks and javascript fixes, or limit yourself to what Internet Explorer is currently capable of rendering correctly. And whatever your personal browser of choice, remember to regularly preview your site in Internet Explorer during your design process.

3. Become familiar with the Box Model Problem. In the Box Model, CSS considers each element in a webpage to be contained within a rectangle, or “box,” that can have a variety of styles applied to it. Two such styles are margin (the spacing between CSS boxes) and border (the rectangle’s frame). The Box Model Problem results from the ways different browsers factor in these styles in calculating the total width (or height) of the box. For example, web-compliant browsers calculate the width of a CSS box as being the width of the content area plus the widths of the border and margin. Internet Explorer 5 and 6 (in quirks mode)–used by millions of people, by the way–only considers the content area of the box to define the width. What does all this mean? It means that the layout of your meticulously designed webpage could unravel when viewed in Internet Explorer because suddenly the dimensions of all your columns, navigation elements, etc., are now calculated differently. Fortunately, there is a solution, the Tantek Hack. Also, if you’re conscientious, you can design without a hack, and it also helps to zero out your margins and padding (by adding * {margin:0; padding:0;} to your header or style sheet) before styling your elements.

4. Internet Explorer does not support PNG transparency. I promise this is not a deliberate attack on Internet Explorer. It is not this author’s fault that IE accounts for so many challenges that face designers! This particular challenge is a pesky bug that caused me some problems that I would like to help others avoid. PNG is an image file format that doesn’t have the rough white edge that a GIF transparency can have. If used with IE, however, the transparent background is rendered a hideous pasty green. For a fix that works on CSS backgrounds as well as content images, try this [http://www.bjorkoy.com/past/2007/4/8/the_easiest_way_to_png].

5. If you decide to use tables, know that you can make a table scroll, and that you can use it to build a simple image gallery. You can also make a css container scroll by adding this style: {overflow:auto;}.

6. You should choose a solid background color for your page, or tile an image, as opposed to a large image that will kill you on loading time. For the ever popular stripe background, googling ‘stripe generator’ will bring up some websites were you can generate your own stripe tile quite effortlessly…

7. Learn SEO (search engine optimization) practices BEFORE you design your site. There are tons of resources out there. Just Google “website optimization.” Even if you’re not to the point of thinking about searchability and page ranking, there are some simple things you can lay into the groundwork of your site that will save you a world of headache–and rework–later.


Leave a Reply