Creating an Apple Style Menu with Animation

Jul 28

ClaudeFeatured, How-To, Tutorials , , , , , No Comments

Kriesi Budschedl has posted a very detailed tutorial to help you build your own Apple.com style menu and adds a nice touch by animating it.

To construct the basic menu, Kriesi takes advantage of CSS Sprites, a technique to reduce the number of image files necessary to accomplish things like rollovers, without the need to preload the images using JavaScript.

A single image contains all the navigation menu options in their normal and active states and CSS rules are used to move the appropriate menu option into view. Once the basic menu is working, animation is added by using Kwicks for jQuery, a plugin written by Jerry Martin, resulting in the final product seen here.

Improving Performance by Combining Scripts and CSS

Apr 09

ClaudeHow-To , No Comments

According to the Yahoo! performance team, the best way to improve your web site’s performance is to reduce the number of requests for assets such as scripts, style sheets and images. One way to accomplish this is by combining all the script files into one and serving only that file in your production environment. The same approach can also be applied to cascading style sheets.

The guys at Cozi have created a server side solution that takes the pain out of combining these files in some sort of intermediary build process. Here is how they go about doing it:

<WebClientCode:CombinerControl ID=”CombineScript” runat=”server”>

<script src=”script/third-party/jquery.js” type=”text/javascript”></script>

<script src=”script/third-party/sifr.js” type=”text/javascript”></script>

<script src=”script/third-party/soundmanager.js” type=”text/javascript”></script>

<script src=”script/cozi_date.js” type=”text/javascript”></script>

</WebClientCode:CombinerControl>

The combiner outputs a reference to an Http Handler which will serve the combined file:

<script src=“../Combiner/Combiner.ashx?ext=js ?
&ver=59169b00 ?
&type=text%2fjavascript ?
&files=!script’third-party*jquery*sifr*soundmanager*!script*cozi_date*” ?
type=”text/javascript”></script>

Although they do not provide the source code for the ASP.NET control, they do point to an old article on Vitamin, Serving JavaScript Fast, that served as their inspiration.

Personally I prefer combining the files before they get pushed to production in a build process, as doing it while the client may introduce unexpected delays depending on the traffic load a any given time.

What do you do to improve performance on your web sites?