1. Learning Web Design: A Beginner’s Guide

2. The Principles of Beautiful Web Design

3. Web Design in a Nutshell

4. The Web Designer’s Idea Book

5. Don’t Make Me Think

In web design, it’s always good when you can avoid using images to create visual elements. This technique just does that to enhance your corners with folded effect. Tutorial – Demo

Overwhelming headers

Sometimes huge headers and titles tend to overwhelm a viewer and make them want to leave the site immediately. Never go past 25 percent of the viewable page size when putting your headings which should already include the navigation bar as well.

Redundant splash pages and flash intros

Having a page that says “click here to enter site” is too redundant and many people avoid sites like these because it takes up too much time to enter the website index with all the relevant information on it. This also goes for those long flash videos that play before you can even get into the site. Not everyone has a great internet connection to accommodate quick flash video downloads.

Maddening music

Having music playing along while you browse a website is not only irritating it makes the viewer distracted therefore allowing little quality reading of website information that appears on your page.

Unnecessary frames

Frames are a little heavy in terms of design and are made only to keep something on the screen for your viewer to see. They take ages to download and not all browsers support them, especially in terms of bookmarking and SEO.

So, when you make your web design, make sure to avoid these web design foibles to prevent viewers from avoiding your website instead of being attracted too it. In the end it is all about simplicity and functionality. People want to just get the information and then move on.

A really interesting on using CSS sprites without using background images, read about it on Soh Tanaka’s website.

Are you looking to improve your stylesheets by creating better CSS? Then take a look at these tips.

1. Create conventions for standard structure elements

If you work often with stylesheets, you should definitly make sure that you have a commonly used classes and ids naming structure. This way you will gain a lot of time by not having to endlessly scan your stylesheet.

2. Format your CSS with sections

For better structuring of your stylesheet, a good idea also is to create delimited sections of your CSS. It’ll make it easier to scan through and quickly find what you are looking for.

3. Keep your CSS separated form the HTML

Even if you are using page-specific CSS, you are probably better off creating a specific stylesheet regrouping all page-specific CSS rather than using inline or in-page CSS.

4. Use classes and id’s where appropriate

Only use ids for unique identification of a page element, for everything else use classes. If you are not careful with this you could run into problems when modifying your website.

5. Format your CSS consistently

I am not going to tell you if it’s better to format your CSS with one line per element or by using block display, but when you made your choice you should stick to it or your stylesheet may turn into CSS hell.

6. Use shorthand as much as possible

Shorthand CSS not only makes your stylesheet lighter, it also helps to make it easier to scan by having less properties.

7. Include color references

It took me a long time to get started using this tip, but I don’t regret it. Including your color scheme’s references will definitly be a time-saver on the long term.

Learn how to create better CSS to improve your stylesheet with our testking 350-029 course. Download the testking 642-892 tutorials and testking 1Y0-A05 study guides for complete and accurate step by step learning.

To use it, you’ll just have to set the body size, body columns, split content, a few accessibility options and the header/footer. Then you can hit the “show code” button to get your template code. That’s it!

Screenshot: setting the body size

Screenshot: getting the code

Building a website is nothing less than a classic catch 22. You cannot have web design without web hosting and vice versa. There is thus little use in claiming that one is more important than the other. What is worth appreciating however is how they separately and together can contribute to the creation of a great website?

The overall attitude towards the quest for web hosting is not pleasant. People seem to hate the very thought of such technical necessities. In fact, the hosting industry is one of few business segments that has survived despite such an evident customer dissatisfaction.

A skewed relationship between buyer and seller has tipped the balance in power, seemingly favoring hosting providers. And seeing as we are referring to a market dominated, with few exceptions, by nerds in grey hoodies and birkenstocks, this perception is not all that hard to imagine.

However, good web hosting is more than an urban legend. It can be found with little effort. The predicament more than often lies in a webmaster’s inability to determine what he needs and expects from his hosting provider to be. When later those needs become clear, a hosting plan has often already been obtained, inevitably resulting in dissatisfaction with the existing plan.

This is when web design enters the picture. Web hosting needs should be determined according to:

• Traffic volume and connecting data load – every time a visitor enters the site, the web browser retrieves the data from the hosting provider’s server. With many visitors and heavy content on the site (high resolution images for example) the server bandwidth and CPU usage need to be extensive. Keeping to a light web design is one way to avoid getting a costly hosting plan.
• Skills and ambitions in web design – a hosting account is normally accessible via an user interface or control panel if you wish. To set up a pre-scripted website or CMS and never to return again is one thing. However, if the plan is to manually design and develop the website, such tools like FTP client, file manager and database management are to be reviewed and valued.

In conclusion, the purpose of the site is another factor that needs to be taken into consideration. For a portfolio or blog, nothing larger than shared hosting is required. Larger sites, running on heavier content management systems that receives a fair amount of traffic, will need dedicated hosting or at least, vps hosting.

In any case, a web designer looking for total freedom in regards to web hosting, should be more concerned about what software and tools are included in a plan, rather than it technical liberties.

• W3Schools
  W3Schools is a very good and official place to get started with CSS. They have an entire section dedicated to introduce you to CSS, as well as a small quizz to see how well you learned.
• Learn HTML and CSS: An Absolute Beginner’s Guide
  Nice article with in-depth explanation of what is CSS and the tools you’ll need for every platform. This article is mainly excerpt of a book, so consider buying it if you prefer learning on paper.
• CSS & XHTML video tutorials from beginner to advanced
  What I like about videos and screencasts is that you see what people do and can try to reproduce what you saw. This set of videos should definitly help you to get a better grasp on CSS.
• CSS tutorials
  This site is another take on teaching CSS, it uses simple words for the people having no idea of what CSS layouts are.
• HTML Dog’s CSS beginner tutorial
  I learned a lot about HTML & CSS when I first started designing websites, so I’m pretty sure that it’ll help all the beginners out there. The explanations are as simple as they can be with example files.
• CSS Beginner Mistakes
  Must-read article after having done a few designs with CSS. You’ll understand things you should avoid doing and hopefuly learn from it.

• Create a distinct CSS file for your hacks
  In a perfect world we wouldn’t need hacks because all browsers would be standards compliant. Unfortunatly lots of people are still using Internet Explorer 6 out there, and depending on what you want to achieve you may be forced to use browser-specific hacks. If this happens, having those hacks in a separated CSS file (eg. ie6-hacks.css) will make your life easier once the browsers have evolved.
  Some people take this technique one step further and use multiple CSS files to get organized. I would only do it when their is specific CSS for a website’s section (eg. styles for a complex event calendar).
• Organize the stylesheet in sections
  By creating sections, you’ll make it easier to scan through the stylesheet to find the properties that are situated in a particular region of your page.
  You can create these sections separations by using CSS comments, as in the following.
  /* HEADER */Personnaly, I also use capital letters to make these comments stand out.
• Make the cascade more visual
  One more time, this will help you to go through the stylesheet’s cascade faster by tabbing the children elements to get a visual understanding of the hierarchy.
• Alphabetize selectors within the sections
  Just as simple as it sound. Within the sections you’ve created in your file, organize your selectors going from A to Z. This will make the eye scanning of your file more logical and efficient.
• Use shorthand properties
  This won’t be long to learn, but really helpful to unclutter your CSS file. Shorthand properties will allow you to set multiple properties in one declaration.
  For example:
  margin-top: 5px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 3px;will become
  margin: 5px 10px 8px 3px;CSS shorthand can be used for the following properties: font, margin/padding, border, list-style, background.