20 pro tips

18/07/2006 | Filed under Design > Tutorials

The difference between a good web designer and a great one is the ability to know how to take short cuts and save time without compromising the quality of work. Pixelsurgeon’s Jason Arber has put together 20 top tips and tricks you should be using to give your work that all-important professional edge

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.

2. Do it by hand

Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.

There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.

3. Stylesheets: importing vs linking

There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.

Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:

4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.

Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.

Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

5. Commenting

When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.

Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.

Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.

/* CSS comments are enclosed by a forward slash and an asterisk. */

6. Use simple PHP to build sites

There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.

Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:

<?php include(“filename.html”); ?>

7. Set fonts using ems

Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?

The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:

body { font-size: 62.5% }

This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:
<div>
<div class=”hack”>
Your content goes here
</div>
</div>

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:

13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.

15. Favicons

Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.

h1 { text-transform: uppercase; }

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.

18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.

With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:

19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Bookmark with:

Comments

Alex Messinger / 27/07/2006 / 16:01

Nice description of the IE box model hack. Regarding #17, however, I'd be more inclined to add a class or id attribute to the image tag. Often when floating an image it's preferable to add a margin along the sides adjacent the text.

miong / 28/07/2006 / 06:20 / http://www.overcloacked.be

wow! nice tips!! thanks for the things listed here!

AntonyG / 28/07/2006 / 10:46 / http://www.enlightenstore.com

Item 9 isn't CSS. It's HTML with inline styles assigned. To achieve the effect purely using CSS (and follow the principles in item 14), use the following in your style sheet:

form {
margin-top: 0;
margin-bottom: 0;
}

otger / 28/07/2006 / 11:52

You can create quickly favicons with http://www.chami.com/html-kit/services/favicon/

About the fonts, you can read the fantastic article from Todd Fahrner Size Matters, http://www.alistapart.com/stories/sizematters/

Alfredo / 29/07/2006 / 01:05 / http://alfredo.palconit.com

Learning from others is the best tip of all. I learned HTML from learning from others and I am learning more from this 20 tips too! :-D

Quartz Mountain / 29/07/2006 / 08:53 / http://www.quartzmtn.com

It is possible to create and save favicons from within Photoshop (both Mac and Windows versions) with a simple plugin available here: <a href="http://www.telegraphics.com.au/sw/">http://www.telegraphics.com.au/sw/</a>;

Jakob / 30/07/2006 / 00:58

A tip: Point 12, please include what Roger Johansson wrote about alt vs title on his site 456bereastreet.com, it should be included here.

Emil Stenström / 30/07/2006 / 12:13 / http://friendlybit.com

Hi, good article I'm sure it helps a lot of people getting all this web design stuff :)

I found a few errors in the article and summariced them in a blog post: <ah ref="http://friendlybit.com/css/correcting-the-20-pro-tips/">Correcting the 20 pro tips</a>.

Yusuke Ohma / 31/07/2006 / 06:57 / http://web.iroya.biz/

nice tips!!I realized a basic thing again.

Rob / 31/07/2006 / 11:39

Shame there isn't a printable version of this page!

paul haine / 31/07/2006 / 14:41 / http://unfortunatelypaul.com

I also wrote an article on the errors here - http://unfortunatelypaul.com/2006/07/31/20-pro-tips-not-so-pro-at-all/ - I guess I should have checked these comments before writing - oh well.

For what it's worth I emailed the editor of .net with these problems about two weeks ago, but never received a response.

sherzy / 01/08/2006 / 21:09 / http://www.sherzy.com

RE: #7 - the text in this article is not resizable in IE

Alex / 02/08/2006 / 05:12

"For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge."

Most tips are ok, but this one's a big no-no. The image itself is 'pure content' and belongs in the document but it's alignment in the page is a pure design whim -- it might look cool to left in this design, but floated right in the next redesign. Keep it in the CSS.

Airline ticket / 03/08/2006 / 00:09 / Airline ticket

Thank you for your site. I have found here much useful information...

Nina Romanova / 10/08/2006 / 21:59

Very nice site. Thanks.

Nina Fedorova / 11/08/2006 / 23:36

Very nice site. Thanks.

jake / 19/08/2006 / 16:49 / http://www.jake.sharbutt.com

i can't figure out how to put text under my images. Iwant to put a picture then the name of that person with a link and i can put the names down and get them to show up i just can't get them to aling under the pictures were i want

Laura / 11/09/2006 / 15:35

thanks a whole lot this site helped me so much i cant wait to get started building my own web page

Steve / 19/09/2006 / 14:46

Few very handy tips, thanks alot

al / 28/09/2006 / 16:46

an answer to jake's question: "i can't figure out how to put text under my images..."

there are several ways to do this:

one way is using tables, i.e. - put the pictures in data-cells on one table-row, and the corresponding text in the cells directly below them.

another way is enclosing the image and text inside some HTML element, like a DIV and fill in the 'CLASS=' attribute, so that you can apply alignment and other style aspects directly to the image/text pairs via CSS.

finally - refer to tip #20 on this page - i'm sure you've visited pages that have pics with text just like you want. on such pages, choose view -> source, (IE) and see what they did to achieve that effect.

good luck

Alexa / 02/10/2006 / 10:09 / http://www.om-design.co.uk

THX for the useful tips :-)

http://www.om-design.co.uk

Candice Harris / 16/10/2006 / 16:37 / http://www.hypertemplates.com

Great article. Very easy for reading and very useful for application!!! Thanks a lot!!!

Bartek / 26/10/2006 / 22:49 / http://www.shycon.com

Excellent article. Every web designer should adhere to these basics, and its unfortunate that many do not.

R. Bhavesh / 22/11/2006 / 07:08 / http://ginytech.com

really really helpful article. thanks a lot.

Amit / 27/11/2006 / 13:02 / http://www.siddhatech.com

cool tips man,
and i like the way you checked whether i am human or not

Victory Darwin / 10/12/2006 / 08:32 / http://www.UniversityOfVictory.org

for any newbies that think html is hard.... i spent longer searching for an "easy to use" website building program than I spent on actually building my first home based business opportunity website when I finally decided to learn html. It's ridiculously easy! Like the article says, "just roll up your sleeves"! http://www.universityofvictory.com/prelaunch.html this site is joomla, but the text editor is a scam job, it sucks so bad i end up coding html to get the fonts and colors right. on the positive joomla is totally free, it's probably worth thousands when compared to professional cms. thanks for the great article! ~ Victory Darwin

Dr Livingston / 21/01/2007 / 14:30

Umm...

No. 6 is a seriously bad choice in the manner in which it is described in how to use PHP; This is how not to develop an interactive, dynamic PHP based web site in todays industry.

No wonder there are this many web sites out there that use PHP that from a development point of view, suck; If you want my advice, then that is to learn how to develop properly, either learn how to use a framework, or to learn layered archetecture and best practices, such as separation of concerns.

Your suggestion does neither, and it's a disgusting thought to read this.,

Dr Livingston, Sitepoint Dot Com

Jesse / 31/01/2007 / 08:35

Thanks for the Tips ...Inspiring

Blake / 09/02/2007 / 22:31 / http://blakejohnson.wordpress.com

This site has a plug-in for Photoshop that will allow anyone to export/save to a .ico file format extension:
http://www.telegraphics.com.au/sw/
This is where I got the link from: http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
I also read that they can be saved as .bmp's and then uploaded, then the filename changed, but I don't know the validity of that. The plug-in works, though, I've used it before. Good luck.

CHOCHO / 13/02/2007 / 00:27

I think there is a simpler way to add a favicon to your site without going anywhere else.

First create your 16 x16 px favicon in photoshop, and save as .png;
Then, in your HTML document, add the following:
...
<head profile="http://www.w3.org/2005/11/profile">;
<link rel="icon" type="image/png" href="http://../myicon.png">;
...
<head>
Favicon can be also saved as .GIF and .ICON
For details, go to W3C.

Happy Harry / 05/04/2007 / 14:03

Thanks for the great article. It was a most enjoyable read.

Point 1 is very vital: learn to do it by hand (hecho totalmente a mano, as the Cubans say).

Dreamweaver and other programs aimed at automating the web development process are great tools. But you want to know how to do it without them, learn all the basics first. And hand coding IS VERY IMPORTANT to learn the trade. I paid dearly for Dreamweaver (literally), but haven't used it much.

When you "take out" your "notepad" and start writing markup, you're on your own. No safety net, no one around to do it for you (wink at Mr. Dreamweaver), and you start figuring things out for yourself as time goes by.

My tip is: if you're just starting out in web design, do NOT skip this step! There are so many web designers around, and if you want to stand out in the crowd, be one of the really, really good ones, then learn to do everything by hand.
For those "web designers" who skipped this step: it's never too late to go back to the basics.

One should also become familiar with web standards and accessibility.

Needless to say, all your pages should validate with the W3C HTML and CSS validator.

Again, thanks for the great article. Keep up the good work.

Sumit / 30/04/2007 / 16:34 / http://funnyemails.uni.cc

Thank you for the tips, it really helps

Mary / 15/05/2007 / 17:39 / http://www.oplei.com/blog/

Thanks for the tips.

Sarabjit Singh / 29/05/2007 / 14:11

Yeoh
It's really rally good tips & tricks.It must very helpful for every webdesigner whether he/she is new one in this proffession or experieced hand.I am also a webdesigner & developer.So i appreciate this article very much...

GREAT!

Tim / 30/05/2007 / 22:22

Just don't get number 6. What will make you a better developper if you use php?

Marco / 14/06/2007 / 20:44 / http://www.marcofolio.net/

Great post!

Just disagree with one small thing:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

Prefer HEX code (ex. #FFFFFF) in CSS, not the "blue ", "purple" etc. thingie :)..

Keep on posting this!

Jen / 01/07/2007 / 03:51 / http://www.freebiescout.com/ps3guide.html

I agree with "Happy Harry". Point #1 is by far the best way to save yourself grief in the long run. Good planning not only makes your site LOOK better, but it means there's a lot less work to do after the fact.

I'd have to add "clean code" onto the list though. Keep your code tidy and organized, stick to one way of doing things (indenting, etct) and editing later will be a breeze.

Keith / 09/07/2007 / 10:18 / http://www.turbowebdesign.co.uk

thanks for the info'

Robb / 21/07/2007 / 03:23 / http://loudspeak.com

Excellent tips. Learn the hand coding. Fortunately an experienced designer was standing next to me in the bookstore over ten years ago and convinced me to bya basic HTML book.

Baladev Abad / 23/07/2007 / 05:27 / http://baladev.tk

Lol, just to know if I'm human or not.... thanks for this tips, just check my very basic personal site... i did it purely in html and by hand... i still have no idea about css, xtml, php, javascript or flash... just still in the process of researching and learning

Kev / 24/08/2007 / 12:12

surely everyone knows that the human question is there so that spam bots have a harder time taking over the comments?

This page/site as it is does not output to xml due to missing double quotes around some javascript script tags (may well be others), if using xhtml dtd then this should be adhered to especially if its promoting best practices, it may well validate but it does still not form as xml, again this comes with testing

Paul Kohler / 14/10/2007 / 06:37 / http://www.pksoftware.net/

Thanks for the "ems" tip. The printing stylesheet is a good point too - I have seen it but not really looked into it yet.
Thanks, PK :-)

nicolaas / 16/10/2007 / 02:38

i like it. i like it a lot

Jamessy / 01/11/2007 / 11:56 / http://www.xlweb.co.uk

Some good tips here and concise - never mind these heathens above who like to pick out small glitches and then make out that they're cool - good work dude!

Mike / 03/11/2007 / 18:58 / http://www.webfx.com

Great tip on the CSS print. This is especially useful on e-commerce sites where users just want to print their order information. Thanks!

Shaun Thornburgh / 12/11/2007 / 11:24 / http://www.assertia.com

Great tips - thanks!

Dennis / 17/12/2007 / 16:00

Thank you !! Very helpfull !

Phil / 20/12/2007 / 18:22 / http://www.tadesign.co.uk

Really helpful tips, especially the IE Box Model hack and capitlisation using CSS.

If anyone wants a site, visit <a href="http://www.tadesign.co.uk>t a design website design in newcastle</a>

Marc / 05/01/2008 / 07:57

Interesting but quite basic. You shouldn't use inline CSS as you're showing in your examples, I'd have thought you'd have known better :S.

Steve / 24/03/2008 / 23:48 / http://www.gadgets4nowt.co.uk/

I'm not sure I agree that basic is a problem. If the solution is simple, then why overcomplicate things?

At the end of the day, what comes out most for me is the planning. I have to admit that my very first (and second!) sites were a case of jumping straight in there, then trying to rectify all the errors in design. Rectifying coding errors is easier but if you get the layout totally wrong, there is only so much you can do.

For site three, I spent two weeks with pen and paper, deciding what I wanted to achieve and mapping it all out....I'm not finished yet though (:

Wish I'd found this article earlier, thanks.

George / 25/03/2008 / 20:54 / http://carroll.edu/boards/member.php?u=10591

Great tips; especially the planning part. So many developers overlook that part.

Sam / 26/03/2008 / 17:15 / http://www.affiliatesmiami.com

Hey this is a great site for tips. Im still learning php but this has great tips.

Gerardp / 05/04/2008 / 05:18 / http://www.volkdefense.com

This is good for starters, I would certainly use this as a beginners guide cause not many of us know where to start in making a template.

Ryan / 08/04/2008 / 00:13 / http://www.highspeedtec.com

Thanks for these tips. I'm pretty much a newb, so I'll be referring to these tips quite often

Simon / 07/05/2008 / 11:11 / http://www.ems-technology.com

Great tips, especially #1 (Planning) and #2 (Do it by hand) - both very important imho.

Not convinced about #7 (Set fonts using ems) though - it's not as straightforward as it seems and can get tricky when dealing with nested elements.

Mark firth / 09/06/2008 / 12:51 / http://www.vision-street.co.uk

Great page. A good collection of easy tips I tend to forget. This one is going straight in my bookmarks.

Denise Betteridge / 12/06/2008 / 18:33 / http://www.elfstudios.co.uk

This was really great information, and a great website. I'll keep checking back often.

Stream Media / 25/08/2008 / 13:48 / http://www.streammedia.org

I find the whole favicon insertion a nightmare. It works fine on Firefox, but IE7 is terrible for picking one up. Sometimes it works and then other times its seems to vanish and revert back to the 'page' graphic. Very fustrating!

VEERA / 12/09/2008 / 08:04

please explain as,is keywords?

NoodleGei / 30/09/2008 / 15:14 / http://noodlegei.blogspot.com

#18. Universal character sets

This is my next Blog-Topic. The potential with UTF-8 is very huge ...

Mike Huang / 09/10/2008 / 01:52 / http://www.pinkyarcade.com

I think #10 is very important for a designer. A lot of designers don't realize that not everything can be compatible with what you create. It really hurts the site's rep when a person sees broken areas.

-Mike

Chip / 16/10/2008 / 09:22 / http://www.faciodesign.co.uk

Excellent article. Always looking for ways to improve workflow, and more articles like this would be very helpful!

Vernon / 01/12/2008 / 20:35 / http://www.site-webdesign.com

Succinct and erudite synopsis, fascinating.

Larry / 28/12/2008 / 17:14

How do you make link white boxes disappear when using a dark background in Microsoft Office Live?

Andy Barns / 05/02/2009 / 14:02 / http://www.datawise-systems.co.uk

Point 14 is worth remembering. But balancing impact with content is crucial for commercial sites - if you have great prices but your presentation is terrible then who is going to buy from you?

It's also interesting that many (even) professional sites have poor layout control with designers not checking that there sites work with (say) both IE and FireFox.

Lynne Foster / 24/03/2009 / 17:17 / http://www.polr.co.uk

Couldn't agree more with point two. We weren't allowed near anything like Dreamweaver unitl we had sussed HTML. Gives you the best start and understanding and the ability to jump between the two - if you haven't got the basics how much more difficult must it be to find problem code!?

Ron / 06/04/2009 / 04:19 / http://www.ronmcbride.com

I find it is always a fine balance to be a code guru and artists, it's hard to tell the difference sometimes. Thanks for the info.
W H I T E S P A C E | DESIGN

Robert Visser / 26/04/2009 / 05:44 / http://www.pagerank-seo.com

On tip No. 17, the align attribute was depreciated in HTML 4.01 (released Dec. '99) and is not supported in XHTML 1.0 Strict. Nor will it be supported in (X)HTML5. Use <img style="float:left" /> in the CSS. Please validate pages with the World Wide Web's free validation services. For HTML 4.01 and XHTML 1.0/1.1: http://validator.w3.org/ For (X)HTML5: http://html5.validator.nu/ . For CSS: http://jigsaw.w3.org/css-validator/ .

Kool Designing / 06/05/2009 / 17:47 / http://www.kooldesigning.com

Excellent Post, Thanks for sharing great tips regarding website design.

Top ten tips are absolutely out class and informative for designer and clients.

Thanks again

All the best!

Mark / 29/05/2009 / 08:03 / http://www.onlinesynergy.net

A great list of tips that should be kept handy...

Just to elaborate on wrapping text around images, is to use a bit of CSS code which allows you to position the image optimally;

Jon Stringer / 11/06/2009 / 16:07 / http://www.learnhowtomakeawebsite.co.uk

Hi Guys

All good comments. Though some people seem to be getting on your back about using simple PHP for creating layouts and then using includes and switches.

However, this has got to be a far better option than hand balling every page in just HTML hasnt it? Well I think so. Lol great post any how!

Jon Stringer

San Antonio Web Design / 07/08/2009 / 11:26 / http://www.sanantoniowebdesign-seo.com/

Nice tips and Thanks for this post.

All tips are to useful but “The planning” is more important because mostly designer ignore that part.

Keep it up!

Daniel Gibbs / 10/08/2009 / 12:11 / http://www.danielgibbs.net

It's great how nigh on all of this is still relevant nearly 3 years later... Good job

Andreas Lee / 12/10/2009 / 13:11 / http://dumbazz.net

So, that was pretty much the best review ever. Seriously, um, you rock socks.

Ben Hunt / 17/11/2009 / 15:57 / http://webdesignfromscratch.com/

I totally 100% agree on your opening statement. The main skill of a web designer is to know how to achieve the desired effects with the minimum effort.

I think that a web designer, at a high level, only has 2 jobs: Firstly, to drive the right traffic to a site (Yes, that's SEO, I know, but a site doesn't live without traffic). The second job is to give those target visitors a rewarding experience. If you do those 2 things, the site will succeed.

Check out my ebook, Save the Pixel (http://savethepixel.org/) for a step-by-step guide.

Jenny - Web Design / 26/08/2010 / 07:02 / http://www.websiteblue.com

I already do most of this, but the font-size thing is a good idea. I'm going to have to start doing that.

.net /develop/discover/design

/Tutorials/ 20 pro tips

Comments

Add a comment

Issue 206

Quick Links