Hello everyone. Today, I am going to tell you the top 9 tips for web design. This covers both the designing and the development side of things. They all are essential, so make sure to read them thoroughly, and leave a comment if you want me to add anything.

1. Use the 960 Grid System

Nowadays, we design to a 1024×768 screen resolution. This allows us to use something called the 960 grid system. What it is, is a file, that is 1050px squared, with guides that allow you the designer to see the 960px wide area. It gives the extra space at the side, to show effects such as fluid layouts, block layouts, drop shadows etc.

2. Use colours that go

It may seem really basic, but give your website a colour scheme. If you went for a blue colour scheme, then make sure you stick to it. Don’t have a blue header, yellow content, and green footer. make sure the colours are with your main scheme. even the links, keep them and their states to the colour scheme. For where your main content will go, put it on a white background, as it is really easy to read text when it is on a white background.

3. Padding

This arose to my knowledge a while back, when I asked for my first ever template to be reviewed by the community at a forum I am a member of. Padding is essential. You don’t want your text, kissing the sides, the same as you dont want your text to be too bunched together. remember,  your viewer wont read it word for word, they will scan your text for interesting things.

4. Table-less Layouts

Table layouts are a huge no. They have browser compatibility issues, display issues. the list goes on. The way to do things nowadays is to use table-less layouts. This means using DIV’s and CSS to get the desired look. Some web templates for certain CMS‘ use tables, as its just how they work. A good example is e107. The themes for this use tabled layouts, and I have sometimes seen sites I like, and have refused to bookmark them, because they have tabled layouts.

5. Popups

Popups are mainly used for notifying the user of something, such as the site going down for maintenance for an hour on Friday. You don’t want to put them up to advertise. It’s no good having a popup that tells the user they can get 50% off their next purchase using the voucher code ‘annoying popup’.

6. navigation

This is the most crucial thing of a site. If your user can’t find their way around your site, you will lose clientele. this will really look bad in the long run. Here at evotuts, we have a nav bar at the top right, as well as in the right sidebar. This means my visitors can navigate around the site with ease.

7. Alt Tags

If you want to learn a bit about SEO, then here you go. Alt tags are needed for good SEO. Alt tags are there, for if the image doesn’t display, as well as for those who use text-to-speech readers. Alt tags are used in media, to help your sites SEO. In case you didn’t know, SEO is for search engines, so next time, use the alt tags to help your site in the search engines.

8. Keep the page size small

So, how can you keep the page size small? You can import things. Don’t use inline CSS or inline javascript, link to an external file which has that code. In some cases, you can do this for page structure too, using PHP includes, which will get those pages and put them in the place of the PHP code. I will make a tutorial on PHP include soon, then post a link to it here.

9. Optimise Your Images

You may think that when you put an image onto a webpage, and it gets scaled, that will make the site load faster, well, it does the opposite, as the browsers rendering engine, needs to take that image, then scale it, which takes time. Save time and decrease the load time, by optimising the images. This means resizing your images in a graphic editor, not a web editor. Just remember that if it has a larger file size, it will take longer to load.