Freeola Internet Get Dotted Domains Blog Guides Forums
Menu

Viewing Thread:
'General web site tips thread'

Sat 30/12/06 at 23:20:
cjh
Regular
"It goes so quickly"
Posts: 4,083
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: *
Disallow: /printer/


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 to each printer friendly web page you have, placing it within the and </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 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 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 (), 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 :)
Mon 22/01/07 at 20:54:
Regular
Posts: 1,014
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
Sun 21/01/07 at 22:56:
cjh
Regular
"It goes so quickly"
Posts: 4,083
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.
Sun 21/01/07 at 20:23:
Regular
Posts: 1
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
Sun 14/01/07 at 20:34:
cjh
Regular
"It goes so quickly"
Posts: 4,083
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 and closing elements.

CSS code needs to be in a .css file, and can be called using either the or

JavaScript code needs to be in a .js file, and can be called using the src attribute of the

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:



My Web Site










My Web Page


Welcome to my web site.






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 or

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:








class=“noprint”>amazon banner




    class=“noprint”>
  • site link

  • site link

  • site link

  • site link





Turn left


Turn right


You’re late







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 </code> 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.<br /> <br /> <strong><span style="text-decoration:underline">Internet Explorer conditional comments</span></strong><br /> <br /> 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.<br /> <br /> 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.<br /> <code class="theme-color-1"><br /> <strong><!--[if IE]></strong><br /> <p>Internet Explorer will see this.</p><br /> <strong><![endif]--></strong><br /> </code><br /> The above code will be seen by IE as a conditional comment, as it contains the special instructions that IE understands, which is the <strong><!--[if IE]></strong> and <strong><![endif]--></strong> bits, causing IE to include the content <code class="theme-color-1"><p>Internet Explorer will see this.</p></code> as part of the web page.<br /> <br /> Other web browsers will just see an HTML comment, as highlighted below, and ignore it:<br /> <br /> <code class="theme-color-1"><strong><!--</strong></code><em>[if IE]><br /> <p>Internet Explorer will see this.</p><br /> <![endif]</em><code class="theme-color-1"><strong>--></strong></code><br /> <br /> 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.<br /> <br /> If you want to target a specific version Internet Explorer, this is possible simply by adding the version number after the <code class="theme-color-1">if IE</code> bit.<br /> <code class="theme-color-1"><br /> <strong><!--[if IE 7]></strong><br /> <p>Only Internet Explorer <strong>7</strong> will see this.</p><br /> <strong><![endif]--></strong><br /> <br /> <strong><!--[if IE 6]></strong><br /> <p>Only Internet Explorer <strong>6</strong> will see this.</p><br /> <strong><![endif]--></strong><br /> <br /> <strong><!--[if IE <span style="text-decoration:underline">lt</span> 7]></strong><br /> <p>Only Internet Explorer <strong>6</strong> and below will see this, not Internet Explorer 7.</p><br /> <strong><![endif]--></strong><br /> </code><br /> In the last example, <code class="theme-color-1"><span style="text-decoration:underline"><strong>lt</strong></span> </code> means “<em>less than</em>”, which refers to Internet Explorer versions which are less than version 7. Other options include <code class="theme-color-1"><span style="text-decoration:underline"><strong>lte</strong></span></code> (less than or equal to), <code class="theme-color-1"><span style="text-decoration:underline"><strong>gt</strong></span></code> (greater than) and <code class="theme-color-1"><span style="text-decoration:underline"><strong>gte</strong></span></code> (greater than or equal to).<br /> <br /> 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:<br /> <code class="theme-color-1"><br /> <strong><!--[if !IE]> <--></strong><br /> <p>Not using Internet Explorer.</p><br /> <strong><!--> <![endif]--></strong><br /> </code><br /> 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.<br /> <br /> <strong><span style="text-decoration:underline">Try a web feed, as well as a mailing list</span></strong><br /> <br /> 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 <a href="http://chat.freeola.com/Web-Development-4-chat/Adding-a-Web-feed-to-compliment-your-web-site-875.html" target="_blank">web feed</a>, containing similar information that would appear in your daily / weekly email send-out.<br /> <br /> 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 <a href="http://en.wikipedia.org/wiki/Spam_%28electronic%29" target="_blank">spam</a> and <a href="http://en.wikipedia.org/wiki/Phishing" target="_blank">email fraud</a>. </div> </div> </div> </div> <div class="row no-pad-top pad-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/post_reply.php?thread_id=148100000"> <div class="icon-button"><i class="fa fa-comment"></i> <span>Reply</span></div> </a> </div> </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/post_reply.php?thread_id=148100000"e_post=1893347"> <div class="icon-button"><i class="fa fa-quote-left"></i> <span>Reply & Quote</span></div> </a> </div> </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/ajax/report_post.php?thread_id=148100000&post_id=1893347" class="report-button" rel="nofollow"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <div class="row no-pad-top"> <div class="container dark"> <div class="span12 contents title"> <div style="float:right"> </div> <div style="line-height:2.2rem">Sat 30/12/06 at 23:20:</div> </div> </div> </div> <div class="row no-pad-top"> <div class="container light"> <div class="span3 contents"> <div class="inline-block"> <div class="nickname"> <a href="/user_profile.php?user_id=55942948" style="color:#5032DA">cjh</a> </div> <div class="user-type" style="color:#5032DA">Regular</div> </div> <div class="tagline mobile-hide">"It goes so quickly"</div> <div class="avatar-wrapper"> <div class="avatar-container"> <img src="/assets/images/no_avatar.png" class="avatar"> </div> </div> <div class="posts-container mobile-hide"> Posts: 4,083 </div> </div> <div class="span9 contents"> <div style="word-wrap:break-word"> <strong><span style="text-decoration:underline">Freeola general web site tips thread</span></strong><br /> <br /> 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 <em>Harry Hill’s TV burp</em> 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.<br /> <br /> 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.<br /> <br /> <strong><span style="text-decoration:underline">Search engines</span></strong><br /> <br /> 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.<br /> <br /> <strong>Tell a search engine your site exists</strong><br /> <br /> To let search engines know that your web site exists, many offer a <em>suggest a site</em> type page, which allows you to submit your web address to the database. If you browse to the many search engine web sites (including <a href="http://www.google.com/addurl/" target="_blank">Google</a> and <a href="http://search.yahoo.com/info/submit.html" target="_blank">Yahoo</a>) you should be able to find the relevant pages to send in your web address.<br /> <br /> <strong>Tell a search engine about your pages</strong><br /> <br /> Google created the <a href="http://sitemaps.org" target="_blank">sitemap</a> 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.<br /> <br /> A sitemap file can contain <strong>all</strong> 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.<br /> <br /> 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 <a href="http://sitemaps.org" target="_blank">official sitemaps web site</a>.<br /> <br /> <strong>Other sites linking to yours</strong><br /> <br /> 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.<br /> <br /> <strong>Google Webmaster Central</strong><br /> <br /> Google offer a great resources to web masters, based at the <a href="http://www.google.com/webmasters/" target="_blank">Google Webmaster Central</a> web site. Included is <a href="http://www.google.com/webmasters/sitemaps/" target="_blank">Google Webmaster Tools</a>, 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.<br /> <br /> <strong>Search results and duplicate content</strong><br /> <br /> A very common (and often forgotten) content duplication method is offering your users a <strong>printer friendly</strong> 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. <br /> <br /> 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.<br /> <br /> You can talk to a web search engine bot using a small text file called <strong>robots.txt</strong>, 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 <strong>printer</strong> directory on your web site, could you use the following code:<br /> <br /> <code class="theme-color-1"><br /> User-agent: <strong>*</strong><br /> Disallow: <strong>/printer/</strong><br /> </code><br /> <br /> Where the <strong>*</strong> character means "<em>all bots that follow the robots.txt rules</em>". Unfortunately, not all bots do follow these rules, but the likes of Google, Yahoo and Microsoft do.<br /> <br /> The <strong>robots.txt</strong> file needs to go in your root directory (htdocs folder), so that it is accessible via <span style="text-decoration:underline">http://yourwebaddress.co.uk/robots.txt</span>. Search engines that make use of the <strong>robots.txt</strong> file will automatically check for it, so you don’t need to put a reference to it in your web pages or sitemap file.<br /> <br /> You can also individually add the HTML code <code class="theme-color-1"><meta name="robots" content="noindex"></code> to each printer friendly web page you have, placing it within the <code class="theme-color-1"><head></code> and <code class="theme-color-1"><<strong>/</strong>head></code> HTML elements. Again, not all bots follow these rules, however, but the major players generally do.<br /> <br /> <strong>Don’t spam a search engine</strong><br /> <br /> Trying to spam a search engine is a general reference which can mean a number of things; Yahoo define search engine spamming as "<em>pages created deliberately to trick the search engine into offering inappropriate, redundant, or poor-quality search results</em>", and many other search engine companies feel the same.<br /> <br /> Such techniques used to spam a search engine include:<br /> <br /> <span style="text-decoration:underline">Cloaking</span> – Offering up different content to a search engine than regular everyday web visitors, by means of user agent sniffing.<br /> <br /> <span style="text-decoration:underline">Small / hidden text and hyperlinks</span> – Placing content on your web page, then using CSS or the <code class="theme-color-1"><font color=""></code> 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.<br /> <br /> 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.<br /> <br /> <strong><span style="text-decoration:underline">Images on your web site</span></strong><br /> <br /> When placing images on your web site, ensure that you include the <code class="theme-color-1">alt=""</code> attribute, such as <code class="theme-color-1"><img src="freeola.gif" alt="Freeola home page."></code>, 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 (<code class="theme-color-1"><img src="freeola.gif" alt=""></code>), but consider that search engines can’t see an image, but do have image search features, so placing relevant text within the <code class="theme-color-1">alt=""</code> attribute should always be considered. It is especially important to use the <code class="theme-color-1">alt=""</code> element when making an image a hyperlink, because if the image isn’t viewable, the link is difficult to make use off.<br /> <br /> 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 <a href="http://chat.freeola.com/Web-Development-4-chat/Photo-sizes-on-websites-make-your-site-load-faster-135.html" target="_blank">Hmmm…</a>s previous post on this.<br /> <br /> <strong><span style="text-decoration:underline">Using <code class="theme-color-1">JavaScript</code> on your web site</span></strong><br /> <br /> 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.<br /> <br /> A common problem though is web sites <strong>rely</strong> 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.<br /> <br /> 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 <a href="http://chat.freeola.com/Web-Development-4-chat/Creating-a-web-form-using-HTML-1233.html" target="_blank">web form</a> 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.<br /> <br /> Search engines may also be unable to read JavaScript pages.<br /> <br /> <strong><span style="text-decoration:underline">Installing more than one web browser on your computer</span></strong><br /> <br /> 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.<br /> <br /> <span style="font-size:1.2rem">*I’m pretty sure this is the case, but welcome a correction.</span><br /> <br /> <strong><span style="text-decoration:underline">Once size may not fit all</span></strong><br /> <br /> 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.<br /> <br /> <br /> <br /> 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 :) </div> </div> </div> </div> <div class="row no-pad-top pad-bottom"> <div class="container light"> <div class="span3 contents mobile-hide tablet-hide no-pad-top">   </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/post_reply.php?thread_id=148100000"> <div class="icon-button"><i class="fa fa-comment"></i> <span>Reply</span></div> </a> </div> </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/post_reply.php?thread_id=148100000"e_thread=148100000"> <div class="icon-button"><i class="fa fa-quote-left"></i> <span>Reply & Quote</span></div> </a> </div> </div> <div class="span3 span-t4 span-m4 contents no-pad-top retain-initial-padding"> <div class="icon-button-container"> <a href="/ajax/report_post.php?thread_id=148100000&post_id=0" class="report-button" rel="nofollow"> <div class="icon-button"><i class="fa fa-flag"></i> <span>Report</span></div> </a> </div> </div> </div> </div> <script> ///////////// // AVATARS // ///////////// $(function() { var $avatar_display = $("#avatar_display"); if ($avatar_display.text() == "active") { $(".avatar-wrapper").show(); } else { $(".avatar-wrapper").hide(); } }); $("#toggle_avatars").on("click", function() { var $avatar_display = $("#avatar_display"); var $toggle_avatars = $("#toggle_avatars"); if ($avatar_display.text() == "active") { $avatar_display.text("disable"); $toggle_avatars.text("Show Avatars"); $(".avatar-wrapper").hide(); $.get("/ajax/set_avatar_status.php", { new_status: 'disabled' }, function(data){ //console.log(data); }); } else { $avatar_display.text("active"); $toggle_avatars.text("Hide Avatars"); $(".avatar-wrapper").show(); $.get("/ajax/set_avatar_status.php", { new_status: 'active' }, function(data){ //console.log(data); }); } }); /////////////////// // REPORT BUTTON // /////////////////// $('a.report-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); modalConfirm("Report this post for abusive, offensive or spam content?", function(){ $.get(link).done(function(data) { popupAlert("Post reported to forum moderators."); }); }); }); /////////////////// // STICKY BUTTON // /////////////////// $('a.sticky-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); if ($(this).hasClass('active')) { $(".sticky-button").attr('title', "Make Sticky"); $(".sticky-button").removeClass('active'); $.get(link, {is_sticky : 'N'}).done(function(data) { popupAlert("Thread's Sticky Status Updated."); }); } else { $(".sticky-button").attr('title', "Unsticky"); $(".sticky-button").addClass('active'); $.get(link, {is_sticky : 'Y'}).done(function(data) { popupAlert("Thread's Sticky Status Updated."); }); } }); //////////////// // BAN BUTTON // //////////////// $('a.ban-user-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); modalConfirmReason("Please enter the reason you would like to ban this user:", function(){ var $confirm_reason = $("#confirm_reason"); $.get(link, {ban_reason: $confirm_reason.val()}).done(function(data) { if (data == "SUCCESS") { popupAlert("User Successfully Banned."); } else { popupAlert(data); } }); }); }); /////////////////// // DELETE BUTTON // /////////////////// $('a.delete-button').on("click", function(e) { e.preventDefault(); var link = $(this).attr('href'); if ($(this).data('is-thread') == "1") { modalConfirm("Are you sure you want to delete this thread?", function(){ window.location.href = link; }); } else { modalConfirm("Are you sure you want to delete this post?", function(){ window.location.href = link; }); } }); </script> </div> <div id="sidebar" > <div class="section sub-pages"> <div class="title"> Chat Links: </div> <ul> <li> <a href="//chat.freeola.com" class="sidenav ">Chat Home</a> </li> <li> <a href="//chat.freeola.com/forum_rules.php" class="sidenav ">Chat Rules</a> </li> <li> <a href="//chat.freeola.com/chat_safety.php" class="sidenav ">Chat Safety & Tips</a> </li> <li> <a href="//chat.freeola.com/top_posters.php" class="sidenav ">Top Posters</a> </li> <li> <a href="//chat.freeola.com/competition_rules.php" class="sidenav ">Competition Rules</a> </li> <li> <a href="//chat.freeola.com/hall_of_fame.php" class="sidenav ">Hall of Fame</a> </li> <li> <a href="//chat.freeola.com/whos_online.php" class="sidenav ">See Who's Online</a> </li> <li> <a href="https://secure.freeola.com/myfreeola-control-panel/profile_edit.php" class="sidenav ">Update Your Profile</a> </li> </ul> </div> <div class="section"> <div class="login"> <div class="login--details"> <p>Log in to <span class="black" style="font-weight: 400;">MyFreeola</span></p> <p class="login--details-small">and take a <a href="http://freeola.com/myfreeola-control-panel/">free look around</a>.</p> </div> <div class="login--actions"> <p><a class="login--actions-button login-myfreeola" href="https://secure.freeola.com/myfreeola/login-interactive.php?redirect=http%3A%2F%2Fchat.freeola.com%2Fthread%2F148100000%2Fgeneral-web-site-tips-thread.html"><span>Log in</span> </a><a class="login--actions-button create-myfreeola" href="https://secure.freeola.com/myfreeola/login-main.php?create=yes"><span>Sign up</span></a> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <div class="section"> <a href="http://freeola.com/online-photo-gallery/" onclick="javascript:LogFlipster(2301);"><img src="https://images.freeola.co.uk/flipster/freeola-sidebar/online-photo-gallery.png" width="190" height="280" border="0" alt="Freeola InstantPro Photo gallery"></a> </div> </div> <div class="clear"></div> </div> <div class="footer-wrapper"> <div id="footer-details" class="wrap"> <div id="footer-contact"> <p class="standout normal" style="margin-bottom: 16px; margin-top:-6px;"> <img src="//images.freeola.co.uk/main/heart_icon.png" alt="Passionate about Help and Support" class="float-left" style="margin-right: 12px; position:relative; top:6px;"> We're passionate<br>about Help & Support </p> <p style="margin-bottom: 21px;"> <em>We have a range of <a class="guide-link" href="//freeola.com/support/" title="online help guides">online help guides</a> available.<br> To speak to a trained advisor, call our <a href="//freeola.com/support/" class="guide-link">UK Help & Support Team</a>. Or you can <a class="guide-link" href="//freeola.com/support/request/">send us an email ticket</a>.</em> </p> <ul class="support-links"> <li> <div class="icon-container"> <span class="fa fa-file-text"></span> </div> <a href="//freeola.com/support/">Online Help Guides</a> </li> <li> <div class="icon-container"> <span class="fa fa-envelope"></span> </div> <a href="//freeola.com/support/request/">Send E-mail Ticket</a> </li> </ul> <p class="no-margin-bottom enquiries"> Call Us </p> <p class="contact-no bold no-margin-bottom"> <a href="tel:+441376556060" class="no-decoration"> <span class="fa fa-phone"></span> 01376 55 60 60 </a> </p> </div> <div id="footer-testimonials"> <div class="testimonials-content testimonial-overflow" > <p class="headline"> "<em>Very pleased</em>" </p> <p class="no-margin-bottom body"> <em>Very pleased with the help given by your staff. They explained technical details in an easy way and were patient when providing information to a non expert like me.</em> </p> </div> <div class="testimonials-content testimonial-overflow" style="margin-top:40px;" > <p class="headline">"<em>Just a quick note to say thanks for a very good service ... in fact excellent service..</em>"</p> <p class="no-margin-bottom body"><em>I am very happy with your customer service and speed and quality of my broadband connection .. keep up the good work . and a good new year to all of you at freeola.</em></p> <p class="author">Matthew Bradley from Belfast </p> </div> </div> </div> </div> <div id="footer_wrap" data-bl=""> <div class="footer-content"> <div class="footer-links left"> <a class="first" href="//freeola.com/support/" title="Contact Freeola">Contact Us</a> <a href="//freeola.com/support/" title="Freeola Support">Support</a> <a href="//freeola.com/sitemap/" title="Freeola.com Sitemap">Site Map</a> <a class="last" href="//freeola.com/pricelist.php" title="Freeola.com Pricelist">Prices</a> </div> <img src="//images.freeola.co.uk/main/freeola-footer-logo.png" alt="Freeola and GetDotted"/> <div class="footer-links right"> <a class="first" href="//freeola.com/legal/terms.php" title="Freeola.com Terms and Conditions">Terms & Conditions</a> <a href="//freeola.com/legal/privacy_policy.php" title="Freeola.com Privacy Policy">Privacy & Cookies</a> <a href="//freeola.com/shop/" title="Freeola.com Shop">Shop</a> <a class="last" href="//freeola.com/blog/" title="Freeola.com Blog">Blog</a> </div> <div class="clear"></div> </div> </div> <div class="freeola-blurb"> <p class="no-margin-top">Freeola is a <a href="//freeola.com/areas/">UK</a> internet service provider offering the best value and extensive free services. Please compare our <a href="//getdotted.com">domain name registration</a> prices or check out our <a href="//freeola.com/broadband/">UK high speed internet access</a>. If you are in business please see examples of our free hosting at <a href="//freeola.com/customer-sites/">Freeola.com/customer-sites</a>.</p> <p class="text-center"> <img src="//images.freeola.co.uk/main/safe-secure-payment.png" alt="Safe and Secure Payment" /> </p> </div> <div id="tab-wrapper-container"> <div id="feedback-tab-wrapper"> <a href="/feedback.php?modal&sro=D3D9446802&t=59eb5490b62ce" id="feedback-tab" rel="nofollow">Tell us what you think!</a> <a href="#" id="hide-feedback" rel="nofollow"><span class="fa fa-times"></span></a> </div> <div id="livechat-times"> <h2>Live Chat is offline<a href="#" title="Hide"><span class="fa fa-chevron-down"></span></a></h2> <p>Live Chat is available:<br>9am to 6:30pm Monday to Friday <span>(excluding bank holidays)</span>.</p> <p><a href="tel:441376556060"><span class="fa fa-phone"></span>01376 55 60 60</a></p> <p><a href="https://secure.freeola.com/support/request/"><span class="fa fa-envelope"></span>Send us a ticket.</a></p> </div> <div id="livechat-tab-wrapper" style="display:none;"> <div style="min-width:132px;"> </div> </div> </div> <script type="text/javascript" src="/assets/js/main.js"></script> <script type="text/javascript" src="/assets/js/freeola_dot_com/freeola-search-toggle.js"></script> <script type="text/javascript" src="/assets/js/freeola_dot_com/get-order-items.js"></script> <script type="text/javascript" src="/shared_assets/js/freeola_mobile_header.js"></script> <script type="text/javascript" src="/shared_assets/js/feedback.js"></script> </body> </html>