by: George Peirson
Just like spring cleaning a house, the html code of your web pages should get periodic cleaning as well. Over time, as changes and updates are made to a web page, the code can become littered with unnecessary clutter, slowing down page load times and hurting the efficiency of your web page. Cluttered html can also seriously impact your search engine ranking.
This is especially true if you are using a WYSIWYG (What You See Is What You Get) web design package such as FrontPage or Dreamweaver. These programs will speed up your web site creation, but they are not that efficient at writing clean html code.
We will be focusing this discussion on the actual html coding, ignoring other programming languages that may be used in a page such as JavaScript. In the code examples I will be using ( and ) characters instead of correct html so that the code examples will display properly in this newsletter.
Up until recently when coding a page in HTML we would be using tags such as the (font) tag and (p) paragraph tags. Between these tags would be our page content, text, images and links. Each time a formatting change was made on the page new tags were needed with complete formatting for the new section. More recently we have gained the ability to use Cascading Style Sheets, allowing us to write the formatting once and then refer to that formatting several times within a web page.
In order to speed up page load times we need to have fewer characters on the page when viewed in an html editor. Since we really do not want to remove any of our visible content we need to look to the html code. By cleaning up this code we can remove characters, thereby creating a smaller web page that will load more quickly.
Over time HTML has changed and we now have many different ways to do the same thing. An example would be the code used to show a bold type face. In HTML we have two main choices, the (strong) tag and the (b) tag. As you can see the (strong) tag uses 5 more characters than the (b) tag, and if we consider the closing tags as well we see that using the (strong)(/strong) tag pair uses 10 more characters than the cleaner (b)(/b) tag pair.
This is our First Principle of clean HTML code: Use the simplest coding method available.
HTML has the ability of nesting code within other code. For instance we could have a line with three words where the middle word was in bold. This could be accomplished by changing the formatting completely each time the visible formatting changes. Consider this code:
(font face=”times”)This(/font)
(font face=”times”)(strong)BOLD(/strong)(/font)
(font face=”times”)Word(/font)
This takes up 90 characters.
This is very poorly written html and is what you occasionally will get when using a WYSIWYG editor. Since the (font) tags are repeating the same information we can simply nest the (strong) tags inside the (font) tags, and better yet use the (b) tag instead of the (strong) tag. This would give us this code (font face=”times)This (b)BOLD(/b) Word(/font), taking up only 46 characters.
This is our Second Principle of clean HTML code: Use nested tags when possible. Be aware that WYSIWYG editors will frequently update formatting by adding layer after layer of nested code. So while you are cleaning up the code look for redundant nested code placed there by your WYSIWYG editing program.
A big problem with using HTML tags is that we need to repeat the tag coding whenever we change the formatting. The advent of CSS allows us a great advantage in clean coding by allowing us to layout the formatting once in a document, then simply refer to it over and over again.
If we had six paragraphs in a page that switch between two different types of formatting, such as headings in Blue, Bold, Ariel, size 4 and paragraph text in Black, Times, size 2, using tags we would need to list that complete formatting each time we make a change.
(font face=”Ariel” color=”blue” size=”4”)(b)Our heading(/b)(/font)
(font face=”Times color=”black” size=”2”)Our paragraph(/font)
(font face=”Ariel” color=”blue” size=”4”)(b)Our next heading(/b)(/font)
(font face=”Times color=”black” size=”2”)Our next paragraph(/font)
We would then repeat this for each heading and paragraph, lots of html code.
With CSS we could create CSS Styles for each formatting type, list the Styles once in the Header of the page, and then simply refer to the Style each time we make a change.
(head)
(style type="text/css")
(!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
--)
(/style)
(/head)
(body)
(p class="style1")Heading(/p)
(p class="style2")Paragraph Text(/p)
(/body)
Notice that the Styles are created in the Head section of the page and then simply referenced in the Body section. As we add more formatting we would simply continue to refer to the previously created Styles.
This is our Third Principle of Clean HTML Code: Use CSS styles when ever possible. CSS has several other benefits, such as being able to place the CSS styles in an external file, thereby reducing the page size even more, and the ability to quickly update formatting site-wide by simply updating the external CSS Style file.
So with some simple cleaning of your HTML code you can easily reduce the file size and make a fast loading, lean and mean web page.
About the author:
George Peirson is a successful Entrepreneur and Internet Trainer. He is the author of over 30 multimedia based tutorial training titles covering such topics as Photoshop, Flash and Dreamweaver. To see his training sets visit www.howtogurus.com
Article copyright 2005 George Peirson
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Tuesday, April 17, 2007
XHTML - Kicking And Screaming Into The Future
by: Eric Lester
XHTML, the standard, was first released back in 2000. Roughly five years later we begin to see major websites revised to use this standard. Even the favorite whipping boy of standards-compliance punditry, Microsoft, presents their primary homepages, msn.com and microsoft.com in XHTML. Standards compliant XHTML sites are still the minority. The reason is simple. When the W3C released the new standard, the rest of the web running on HTML did not cease to function. Nor will the rest of the web, written in various flavors of HTML, cease to function any time soon. Without any pressing need to conform to the new standard, designers continue to use old, familiar methods. These methods will perform in any modern browser, so why bother switching?
These sentiments are similar to ones I experienced. A kind of "if it's not broke, don't fix it" mentality sets in. Whether HTML was "broken" or not is a different argument. To the casual Internet user, their standards are fairly direct. If a site displays without noticeable error and functions to their satisfaction, these standards are met. Whatever additional steps the browser took to make such display possible is irrelevant to most users. This kind of mentality is difficult to overcome in designers accustomed to their old methods.
Technical obstacles to adopting XHTML may be quite steep as well, especially as regards large, existing websites with complex scripting. Yet the time may eventually come where yesterday's "tried and true" HTML is little more than an ancient language, unable to be interpreted by modern electronic devices. Whether one agrees with the direction the W3C takes in the development of HTML is irrelevant, you are just along for the ride. With some perseverance, getting the hang of XHTML is possible. In form, it is not as different from HTML as Japanese is from English. Knowing HTML grants a basic knowledge of the language, it simply becomes a matter of learning a particular dialect. Even an original nay-sayer such as myself managed to do it.
Benefits of XHTML
There are 2 primary benefits to using XHTML. First is the strict nature of valid XHTML documents. "Valid" documents contain no errors. Documents with no errors can be parsed more easily by a browser. Though the time saved is, admittedly, negligible from the human user's point of view, there is a greater efficiency to the browser's performance. Most modern browsers will function well in what's usually referred to as "quirks" mode, where, in the absence of any on-page information about the kind of HTML they are reading, present a "best guess" rendering of a page. The quirks mode will also forgive many errors in the HTML. Modern browsers installed on your home computer have the luxury of size and power to deal with these errors. When browser technology makes the leap to other appliances it may not have the size and power to be so forgiving. This is where the strict, valid documents demanded by the XHTML standard become important.
The second benefit is in the code itself, which is cleaner and more compact than common, "table" based layout in HTML. Though XHTML retains table functionality, the standard makes clear tables are not to be used for page layout or anything other than displaying data in a tabular format. This is generally the primary obstacle most designers have with moving to XHTML. The manner in which many designers have come to rely on to layout and organize their pages is now taboo. Simple visual inspection of XHTML code reveals how light and efficient it is in comparison to a table based HTML layout. XTHML makes use of Cascading Style Sheets (CSS), which, when called externally, remove virtually all styling information from the XHTML document itself. This creates a document focused solely on content.
XHTML makes use of "div" tags to define content areas. How these "divisions" are displayed is controlled by CSS. This is known as CSS-P, or CSS Positioning. Trading in "table" tags for "divs" can be tough. Learning a new way of accomplishing an already familiar task is generally difficult. Like learning to use a different design program or image editor, frustration can be constant. Looking at "divs" as a kind of table cell might be helpful, though they are not entirely equivalent. As required by the XHTML standard, always make sure there is a DOCTYPE definition at the top of the document. This is not only required by the standard, but it will force Internet Explorer 6, currently the most common browser, to enter its "standards compliance" mode. IE6 and Firefox, both operating in standards compliance mode will display XHTML in much the same way. Not identical, but far better than IE6 operating in quirks mode. Learning how to iron out the final differences between displays is the final obstacle and can require a bit of tweaking in the CSS.
Clean code has multiple benefits. It creates a smaller page size which, over time, can save costs associated with transfer usage. Though the size difference may appear small, for someone running a highly trafficked site, even saving a few kilobytes of size can make a big difference. Further, some believe search engines may look more kindly on standards complaint pages. This is only a theory, though. In a general sense, any page modification that makes the content easier to reach and higher in the code is considered wise. Search engines, so it is believed, prefer to reach content quickly, and give greater weight to the first content they encounter. Using XHTML and "div" layout allows designers to accomplish this task more easily.
Conclusions
XHTML is the current standard set by the W3C. The W3C continues development of XHTML, and XHTML 2.0 will replace the current standard in the future. Learning and using XHTML today will help designers prepare for tomorrow. Valid XTHML produces no errors that might slow down a browser, and the code produced is clean and efficient. This saves in file size and helps designers better accomplish their search engine optimization goals. Learning XHTML is primarily about learning a new way to lay out pages. Though frustrating at first, the long term benefits far outweigh any initial inconvenience.
About the author:
Eric Lester worked in the IT industry for 5 years, acquiring knowledge of hosting, website design, before serving for 4 years as the webmaster for Apollo Hosting, http://www.apollohosting.comApollo Hosting provides website hosting, ecommerce hosting, vps hosting, and web design services to a wide range of customers.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
XHTML, the standard, was first released back in 2000. Roughly five years later we begin to see major websites revised to use this standard. Even the favorite whipping boy of standards-compliance punditry, Microsoft, presents their primary homepages, msn.com and microsoft.com in XHTML. Standards compliant XHTML sites are still the minority. The reason is simple. When the W3C released the new standard, the rest of the web running on HTML did not cease to function. Nor will the rest of the web, written in various flavors of HTML, cease to function any time soon. Without any pressing need to conform to the new standard, designers continue to use old, familiar methods. These methods will perform in any modern browser, so why bother switching?
These sentiments are similar to ones I experienced. A kind of "if it's not broke, don't fix it" mentality sets in. Whether HTML was "broken" or not is a different argument. To the casual Internet user, their standards are fairly direct. If a site displays without noticeable error and functions to their satisfaction, these standards are met. Whatever additional steps the browser took to make such display possible is irrelevant to most users. This kind of mentality is difficult to overcome in designers accustomed to their old methods.
Technical obstacles to adopting XHTML may be quite steep as well, especially as regards large, existing websites with complex scripting. Yet the time may eventually come where yesterday's "tried and true" HTML is little more than an ancient language, unable to be interpreted by modern electronic devices. Whether one agrees with the direction the W3C takes in the development of HTML is irrelevant, you are just along for the ride. With some perseverance, getting the hang of XHTML is possible. In form, it is not as different from HTML as Japanese is from English. Knowing HTML grants a basic knowledge of the language, it simply becomes a matter of learning a particular dialect. Even an original nay-sayer such as myself managed to do it.
Benefits of XHTML
There are 2 primary benefits to using XHTML. First is the strict nature of valid XHTML documents. "Valid" documents contain no errors. Documents with no errors can be parsed more easily by a browser. Though the time saved is, admittedly, negligible from the human user's point of view, there is a greater efficiency to the browser's performance. Most modern browsers will function well in what's usually referred to as "quirks" mode, where, in the absence of any on-page information about the kind of HTML they are reading, present a "best guess" rendering of a page. The quirks mode will also forgive many errors in the HTML. Modern browsers installed on your home computer have the luxury of size and power to deal with these errors. When browser technology makes the leap to other appliances it may not have the size and power to be so forgiving. This is where the strict, valid documents demanded by the XHTML standard become important.
The second benefit is in the code itself, which is cleaner and more compact than common, "table" based layout in HTML. Though XHTML retains table functionality, the standard makes clear tables are not to be used for page layout or anything other than displaying data in a tabular format. This is generally the primary obstacle most designers have with moving to XHTML. The manner in which many designers have come to rely on to layout and organize their pages is now taboo. Simple visual inspection of XHTML code reveals how light and efficient it is in comparison to a table based HTML layout. XTHML makes use of Cascading Style Sheets (CSS), which, when called externally, remove virtually all styling information from the XHTML document itself. This creates a document focused solely on content.
XHTML makes use of "div" tags to define content areas. How these "divisions" are displayed is controlled by CSS. This is known as CSS-P, or CSS Positioning. Trading in "table" tags for "divs" can be tough. Learning a new way of accomplishing an already familiar task is generally difficult. Like learning to use a different design program or image editor, frustration can be constant. Looking at "divs" as a kind of table cell might be helpful, though they are not entirely equivalent. As required by the XHTML standard, always make sure there is a DOCTYPE definition at the top of the document. This is not only required by the standard, but it will force Internet Explorer 6, currently the most common browser, to enter its "standards compliance" mode. IE6 and Firefox, both operating in standards compliance mode will display XHTML in much the same way. Not identical, but far better than IE6 operating in quirks mode. Learning how to iron out the final differences between displays is the final obstacle and can require a bit of tweaking in the CSS.
Clean code has multiple benefits. It creates a smaller page size which, over time, can save costs associated with transfer usage. Though the size difference may appear small, for someone running a highly trafficked site, even saving a few kilobytes of size can make a big difference. Further, some believe search engines may look more kindly on standards complaint pages. This is only a theory, though. In a general sense, any page modification that makes the content easier to reach and higher in the code is considered wise. Search engines, so it is believed, prefer to reach content quickly, and give greater weight to the first content they encounter. Using XHTML and "div" layout allows designers to accomplish this task more easily.
Conclusions
XHTML is the current standard set by the W3C. The W3C continues development of XHTML, and XHTML 2.0 will replace the current standard in the future. Learning and using XHTML today will help designers prepare for tomorrow. Valid XTHML produces no errors that might slow down a browser, and the code produced is clean and efficient. This saves in file size and helps designers better accomplish their search engine optimization goals. Learning XHTML is primarily about learning a new way to lay out pages. Though frustrating at first, the long term benefits far outweigh any initial inconvenience.
About the author:
Eric Lester worked in the IT industry for 5 years, acquiring knowledge of hosting, website design, before serving for 4 years as the webmaster for Apollo Hosting, http://www.apollohosting.comApollo Hosting provides website hosting, ecommerce hosting, vps hosting, and web design services to a wide range of customers.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Who should become a web host reseller?
by: S. Rosendahl
1. Individuals or businesses with more than one website
If you have more than one website and the total disk space you need is 500 MB or more, you can benefit from having a reseller account. The cost for web hosting is lower than if you have individual accounts for each site. Also, you can adjust the disk space and bandwidth allocations for each site.
2. Related service providers
A reseller account is also useful for people who provide related services. If you’re a web designer, for example, why stop at designing sites? Provide your clients with web hosting under your company name, and you continue to earn revenue from your web design clients.
Let’s say that you pay $40 a month for a 3-GB reseller account. If you offer 30 100-MB packages at $7 a month, you could earn up to $170 a month (after subtracting your cost) from that reseller account. Add on additional services such as search engine optimization and website maintenance, and your revenue increases again.
About the author:
About the author: Chris K. is a Technical Executive Writer for Website Source, Inc. http://www.websitesource.com. His established writing skills coupled with experience in the web hosting industry have provided internet professionals with marketing, product and service ideas for many years.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
1. Individuals or businesses with more than one website
If you have more than one website and the total disk space you need is 500 MB or more, you can benefit from having a reseller account. The cost for web hosting is lower than if you have individual accounts for each site. Also, you can adjust the disk space and bandwidth allocations for each site.
2. Related service providers
A reseller account is also useful for people who provide related services. If you’re a web designer, for example, why stop at designing sites? Provide your clients with web hosting under your company name, and you continue to earn revenue from your web design clients.
Let’s say that you pay $40 a month for a 3-GB reseller account. If you offer 30 100-MB packages at $7 a month, you could earn up to $170 a month (after subtracting your cost) from that reseller account. Add on additional services such as search engine optimization and website maintenance, and your revenue increases again.
About the author:
About the author: Chris K. is a Technical Executive Writer for Website Source, Inc. http://www.websitesource.com. His established writing skills coupled with experience in the web hosting industry have provided internet professionals with marketing, product and service ideas for many years.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
How To Use A WYSIWYG HTML Editor To Make Stunning Ebay Auction Listings.
by: Thomas Haselhorst
What kind of browser are you using for online surfing? Explorer, Netscape, Firefox, Opera?? Sure, all are good programs but I want to talk about an excellent program called Netscape. If you use Netscape, do you know that you also get an amazing WYSIWYG (what you see is what you get) web design program called Netscape Composer for free? Basically you don’t need expensive HTML editors anymore. The list of commercially available HTML editors software is endless – and the price tags are enormous. Most people don’t want to spend a lot of money to get started with their eBay business. Fair enough, since the goal is to make money and not to spend money. So it makes perfect sense to use a program to design auction listings which is available for free. And such a program is Netscape Composer.
It has the same professional features like FrontPage or any other similar program. To design stunning and professional looking eBay auction sites with Netscape Composer you need to download Netscape first. If you start up the program, select File->New Composer Page and basically you can start immediately to design your auction listings. You can make you letters in any colour, bold, italics, use background colours (or even images) etc. The options are endless. You can save this file on your local hard drive as html file. I used to have one file for every listing I generate. The best thing is that once you have got a nice and professional looking eBay auction listing, you can use it for ever. Just open your last listing in Netscape Composer and edit according to your new item. Amazingly, this takes only a couple of minutes.
But how do you transfer your listing saved as a html file on your local hard drive to eBay? The answer is simple. Once you have logged in into your eBay account and selected your category and starting price you have to type in your “item description”. Did you see that eBay allows HTML format? Have a look when you launch your next listing. That’s the time where you go back to your new listing you just have created with Netscape Composer. Down the bottom of your Netscape Composer page you’ll see a button called: SOURCE - the source code of your listing. Click on that and highlight and copy the entire text. Select then the eBay site and paste this text into the “Item description box”. Make sure that all links are working and that all photos are uploaded to the internet.
When you have finalised your listing you will be surprised. A stunning and professional looking “DIY-listing”. You can always use “ready-to-go” auction templates and edit these according to your item. You’ll see that with an professional auction design you can easily attract more buyers and get higher bids. It’s worth the effort. Keep in mind that professional web design software is highly expensive and does the same job. Alternatively, you can choose from a huge variety of third party auction services doing the job for you. But hey, there are incredibly expensive too. Don’t you think that the eBay fees are high enough and you can easily do it yourself without spending any additional dollars. It’s really simple!
About the author:
Thomas Haselhorst is webmaster of http://www.auction-design-for-free
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
What kind of browser are you using for online surfing? Explorer, Netscape, Firefox, Opera?? Sure, all are good programs but I want to talk about an excellent program called Netscape. If you use Netscape, do you know that you also get an amazing WYSIWYG (what you see is what you get) web design program called Netscape Composer for free? Basically you don’t need expensive HTML editors anymore. The list of commercially available HTML editors software is endless – and the price tags are enormous. Most people don’t want to spend a lot of money to get started with their eBay business. Fair enough, since the goal is to make money and not to spend money. So it makes perfect sense to use a program to design auction listings which is available for free. And such a program is Netscape Composer.
It has the same professional features like FrontPage or any other similar program. To design stunning and professional looking eBay auction sites with Netscape Composer you need to download Netscape first. If you start up the program, select File->New Composer Page and basically you can start immediately to design your auction listings. You can make you letters in any colour, bold, italics, use background colours (or even images) etc. The options are endless. You can save this file on your local hard drive as html file. I used to have one file for every listing I generate. The best thing is that once you have got a nice and professional looking eBay auction listing, you can use it for ever. Just open your last listing in Netscape Composer and edit according to your new item. Amazingly, this takes only a couple of minutes.
But how do you transfer your listing saved as a html file on your local hard drive to eBay? The answer is simple. Once you have logged in into your eBay account and selected your category and starting price you have to type in your “item description”. Did you see that eBay allows HTML format? Have a look when you launch your next listing. That’s the time where you go back to your new listing you just have created with Netscape Composer. Down the bottom of your Netscape Composer page you’ll see a button called: SOURCE - the source code of your listing. Click on that and highlight and copy the entire text. Select then the eBay site and paste this text into the “Item description box”. Make sure that all links are working and that all photos are uploaded to the internet.
When you have finalised your listing you will be surprised. A stunning and professional looking “DIY-listing”. You can always use “ready-to-go” auction templates and edit these according to your item. You’ll see that with an professional auction design you can easily attract more buyers and get higher bids. It’s worth the effort. Keep in mind that professional web design software is highly expensive and does the same job. Alternatively, you can choose from a huge variety of third party auction services doing the job for you. But hey, there are incredibly expensive too. Don’t you think that the eBay fees are high enough and you can easily do it yourself without spending any additional dollars. It’s really simple!
About the author:
Thomas Haselhorst is webmaster of http://www.auction-design-for-free
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Streamline Your Website Pages
by: Eric Lester
Squeezing the most efficient performance from your web pages is important. The benefits are universal, whether the site is personal or large and professional. Reducing page weight can speed up the browsing experience, especially if your visitors are using dial-up internet access. Though broadband access is the future, the present still contains a great deal of dial-up users. Many sites, ecommerce sites especially, cannot afford to ignore this large section of the market. Sites with a large amount of unique traffic may also save on their total monthly traffic by slimming down their web pages. This article will cover the basics of on-page optimization in both text/code and graphics.
Graphics
Graphics are the usual suspect on heavy pages. Either as a result of a highly graphic design, or a few poorly optimized images, graphics can significantly extend the load-time of a web page. The first step in graphics optimization is very basic. Decide if the graphics are absolutely necessary and simply eliminate or move the ones that aren't. Removing large graphics from the homepage to a separate gallery will likely increase the number of visitors who "hang around" to let the homepage load. Separating larger photos or art to a gallery also provides the opportunity to provide fair warning to users clicking on the gallery that it may take longer to load. In the case of graphical buttons, consider the use of text based, CSS-styled buttons instead. Sites that use a highly graphic design, a common theme in website "templates", need to optimize their graphics as best as possible.
Graphics optimization first involves selecting the appropriate file type for your image. Though this topic alone is fodder for far more in depth analysis, I will touch on it briefly. Images come in 2 basic varieties, those that are photographic in nature, and those that are graphic in nature. Photographs have a large array of colors all jumbled together in what's referred to as continuous tone. Graphics, such as business logos, are generally smooth, crisp and have large areas of the same color. Photographs are best compressed into "JPEGs". The "Joint Photographic Expert Group" format can successfully compress large photos down to very manageable sizes. It is usually applied on a sliding "quality" scale between 1-100, 1 being the most compressed and lowest quality, 100 the least and highest quality. JPEG is a "lossy" compression algorithm, meaning it "destroys" image information when applied, so always keep a copy of the original file. Graphics and logos generally work best in the "GIF", or more recently, the "PNG" format. These formats are more efficient than JPEGs at reducing the size of images with large areas of similar color, such as logos or graphical text.
A few general notes on other media are appropriate. Other types of media such as Flash or sound files also slow down a page. The first rule is always the same, consider whether they are absolutely necessary. If you are choosing to build the site entirely in Flash, then make sure the individual sections and elements are as well compressed as possible. In the case of music, I will admit to personal bias here and paraphrase a brilliant old saying, "Websites should be seen and not heard." Simply, music playing in the background will not "enhance" any browsing experience.
Text and Code
The most weight to be trimmed on a page will come from graphical and media elements, but it is possible to shed a few extra bytes by looking at the text and code of a web page. In terms of actual text content, there may not be much to do here. A page's content is key not only to the user's understanding but also search engine ranking. Removing or better organizing content is only necessary in extreme situations, where more than page weight is an issue. An example might be a long, text heavy web page requiring a lengthy vertical scrolling to finish. Such a page is common on "infomercial" sites, and violates basic design tenants beyond those related to page weight.
Code is a different story. A website's code can be made more efficient in a variety of fashions. First, via the use of CSS, all style elements of a web page can now be called via an external file. This same file can be called on all a site's pages, providing for a uniform look and feel. Not only is this more efficient; it is also the official recommendation from the W3C. The same may be said of XHTML and the abandonment of "table" based layout. Tables, though effective for layout, produce more code than equivalent XHTML layouts using "div" tags. Where a minimum of 3 tags are required to create a "box" with content in a table, only 1 is needed using divisions. Using XHTML and CSS in combination can significantly reduce the amount of "on page" code required by a web page. A final, relatively insignificant trick is the removal of all "white space" from your code. Browsers don't require it; it is primarily so authors can readily read and interpret the code. The savings are minimal at best, but for sites that receive an extreme amount of traffic, even a few saved bytes will add up over time.
Conclusions
Target images and media files first when seeking to reduce the weight of a page. They are the largest components of overall page weight and simply removing them can significantly reduce total weight. The images that remain should be optimally compressed into a format appropriate for their type, photos or graphics. Avoid huge blocks of text that cause unnecessary vertical scrolling. Organize the site more efficiently to spread the information across multiple pages. Adopt XHTML and CSS to reduce the size of the on-page code, and call the CSS externally. These tips should help reduce the size of your pages and speed their delivery to your viewers.
About the author:
Mr. Lester worked in the IT industry for 5 years, acquiring knowledge of hosting, website design, before serving for 4 years as the webmaster for Apollo Hosting, http://www.apollohosting.comApollo Hosting provides website hosting, ecommerce hosting, vps hosting, and web design services to a wide range of customers.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Squeezing the most efficient performance from your web pages is important. The benefits are universal, whether the site is personal or large and professional. Reducing page weight can speed up the browsing experience, especially if your visitors are using dial-up internet access. Though broadband access is the future, the present still contains a great deal of dial-up users. Many sites, ecommerce sites especially, cannot afford to ignore this large section of the market. Sites with a large amount of unique traffic may also save on their total monthly traffic by slimming down their web pages. This article will cover the basics of on-page optimization in both text/code and graphics.
Graphics
Graphics are the usual suspect on heavy pages. Either as a result of a highly graphic design, or a few poorly optimized images, graphics can significantly extend the load-time of a web page. The first step in graphics optimization is very basic. Decide if the graphics are absolutely necessary and simply eliminate or move the ones that aren't. Removing large graphics from the homepage to a separate gallery will likely increase the number of visitors who "hang around" to let the homepage load. Separating larger photos or art to a gallery also provides the opportunity to provide fair warning to users clicking on the gallery that it may take longer to load. In the case of graphical buttons, consider the use of text based, CSS-styled buttons instead. Sites that use a highly graphic design, a common theme in website "templates", need to optimize their graphics as best as possible.
Graphics optimization first involves selecting the appropriate file type for your image. Though this topic alone is fodder for far more in depth analysis, I will touch on it briefly. Images come in 2 basic varieties, those that are photographic in nature, and those that are graphic in nature. Photographs have a large array of colors all jumbled together in what's referred to as continuous tone. Graphics, such as business logos, are generally smooth, crisp and have large areas of the same color. Photographs are best compressed into "JPEGs". The "Joint Photographic Expert Group" format can successfully compress large photos down to very manageable sizes. It is usually applied on a sliding "quality" scale between 1-100, 1 being the most compressed and lowest quality, 100 the least and highest quality. JPEG is a "lossy" compression algorithm, meaning it "destroys" image information when applied, so always keep a copy of the original file. Graphics and logos generally work best in the "GIF", or more recently, the "PNG" format. These formats are more efficient than JPEGs at reducing the size of images with large areas of similar color, such as logos or graphical text.
A few general notes on other media are appropriate. Other types of media such as Flash or sound files also slow down a page. The first rule is always the same, consider whether they are absolutely necessary. If you are choosing to build the site entirely in Flash, then make sure the individual sections and elements are as well compressed as possible. In the case of music, I will admit to personal bias here and paraphrase a brilliant old saying, "Websites should be seen and not heard." Simply, music playing in the background will not "enhance" any browsing experience.
Text and Code
The most weight to be trimmed on a page will come from graphical and media elements, but it is possible to shed a few extra bytes by looking at the text and code of a web page. In terms of actual text content, there may not be much to do here. A page's content is key not only to the user's understanding but also search engine ranking. Removing or better organizing content is only necessary in extreme situations, where more than page weight is an issue. An example might be a long, text heavy web page requiring a lengthy vertical scrolling to finish. Such a page is common on "infomercial" sites, and violates basic design tenants beyond those related to page weight.
Code is a different story. A website's code can be made more efficient in a variety of fashions. First, via the use of CSS, all style elements of a web page can now be called via an external file. This same file can be called on all a site's pages, providing for a uniform look and feel. Not only is this more efficient; it is also the official recommendation from the W3C. The same may be said of XHTML and the abandonment of "table" based layout. Tables, though effective for layout, produce more code than equivalent XHTML layouts using "div" tags. Where a minimum of 3 tags are required to create a "box" with content in a table, only 1 is needed using divisions. Using XHTML and CSS in combination can significantly reduce the amount of "on page" code required by a web page. A final, relatively insignificant trick is the removal of all "white space" from your code. Browsers don't require it; it is primarily so authors can readily read and interpret the code. The savings are minimal at best, but for sites that receive an extreme amount of traffic, even a few saved bytes will add up over time.
Conclusions
Target images and media files first when seeking to reduce the weight of a page. They are the largest components of overall page weight and simply removing them can significantly reduce total weight. The images that remain should be optimally compressed into a format appropriate for their type, photos or graphics. Avoid huge blocks of text that cause unnecessary vertical scrolling. Organize the site more efficiently to spread the information across multiple pages. Adopt XHTML and CSS to reduce the size of the on-page code, and call the CSS externally. These tips should help reduce the size of your pages and speed their delivery to your viewers.
About the author:
Mr. Lester worked in the IT industry for 5 years, acquiring knowledge of hosting, website design, before serving for 4 years as the webmaster for Apollo Hosting, http://www.apollohosting.comApollo Hosting provides website hosting, ecommerce hosting, vps hosting, and web design services to a wide range of customers.
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Review: Swish
by: Lala C. Ballatan
Are you in a busy office and need to get web design jobs with complex text effects done immediately? Want to speed up your productivity but avoid working until Saturday afternoons breaking up text and hand tweening? Then, SWiSH, the new standalone tool that creates great font effects and more by David Mitchie, presented during the Flash Forward 2000 conference, is for you!.
So what’s new with SWiSH? This tool enables you to create buttons and banners in the program itself. You can even create a .SWF for importing into Flash for fast font effects. The “more” emphasis earlier is what’s coming up in the future of this product. Mitchie is hoping to release an update of its first version in May that will allow the use of images. These plans for added functionality will give users more creativity in designing banners and navigation systems.
There are also future plans being expressed by Mitchie to support many of the features in Flash today – this includes scripting, movie clips, audio, vector images and rollover buttons. Right now, with the first version, you can use its maximum number of text effects to the hilt. It will also speed up work productivity. With SWiSH, you can say good bye to all afternoon of breaking text up, making key frames and hand tweening – plenty of hard work but is not anywhere near our idea of creativity.
Use it by controlling all the various attributes of each letter and click preview. After installing this software, in less than five minutes, you can produce real content for your sites. There may be arguments about how all the effects just look alike but remember that there are “industry standard” and “professional level” considerations on these things, just like in television and print. Using SWiSH allows you to produce your sites with that level of standard and expertise.
Currently, SWiSH doesn’t work in Mac but they are looking into creating a version suitable with the Mac. Right now, it works on Windows 95+/NT/2000 only. Still, you can create the files on a PC and use the .SWFs produced on the Mac, which means that you could create standard clips for your files and use them in your libraries. Other system requirements include Pentium 100 or better, 32Mb of RAM, 256 color display or better. It does not require Flash to be installed, too.
Acquiring and using SWiSH is easy enough. You just go to the site and download its trial version. Until you get a key, it will scramble text when you export to SWF. Currently, SWiSH has a US $30 price tag, with free minor updates. Major updates would be around US $10 – a big difference in the price of Flash at US $275. Need we say more? Try SWiSH and see for yourself! -30-
About the author:
Lala C. Ballatan is a 26 year-old Communication Arts graduate, with a major in Journalism. Right after graduating last 1999, she worked for one year as a clerk then became a Research, Publication and Documentation Program Director at a non-government organization, which focuses on the rights, interests and welfare of workers for about four years.
Book reading has always been her greatest passion -- mysteries, horrors, psycho-thrillers, historical documentaries and classics. She got hooked into it way back when she was but a shy kid.
Her writing prowess began as early as she was 10 years old in girlish diaries. With writing, she felt freedom – to express her viewpoints and assert it, to bring out all concerns -- imagined and observed, to bear witness.
For comments and inquiries about the article visit http://www.ucreative.com
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Are you in a busy office and need to get web design jobs with complex text effects done immediately? Want to speed up your productivity but avoid working until Saturday afternoons breaking up text and hand tweening? Then, SWiSH, the new standalone tool that creates great font effects and more by David Mitchie, presented during the Flash Forward 2000 conference, is for you!.
So what’s new with SWiSH? This tool enables you to create buttons and banners in the program itself. You can even create a .SWF for importing into Flash for fast font effects. The “more” emphasis earlier is what’s coming up in the future of this product. Mitchie is hoping to release an update of its first version in May that will allow the use of images. These plans for added functionality will give users more creativity in designing banners and navigation systems.
There are also future plans being expressed by Mitchie to support many of the features in Flash today – this includes scripting, movie clips, audio, vector images and rollover buttons. Right now, with the first version, you can use its maximum number of text effects to the hilt. It will also speed up work productivity. With SWiSH, you can say good bye to all afternoon of breaking text up, making key frames and hand tweening – plenty of hard work but is not anywhere near our idea of creativity.
Use it by controlling all the various attributes of each letter and click preview. After installing this software, in less than five minutes, you can produce real content for your sites. There may be arguments about how all the effects just look alike but remember that there are “industry standard” and “professional level” considerations on these things, just like in television and print. Using SWiSH allows you to produce your sites with that level of standard and expertise.
Currently, SWiSH doesn’t work in Mac but they are looking into creating a version suitable with the Mac. Right now, it works on Windows 95+/NT/2000 only. Still, you can create the files on a PC and use the .SWFs produced on the Mac, which means that you could create standard clips for your files and use them in your libraries. Other system requirements include Pentium 100 or better, 32Mb of RAM, 256 color display or better. It does not require Flash to be installed, too.
Acquiring and using SWiSH is easy enough. You just go to the site and download its trial version. Until you get a key, it will scramble text when you export to SWF. Currently, SWiSH has a US $30 price tag, with free minor updates. Major updates would be around US $10 – a big difference in the price of Flash at US $275. Need we say more? Try SWiSH and see for yourself! -30-
About the author:
Lala C. Ballatan is a 26 year-old Communication Arts graduate, with a major in Journalism. Right after graduating last 1999, she worked for one year as a clerk then became a Research, Publication and Documentation Program Director at a non-government organization, which focuses on the rights, interests and welfare of workers for about four years.
Book reading has always been her greatest passion -- mysteries, horrors, psycho-thrillers, historical documentaries and classics. She got hooked into it way back when she was but a shy kid.
Her writing prowess began as early as she was 10 years old in girlish diaries. With writing, she felt freedom – to express her viewpoints and assert it, to bring out all concerns -- imagined and observed, to bear witness.
For comments and inquiries about the article visit http://www.ucreative.com
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
CREATIVE SUITE - THE UNDERLYING INTEGRATION
by: Blur Loterina
Are you an Acrobat user and needs a complete tool for your print or web design projects? Read on.
A few months ago, Acrobat launched its main creative design packages including Photoshop/ImageReady, GoLive, InDesign and Illustrator. After a long period of silence, it came up with a much better package.
Adobe’s Creative Suite now comes in two new packages, the Standard Edition and the Professional Edition. The Standard Edition is composed of Adobe Photoshop, Adobe Illustrator and InDesign. This package contains most of the print-oriented flagships. On the other hand, Adobe GoLive and Acrobat Professional comprise the Professional Edition, which focuses on web design.
Basically, these packages are combinations of the strengths each application offers. They are integrations of tools for handling colour management, screen display, type handling and more. They allow cross-application, meaning any file done in one program can be opened to the other programs as long as the file was created on one of the programs that comprises the packages. When a file is transferred, all other options can be applied. For example, when you open an Illustrator file to Photoshop, that file will be opened as a Photoshop file.
Every creative application on the package uses PDF file format. Not just a PDF format, they use the latest PDF 1.5 format. PDF format allows you to import and export directly. You can embed vector PDFs from Illustrator and bitmap PDFs from Photoshop in a multi-page InDesign PDF. This can also be exported for PDF web display or repurposed via GoLive.
Adobe Creative Suites has a new integrated file management system, which is essential in the software’s workflow and tight integration. Different components and versions of a project are hard to manage, especially when you are going to use a lot of programs, as in workgroups. But Adobe has a solution to this, the Version Cue. Version Cue, through the application of Save dialog, enables you to store all job elements and important version of your project. The Open dialog accesses visual thumbnails of the project file. You will also be warned if other users are using the same file. In other words, it provides file versioning and management.
The packages also contain XMP or eXtensible Metadata Platform standards. This allows you to search for files according to related information like keywords or authors.
Creative Suite applications are guaranteed excellent tools to provide you with your desired result. Think of these packages as the total of all these applications.
About the author:
For additional information and comments about the article you may log on to http://www.printingquotesonline.com
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Are you an Acrobat user and needs a complete tool for your print or web design projects? Read on.
A few months ago, Acrobat launched its main creative design packages including Photoshop/ImageReady, GoLive, InDesign and Illustrator. After a long period of silence, it came up with a much better package.
Adobe’s Creative Suite now comes in two new packages, the Standard Edition and the Professional Edition. The Standard Edition is composed of Adobe Photoshop, Adobe Illustrator and InDesign. This package contains most of the print-oriented flagships. On the other hand, Adobe GoLive and Acrobat Professional comprise the Professional Edition, which focuses on web design.
Basically, these packages are combinations of the strengths each application offers. They are integrations of tools for handling colour management, screen display, type handling and more. They allow cross-application, meaning any file done in one program can be opened to the other programs as long as the file was created on one of the programs that comprises the packages. When a file is transferred, all other options can be applied. For example, when you open an Illustrator file to Photoshop, that file will be opened as a Photoshop file.
Every creative application on the package uses PDF file format. Not just a PDF format, they use the latest PDF 1.5 format. PDF format allows you to import and export directly. You can embed vector PDFs from Illustrator and bitmap PDFs from Photoshop in a multi-page InDesign PDF. This can also be exported for PDF web display or repurposed via GoLive.
Adobe Creative Suites has a new integrated file management system, which is essential in the software’s workflow and tight integration. Different components and versions of a project are hard to manage, especially when you are going to use a lot of programs, as in workgroups. But Adobe has a solution to this, the Version Cue. Version Cue, through the application of Save dialog, enables you to store all job elements and important version of your project. The Open dialog accesses visual thumbnails of the project file. You will also be warned if other users are using the same file. In other words, it provides file versioning and management.
The packages also contain XMP or eXtensible Metadata Platform standards. This allows you to search for files according to related information like keywords or authors.
Creative Suite applications are guaranteed excellent tools to provide you with your desired result. Think of these packages as the total of all these applications.
About the author:
For additional information and comments about the article you may log on to http://www.printingquotesonline.com
Circulated by Article Emporium
For more information on the same topic visit http://www.profitliner.com
Subscribe to:
Posts (Atom)