StormBiz Blog

Everything you need to know about website design, website hosting, graphic design, our website design courses and more...

Writing Articles With Style - Create Quality Articles With CSS

css cascading style sheetsCSS - Cascading Style SheetsWriting your quality articles using Cascading Style Sheets (CSS), will insure that your articles will be both easy to read, and aesthetically pleasing to the viewer.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and "liquid."

Removing the display attributes of your articles from the HTML code allows you to concentrate on using the HTML for organizing your document's content.

When you use CSS, a new approach is possible to writing your articles for the Web:

* First, you write your article in a very basic HTML document, using simple HTML code. At this stage, use only the most common HTML tags. Focus on organizing your article's content first.

* Next, you identify parts of your document for special display formatting.

* Finally, you define the formatting in the CSS file.

Once you work through this process, you can re-use both the HTML document and the CSS file as templates for your future, quality articles.

This article will provide the tips, tricks, and sample code to give you a head start in creating your own quality articles, and templates using CSS. If this all seems complex and intimidating at first, don't despair--read on. I will explain the basic HTML and CSS terminology throughout the article.

basic HTMLBasic-HTMLTHE BASIC HTML DOCUMENT

The basic HTML document is divided into several sections: html, head, and body.

Tags are used to demarcate document sections, or "elements." Content lies between the tags. For example, the article you are now reading lies between the body tags of an html document.

Tags usually exist in pairs, a start tag and an end tag. The start tag is surrounded by less - than and greater than - angle brackets. An end tag is bracketed with the same symbols, but the first character of the tag is a forward slash (/). For example, HTML code for a paragraph element would include the start and end "p" tags with the content sandwiched between the two.

The basic tag pairs found in web pages are:

* html -- These tags tell a browser that this is an HTML document, and define the start and end of the document.

* head -- The head element can contain information about the document. Although the browser does not present the information to a viewer, the information can be "seen" and used by search engines.

* title -- The title tags define the title element that will be used by a browser for the document's title.

* body -- The document's content is placed between the body tags.

The first line of code in the basic document is the Document Type Definition (DTD). The !DOCTYPE tag tells the browser which HTML or XHTML specification the document uses. HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

basics html tags in web designingBasics - HTML Tags in Web DesignThe first meta tag in the basic HTML document provides information about how the page content characters are encoded, so that a browser can interpret them correctly.

If you want your articles to be widely seen on the Internet, you need to be particularly interested in the meta tags for keywords and description. These can be seen and used by search engines.

Use the "keyword name" and its related "content" in a meta tag to list your keywords or keyword phrases.

Keywords ought to be appropriate for the article content. They should also reflect what internet surfers actually type into a search engine's query box when hunting for the information you are offering.

Keyword research is a study in itself. Freeware is available on the Internet that can help you determine the best keywords to use in your article and keyword list. Keywords or keyword phrases within the meta tag need to be separated from each other with a comma.< />

Although not all search engines will utilize the description meta tag for their search results, you still need to include a good description for those that do.

If you had just a few characters to describe your article, or to entice a surfer to select yours from the results of a search, what would you write? What you would write is what should go into the description.

css website planningCSS Website PlanningUSING CASCADING STYLE SHEETS (CSS)

I have already suggested several reasons why today's preferred method of creating web pages is to separate a page's content from it's display properties. It's time for a demonstration of how this can be accomplished.

In the past, HTML tags included attributes to define how the content was to be displayed by a browser.

Today, CSS is used to concentrate these attributes in a single, separate file. Simple HTML code specifies "what" content is to be displayed; the CSS code defines "how" the content is to be displayed.

Before CSS can be used to format an HTML document, the name and location of the CSS file must be known to the browser. The browser gets this information through the HTML "link" tag that is coded between the head tags.

Once the CSS file is linked, the browser will check the CSS file for display attributes. For example, if the browser encounters an "h1" tag in the HTML code, it will check the CSS file for "h1" formatting. Here is the "h1" formatting information I included in the article.css file I use for my article titles:

h1

{

color:maroon;

text-align:center

}

When a browser encounters an "h1" tag in the HTML code, it would display the title centered and maroon.

HTML content formattingHTML Content for FormattingSELECTING CONTENT FOR FORMATTING

Content formatting can be applied to an HTML document only after the content to be formatted has been identified to the browser. An easy way to do this is to place a "class" or "id" attribute within a start tag. The same class name can be used many times on a web page; each id name should be used just once per page.

Once content is identified, the class or id name can be referred to in the CSS file and the browser will apply any formatting attributes found there.

Selections Using Class Names

As an example of using the class name, I used the following CSS in an article about writing ad headlines. In the HTML code, I used divisions tags with a class name of "headline" to demarcate the headline text. I added the following code to the CSS file:

.headline

{

font-size: 24px;

color: red;

font-weight:bold;

text-align:center

}

HTML and CSS CombineHTML and CSS CombineIn the CSS file, I specified the font-size, color, font-weight, and text-align attributes. The class name was added to the CSS file by preceding the name with a period. I used a semicolon to separate attributes in the list. The HTML and CSS code combine to produce a bold, 24px, red headline centered in the HTML page.

It should be noted that there are some basic HTML tags that are their own class names, and do not require a preceding period in the CSS file. These include p, h, body, li, and others. That being said, these tags can be modified by appending an additional class name to them. For example, if I wanted to make the next paragraph blue, I could add a "blue" class attribute to the opening HTML "p" tag and then add this code to the CSS file:

p.blue

{

color:#0000FF

}

This would be a blue paragraph if this HTML were displayed in color.< p />

Selections Using ID Names

The CSS syntax for an ID is a little different from that used for a class. In the CSS file, ID names are proceeded with a pound sign (#). The example below "floats" my 288px by 59px logo image to the left of the following paragraph: the text flows around the image. I added an ID attribute with a name of "logo" to the HTML "div" start tag I used to demarcate the image information. Here is the CSS code I used:

#logo

{

float:left

}< />

span tagsSpan TagsThe HTML and CSS code would combine to produce the following results:

~~~LOGO WOULD FLOAT HERE~~ Text here would flow around the logo.< />

Selections Using Span Tags

If you want to format just a bit of content, you can use span tags

In the article.css file, I defined a background-color attribute for a "highlight" class that will put a yellow background behind selected text. For the next paragraph, I used span tags to bracket the text, "separate attributes." Here is the CSS code:

.highlight

{

background-color:yellow

}

As a result, and if this were in color, the phrase "separate attributes" would be highlighted with a yellow background.

LOOKS AND LAYOUT

A careful selection of the "global" characteristics used for the body element of your web page will insure that your articles will be both easy to read and aesthetically pleasing to the viewer. These characteristics include font, font color, page background color, and page margins.

I use the "body" code in the CSS file to define the default body display attributes. Here is the CSS body code from the article.css file:

body

{

background: #fffef2;

color: black;

line-height: normal;

margin: 3% 25% 3% 25%;

}

font familyFont FamilyFonts

In the CSS body code, I specify the font family I want to use. The first font listed, Verdana, will be used by a browser if it exists on a viewer's PC. If Verdana is not available, the other fonts will be checked, in order. If none of the specific fonts are available, the browser will default to any available sans-serif font.

If you use a commonly available font/font-family for your articles, the chances are good that a reader will see the article as expected. Otherwise, your article might not look the way it should.

Verdana was designed for easy readability on computer monitors and, for this reason, is my font of choice. Since Verdana is commonly available on PCs, using this as the default font will also increase the likelihood that my article text will be displayed as I intended.

Page Background

I set the background color to a light color, the font color to black, and the line height, or spacing between lines, to normal. The background color I like to use (#fffef2) shows colored text and graphics to good advantage.

Margins

I like to adjust the article on my page to show content in roughly the middle half of the page. I think it is easier for the eye to process than content that goes edge to edge. I use the CSS margin attribute to adjust this. The margin attribute defines the top, right, bottom, and left margins respectively (margin: top right bottom left).

In the CSS body code above, I set the left and right margins to 25% of the available display width. Using 25% places about 60 characters per line of text on my 1024x768 pixel full-screen display. I also set a small 3% margin above and below the content.

Lists

If you use a list in your article, you can use the CSS file to customize the way your list looks. Two important considerations of list design are the list bullet and the spacing between list elements. The example below shows how to change the bullet graphic and element spacing of an unordered list:< />

li

{

list-style-position: inside;

list-style-image: url

http://www.elizabethadamsdirect.com/articles/images/small_blob.gif);

list-style-type: none;

margin-bottom: 1em

}

I added two list attributes to customize the list:

1. list-style-image - used to specify the URL to a bullet image (not shown below), and

2. margin-bottom - used to provide some extra space between list items.

For a complete description of possible list attributes--as well as great tutorials on using HTML and CSS--you can visit http://www.w3schools.com

HTMLHTMLEntity Names

Some characters have special meaning in HTML documents. When you want to use these characters in your text, you can use their "entity names" to prevent browsers from misinterpreting them for HTML code. I used entity names extensively for my web version of this article to display many symbols, particularly in the code samples.

Most commonly, I use entity names in my HTML code for quote marks. By doing this, I get the look and feel I want in my text when I use quotes. For example, when I want to use distinctly different left and right quote-marks in my web-based titles and headlines, I use specific entity names to do so.

Careful attention to the entity names you use can add "that extra touch of class" to your articles.

For HTML 4.01, there are entity names for both ASCII and extended characters and symbols. I use an entity name to insert a copyright symbol at the bottom of all of my web pages. You can find a complete list of entity names at w3schools.

I use Dreamweaver 8 for my HTML and CSS editing. With Dreamweaver, I can validate my code as I write it. I have optioned the validator to warn me when entity name substitution might be appropriate.

Validating Your HTML and CSS Code

I like to write valid HTML code for the "!DOCTYPE" version I use. If you click on the w3 validation icon at the bottom of my full-color, web-site version of this article, you will see that the HTML code for the article is valid and error free. You can use the validator accessible through w3schools to check your code, too.

web content writingWeb Content WritingCONCLUSIONS

When you separate your article's content from the code browsers use to display your article, you can focus on using simple, basic HTML code to organize your content. A Cascading Style Sheets(CSS) can accomplish the separation.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and "liquid."

You can look at one of my recently published articles to see the results of using the techniques outlined in this article. The article is "Profitable Ads: How to Write Ads that Pull."

Sincerely Yours,

Elizabeth Adams

For more information, or a free quotation, please contact us.

Continue reading
0
  661 Hits
661 Hits

Why a CSS Website Layout Will Make You Money

web devlopmentWeb DevelopmentAlthough CSS layouts have been around for years, they haven't become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at http://www.thecounter.com/stats/2004/August/browser.php).

So, why should you convert your website from its current table-based layout to a CSS layout? It'll make you money. Simple really. And here's four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It's not unusual to see reductions of 50% or more in file size when switching from tables to CSS. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user's computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this (http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml).

search engine optimization rankingSearch Engine OptimizationA higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

  • The code is cleaner and therefore more accessible to search engines
  • Important content can be placed at the top of the HTML document
  • There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: http://www.useit.com/alertbox/20030107.html).

CSS and HTML codeCSS and HTML CodeCSS downloads faster than tables because:

  • Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
  • Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered
  • Tables encourage the use of spacer images to aid with positioning
  • CSS generally requires less code than cumbersome tables
  • All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
  • With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

lead generationLead Generation The more people you can reach, the more visitors you'll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don't underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: http://www.etforecasts.com/pr/pr0603.htm) and one third of the world's population will own a wireless device (source: http://www.clickz.com/stats/markets/wireless/article.php/10094_950001).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn't possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

Contact us today for a free quotation, or to discuss your website requirements

Continue reading
0
  749 Hits
749 Hits

Web Design - Simple Mistakes and Golden Rules

Good Web DesignGood Web DesignGood web design is something that can be achieved relatively easily by sticking to a small set of guiding principles and avoiding some very common mistakes.

Truly excellent web design skills are born out of years of experience, dedication, and plenty of hard-learned mistakes. Fortunately, being truly excellent at web design is not a pre-requisite for building a fantastic website, and the lessons learned from those mistakes can be passed on without the hardship.

This article contains some of the principles which I have learned the hard way, and the easy way. Each principle is fairly obvious, but so many designers ignore them for one reason or another, and the consequence is a hard-to-use, poor looking site that is difficult to manage, and fails to make the top 1000 in Google. If your website adheres to the principles below, it will almost certainly be much healthier, and you, and your visitors will reap the benefits.

1. Keep Everything Obvious - Don't Make Me Think

The book entitled Don't Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug, is one of the best selling books on the subject of web design and usability. Personally, I think thinking is a good thing, but at the same time, I don't want to be struggling to figure out how to submit a web form!

Visitors to a website expect certain conventions, breaking these is a great way of losing visitors. People expect to find the navigation at the top of a page, or on the left hand side. Logos are mostly found on the top left. Much research has been conducted into how people view and use web pages. The good news is that you do not need to know all of this; instead, look at how larger companies, such as eBay, Amazon, Google, and Microsoft structure their pages, and the language they use, then emulate them.

website colourswebsite colours2. Limit Colours

A website using too many colours at a time can be overwhelming to many users, and can make a website look cheap and tacky. Any users with colour blindness, or contrast perception difficulties, may even be unable to use the site.

Limiting a palette to 2 or 3 colours, will nearly always lead to a slicker looking design, and has the added bonus of simplifying your design choices, reducing design time.

Software like Color Wheel Pro, can greatly simplify the creation of a pallet, by showing which colours sit well together. If you really do not have the eye for design, then software like this provides the perfect way of escaping monotone, or badly combined colour schemes.

If your site uses blue and yellow together, or red and green, then it may present problems to anyone suffering with colour blindness. Vischeck.com provide free software that can simulate different types of colour blindness.

Web fontsWeb Fonts3. Be Careful With Fonts

The set of fonts available to all visitors of a website is relatively limited. Add to that the possibility of a user having a visual impairment, then the options become even smaller. It is advisable to stick to fonts such as Arial, Verdana, Courier, Times, Geneva and Georgia. They may not be very interesting but your content should be more interesting than your font, and if it can't be read, what is the point of having a site?

Black text on a white background, is far easier for the majority of people to read, than white text on a black background. If you have large amounts of text, then a white or pale background is far more user friendly. Always ensure that there is a good contrast between any text and its background. Blue text on a blue background is okay, as long as the difference in shade is significant.

Verdana is often cited as being the easiest to read on the screen. Georgia is probably the best option for a serif font.

web design developmentWeb Design and Development4. Plan for Change

If you fix the height of your page to 600 pixels, will you still be able to add additional menu items, without completely redesigning your page?

The ability to add or remove content from a website is fundamental to the ongoing success of it. Having to rewrite the entire web page, or website, each time you want to make a small change, is a sure fire way to kill your interest in your own site, and will negatively impact your overall design and usability.

Getting a good idea of how your website is likely to grow, will clarify how best to structure your layout. For example, a horizontal navigation is often more restrictive than a side navigation, unless you use drop down menus; if your navigation is likely to grow, and you hate drop down menus, then your design choice has been 99% made for you!

Understanding how to use Cascading Style Sheets (CSS), avoiding unconventional layouts, and complicated backgrounds, will all help enormously.

5. Be Consistent

Again, don't make your visitors think! About how to use your site, at least. If your navigation is at the top on your homepage, it should be at the top on all other pages too. If your links are coloured red, ensure the the same convention is used on all sections.

By using CSS correctly, you can make most of this happen automatically, leaving you free to concentrate on the content.

holiday picturesNon Relevant Holiday Pictures6. Keep it Relevant

A picture is better than a thousand words, but if the picture you took on holiday is not relevant to your Used Car Sales website, then you should really replace it with something which reflects the content or mood of the page; a photo of a car perhaps!

If you can take something off of your web page without it adversely affecting the message, appearance or legality of your website, you should do it without hesitation.

Avoid the need to add images, Flash animations or adverts, just because you have space. This wastes bandwidth, and obscures the intentions of your website. If you absolutely must fill the space, then exercise your imagination to find something as relevant as possible.

Keeping your content focused will ultimately help your search-engine rankings

cascading style sheetsCSS-Cascading Style Sheets7. Become a CSS Expert

Cascading Style Sheets should be any web designer's best friend. CSS makes it possible to separate the appearance, and layout of your page, from the content. This has huge benefits when it comes to updating and maintaining your site, making your site accessible, and making your site easy for search engines to read.

CSS at a first glance is very straightforward but it is definitely worth investing in one, or more books. Two great books are: CSS the Missing Manual by David McFarland and Bulletproof Web Design by Dan Cederholm.

8. Avoid Complexity

Using standard layouts for your web page will save you development time, and make your site easier to use. Pushing the boundaries nearly always leads to quirky behaviour, cross-browser problems, confused site visitors, and maintenance headaches. Unless you really do like a challenge, then avoid complexity wherever possible.

Many standard layouts are freely available online with much of the boring, repetitive work already done for you.

The principles above all border on common sense, and are well known to most people, yet so many sites continue to deviate away from them, and suffer as a consequence. Following these principles will help you keep away from trouble, although it still doesn't guarantee it!

For a free quotation, or more information, please contact us

Continue reading
0
  938 Hits
938 Hits

Why Your Site Should Be Developed With CSS And Semantic Markup

webdevelopment1Web DevelopmentOne thing that I have learned in over a decade developing web sites is that the 'Net is continually changing, and to keep up you need to change with it. One of the more recent developments in web design is the use of CSS and semantic markup. CSS and semantic web design has several benefits: clarity in code, browser and other web-enabled devices compatibility, separation of content and presentation, smaller burden on bandwidth, and better visibility to search engines.

Back in the day, we designed sites with tables and hacked those tables into doing things that they were never meant to do. The table tag was designed to display tabular data, not as a way to render the layout of a website. Unfortunately, a better alternative did not exist, so we used tables. This made for inefficient, slow loading sites with code that was very hard to read and maintain. defines semantic markup like this:

Continue reading
0
  592 Hits
592 Hits

Why CSS Is Good For Your Web Site

css style sheetsCSS Style SheetsCascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the whole of your site.

CSS has been around for several years and is supported by all the major browsers available today, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera.

Using CSS to control your Web site will give you several benefits:

Continue reading
0
  619 Hits
619 Hits

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits