Viewing Thread:
"General web site tips thread"

Freeola general web site tips thread

As I don’t really have a lot to do for the rest of this year, I thought about writing an article / guide type post for this, but while doing so it became more and more apparent that I’d rather listen to music and watch Harry Hill’s TV burp than put in too much effort, so in place thought I’d start up a general web tips discussion thread for everyone and anyone to learn, share and discuss hints and tips. After all, there is often more than one way to achieve a particular task.

Most of these could be expanded in to whole individual threads, which I might do next year, but for now, it’s an open playing field. For this post, there is no real order in which each entry is placed, I’m just writing as I think.

Search engines

Getting visitors to your web site is probably best achieved via a search engine, as according to many polls (official links welcome) a very high percentage of web site visitors come from a search engine results page.

Tell a search engine your site exists

To let search engines know that your web site exists, many offer a suggest a site type page, which allows you to submit your web address to the database. If you browse to the many search engine web sites (including Google and Yahoo) you should be able to find the relevant pages to send in your web address.

Tell a search engine about your pages

Google created the sitemap XML protocol, which is basically a method for web masters to document their web pages in a format that a search engine can process. The sitemap protocol has been considered highly enough to be separated from Google and adopted by Microsoft and Yahoo as well.

A sitemap file can contain all the web addresses of your web site, as well as a little bit of meta data to detail when each page was last updated, how often the page is expected to be updated, and how important you rate a page against others on your site.

I’m intending on putting together a more details post on adding a sitemap to your web site, but for now you should be able to get all the info you need to create one yourself from the official sitemaps web site.

Other sites linking to yours

If another web site links to your own, this can be classed as a vote of confidence in the content of your site, by the site owner linking to you page. If the web site has a high page rank (which means the search engine considers that web site very good) a link to your own site will be more meaningful than a site that has a low or no page rank.

Google Webmaster Central

Google offer a great resources to web masters, based at the Google Webmaster Central web site. Included is Google Webmaster Tools, which once you sign up and verify your site(s), allows you to see stats of how your sites are doing within Google search results. Such stats include when your web site was last crawled, and which URLs returned errors, allowing you to find old and outdated links and alter them accordingly.

Search results and duplicate content

A very common (and often forgotten) content duplication method is offering your users a printer friendly version of a web page, which may have the site navigation and other irrelevant information deleted from the page, with the main content being formatted for better print results.

This is a welcome feature, but search engines are generally unable to tell which version is the web page and which is the printer version, and may list your printer version on it’s results pages above (or in place of) the regular web page version, which you may not want to be the case. To combat this, there are a couple of ways to tell a search engine bot to ignore your printer friendly version when it crawls your web site.

You can talk to a web search engine bot using a small text file called robots.txt, and from this file tell it to ignore certain web directories altogether. For example, if you were to place all your printer friendly pages within the printer directory on your web site, could you use the following code:


User-agent: [B]*[/B]
Disallow: [B]/printer/[/B]


Where the * character means "all bots that follow the robots.txt rules". Unfortunately, not all bots do follow these rules, but the likes of Google, Yahoo and Microsoft do.

The robots.txt file needs to go in your root directory (htdocs folder), so that it is accessible via http://yourwebaddress.co.uk/robots.txt. Search engines that make use of the robots.txt file will automatically check for it, so you don’t need to put a reference to it in your web pages or sitemap file.

You can also individually add the HTML code <meta name="robots" content="noindex"> to each printer friendly web page you have, placing it within the <head> and <[B]/[/B]head> HTML elements. Again, not all bots follow these rules, however, but the major players generally do.

Don’t spam a search engine

Trying to spam a search engine is a general reference which can mean a number of things; Yahoo define search engine spamming as "pages created deliberately to trick the search engine into offering inappropriate, redundant, or poor-quality search results", and many other search engine companies feel the same.

Such techniques used to spam a search engine include:

Cloaking – Offering up different content to a search engine than regular everyday web visitors, by means of user agent sniffing.

Small / hidden text and hyperlinks – Placing content on your web page, then using CSS or the <font color=""> element to hide / mask the text (or hyperlink), with the aim of getting search engines to see it, even though it isn’t deemed important enough to show everyday web visitors.

While you may believe these to be cleaver tricks to gain a higher ranking, such activity will get your web site(s) blacklisted, which can severally effect your ability to attract visitors. Don’t do it.

Images on your web site

When placing images on your web site, ensure that you include the alt="" attribute, such as <img src="freeola.gif" alt="Freeola home page.">, which is used if an image is unavailable to a user for any reason. If the image isn’t important, you can leave the attribute with a blank value (<img src="freeola.gif" alt="">), but consider that search engines can’t see an image, but do have image search features, so placing relevant text within the alt="" attribute should always be considered. It is especially important to use the alt="" element when making an image a hyperlink, because if the image isn’t viewable, the link is difficult to make use off.

Don’t use image files that are too big. If you have an image gallery with smaller versions of each image as thumbnail, don’t use the same large file as the thumbnail, instead, make a copy, resize it and us that as your thumbnail. For more, see Hmmm…s previous post on this.

Using JavaScript on your web site

Adding JavaScript to your web site can be a great addition, allowing for more interactivity between your site and your visitors, such as form validation.

A common problem though is web sites rely on JavaScript to achieve certain tasks, but don’t offer a non-JavaScript version, mean visitors who have JavaScript turned off, or for browsers that don’t support it fully or at all, aren’t able to use the site.

If adding JavaScript to your web page, you should ensure that the function it performs is replicate-able via a non-JavaScript method, so as to not block out any users. For example, if you have a web form that you use JavaScript to validate, make sure that if the validation is important, that a server-side PHP / CGI validation method is also in place – or if you have a link that opens a small JavaScript widow, that the link will open up as a regular page in the web browser if JavaScript is turned off.

Search engines may also be unable to read JavaScript pages.

Installing more than one web browser on your computer

There are quite a few web browsers available on many different platforms, and they don’t all display your web site in the same way. While Internet Explorer comes pre-installed on PC’s and Safari comes pre-installed on an Apple Mac*, you can freely install other web browsers on to your PC / Mac so that you can see for yourself how your site may look, and make appropriate corrections to ensure your web site is displayed nicely to as many users as possible.

*I’m pretty sure this is the case, but welcome a correction.

Once size may not fit all

Similar to how there are different web browsers available, web visitors may use different screen sizes to view your web page. You shouldn’t assume that because your site looks good on your 1900 x 2600 monitor that an 800 x 600 user would see the exact same site layout. Where possible, test your web site using different screen settings, and try to create a workable balance to cater for different screen sizes than your own.



Well, that’s me done for the moment. If you’ve got your own hints or tips, or see / think I’ve made miss-judgements or errors with mine, discuss :)

Not sure if this is the correct place for this thread or an idea for a future thread? but some web hosts offer as part of the package "stats" for the site. I think it would be great if Freeola were to offer that service.

Kev

Hi quinn, welcome to the forum.

Web pages are make up of what is known as HTML (Hyper Text Markup Language) and a good place to start is W3Schools. This site will teach you how to write HTML, as opposed to using a program to do it for you.

I personally hand-code any web pages, so couldn't recommend any web page building programs myself, sorry.

Help Please.
Hi I'm new to this despite having my domain new for four years i have done nothing with it.
I have decided the New Year resolution is to find out how to do a Internet site
Please can anyone help and tell me the best program in their opinion to build one with. It also has to be idiot proof.
Thank You
for any help given

Yahoo Site Explorer (BETA)

Similar to Google’s Webmaster Tools, Yahoo’s Site Explorer offers the ability to see how your web site is indexed within it, such as the last crawl date, or which web addresses are listed. You can use your existing Yahoo account (if you have one) to log in and add your web site(s), verify them, and see your Yahoo stats.

Like Google, Yahoo now also supports the Sitemap XML protocol, which you can apply using the Feeds tab within Site Explorer.

While Yahoo’s offering isn’t as comprehensive as Google’s, remember it is still in BETA form, meaning it isn’t officially completed yet.

CSS and JavaScript in an external (separate) file

Using CSS and / or JavaScript on a web site is very common these days, but placing it directly in to each web page can make maintaining a web site time consuming, as well as using up more bandwidth from both your web host and your visitors Internet connection.

To ease the pressure on both counts, CSS and JavaScript can be placed in separate files, and referenced from the web page(s) that make use of them within the HTML’s opening <head> and closing </head> elements.

CSS code needs to be in a .css file, and can be called using either the <link> or <style> elements, for example:

<link rel="stylesheet" type="text/css" href="[B]styles[U].css[/U][/B]"> or
<style type=�text/css�>@import �[B]styles[U].css[/U][/B]�;</style>

JavaScript code needs to be in a .js file, and can be called using the src attribute of the <script> element, for example:

<script type=�text/javascript� [B]src=�[I]scripts[U].js[/U][/I]�[/B]></script>

You are not limited to referring to just a single external file per web page, so can split up large CSS or JavaScript files depending on the function they perform. For example, there would be no point referring to a JavaScript web form validation file if there was no web form on the current web page.

To refer to multiple files, you’ll need to create a separate reference for each one, for example:

<html>
<head>
<title>My Web Site</title>
[B]<!-- External CSS -->[/B]
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" media=�screen� href="nav.css">
<link rel="stylesheet" type="text/css" media=�print� href="print.css">
[B]<!-- External JavaScript -->[/B]
<script type=�text/javascript� src=�scripts.js�></script>
<script type=�text/javascript� src=�links.js�></script>
<script type=�text/javascript� src=�banners.js�></script>
</head>
<body>
<h1>My Web Page</h1>
<p>Welcome to my web site.</p>
</body>
</html>


CSS printer friendly pages

As mentioned in the previous post, web sites can offer a separate printer friendly version of each web page, but this may mean more work on your part when creating such pages. CSS is not exclusive to styling your web pages in a web browser, as it can also be used to style a printable version of the current web page.

Generally, when people print a web page, they are only interested in the specific content of that page, such as map directions or a products description, and not your page navigation or advert banners. Using a printer friendly CSS style sheet, you can strip away this content easily, allowing the user to save their printer ink and paper from irrelevant content. If you wish, you can also style the content differently, such as using different colours or font styles and sizes.

A printer style sheet is applied to the current web page using the print keyword within the media attribute, for either the <link> or <style> element, for example:

<link rel=�stylesheet� type=�text/css� href=�print.css� [B]media=�[I]print[/I]�[/B]>
... or...
<style type=�text/css� [B]media=�[I]print[/I]�[/B]>@import �print.css�;</style>

As mentioned above, you can use a printer style sheet to chance the way a printer version of your page appears in many ways, but the most common is to simply hide unwanted page content from the printer. To do this, you’ll need to identify the content that you don’t want printed, either by the HTML id attributes used within your web page, or by adding your own class attributes, with a value of noprint, for example:

<html>
<head>
<style type=�text/css� media=�print�>
[B].noprint { [I]display: none[/I]; }[/B]
</style>
</head>
<body>

<!-- not to be printed -->
<p [B]class=�[I]noprint[/I]�[/B]>amazon banner</p>

<!-- not to be printed -->
<ul [B]class=�[I]noprint[/I]�[/B]>
<li>site link</li>
<li>site link</li>
<li>site link</li>
<li>site link</li>
</ul>

<!-- To be printed -->
<div id=�content�>
<p>Turn left</p>
<p>Turn right</p>
<p>You�re late</p>
</div>

</body>
</html>

The code above is a basic example, and does not contain all the necessary HTML to make a full web page (for example, the hyperlink elements are missing, no page <title> has been set, and the content is very basic). You should also consider using an external file to hold your printer style sheet, as detailed above.

Internet Explorer conditional comments

Internet Explorer (IE) is unfortunately not the most reliable web browser when it comes to creating pure CSS based web sites, with many bugs existing which can frustrate and baffle you at time. While the new Internet Explorer 7 contains many fixes, it’s predecessor, Internet Explorer 6 is still the most widely used web browser around the world, and to ignore it could be costly.

Luckily, Internet Explorer contains a function known as conditional comments, which are special instructions that can be hidden using standard HTML comments. When parsing the web page, other web browsers will just see an HTML comment, and treat it as such, but Internet Explorer will see the special instructions, and follow them as required.

[B]<!--[if IE]>[/B]
<p>Internet Explorer will see this.</p>
[B]<![endif]-->[/B]

The above code will be seen by IE as a conditional comment, as it contains the special instructions that IE understands, which is the bits, causing IE to include the content <p>Internet Explorer will see this.</p> as part of the web page.

Other web browsers will just see an HTML comment, as highlighted below, and ignore it:

[B]<!--[/B][if IE]>

Internet Explorer will see this.

[B]-->[/B]

Condition comments are generally used to allow extra CSS / JavaScript code to be seen by Internet Explorer which will correct any problems that occur only in IE.

If you want to target a specific version Internet Explorer, this is possible simply by adding the version number after the if IE bit.

[B]<!--[if IE 7]>[/B]
<p>Only Internet Explorer [B]7[/B] will see this.</p>
[B]<![endif]-->[/B]

[B]<!--[if IE 6]>[/B]
<p>Only Internet Explorer [B]6[/B] will see this.</p>
[B]<![endif]-->[/B]

[B]<!--[if IE [U]lt[/U] 7]>[/B]
<p>Only Internet Explorer [B]6[/B] and below will see this, not Internet Explorer 7.</p>
[B]<![endif]-->[/B]

In the last example, [U][B]lt[/B][/U] means “less than”, which refers to Internet Explorer versions which are less than version 7. Other options include [U][B]lte[/B][/U] (less than or equal to), [U][B]gt[/B][/U] (greater than) and [U][B]gte[/B][/U] (greater than or equal to).

If you want to hide something from Internet Explorer, but have other web browsers see it, you can achieve it using a little HTML comment trickery:

[B]<!--[if !IE]> <-->[/B]
<p>Not using Internet Explorer.</p>
[B]<!--> <![endif]-->[/B]

As mention above, this feature is generally used to work around problems with Internet Explorers CSS and JavaScript bugs. If you don’t see any problems with your web sites, then there is no need to use them.

Try a web feed, as well as a mailing list

If you offer a mailing list on your web site, where-by users add their email address and you send them weekly / daily updates, perhaps consider to also make use of a web feed, containing similar information that would appear in your daily / weekly email send-out.

The benefit of a web feed to some users is that it does not require them to hand over their email address to a web site, which many may not wish to do in this day of spam and email fraud.