StormBiz Blog

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

When To Let Go Of Your Website Designing Ideas

let goTime To Let GoAs hard as it may be, but letting go of your website designing ideas and listening to the customer may actually be of benefit in the long run.

I know what you are saying, you’ve been in the web designing business long enough to know what works and wont doesn’t, what would my customer know? Well after approaching web design in the same manner, I’ve unfortunately had no other choice but to give in to my best laid plans and comply with the wishes of my customers.

Construction of good websites usually means that it has to be appealing to the eye, as well as being fully functioning for Search Engine benefits, but ultimately it must display professionalism for the business represented.

Complying with W3C Standards (W3C Markup Validation Service) for both HTML and CSS validation is paramount to good design and programming (but not necessary for good Google PR, I will discuss in later posts), so when designing we like to use base HTML formatting and CSS text font like Tahoma 11pt, to make neat easy to read text and nice page image layouts.

I will list some cases of where letting go has benefits for both parties involved and how in some circumstances actually resulted in little or no web traffic for the website.

architectural businessArtchitectural BusinessCase Study 1. Architectural Firm flash and font matters

Our customer wanted the use of Flash elements to display several architecture images with a nice fade between images and changes to original CSS Font used Tahoma 11pt font and replaced with Century Gothic 11pt, which is used in all their logos and architecture design work.

As most would know embedding Flash files into your website results in W3C Validation undefined source failure, thus rendering the site Invalid Markup. After explaining this, the customer felt the need to have a nice graphical flash style image far outweighed the importance of quality valid HTML Transitional Markup. To them the appearance and perception of their website to their customers was far more advantageous than complying with the W3C.

In addition they wanted the use of the Century Gothic font rather than Tahoma. By design Century Gothic has a much larger font height than Tahoma and when used increased the page height larger than when using Tahoma thus resulting in the site displaying with scroll bars when view under 1024 x 768 resolution, where previously it fitted in the whole page perfectly.

In the end the customer achieved the desired affects they wanted and ultimately it is the customer who ‘always’ knows best.

Case Study 2. Box supplier becomes boxed in

Our customer had started a new business supplying cardboard boxes for moving and packing. They wanted a

simple site with heavy graphical image elements and little or no text on the home page.

cardboard boxesCardboard BoxesExplaining to the customer the role of text based search engines results and that having no ‘readable text’ on the home page would limit their visibility, they choose design over results.

Why you may ask would a company limit their possibilities of being found on search engines? Well the question still burns with us too, but as mentioned earlier the ‘customer always knows best’ and the decision was solely theirs to make.

Their philosophy was simple, their website was purely to be used as a reference guide and not the source of extra business, as their marketing strategies would be enough to garner constant business.

To this day I still wonder why they limited their marketability and in particular their website which is always online and can be searched at all times of the day.

So in summary the best laid plans of mice and men (well in this case web designers) can be a utter waste of good management as what I have stated all along that the ‘customer always knows best’ and ultimately they are the ones paying for your service so sometimes its best to lay down your guns and concede defeat.

Contact us for a free quotation or more information

Continue reading
0
  977 Hits
977 Hits

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:

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
  1056 Hits
1056 Hits

Designing your own website vs. Storm Biz designing your site for you?

what you need to knowWhat You Need to KnowYou may ask yourself, "why should I pay for designing my website, when there are so many different free website designing programs?"

Before I explain what we do for your website, let me ask you 10 important questions you need to know before designing a Search Engine Friendly, and User Friendly website? If you can answer all these questions below, then by all means you are qualified to design your site. If there is even 1 question you are unable to answer, then your site will fail, and it will be better to get a professional designer to develop your website.

  1. What is html, and how do I manipulate it for my web design?
  2. What is Photoshop / Corel?
  3. What is Search Engine Optimization (SEO)?
  4. What is Search Engine Submission (SES)?
  5. Why should I not use microsoft word to design my site?
  6. Why should I not use frontpage to design my site?
  7. What is google analytics, how will it help me?
  8. What is the difference between php, and asp?
  9. What is Meta Tags and Meta Keywords, how will my site do without it?
  10. What is a sitemap, what will it do for my site?

Google Ranking FactorHigh Google RankingsWe consider all of the above when designing a website, we use our experience in high google rankings, and implement this in every site we design... So, considering all of this, we recommend / do the following:

  • All our websites will be designed using php, and css, this will help with speed, and with search engines.
  • All websites are customized to the clients requirements.
  • All our web design packages come with the small SEO Package, ensuring all links are search engine friendly
  • Search Engine Submission is offered at a low monthly rate, which means we submit your website, meta tags and meta keywords to 150+ websites every month, getting the best possible rank for your keywords, resulting in possible clients finding your site..
  • We include a sitemap in every website we design, this helps search engines navigate, and index all your site pages.

Before considering designing your site we advise you to consult a professional, as this is what we do, and we are good at it.

You know your business, we know our business... and we would never try to run your business for you!

Contact us for a free quotation, or more information

Continue reading
0
  1174 Hits
1174 Hits

Why Optimizing Your Site For Speed is Important? Tips on How to do so!

frustrated waiting for site to loadVery Frustrated With WaitingIf there is one thing we have all suffered through, it is waiting for a site to download online. It seems like it is the worst thing in the world, and will never end. We actually either click off of the site, or, after the initial download of the front page completes, we then click off of the site because the subpages take too long to load. We have all been here, and this article is to help make sure your visitors don't go through it as well.

The reason why a website’s speed of download is important, is actually very simple, and we have broken it down into two parts:

-The first part is that people want to get to where they are going quickly. This is pretty straight forward, and now-a-days no one seems to have the time to wait for a site to download(no matter how important it is).

Continue reading
0
  726 Hits
726 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
  754 Hits
754 Hits

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits