Web Design and all stuff related to it!

Tables less website

This could be surprise for some but most designers know W3C recommend table less sites. Actually the tables are made to display tabular data in spread sheet format and it been used for many year to design and develop websites. But after the introduction tag,

Why do I like Cascading Styles Sheets (CSS) and what makes CSS so great. The answer only makes sense if you know what CSS is.

The Holy Grail of CSS is to separate the content of a web page from the instructions that control what it looks like. This makes it much easier for various devices to display the web page correctly. The same page would display correctly on all standard web browsers (Internet Explorer, FireFox, Opera, Netscape, etc.), and devices used by persons with a handicap, cell phones, other devices, and yet-to-be-developed interfaces. The web site designer would not have to make separate pages for these devices. However, reality is different and here in the real world CSS does not do all these things. It does have enough positive points to make it worthwhile to learn and incorporate it into your web pages.

There are multiple ways to control how something looks on a web page. The color, size, and font used for a headline or for a paragraph of text can be defined with in-line styles and tags. The term “in-line” means that the commands for controlling the color, size, and font are mixed in with the content. This makes the source code for the page cluttered and hard to read and edit when you want to update it or fix something. Also, because you’re repeating the same commands over and over throughout the page, the file size of the page gets largër and hence slower for those browsing your site.

As opposed to in-line styles, CSS is not repeated throughout the page. CSS can be defined in the head section, or put in a separate file and referenced from the HTML file, or both. CSS consists of definitions of how a page component should render itself on the page. For example, you can define that a headline should be blue, 24 point, centered text and that a paragraph should be black, 12 point, justified text. Once that is defined, any normal HTML paragraph tags or headline tags would use these definitions when rendered.

You can define almost all the normal HTML objects this way; background color, background image, background image position, tables, cells, images, divs, etc. This leaves your HTML code clean and much easier to read. Just like those Ronco TV commercials, there’s more! If you have a multi-page web site and you use CSS and all your CSS definitions are in a separate file, you have one place to go to change the look and feel of all the pages in your site. Imagine if you have a 50 page site and you learn that the size of your text in all your paragraphs is too small or the wrong color to maximize salës: instead of having to edit 50 pages and change the definition of each paragraph, you simply edit the CSS file and you’re done!

But with CSS what do you do if you want one paragraph or a set of paragraphs to look different? You define a class. If you have a right column where you display ads in your CSS, you would define a class and give it a name such as “.rcol”, then you would define the necessary items that you want to look different (p tags for example). “.rcol p” would be used to control how a paragraph tag was rendered. You simply add “class=rcol” to the paragraph tag, or the table tag if it’s in a table, or div tag if it’s in a div, etc.

This is also where the cascading in CSS comes into play: the default definitions cascade down into a class as long as the class does not contain something that overrides the default. This means that in our example text rendered in a paragraph tag looks different for the rcol class, but because that’s the only thing we’ve defined for rcol, everything else would use the same styles as the rest of the page.

You can also define size and positioning for objects in CSS. This is one place where we hit the real world of CSS pretty hard. Not all browsers support the size and position commands the same way. This leads to hacks that define a position and then use a command that is known. For example, to cause Internet Explorer to bail out of the CSS, after that line you use a position command that Netscape for example understands. CSS uses the last definition of an object so this technique can be used to “trick” or “hack” CSS into working across more browsers than it normally would.

I don’t recommend doing this. One reason is that it’s messy and easy to forget why you did something. The other reason is because as browsers are updated, or new devices come online, they may not follow these unwritten and unsupported hacks and your pages are apt to be all messed up. To get around this I usually use CSS as much as I possibly can and then use tables and in-line definitions to control positioning and size. Some people will go to great lengths to use CSS for everything, even replacing all tables, but here in the real world, you should get the page built, functioning, and in a form that can be used reliably on as many platforms as possible.

Not all web site software packages like Microsoft Front Page, Dreamweaver, or Adobe GoLive, etc. fully support CSS. You’ll have to do some coding manually. Don’t worry, it’s not that hard. I have an online course that can teach you how, just follow the link at the end of this article. Take the time to learn CSS and implement it in your web pages. It will be time well spent.

Cascading Style Sheets or CSS allows you to design web sites efficiently and effectively. Unlike other coding forms, CSS makes search engine friendly and fast loading web designs that are easy to modify.

When designing a web page, a few people can sometimes get trapped on complicated HTML, flash and even embedded codes. This technique aside from being time consuming is also not helpful in SEO, resources, and user-friendly. Follow these tips and guides on how to design your web site with CSS.

1. CSS allows you to style any web page in terms of font, colors, graphics,

links, layouts and others.

2. Separate main website content from HTML markup and other page elements, this will reduce the loading time of your pages dramatically, thus improving user experience and general SEO.

3. Have a standard design for all pages and option to customize specific pages. Since editing the whole website would need you to alter a single stylesheet, improving your design shouldn’t be a problem.

4. Check your design’s compatibility with other browsers. Your design should be viewable without errors on browsers like Firefox, Internet Explorer, Opera, Safari and Chrome at least.

5. Since you are working with CSS, remove tables as you can easily achieve that with CSS codes. This will improve your website’s loading time by as much as 50%.

6. Remove unnecessary codes in your CSS stylesheet. There may also be duplicate codes that could give errors on certain browsers.

7. Style forms with proper CSS.

8. You can improve even the submit buttons of your website (if you have one). Improve its background or replace the button with an image. You don’t have to worry about the images eating too much bandwidth since you are using CSS.

According to the W3C, a CSS color is either a keyword or a numerical specification. That definition seems simple. Colors are either keywords or numbers, but it’s a bit more complicated than that.

Color Keywords

Color keywords are exactly what you might think they are – a list of words (in English) that correspond to colors on Web pages. There are 16 HTML 4 color keywords:

•    aqua

•    black

•    blue

•    fuchsia

•    gray

•    green

•    lime

•    maroon

•    navy

•    olive

•    purple

•    red

•    silver

•    teal

•    white

•    yellow

To make things interesting, the W3C reports that “orange” is also a color keyword in the CSS 2 specification. Perhaps it will get added back into CSS 3 before it’s finalized.

But it gets more complicated than that, as there’s another list of color keywords that you can use. These colors are often called the Netscape Named Colors because the Netscape browser was the first Web browser to define the color keywords and support them. The W3C calls this list the “SVG Color Keywords”. But whatever you call it, you need to be careful when you use these keywords. Internet Explorer doesn’t like the different spellings of gray/grey.

Colors as Numbers

Okay, so color keywords aren’t as simple as they appear, but what about numbers – that should be fairly simple, right? Wrong. The CSS 2 specification provides for two ways of specifying colors as numbers:

•    RGB

•    Hexadecimal RGB

RGB Color Numbers

The format of an RGB color number is:

rgb(red,green,blue);

The red,green,blue are numerical values from 0 to 255 or percentage values from 0% to 100%. So, the color red is written:

rgb(255,0,0)

rgb(100%,0%,0%)

Hexadecimal Color Numbers

Hexadecimal color numbers are also RGB – they are just written differently to allow for differences in how browsers handle the CSS.

Hexadecimal colors are the same RGB color numbers converted to base-16 and written as one long number. Hexadecimal to RGB color charts make this easy to see. They are written:

#RRGGBB

Each pair of the hexadecimal triplet is a number from 00 to FF (base-16), which corresponds to 0 – 255 in decimal. So the color red is written:

#ff0000

CSS 3 Color Numbers

CSS 3 adds some additional complexity to the color numbers. In the CSS 3 recommendation, there is:

•    the transparent keyword

•    RGBA color values

•    HSL color values

The transparent keyword is not exactly new to CSS 3. CSS 1 allowed background-colors to be marked transparent. Then CSS 2 extended it to the border-color property. CSS 3 extends this keyword to use in any property that uses color values including the color property for changing text and foreground colors.

An RGBA color value allows you to define the opacity of the color. It is written:

rgba(red,green,blue,opacity)

The final number is an alpha value ranging from 0.0 to 1.0. A color with an alpha value of 0.0 is fully transparent and an alpha value of 1.0 is fully opaque. According to the specification, if the user-agent doesn’t support RGBA, it should default to RGB and ignore the alpha value information. However, in practice, this doesn’t happen and the color value is completely ignored.

HSL color values refer to hue-saturation-lightness numerical codes for colors. They were added to solve some specific problems with RGB colors:

•    RGB is hardware-oriented. It references CRTs and assumes that color model for displaying the colors. Most professional printers are not RGB based, but CMYK and the translation from screen to print is not always good.

•    RGB is non-intuitive. In other words, most people think of colors in reference to the hue (red versus yellow), saturation (grey versus red), or lightness (dark red to red to pink) but RGB forces you to put the colors in a machine-generated way.

Red in HSL would be written:

hsl(0,100%,50%);

HSL also has an alpha value notation – HSLA – which allows you to specify opacity with this color notation just like RGBA.

HSL is not supported by most browsers, so it’s a good idea to just remember this notation for the future.

You might not have given it much thought, but the browser your website is viewed on can completely change its appearance. Today there are two main types of browsers: Internet Explorer and Firefox. The purpose of this week’s article is not to get you to change over to Firefox, listing about why it has tabbed browsing, blocks popups, and is generally more stable. No, today we will discuss how the difference between Internet Explorer and Firefox affect your website.

If you haven’t recognized yet by the tone of this email, Internet Explorer 6 (IE 7 is getting better) is a curse on browsing the internet. Besides being a regular target for hackers and bugs, IE has a difficult time loading webpages the way they should be displayed. If you are designing a standard website with flat images you’re fine for the most part, but as soon as you start trying to work with transparent images, or arrangements of images that make your site look polished, Internet Explorer puts the caibosh on your dreams of layered images by filling in any transparent screen with an ugly gray box.

Also if you ever want to line up your site’s content using tables and you would like to left justify your content, sometimes IE doesn’t recognize this and centers all your content until you go into the code and figure it out. Firefox, on the other hand is great, it shows the page the way it was made to be seen, without silly images glitches and the like.

I know that many of you are saying to yourselves: “but hey! aren’t there are other browsers out there like Netscape or Safari?” Basically they are all falling in line with Firefox’s platform and are far less used than Firefox or IE. The stark facts remain, until Microsoft stops installing IE on applications of windows, we will continue to have cross-browser conflicts. At present, 54% of the visitors to QTweb.ca use Internet Explorer.

So what does that mean for you and your website? Not a heck of a lot, if you are a client of QT Web Designs – since we constantly check your website against defects on all current and past versions of major browsers and try to build your site in a way that is accessible and consistent for all. Contact us today if you would like us to see how your site works across several different browser platforms. If you are designing a site yourself, our best advice is to always preview your site on multiple browsers since you never know how it might translate.

For more information about QT Web Designs or our products visit us online at www.qtweb.ca

CSS is the simplest way to create attractive, quality web pages. Unfortunately, many people are still attempting to control the structure and presentation of their web pages with only HTML. Here are four reasons that you should forget about tables and start using CSS today:

Browser Compatibility-If you are trying to use tables to control the appearance of your web site, you may be able to achieve the exact look you want on a single browser (such as Internet Explorer). However, when people visit your web site with browsers like Firefox, Opera or Safari, your layout may be completely broken. If you want to make sure that users from any browser get the best experience from your web site, you need to start using CSS. Although it’s not perfect, CSS will ensure that visitors don’t leave your web site because of a broken layout.

Easier to Update-Wouldn’t it be nice to change the font color with a single line of code? With CSS, it really is this simple. Although updating the appearance of a large web site that only uses HTML can take days or weeks, CSS keeps all your style information on a single page.

Faster Load Times-By using an external .CSS file, you can significantly reduce the load time of every page on your web site. This is because a browser can cache all of the style information for your pages instead of needing to load every tag over and over again.

More Attractive Pages-This is probably the most obvious advantage of CSS. CSS can accomplish things that a HTML only web page could never even come close to doing. CSS really does give you complete control over how you want your web site to look. An well-designed web site will always be perceived as more reliable than one that does not look professional.