RSS

Category Archives: web design

>Smooth web image zooming with FancyZoom

>

FancyZoom is a JavaScript library for zooming into images on a web page. It looks really well, zooming images smoothly when you click on them. And then when they show, they get a shadow effect applied.

The library works with most modern browsers: (Mobile) Safari, Firefox, IE6/7 and Opera are reportedly supported, but no word of Konqueror (KHTML). See it in action on here:

FancyZoom is free for non-commercial use. To use it commercially, the author asks $39 per site.

FancyZoom 1.1 comes with for 2 JavaScript files (34 KB) and 15 PNG image files (100 KB), which sums up to 134 KB. With current broadband connections it should not be a problem in itself, but it may add up to the total download size for a web page, especially for first-time visitors. Note that a compression tool like YUI Compressor may tighten the file sizes a bit.

 
 

>Opacity 1.1 released

>

If you’re creating iconic graphics, either for desktop applications, mobile apps or the web, and you’re lucky to be using Mac OS X 10.5 (Leopard), then Opacity is definitely a contender for creating those nifty looking images.

Opacity is simple, intuitive but still very powerful when it comes to creating small graphics. It supports layers, different kinds of shapes, all sorts of effects and integrates with a couple of FTP programs.

The user interface works mostly consistent with the rest of Leopard.

Have a look at the screencast on their site.

 
Leave a comment

Posted by on 7 May 2008 in apple, graphics, leopard, mac, macos, macosx, png, web design

 

>Decorations 1.0 released

>Anthony Goubard (of Ant Commander fame) has released Decoration 1.0. It’s an interesting Java-based application for graphical designers that makes it easy to apply all sorts of effects (100+) to graphics and text, including gradients, drop shadows, glow, etc.

What makes it attractive for professional use is that it supports a batch mode, for processing hundreds (or more?) of images sequentially.

For more information check out the screenshots section or the gallery.

 
Leave a comment

Posted by on 25 April 2008 in design, graphics, web design

 

>Visualize site visits with CrazyEgg

>Want to visualize your website visits? CrazyEgg is a service that shows your website with an overlay that indicates where visitors clicked. Quite nice. Best of all, the cheapest version of CrazyEgg is free!

Crazy Egg helps you identify where people click on the page, as well as compare different versions of the same page. Although the options seem to be limited, the basic functionality is quite powerful.

Downside for your visitors is that your site needs another DNS lookup and then pulls in a 23.7K JavaScript file.

CrazyEgg does not seem to integrate with other tools, such as Google Analytics.

 
Leave a comment

Posted by on 27 August 2007 in web design

 

>Emulate an iPhone [updated]

>Want to know how your web application will look and work on an iPhone, but you don’t own one?

iPhoney emulates an iPhone on your Mac OS X 10.4 installation. It uses WebKit for rendering, the engine that is also used by Safari.

Overall, iPhoney is quite nice. Here are some features that would improve it even further:

  • support iPhone-like scrolling and zooming, without scroll bars;
  • improve the zoomed out view so it looks accurate (this may be a WebKit problem instead of an iPhoney problem and may apply to the iPhone as well);
  • by default apply the iPhone user agent string, instead of a generic WebKit agent string;
  • although Flash is not displayed, when querying the installed plugins from JavaScript, Flash is indicated as installed (if it is installed in Safari).
 
Leave a comment

Posted by on 27 August 2007 in iphone, iphoney, mac, macos, macosx, web design

 

>Improve website performance with Yslow

>
A while ago I blogged about Firebug, a great Firefox extension for analyzing web pages (including CSS and JavaScript) and the interactivity between a browser and web servers.

Yahoo! have built on Firebug to produce a tool that goes even further. They call it: YSlow for Firebug.

Based on “Thirteen Simple Rules for Speeding Up Your Web Site” YSlow analyzes a web page, produces some reports (with a score card) and gives advice on improvements. This can be a great help in improving your website’s performance and reduce it’s bandwidth usage.

Also see this blog entry:

 

>CSS: Combining text replacement with mouse hover underlining [updated]

>
In website-design, the CSS text-replacement technique is well-known (see for example the article on the subject at Stopdesign).

What I have not seen elsewhere, though, is a technique to make sure the text is not only replaced, but also shows an underline when the mouse is hovered over it, for a typical hyperlink-effect.

Consider the situation where you want to show a header in a special font (which visitor probably won’t have). and you want this header to be clickable. You want the header text to become underlined when hovered over with the mouse, to clearly indicate this is a hyperlink.

The solution is very simple:

  1. make sure your replacement images are placed on a background that has a plain color;
  2. paint the background in your images with the same background color;
  3. in the image, make all pixels transparent that should show up as the underline;
  4. in the CSS, set the background of the images to match the background color;
  5. in the CSS, add a :hover rule that changes the background color for the images to match the text color (instead of the background color).

For a working example, check out this site:

Update (July 23, 2007): Note that in order for this hack to work with PNG images under MSIE 6, you will need to save the backgroud color in the image and use an indexed PNG.