Flash-based sites have been a craze since the past few years, and as Macromedia compiles more and more great features into Flash, we can only predict there will be more and more flash sites around the Internet. However, Flash based sites have been disputed to be bloated and unnecessary. Where exactly do we draw the line? Here's a simple breakdown.
The good:
Interactivity
Flash's Action script opens up a vast field of possibilities. Programmers and designers have used Flash to create interactive features ranging from very lively feedback forms to attractive Flash-based games. This whole new level of interactivity will always leave visitors coming back for more.
A standardized site
With Flash, you do not have to worry about cross-browser compatibility. No more woes over how a certain css code displays differently in Internet Explorer, Firefox and Opera. When you position your site elements in Flash, they will always appear as they are as long as the user has Flash Player installed.
Better expression through animation
In Flash, one can make use of its animating features to convey a message in a much more efficient and effective way. Flash is a lightweight option for animation because it is vector based (and hence smaller file sizes) as opposed to real "movie files" that are raster based and hence much larger in size.
The bad and the ugly:
The Flash player
People have to download the Flash player in advance before they can view Flash movies, so by using Flash your visitor range will decrease considerably because not everyone will be willing to download the Flash player just to view your site. You'll also have to put in additional work in redirecting the user to the Flash download page if he or she doesn't have the player installed.
Site optimization
If your content was presented in Flash, most search engines wouldn't be able to index your content. Hence, you will not be able to rank well in search engines and there will be less traffic heading to your site.
Loading time
Users have to wait longer than usual to load Flash content compared to regular text and images, and some visitors might just lose their patience and click the Back button. The longer your Flash takes to load, the more you risk losing visitors.
The best way to go is to use Flash only when you absolutely need the interactivity and motion that comes with it. Otherwise, use a mixture of Flash and HTML or use pure text if your site is purely to present simple textual and graphical information.
Monday, June 11, 2007
Hypertext Markup Language (HTML) for the Layman
HTML is the language that deals with the layout of websites. It tells what goes where and how it works. In the past at the birth of the internet and HTML, HTML also detailed the design or the look and feel of websites. However, this trait has become depreciated with the advent of Cascading Style Sheets (CSS). Furthermore, with the advances of technology and programming your old five page website of pure information about a business is going the way of VHS with more and more companies--and customers as well--demanding highly interactive and informational websites. Most server-script languages support the use of HTML internally and many websites you may visit have the suffix ".asp" or ".php" for its respective server-script. That doesn't mean you'll never see the classic ".html" again any time soon. The demise of HTML is way off and even when it gets fully out-moded it will still remain present in modern server scripting languages in the sense that server script deals with information control but HTML will still be required as part of the information network.
HTML and other web related languages are governed by the World Wide Web Consortium (W3C) which governs all such languages in the same manner the World Trade Organization governs international tariffs. There is a standard of code which all HTML documents must reference and adhere to and furthermore the web browsers themselves must abide by. If it weren't for this level of organization, there would be chaos in internet technology. Further, it sets precedent and grapples with the ever changing web design market with the advent of technologies like CSS.
The W3C requires two parts to your HTML document, the doctype declaration and the primary structure. There are four HTML tags which comprise the primary HTML structure and must be present within your HTML document in addition to the doctype declaration. An HTML tag is any command which consists of a word enclosed in ‹›. The four primary tags are the HTML tag, which is the lettering HTML within two ‹› typed ‹HTML›, the HEAD tag, typed ‹HEAD›, the TITLE tag, and the BODY tag all with appropriate closing tags. All html tags are started as ‹TAG› and end as ‹/TAG›. They are called opening and closing tags respectively. You may recognize these from my main pages down the left side and my various links disguised as these tags. If you look back, that is the basic primary structure of a website.
You could think of all HTML tags as a sandwich. You have your first slice ‹HTML›, some information, then your second slice of bread ‹/HTML›. Furthermore, the overall structure of the website is similar. You have ‹HTML›, ‹HEAD›, ‹TITLE›, the title of your site, ‹/TITLE›, ‹/HEAD›, ‹BODY›, the layout and other info of your website, ‹/BODY›, ‹/HTML›. That may look something like the following in a real HTML document:
‹HTML› ‹HEAD› ‹TITLE›AAF Consulting, Web Design‹/TITLE› ‹/HEAD›
‹BODY› Welcome to My Website! ‹/BODY› ‹/HTML›
The doctype declaration tells the web browser which version of HTML you are using and which level of strictness and/or type. There is 1.0 and 2.0 as well as XHTML. Also, each of those has the Strict type, Transitional type, and the Frameset type. The doctype declaration must be the first thing in your HTML document, even before the opening HTML tag. For a list of these doctype declarations, visit he W3C Website and lookup doctype declarations.
If you forget to include a doctype declaration or are not sure what to do with it when you get one, its okay. Most web browsers default to HTML 2.0 Transitional and your website will display fine anyways. However, keep in mind that you may upset your next web designer because this will cause extra work for the designer and increase your final invoice.
If you don't think you're quite ready to hand code HTML on your own, that's perfectly fine. There's a lot more to it than simply laying out the primary structure. There are many simple to use resources out there at your disposal. The easiest but most expensive is to contact your Web Designer or Web Master. However, you may purchase software to aid in your creation. Some of these programs are well designed and you don't ever look at code, only your design, such as Microsoft FrontPage. Others are meant more for the professional web designer such as Macromedia Dreamweaver. Also, if you are using a webhost such as Yahoo! or GooglePages--Google's GooglePages is still in beta--it has free tools for your web design and provides free webhosting.
HTML and other web related languages are governed by the World Wide Web Consortium (W3C) which governs all such languages in the same manner the World Trade Organization governs international tariffs. There is a standard of code which all HTML documents must reference and adhere to and furthermore the web browsers themselves must abide by. If it weren't for this level of organization, there would be chaos in internet technology. Further, it sets precedent and grapples with the ever changing web design market with the advent of technologies like CSS.
The W3C requires two parts to your HTML document, the doctype declaration and the primary structure. There are four HTML tags which comprise the primary HTML structure and must be present within your HTML document in addition to the doctype declaration. An HTML tag is any command which consists of a word enclosed in ‹›. The four primary tags are the HTML tag, which is the lettering HTML within two ‹› typed ‹HTML›, the HEAD tag, typed ‹HEAD›, the TITLE tag, and the BODY tag all with appropriate closing tags. All html tags are started as ‹TAG› and end as ‹/TAG›. They are called opening and closing tags respectively. You may recognize these from my main pages down the left side and my various links disguised as these tags. If you look back, that is the basic primary structure of a website.
You could think of all HTML tags as a sandwich. You have your first slice ‹HTML›, some information, then your second slice of bread ‹/HTML›. Furthermore, the overall structure of the website is similar. You have ‹HTML›, ‹HEAD›, ‹TITLE›, the title of your site, ‹/TITLE›, ‹/HEAD›, ‹BODY›, the layout and other info of your website, ‹/BODY›, ‹/HTML›. That may look something like the following in a real HTML document:
‹HTML› ‹HEAD› ‹TITLE›AAF Consulting, Web Design‹/TITLE› ‹/HEAD›
‹BODY› Welcome to My Website! ‹/BODY› ‹/HTML›
The doctype declaration tells the web browser which version of HTML you are using and which level of strictness and/or type. There is 1.0 and 2.0 as well as XHTML. Also, each of those has the Strict type, Transitional type, and the Frameset type. The doctype declaration must be the first thing in your HTML document, even before the opening HTML tag. For a list of these doctype declarations, visit he W3C Website and lookup doctype declarations.
If you forget to include a doctype declaration or are not sure what to do with it when you get one, its okay. Most web browsers default to HTML 2.0 Transitional and your website will display fine anyways. However, keep in mind that you may upset your next web designer because this will cause extra work for the designer and increase your final invoice.
If you don't think you're quite ready to hand code HTML on your own, that's perfectly fine. There's a lot more to it than simply laying out the primary structure. There are many simple to use resources out there at your disposal. The easiest but most expensive is to contact your Web Designer or Web Master. However, you may purchase software to aid in your creation. Some of these programs are well designed and you don't ever look at code, only your design, such as Microsoft FrontPage. Others are meant more for the professional web designer such as Macromedia Dreamweaver. Also, if you are using a webhost such as Yahoo! or GooglePages--Google's GooglePages is still in beta--it has free tools for your web design and provides free webhosting.
Cascading Stylesheets (CSS) for the Layman
Cascading Style Sheets (CSS) are another way for web designers to tell the web browser how the website should look. HTML does this already but CSS has greater advantages.
With HTMl you would normally describe a paragraph with the ‹font› tag followed by the specifiers such as color, size, face, et ct. If you wanted other changes to the font, they aren't logically a font tag specifier. They would have their own tag such as ‹b› for bold or ‹i› for italics.
CSS defeats the poor logic behind the original design of the people who created HTML. In CSS you could describe font for a paragraph by using something like the following:
p{ color:black; text-align:center; font-size:large; font-family:arial; font-weight:bold; }
As you can see, we defined the paragraph tag with the "p" before the "{," described what the text should look like then how the font should be manipulated and closed everything with "}." This is more logical being that the look of the writing was described by "text" specifiers--text being defined as the written word and therefore its look--and the typesetting and size manipulated by "font" specifiers--font being defined as a complete set of type of one size and face.
Now let's dissect the above. To start a CSS entry, we must tell the web browser what we are defining. This would normally be an HTML tag. The one above defines the paragraph tag "p" but you could also do the span tag "span" or any table tag such as "td." After telling what we are defining, we must open the script dialog. We do this by putting "{." We may then enter our definitions.
HTML is very limited in definitions. One may only specify bold, size, and color. With CSS we may define not just bold but how bold. We may define not just size in terms of pitch but also, percentages, pixels, width, height, et ct. We may also define the what the text does such as letter spacing or even blinking.
Type all the specifiers you'd like in the form shown above. Name of the specifier and the specification separated by a colon then ended with a semicolon. Each entry should be on a separate line and all closed off with a "}." For a list of available CSS specifiers please visit W3School's CSS Reference Page
Sometimes one could not just define HTML tags but can set up generic descriptions. For example you want all font to be a certain size and color but you want headers to have a different color and to be bold. You would do this by the use of "selectors." You would define one as follows:
.header{ font-size:larger; font-weight:bolder; }
Note specifically that there is a period in front of a word. The word is clearly not a tag. You may use any word you wish. The period tells the browser to look for HTML tags with the word embedded inside the "class" specifier. When it finds the word it uses that design instead of the default.
Besides advanced design capability, there are other practical purposes for CSS. When you write HTML it will take up space. Of course web page will have a file size, right? Well, as people look at your site they download the information and it takes up "bandwidth" and certain webhosts may limit this. Not only that but even if you host your site with your own server then you would worry about bandwidth because it increases employment expenses as well as many other problems. CSS helps because it reduces the many HTML tags defining the same basic design into just defined once. Also, because of that it reduces the many web pages file size saving bandwidth. On top of that, web visitors can download the CSS file once to view all pages. Lastly, the separate CSS file can be set to define all web pages on your site. That means you make one change on a single document and your whole web site will look different. Now that's fantastic!
To recap, with CSS one can describe how many things should look. HTML can only describe one thing at a time. CSS can be embedded anywhere inside a webpage. HTML must be embedded right next to what it describes. CSS can not only describe many things but on many number of pages; HTML cannot. You could create a single document with the extension ".css" which will control all your web pages on your site; HTML cannot. If you need to make changes to your site, it will only take one change with CSS in one place but many on all pages with HTML.
With HTMl you would normally describe a paragraph with the ‹font› tag followed by the specifiers such as color, size, face, et ct. If you wanted other changes to the font, they aren't logically a font tag specifier. They would have their own tag such as ‹b› for bold or ‹i› for italics.
CSS defeats the poor logic behind the original design of the people who created HTML. In CSS you could describe font for a paragraph by using something like the following:
p{ color:black; text-align:center; font-size:large; font-family:arial; font-weight:bold; }
As you can see, we defined the paragraph tag with the "p" before the "{," described what the text should look like then how the font should be manipulated and closed everything with "}." This is more logical being that the look of the writing was described by "text" specifiers--text being defined as the written word and therefore its look--and the typesetting and size manipulated by "font" specifiers--font being defined as a complete set of type of one size and face.
Now let's dissect the above. To start a CSS entry, we must tell the web browser what we are defining. This would normally be an HTML tag. The one above defines the paragraph tag "p" but you could also do the span tag "span" or any table tag such as "td." After telling what we are defining, we must open the script dialog. We do this by putting "{." We may then enter our definitions.
HTML is very limited in definitions. One may only specify bold, size, and color. With CSS we may define not just bold but how bold. We may define not just size in terms of pitch but also, percentages, pixels, width, height, et ct. We may also define the what the text does such as letter spacing or even blinking.
Type all the specifiers you'd like in the form shown above. Name of the specifier and the specification separated by a colon then ended with a semicolon. Each entry should be on a separate line and all closed off with a "}." For a list of available CSS specifiers please visit W3School's CSS Reference Page
Sometimes one could not just define HTML tags but can set up generic descriptions. For example you want all font to be a certain size and color but you want headers to have a different color and to be bold. You would do this by the use of "selectors." You would define one as follows:
.header{ font-size:larger; font-weight:bolder; }
Note specifically that there is a period in front of a word. The word is clearly not a tag. You may use any word you wish. The period tells the browser to look for HTML tags with the word embedded inside the "class" specifier. When it finds the word it uses that design instead of the default.
Besides advanced design capability, there are other practical purposes for CSS. When you write HTML it will take up space. Of course web page will have a file size, right? Well, as people look at your site they download the information and it takes up "bandwidth" and certain webhosts may limit this. Not only that but even if you host your site with your own server then you would worry about bandwidth because it increases employment expenses as well as many other problems. CSS helps because it reduces the many HTML tags defining the same basic design into just defined once. Also, because of that it reduces the many web pages file size saving bandwidth. On top of that, web visitors can download the CSS file once to view all pages. Lastly, the separate CSS file can be set to define all web pages on your site. That means you make one change on a single document and your whole web site will look different. Now that's fantastic!
To recap, with CSS one can describe how many things should look. HTML can only describe one thing at a time. CSS can be embedded anywhere inside a webpage. HTML must be embedded right next to what it describes. CSS can not only describe many things but on many number of pages; HTML cannot. You could create a single document with the extension ".css" which will control all your web pages on your site; HTML cannot. If you need to make changes to your site, it will only take one change with CSS in one place but many on all pages with HTML.
Rich Fonts In Your Web Sites
Font selection is perhaps on of the biggest deciding factors in the success of any given design. Using CSS we have the ability to modify existing fonts significantly. Unfortunately, we're still limited to a small number of browser safe fonts.
The sIFR typography module uses flash actionscripts and javascript to replace existing fonts with rich typography. It's an incredibly powerful tool. The module is free and available under a general public liscense.
How does it work?
sIFR downloads flash .swf files containing a custom font that is then held in the browser cache. This means you can effectively patch your user's browser with a new font that doesn't exist in their computer's font library. Crucially sIFR can handle dynamic content since the .swf is a font library, rather than a simple static flash movie.
Degradation/Compatibility
sIFR degrades gracefully into default CSS fonts for those users who have their Javascript of flash disabled. It's also fully accessible to screenreaders and other assistive technologies. Matt May from the W3C has fully endorsed it as an accessible method to create rich typography on the web.
In terms of compatibility, sIFR works on Firfox, IE5+, Opera 7+, Safari and many other browsers. 90% of machines are said to be compatible. On non-compatible machines the module simply does not take effect.
Limitations
I've found there to be some minor speed issues. It's generally advisable only to use the module on small headlines etc rather than whole paragraphs. Loading speeds are excellent though if used properly, and are invisible to the user.
Overall impression
I love this module. I'll be using it in many of my future websites. This tool can make your websites stand out from the crowd by displaying fresh looking typography. It's important though to remember that small proportion of people who can't run the module, and make sure that the default CSS styles are also up to today's high standards.
I think that sIFR is an excellent stop-gap measure. It's badly needed as designer’s grapple with current font limitations. In the long-term however, browsers will have to find a way to support rich typography ranges.
The sIFR typography module uses flash actionscripts and javascript to replace existing fonts with rich typography. It's an incredibly powerful tool. The module is free and available under a general public liscense.
How does it work?
sIFR downloads flash .swf files containing a custom font that is then held in the browser cache. This means you can effectively patch your user's browser with a new font that doesn't exist in their computer's font library. Crucially sIFR can handle dynamic content since the .swf is a font library, rather than a simple static flash movie.
Degradation/Compatibility
sIFR degrades gracefully into default CSS fonts for those users who have their Javascript of flash disabled. It's also fully accessible to screenreaders and other assistive technologies. Matt May from the W3C has fully endorsed it as an accessible method to create rich typography on the web.
In terms of compatibility, sIFR works on Firfox, IE5+, Opera 7+, Safari and many other browsers. 90% of machines are said to be compatible. On non-compatible machines the module simply does not take effect.
Limitations
I've found there to be some minor speed issues. It's generally advisable only to use the module on small headlines etc rather than whole paragraphs. Loading speeds are excellent though if used properly, and are invisible to the user.
Overall impression
I love this module. I'll be using it in many of my future websites. This tool can make your websites stand out from the crowd by displaying fresh looking typography. It's important though to remember that small proportion of people who can't run the module, and make sure that the default CSS styles are also up to today's high standards.
I think that sIFR is an excellent stop-gap measure. It's badly needed as designer’s grapple with current font limitations. In the long-term however, browsers will have to find a way to support rich typography ranges.
Domain Registration and Web Hosting
The costs associated with these have considerably come down. Gone are the days when one needed to spend hundreds of dollars on internet domain registration and domain hosting. Under certain circumstances, one can have these even free now. In any case, even if one is paying for the same, these are very cheap.
Any website has to have a name. For this, one has to register a domain name. After registering, one needs to host a website. The question arises whether both of them should be with the same company or they should be at two different places.
For many people including me, cost is one of the main considerations, given least differences in quality. Every dollar saved is a dollar earned. If one can get some savings by aligning with two companies, then one should register with two. Of course one has to be prepared for a bit of inconvenience by keeping two accounts at two places.
For example, in my case, my website name is registered with one company and hosted with another. By doing this, I have been able to make some savings. Of course, different people have different reasons when dealing with companies. Reliability and up time availability are two main factors to be considered.
As time goes by, domain names and web hosting are going to be even further cheaper. One marked tendency amongst companies is to allow unlimited hosting packages with one account. For example, with one hosting account, one is allowed to host an unlimited number of websites.
One more trend witnessed is that of lifelong hosting. Some companies have come up with this idea with a one time fee and with all the features.
With a plethora of domain name and hosting companies coming up, competition is intensifying every day. The result has been a downward pressure on domain registration and web hosting fees.
However, while selecting, one should pay special attention to the different features that each company offers. Where the intention is hosting of a simple website, one need not to bother much about too many features. Price appears to be the leading factor in this scenario.
If the intention is to host a website with all the whistles, then one has to give attention to the various features that a company provides as a package. Price may not be the only consideration in that case.
If one wants to build a number of websites in future, one may go for a package which allows unlimited hosting of websites in one price. This is suitable for those who want to make most of their internet earnings from Adsense. There are people who have dozens and even hundreds of Adsense websites hosted. Anyone can do that.
Another facility closely associated with the above is the availability of a website builder. One should have one of one’s own. One should not use website builder software of the hosting company, as one will get stuck with that particular company. Fortunately we have a free website builder available.
Any website has to have a name. For this, one has to register a domain name. After registering, one needs to host a website. The question arises whether both of them should be with the same company or they should be at two different places.
For many people including me, cost is one of the main considerations, given least differences in quality. Every dollar saved is a dollar earned. If one can get some savings by aligning with two companies, then one should register with two. Of course one has to be prepared for a bit of inconvenience by keeping two accounts at two places.
For example, in my case, my website name is registered with one company and hosted with another. By doing this, I have been able to make some savings. Of course, different people have different reasons when dealing with companies. Reliability and up time availability are two main factors to be considered.
As time goes by, domain names and web hosting are going to be even further cheaper. One marked tendency amongst companies is to allow unlimited hosting packages with one account. For example, with one hosting account, one is allowed to host an unlimited number of websites.
One more trend witnessed is that of lifelong hosting. Some companies have come up with this idea with a one time fee and with all the features.
With a plethora of domain name and hosting companies coming up, competition is intensifying every day. The result has been a downward pressure on domain registration and web hosting fees.
However, while selecting, one should pay special attention to the different features that each company offers. Where the intention is hosting of a simple website, one need not to bother much about too many features. Price appears to be the leading factor in this scenario.
If the intention is to host a website with all the whistles, then one has to give attention to the various features that a company provides as a package. Price may not be the only consideration in that case.
If one wants to build a number of websites in future, one may go for a package which allows unlimited hosting of websites in one price. This is suitable for those who want to make most of their internet earnings from Adsense. There are people who have dozens and even hundreds of Adsense websites hosted. Anyone can do that.
Another facility closely associated with the above is the availability of a website builder. One should have one of one’s own. One should not use website builder software of the hosting company, as one will get stuck with that particular company. Fortunately we have a free website builder available.
Subscribe to:
Comments (Atom)