Using SVG in your websites

SVG is an amazingly capable graphics technology with the only problem that it is not supported by all browsers. So what is SVG? According to Adobe, who invented this technology, “Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics”.

Let’s see what this means. Scalable means that the technology is resolution-independent. So whatever the resolution it will look good. Vector means that the image data is described using mathematical coordinates, for example :

<path d="M 100 100 L 14 100
    L 120 140 z"/>

Finally, Graphics means that it’s used to create images.

So why should we use SVG? First of all SVG is very highly searchable because SVG images are really just interpreted XML files (just as web pages are interpreted HTML files), and XML is simply plain text. Secondly, like XML, SVG was designed in a modular way. This means that SVG provides strong mobile support. It comes in a few different flavors that are interoperable with one another. It does this by defining profiles to support low-end devices with reasonable quality while still providing high-fidelity content. Finally SVG is an open standard.

Browser Support

Browser support for SVG has been increasing for a long time, and within the past couple of years it’s picked up considerably.

• Opera has full support of SVG.
• Gecko has been supporting SVG from 2005 and nowadays Firefox supports the majority of features of SVG.
• Webkit started supporting SVG from 2006 and Safari (which uses Webkit as its rendering engine) has enough features supported that make the implementation usable.
• Internet Explorer…… Well you know does not support SVG. However recently  Microsoft have joined the W3C SVG working group. So there is some hope for the future.

Of course many us cannot ignore Internet Explorer. So what can we do? Here are a number of workarounds for IE:

• Rely on HTTP content negotiation to serve SVG to supporting browsers, and raster images to Internet Explorer. While this works reliably, it feels like 1995 again because you still need two separate pieces of content, unless you build one dynamically from the other. Wikipedia uses this technique.
• Make users install plugins. Adobe has one called Adobe SVG Viewer.
• Another solution is to use a cross-browser API. There are quite a few out there. For those who use Dojo there is SVG for the Dojo toolkit, svgweb is an experimental library by Google and finally there is RaphaëlJS. This is a stand-alone  and therefore can be easily mixed with other JavaScript libraries.

So how do these frameworks work. Fortunately SVG-writing JavaScript frameworks all follow the same paradigm:

• Provide a cross-browser JavaScript API for writing SVG commands, and
• Write the appropriate vector graphics language to the DOM nodes based on your commands (SVG to conforming browsers, VML to Internet Explorer).

Browser Testing on Windows 7

This week I installed Windows 7 on my laptop and I discovered a very nice feature for browser testing (on that browser you all hate 🙂 ). This is called XP Mode which allows you to run Internet Explorer 6, 7, and 8 all on the same machine.

Testing your web sites in Internet Explorer is so much harder than it should be. IE6, IE7, and IE8 have a healthy market share, yet it is impossible to test all three versions of the browser on a single machine. There are a number of software that allows you to test all 3 borwsers on one machine however they are all flawed and do not replicate the real environment, apart from the fact that the majority do not run on Vista, let alone Windows 7. The most reliable solution is to run each browser on a single machine.

How many of you use this solution? Very very few because nowadays web developers resort to using virtual machines such as VMware or VirtualBox. Virtual machines emulate a PC (guest) on your real PC (the host). You can also run a different OS on each virtual machine. The nice thing about virtual machines is that most of them are files on your hard disk and these can be moved, backed up, and even cloned easily on other PCs.

Installing Virtual PC and XP Mode

Please note that only users who have Windows 7 Professional, Enterprise, and Ultimate can install Virtual PC. For Windows 7 Home users can install Virtual PC, but they will need their own XP disk and you cannot use XP Mode Integration. For Windows Vista and XP users one can install Virtual PC 2007.

One must also note that to run XP Mode effectively one should have at least 2GB of RAM. It also needs hardware-assisted virtualization

1. Check Your PC’s compatibility
   To run XP Mode effectively, I’d recommend at least 2GB of RAM. It’ll probably work with less, but it will be more of a chore to use. XP Mode requires hardware-assisted virtualization (HAV). This is supported by most modern processors, but it may need to be enabled in your BIOS. The BIOS menu is normally accessed by pressing DEL or ESC immediately after switching on your PC. Microsoft also provide a useful HAV detection tool.
2. Download XP Mode and Virtual PC
   The downloads are available from the Microsoft Virtual PC page. After selecting your Windows 7 OS version and language, you’ll be presented with two download links:
   • Windows XP Mode
   • Windows Virtual PC

   Download and virus-scan both files before proceeding to the next step.

3. Installation
   You must install XP Mode first! I realize this seems a little odd, but it’s what you need to do. Once it’s complete, install Virtual PC and reboot your PC.

Running XP Mode for the First Time

Your new XP VM can now be launched and configured.

1. Start XP Mode
   To start XP Mode, choose Start > All Programs > Windows Virtual PC > Windows XP Mode. You’ll be prompted to enter the VM file location and a password for the XPMUser account—please keep the password safe!

   Click Next and you’ll be asked whether automatic updates should be enabled or disabled. I’d recommend disabling updates—you’ll have no need to automatically upgrade IE6 just yet. Click Next again and the XP Mode guest OS will install. After a few minutes, you’ll be presented with the fresh Windows XP screen.

2. Install Updates
   You should now install the latest updates, but be very careful to avoid installing IE7 or IE8! You could also remove any unnecessary Windows components, such as Games, Media Player, MSN Messenger, and so on from the Add/Remove Windows Components panel in the Add or Remove Programs control panel.
3. Configure the VM Resolution
   1. From the XP Start menu, click Run, enter mmc, and click OK.
   2. From the console, choose File > Add/Remove Snap-in. Select Group Policy Object Editor from the list and click the Add button.
   3. A dialog box is displayed and Local Computer should be listed in the Group Policy Object field. Leave as is and click Finish, then OK.
   4. Navigate to Local Computer Policy > Computer Configuration > Administrative Templates > Windows Components > Terminal Services, then double-click the Limit Maximum Color Depth setting. Choose Enabled and set Color Depth to 24-bit.
   5. Click OK several times to navigate your way out and close the console.
   6. Right-click on the desktop, choose Properties; select Settings and apply an appropriate screen resolution, such as 1024×768 in 32-bit color.
   7. Finally, from the VM menu, click Tools > Enable Integration Features.

The XP Mode VM runs at an unusual 960×600 resolution with 16-bit color. Unless it’s changed, IE6 and IE7 will also run in 16-bit color mode and your subtly shaded web application will look a bit strange. Changing the resolution and color depth is a little unusual because XP Mode uses Windows Remote Desktop. From the VM menu, select Tools > Disable Integration Features. This will log you off XP and you’ll need to re-enter your password. Then, follow this procedure:

Once you’re done, it’s important to fully shut down the guest XP OS—click the window close button, choose Shut down, then click OK.

Hard Disk Differencing

VMware has a great facility for taking a snapshot of a VM and creating multiple clones. Each cloned VM is independent but all inherit from the same base installation. VirtualBox also allows cloning. Virtual PC offers a facility called hard disk differencing, that allows you to create any number of VMs from an existing hard disk image. Unfortunately, any changes to the original disk image will corrupt all inheriting VMs. However, we can use differencing to create two new VMs from our XP Mode disk image. One VM will be used for IE6 and the other will be used for IE7. You need to do the following:

1. Create a New Virtual Machine: Start Virtual PC from Start > Programs > Windows Virtual PC > Virtual Machines then click Create virtual machine on the toolbar. Enter the name and location of your new VM, then clickNext.
2. Configure RAM: The next screen asks how much RAM your VM requires. 256MB should be enough for just running Internet Explorer. Enter the amount and click Next.
3. Configure Hard Disk: The next screen asks you to add a virtual hard disk. Choose Create a virtual hard disk using advanced options and click Next. Then choose the Differencing option. Click Next twice, then select your original XP Mode hard disk. This is a file named Windows XP Mode.vhd and is located where you originally installed XP Mode. Finally, clickCreate to save the VM and return to the Virtual Machines dialog.

Your new VM is now ready, but remember that you should create two: one for IE6 and one for IE7. Repeat the four steps above as necessary. Once your two VMs have been created, I’d recommend making the XP Mode hard disk file read-only (Windows XP Mode.vhd). That should ensure the file is protected from modifications if you accidentally boot your original XP Mode image.

Running IE6 from Windows 7

1. Start the Virtual Machine:  Start your IE6 Virtual Machine by double-clicking its icon in the Virtual Machines folder (Start > All Programs > WindowsVirtual PC > Virtual Machines). You’ll need to log on with the XPMUser ID and password you entered when installing XP Mode.
2. Configure XP and Internet Explorer: It’s a good time to change the VM screen resolution and configure IE6 as you want it. Developers should install the Microsoft Internet Explorer Developer Toolbar.
3. Copy the IE Shortcut:  Right-click the XP Start button and select Explore All Users. Any shortcut you copy into this folder will be replicated in the Windows 7 Start menu. Therefore, create or copy an IE shortcut as necessary. After a few moments, a new folder containing the IE6 icon will appear in the Windows Virtual PC Start menu.
4. Close the Virtual Machine: From the XP Start menu, choose Log Off. Close the window, but choose Hibernate from the drop-down list.
5. Start IE6 from Windows 7: Click Start > Programs > Windows Virtual PC, then locate the newly created VM folder, and click the IE icon. The first time IE is run, you will be prompted for the XPMUser password. Assuming you keep your VM hibernated, IE6 will start within a few seconds every time you click its icon.

The same steps must be repeated for running IE7. However you need to download and install IE7.

You can now run IE6 from one VM disk, IE7 from the other VM disk, and IE8 as a native application from the same Windows 7 desktop.

Caching: A Problem or a Solution

Caching is a very good technique to minimize load times and bandwidth use by ensuring that components in your site such as images, stylesheets, and JavaScript files are cached once by your visitors and they do not need to download them each time they want to access your site. However it is not the first time that you do an update in one of your stylesheets and some of your visitors do not see these changes.

So let’s investigate this problem. By default, cached files expire quickly. This means that while very frequent visitors might experience a problem with a cached style sheet immediately upon making a change, infrequent site visitors (visitors who do not visit a site every day) will not encounter a problem with cached content. However, it also means that visitors will often be downloading files unnecessarily, leading to longer load times and wasted bandwidth.

To decrease load times and decrease bandwidth you may want to tell browsers to keep these cached files for a longer period of time. But having done this, your site’s visitors may experience problems when you make changes to images, style sheets, or scripts. While showing an image that is outdated is not that harmful imagine if the HTML is updated and the JavaScript is not. This may break the functionality of your site. Below I mention a number of techniques that can be used to trick the browser into thinking that this is new content.

Modify File Name

If you change the name of your file the browser thinks that this is new content and therefore downloads the file. This however can be tedious if you have a lot of files or if you change the content often. However if you choose a good naming convention this could also serve as a version control.

Query Strings

One can add a query string to the file paths. Each time the query string changes the browser downlaods that file. For example you can include the verison number in your path such as “/css/styles.css?version=1.0”. This is also a very good technique for version control. The only problem with this technique is that if you use it with images you may also need to change all the stylesheets and HTML that reference that image.

The Path Method

In my opinion this is the best solutions. It basically includes the version information in the path of the resource, rather than in the filename or query string. So, for example:

<link rel="stylesheet" href="/css.v1/styles.css" type="text/css" />

Well I know what you are thinking that this involves as much work as renaming the file. Well no because there is a very neat solution to this problem. What we can do is use a rewrite rule to make the URL /css.1234/styles.css point to /css/styles.css on the server. For example to do this with Apache, you’ll need to use mod_rewrite. You’ll also need to have mod_rewrite installed and permissions for .htaccess files.  Setting up a rule for this is straightforward. You can add the following lines to the .htaccess file located in your site’s root web folder:

RewriteEngine On
RewriteRule css[.][0-9]+/(.*)$ css/$1 [L]

This rule uses a regular expression to match any path consisting of css, followed by a period (.), followed by any number of numerical characters, and finally a slash. Any path matching this pattern will be rewritten to just /css/<filename>. The [L] specifies that no further rewrite rules should be applied to this request.

Conclusion

No site can afford to ignore browser caching. Caching can significantly improve performance for your users, and save money on bandwidth while you’re at it. But as any other technology you can easily use it incorrectly. However if you use the methods above you should be able to use caching at your own advantage.

IE8: Does this mean IE6 will die?

With the release of IE8 many people are predicting that IE6 will not be used anymore. If this is true then web developers can drop support for IE6. However before one starts to believe this rushed assumption one must clearly understand why people are still using IE6. To better understand I will give a real example of why IE6 is still used.

I am currently working with a betting company which uses a very sophisticated and complex web application back end. This back end is extremely important for the company and without it the main web site where people make their bets will not function. Due to the importance of this tool during the development stage the developers gave more importance to the business logic behind it and therefore 4 years ago they did all their testing on one browser – IE6. Since this tool is used internally they could easily force the employees to use IE6.

This year management decided that a new back end should be developed and of course it will not run on IE6. However the point is that this scenario proves that people are still using IE6.

IE6 is still being used by 20% of the internet users. In fact the last time I checked on google analytics 20% of the traffic generated on our web site comes from IE6. So please be patient and continue supporting IE6 because it is still on the run.

Building a website the Big Brother way

Lately one of my friends wanted me to build a website for him. He has a business selling watches and he wants to take it online. Of couse I said yes. So you tell why should I care? Well I decided to go through the whole process with you. By whole process I mean from the design stage till its release!! So what does this include? Here it comes:

• Gathering the requirements.
• Designing the layout of the website.
• Developing the website.
• Setting up the website on a domain with a hosting company.
• Releasing it with a bang.

OK the requirements are ready. Basically he needs an online shop where he can sell watches. Orders will be received by email at his office and then his staff will prepare the watches for delivery by the salesmen.

So what’s next? The next thing we need to do is to design the website layout. In layman terms this means drawing the layout on an image so that the client can see how the website will look. After that we’ll show it to the client and pray that he’ll like it, if not we’ll do the necessary changes.

How will we proceed? Well in the next post I am going to do a tutorial on how to create a website layout with Photoshop, and guess what? The website layout will be the same layout I will show to the client! So until then download Adobe Photoshop CS4 from here (it’s a 30 day trial – if you like it then buy it 🙂 ), try to experiment a bit with it and then come back for the tutorial. Until then bye bye.