Create with HTML 5 today
HTML 5 is still in draft (Editor's Draft 5 June 2010), however if you are looking to create sites that implement some of the new proposed features then why not use some of these APIs today.
Examples of CSS 3
- iphone icons in CSS3
- CSS AT-AT
- Web Designer Wall CSS 3 examples
- 10 Amazing Examples of Innovative CSS3 Animation
- Continue reading
- Filed under:
- Web design
- html5
- webdesign
XMLHttpRequest Object methods
| 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. |
- Filed under:
- Web design
- AJAX
- JavaScript
IE AlphaImageLoader filter and browser memory usage
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).
- Filed under:
- Web design
IE and CSS :focus
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.
- Filed under:
- Web design
- CSS quirks
- IE
Find a Font
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.
- Filed under:
- Web design
- Fonts
Creating a Google Sitemap in Movable Type
Google have started a new (June 2005) project called Google Sitemaps. The idea behind it is to give the Googlebot a helping hand when indexing your website. We are told that by adding a sitemap we allow for more efficient and tailored searches. Allowing the search engine to harvest links that it may otherwise miss.
According to Google using a sitemap will not give higher search rankings and still does not guarantee search placement.
So now for the technical bit. A site map is basically an XML document made up of links (URL's) from your site, obviously the more links the more accurately it will map to your website.
- Continue reading
- Filed under:
- Web design
- SEO
- Sitemap
Clean web applications with Ajax
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知 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.
- Continue reading
- Filed under:
- Web design
- AJAX
HTML Email and CSS
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稚 want html emails overriding their own sites style definitions. They will also remove <head>, <body>, <HTML> tags as they don稚 want duplicates within the applications web page.
Further reading on this subject can be found:-
- Filed under:
- Web design
- CSS
Blinking IE 6.0
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:-
- http://dean.edwards.name/my/flicker.html
- http://www.fivesevensix.com/studies/ie6flicker/
- http://wellstyled.com/css-nopreload-rollovers.html
- Filed under:
- Web design
- IE
Create a favicon
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.
- Filed under:
- Web design
Colour and the Web
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
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.
- Filed under:
- Web design
- UI design
- User Interface
- Widgets
A Madcarrot in the Zen Garden
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'.
- Filed under:
- Web design
- CSS
- CSS Zen Garden
- Web design
Colour-blind awareness
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
- Filed under:
- Web design
- Colour
A value driven Intranet
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.
- Filed under:
- Web design
Textpattern 1.0
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.
- Filed under:
- Web design
Spidey sense
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
- Filed under:
- Web design
CSS tooltips
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.
- Continue reading
- Filed under:
- Web design
- CSS
A list of definitions
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>
- Filed under:
- Web design
- CSS
- Definition Lists
- Web Standards
An eye for usability
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.
- Filed under:
- Web design
- Usability
- User Interface
Glass buttons
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).
- noxcel
- v4images
- idigitalemotion
- graf-users.edu.ats.dk
- photoshopcafe
- robouk.mchost.com
- Mac Pill tutorial
- kenjun.com
- biorust
- killer-bunnies.com
- Filed under:
- Apple
Web design practices
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.
- Filed under:
- Misc
- HCI
- Usability
- User Experience
- User Interface
- Web design
Search engine tools
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.
- Filed under:
- Misc