Website | Web 2.0 Css Templates

How to warn IE6 users

admin » 23 June 2009 » In Web developer tips » No Comments

First of all, do not dump support for Internet Explorer 6, that is not the intention of this article. The point is to, where possible, ensure that your site works in IE6. But where it’s not possible, or you would have to spend too much time and energy on writing “hacks” to make it work, you can apply a warning/information to consider upgrading IE or to use another browser.

What not to do

The point is to encourage the user to upgrade, not to force an upgrade (telling how dumb the user is by using IE6). If a site is already works as it should in IE6, or if you could invest very little time in getting it working, it’s better if you don’t include a warning at all. At least you could try to integrate the IE7 JavaScript library, available from code.google.com/p/ie7-js, or by overriding some of the CSS via an IE6-specific style sheet. The image below shows Joe Levi’s one-line upgrade method, “scaring” people to upgrade by pretending an OS alert, but encouragement is better than underhand methods.

When to warn

Generally, you should only show warnings when they’re directly beneficial to the user, such as a major part of the site is based on functionality that does not work or render properly in IE6. If you misuse your trust as a website owner, and force the user to upgrade for no practical reasons, it will just be an unnecessary hassle for the user. And when they return to the site with a new or updated browser, only to see that site has no changes, they’ll lose all trust in it.
If you get too “hung-up” in hating IE6, and decide to block access to all IE6 users, you can be pretty sure that they will never return, regardless of what browser they later end up with. The choice must always always rest with the user, they have to be in control of making the decision. And if they don’t want to upgrade, that’s down to them and it’s their loss. However, with the right approach, you can encourage them by explaining the benefits of switching or upgrading their browser, you’re more likely to get a positive result this way. The image below is from Travellerspoint, and it looks nice.

Be kind

The truth is, while you and me know that it is better to either upgrade or switching your browser, many users aren’t even aware that alternatives to Internet Explorer exists. Also, many people still have to use IE6 at work. With this in mind, we should create the warnings-text in a kind way. Tell the user that they’re using an old browser and that, because of this, the site they’re currently on won’t look its best, and some functionality might be unavailable. Then suggest that, for a better browsing expreience, they should consider upgrading.

Applying the warning

It only takes a few lines of html code to apply the IE6 warning. You need to make use of conditional comments to apply it to your website. The code below is one way of doing it. It wraps a conditional comment around the relevant code block:

^?View Code HTML4STRICT

<!--[if lt IE 7]>
<div id="ie6warningbox">
[Place your warning text here]
</div>
<![endif]-->

Modern, compliant browsers will just ignore this block of code. But versions of IE below version 7 will read it and treat it as html. So, if this was read by an IE6 browser, it would generate the html placed in the block, but if it was by IE7 or IE8, it would ignore it.

So, the conclusion would be: Keep it simple, keep it polite, and reassure and assist IE6 users, rather than showing them the finger.

How to create a favicon

admin » 05 May 2009 » In Web developer tips » No Comments

favicons A favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.

Favicon information

Favicons have the extension .ico, and they must be named favicon.ico. The dimension of the icons must be 16×16.

Photoshop

To make .ico files in Photoshop, you need to download a plugin. This can be found here, it’s a Windows Icon Photoshop plugin. When you have done this, then you can start by creating a new file, but remember that it needs to be downsized to 16×16, so you can create a new file with the dimensions 128×128, 64×64 and so on (you get the idea?). Then, design your new amazing looking favicon, and last but not least, go to Image Size and click on Resample Image. This option is better than just selecting Image Resize, because it will make sure that the image does not blur when you scale it down.

Upload the icon

The only thing you need to remember here, is to upload it to your sites root directory.

Edit your header

You also need to edit the header section of the files in your website. It should look like this:

^?View Code HTML4STRICT

<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>

That’s it! Now you can test in your favourite browser, it looks better now, right?

How to create a free website

admin » 25 September 2008 » In Web developer tips » No Comments

There are few shortcuts in life, except when it comes to creating a website. To skip all the knowledge and technical know-how required to manually set up a website, we bring you shortcut #1Free Web Hosting and shortcut #2 Free CSS Web Templates. Using these two components will save you a lot of time scratching your head, ultimately resulting in a website with a proper domain name and a proper web design.

Free Web Hosting

No joke. You can get free web hosting. If you need to get your site up now and have no money left to spend on your web projects, this may be a good option. The web host pays for the service by putting ads on your site. While this will get you up and running, it is disadvantageous in that in addition to having to advertise for the web host, you may have severe limitations with respect to bandwidth and disk space.

Almost Free Web Hosting

Almost free web hosting is a nice medium. You can get web hosting services for only a few dollars a month, without any ads from the host service on your site. There will still be some limitations on disk space and bandwidth, but an almost free web hosting arrangement is definitely enough to get you started until you are ready to upgrade. Also known as cheap web hosting or shared web hosting, this hosting type is indeed perfect for the beginner webmaster or hobbyist. You will hence share server disk space and bandwidth with other hosting clients but as long as your website isn’t heavy with loads of traffic and large files, there shouldn’t be a problem.

Free CSS Web Templates

Now in most hosting packages nowadays clients are offered in-house applications to install CMS, blogs, forums or other website-types so that the client won’t have to. Pre-installable Wordpress blogs are common as is Mambo, Joomla and PHP Nuke. However, these solutions still require knowledge in the scripting language PHP and some level of experience. If you are a first-timer you should keep to basic html and css.

One index.html-file, one image directory, one css stylesheet. Css web templates are built in basic html and css, though not limiting the web design in any way and are failry easy to manage and edit. Online you’ll find massive archives of free css web templates of just a couple of files that you can upload to your shared server. You’ll have to edit your website’s content directly in the html-files but that way you’ll also learn some basic programming. When you later feel ready to create a more dynamic website like a content management system, you will be more ready to take on the world of PHP programming and finding free CMS templates.

Web 2.0 Css Templates

Tag Archive > website