Griffin Interactive: Web design Archives

Internet Explorer and 24-bit Alpha transparent PNGs

July 21, 2006

Everybody knows that Internet Explorer cannot render 24-bit alpha transparent PNG's. Which is a shame because drop shadows and rounded corners are so en vogue at the moment (2006).

There is a way to use a Microsoft filter within your stylesheet so that PNG's are rendered correctly, the trouble is this is quite resource intensive (uses up your computers memory) and if you use Anchor tags or even form elements like text input boxes then they won't work.

There are however a couple of sneaky hacks that can help.

The following shows how Internet Explorer has problems with form elements and filters when used together.

Example 1 - The problem

Form elements are unusable

Example 2 - The work around

Use a 24-bit alphtransparent image as it is but force the input elements to be relatively positioned with a z-index of 0.

	
    #filter-example-2 label, #filter-example-2 button {
	  position:relative; 
	  z-index:0;
	 }

Example 3 - Another work around

Use a 24-bit alphtransparent image 1px x 1px.

We can't repeat the image (i.e. repeat-x / y) but we can scale it using the filter

XMLHttpRequest Object methods

July 15, 2006

Description of the Methods and Properties used to make up the XMLHttpRequest Object
Method/Property	Description
abort()	Stops the current request.
getAllResponseHeaders()	Returns the response headers as a string.
getResponseHeader("headerLabel")	Returns a single response header as a string.
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	Initializes the request parameters.
send(content)	Performs the HTTP request.
setRequestHeader("label", "value")	Sets a label/value pair to the request header.
onreadystatechange	Used to set the callback function that handles request state changes.
readyState	Returns the status of the request:
	0 = uninitialised
	1 = loading
	2 = loaded
	3 = interactive
	4 = complete
responseText	Returns the server response as a string.
responseXML	Returns the server response as an XML document.
Status	Returns the status code of the request.
statusText	Returns the status message of the request.

IE AlphaImageLoader filter and browser memory usage

April 12, 2006

The AlphaImageLoader filter does allow basic rendering of alpha transparent PNGs within the IE web browser, however heavy usage does come with a price in memory usage.

"If your webpage does use images with transparency, then the performance difference will depend on how many of those images are present, what size they are, and how they are drawn". (Quoted from the IEBlog).

Take a look at challenger.se the site uses a number of Alpha transparent images, including the ability for the users to drag images around the page. The author of the site has noticed a few issues when supported Internet Explorer.

I have noticed that IE doesn't free up the memory usage of a filter allocates, even though the element/object its attached to is "deleted"/removed dynamically. This should be taken care of. Otherwise, single-page-navigation-pages allocates very much memory fast.

A change of css-properties will cause IE to re-download any background-images it has attached to the element, event though the background property isn't affected. The "event" bubbles to parent elements as well, which causes additional download. I think this has to be fixed soon, obtain a high priority. (Quote from the Swedish author).

Further reading: AlphaImageLoader filter problem

IE and CSS :focus

August 16, 2005

CSS gives us (the web designer) the ability to add a pseudo class called :hover and :focus, however Internet Explorer does not support such functionality, and therefore you cannot tell if an anchor tag is legitamately chosen.

relativelyabsolute.com
shows us how we can get around this, using a .htc file (cssfocusandhover.htc) we can add the functionality to our web site. It is not ideal and if you have a large stylesheet it wont work at all.

So what does it do? the .htc file reads all your external stylesheets and replaces any instance of :focus / :hover with a JavaScript alternative.

Don't take my word for it, give it ago, and try to extend the functionality too.

Find a Font

August 05, 2005

If you find you need to track down a font on the web just how do you go about doing it?

I combine the resources of these two websites to discover a font that I need to work with.

Identifont lets you discover a desired font, its wizard allows you to add more information about the font in the hope that you can get to download the original.

What the Font is even better at tracking down the original font. Simply upload an image of text, and the sites recognition software trys to trackdown the original font. That is extremely useful.

Clean web applications with Ajax

February 25, 2005

Adaptive path have created a new buzzword called 'Ajax' (Asynchronous JavaScript + XML), and they say it is 'A New Approach to Web Applications'. However I tend to disagree to a certain extent.

Web applications have been using asynchronous client to server communications for years, we have used Javascript to Java (server side) communications and Java Applet to Server side communications.

I remember working on a theatre booking website (back in 1998) where by we used an applet in a pixel wide frame, it was used to manage communications between other frames and back to the server. Looking back it was so difficult to maintain; a number of frames in a frameset all talking to one another via the main applet controller. If I remember rightly it was also rather slow.

So with Ajax I feel we are revisiting old ground, however with improved bandwidth and better implementation methods we may be able to bring this idea of web application development back to life.

To sum up, I’m still wary of maintenance issues in web applications that use Ajax. Surely by using an MVC server side framework it will be easier to maintain, as this would deter the developer from using client side logic which is so often difficult to test and maintain in the long run.

Methodologies that make up AJAX

Ajax

standards-based presentation using XHTML and CSS;
dynamic display and interaction using the Document Object Model;
data interchange and manipulation using XML and XSLT;
asynchronous data retrieval using XMLHttpRequest
JavaScript binding everything together.

Related articles

HTML Email and CSS

January 17, 2005

Like it or hate it HTML email appears to be here to stay. Personally I'm not a big fan, but if you are trying to push your content for publicity it is more captivating than a plain ASCII email.

Anyway getting to the point, it seems the consensus that, most email browsers, as you would expect, do not support the latest design standards, especially the use of CSS2. To deliver a well presented HTML email you are almost entirely forced to use tables and embedded style, for example old font tags which define colour and background colours.

Some email clients remove inline style tags entirely, and obviously online web based email sites such as gmail or hotmail will not accept (and should not) embedded html style. These online email clients strip out style sheet definitions from the email message, as they don’t want html emails overriding their own sites style definitions. They will also remove <head>, <body>, <HTML> tags as they don’t want duplicates within the applications web page.

Further reading on this subject can be found:-

Blinking IE 6.0

December 07, 2004

I noticed this a while back, when attaching a background image style to an anchor tag with a hover event it causes IE 6.0 to flicker when the hover action is triggered.

The reason the flicker occurs is because the browser (IE 6.0) requests the image from the server each and every time you rollover the image. Not only is the flicker annoying it also creates an unnecessary load on the server.

One solution detailed by Dean Edwards is to add the following to your htaccess file in apache.

ExpiresActive On ExpiresDefault A18000 ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000

This forces the server to tell the browser to cache the images, for a certain time period, however it does require apache and the 'expires_module' to be loaded.

Another solution as mentioned at fivesevensix.com is to buffer the image by placing it in the containing element and the anchor.

/* double buffer the image by placing it on BOTH the 
containing element and the anchor */ 
#nav dt.share {
width: 164px;
background-image: 
url(/images/home_share.gif);
}
#nav dt.share a {
background-image: 
url(/images/home_share.gif);
}

/* using the pixy double image method, so move the image around on :hover */ /* Note: this is one of the causes of flicker, but we don't see it because it's double-buffered */ #nav dt dt.share a:hover { background-position: 0 23px; }

Further references:-

Create a favicon

November 24, 2004

I've downloaded a number of freeware tools to create favicons in the past, however here is an even simpler way of creating a favicon.

Simply upload your image at chami.com a voilà, there you have it your very own zipped up favicon.ico.

Colour and the Web

April 21, 2004

Donald Johansson of webwhirlers.com has written an article that gives an in depth look at the use of colour and website design. It includes a colour wheel tool and a colour wizard that displays complementary colours on entry of a colour hex value.

UI Utopia

April 06, 2004

Christina Wodtker the person behind the site eleganthack.com and the founder of the online magazine boxesandarrows.com has created a 'blog' style site dedicated to Widgets and UI element design.

The site details many important design techniques used in web design, from the simplicity of alert feedback to pagination and link styles.

I think Christina is using this blog to document website styles that she feels are worth remembering, (very much like an artists scrapbook) and im blogging it here for my future reference too.

A Madcarrot in the Zen Garden

March 26, 2004

Back in May 2003 I blogged an entry about the CSS Zen Garden, its only taken me about 10 months to submit my own (which isn't too bad, I guess?).

It didn't make an official entry, but at least it was categorised under 'Fun'.

Colour-blind awareness

March 21, 2004

There are a few good tools on the web that can help you (the designer) see your website design from the perspective of somebody that has a colour vision deficiency.

Here they are:-

Vischeck -(Photoshop plugin)

Color Vision

ColorMatch Remix

A value driven Intranet

March 02, 2004

Shiv Singh of Boxes and Arrows writes on how to define a 'Value-Driven Intranet'.

The article attempts to brush past the current Intranet related buzz words and encourages the designer to focus on the customer (employees) requirements. This may mean building an Intranet site that consists of tailored core services specific to individual business needs, but in the same instance not too narrowly sighted that these services are seen to be catering to an individual team, as this may create the opposite affect and encourage the growth of silos within the organisation.

As a result of creating smaller focused services the Intranets overall success and effectiveness will be difficult to quantify. Raw website hit results should not be used to measure the Intranets success but instead overall project efficiency should be observed so as to evaluate if the core Intranet services are being utilised. These observations can then be used to refine and define future services for the Intranet.

Intranet objectives such as increased employee communication, collaboration, and knowledge management are hard to quantify and measure. As a result, some corporations choose to establish tactile goals in the form of metrics such as page views, total hits, and customer satisfaction ratings. This approach is not effective for understanding and measuring the value creation driven through your intranet. Measuring the value is difficult, as the intranet's greatest benefits to an organization are not in a measurable, packaged, and corporeal form.

Textpattern 1.0

February 25, 2004

Is it time to move over to a new type of CMS?

This month sees the release of the long awaited CMS app called Textpattern by textism.com author Dean Allen.

Looking at the application sreen grabs the frontend looks very similar to Movabletype with added features including secure articles / areas and rss feed subscription for visitors.

Spidey sense

February 02, 2004

Here is a useful online tool called Spider Simulator (does'nt work properly on Mozilla), it reminds me very much of the Web Page Analyzer by Andrew King. Except it also gives your web page a rating on other things such as keywords and meta tags, these tags are useful to meta type search engines such as metacrawler

CSS tooltips

February 01, 2004

Create tooltipsA ToolTip is a descriptive text box that appears when the mouse pointer is held over a tool, button or other object using the technique demonstrated at madaboutstyle.


a.info{

    position:relative; /*this is the key*/

    z-index:24; background-color:#fff;

    color:#000;

    border-bottom:1px dotted #999;

    cursor: help;

    text-decoration:none

}


a.info:hover{

    z-index:25; background-color:#ff0}

    border-bottom:1px dashed #999;

    text-decoration:none

}


a.info span{display: none}


a.info:hover span{ /*display just on :hover state*/

    display:block;

    position:absolute;

    top:2em; left:2em; width:15em;

    border:1px solid #999;

    background-color:#ECECEC; color:#000;

    text-align: center

}

A list of definitions

January 31, 2004

Russ Weakley of Maxdesign has written an article all about html definition lists. It includes possible uses for these rarely used tags, and also gives examples of use with great styles.


                <dl>

		    <dt>Winter</dt>

		    <dd>Cold and dark</dd>

		    <dt>Summer</dt>

		    <dd>Warm and bright</dd>

		</dl>

(W3C definition list specification)

An eye for usability

January 29, 2004

The Usability Company used eye tracking technology to determine users web page behaviour.

Studies found that people in general navigate websites following similar patterns. For instance we all prefer to browse information that is formatted vertically as opposed to horizontally, much like the formatting of a magazine and newspaper. We also prefer single lines of text instead of large paragraphs.

The study also discovered that site visitors focus on the center of the webpage first and then track up to the top left hand corner where they expect to find a navigational point or site logo.

There is also mention of the fact that the most successful sites on the web follow a similar layout of left hand navigation and a clickable logo in the top left hand corner. However the report did not mention whether these users where new to web page browsing or frequent users, in which case these users would expect the navigation to be on the left as this is the most common layout.

The report is available as a PDF download from The Usability Company website.

Glass buttons

January 18, 2004

There are so many sites of late that give a Mac type look n' feel with their glass design buttons.

Here are a just a few sites that document the creation of such ideals (google search word is Mac pill button).

Web design practices

December 12, 2003

Webdesignpractices.com is an interesting site that studies various HCI design practices, the articles are backed up by real-life research and therefore is not just based on a single persons opinion.

Search engine tools

December 11, 2003

There are a host of very useful search-engine utilities available at searchengineworld.com these include a webpage size checker, search engine result predictor (like Poodle Predictor), Keyword Density Analyzer and more.

Also see this site webconfs here you will find links to a search-engine spider simulator, back link checker through Google, and a similar page checker.