The Portable Network Graphics (PNG) format is designed to be a more efficient, flexible, and patent-free replacement for GIFs. PNG is designed to store a single bitmapped image to display over computer networks (1). PNG was created in 1995 as a response to Unisys’ enforcement of their patent on the LZW compression algorithm used in GIFs. While Unisys’ patent has expired, the reasons for switching to PNGs from GIFs remain (2). By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth.
Speed optimization
Don’t Let the Graphics Grinch Steal Your Christmas Bonus
By now most web developers, advertisers and executives know the mantra: slow web sites lose money. But what they may not know is how much of those losses are due to the single biggest common source of
site bloat: overweight graphics. So this season we have a little gift to help you remember how important it is to fix this problem on your site right away (unless you really want to send your business to your
competition). Herewith is this year’s mangling of Clement Moore’s “A Visit From St. Nicholas” (a proud tradition) and a sincere wish for a happy, peaceful and prosperous New Year to you and your loved ones.
With permission from our poetry mangler in residence, Bob Peyser….
The Interactive Effects of Website Delay, Breadth, and Familiarity – improve information scent in information foraging theory study
The negative effects of website delay are well known. Faster is better (Shneiderman 1984, Bouch, Kurchinsky, and Bhatti 2000, Galletta et al. 2004). The trade-off between breadth and depth in menu design has been studied extensively. Wider is better (Jacko et al. 1995, Zaphiris and Mtei 1997, Larson and Czerwinski 1998). User familiarity with terminology and structure in website design has also been studied. Familiar is better (Edwards and Hardman 1989). However, the interaction between all three factors has not been studied until recently. Dennis Galletta, Raymond Henry, Scott McCoy, and Peter Polak analyzed how familiarity and breadth dampen the ill effects of website delay by increasing the “scent” of the target page (Galletta et al. 2006). This article summarizes their results.
Use a Web Accelerator – reviews google web accelerator proxy server uses cache and gzip compression
Web acceleration software speeds up your web browsing experience. Web accelerators reduce latency and download times using various web performance techniques including caching and HTTP compression. We explore Google’s Web Accelerator to see how it works and the different options available to users and webmasters.
Optimize PDF Files – tips on pdf optimization to compress file size & optimizing pdf files – Acrobat 8 review
PDF optimization is often overlooked when creating PDF files for the Web. While PDFs have become quite popular on the Web, many PDFs used in web sites are designed for high quality print output and are not optimized for the Web. Even PDFs designed for Web use can have a wait problem, weighed down with excess fonts, change histories, and unoptimized images and forms. Optimizing PDF files for the Web can significantly shrink their size and boost display speed, saving bandwidth and user frustration.
Highlight the Current Page with CSS: The Body ID/Class Method – css tutorial on auto-selection of current navigation
“Danger, Will Robinson!” For those that remember the TV show “Lost in Space,” these words often ring true in the sometimes confusing world of cyberspace. When users navigate through your site you can help avoid those fateful words with “you are here” waypoints. This article shows how to automatically highlight menu items that correspond to the current page using CSS and XHTML. Using CSS avoids the need for complex JavaScript or PHP/JSP scripting which simplifies maintenance and improves performance.
Combine Images to Save HTTP Requests – use imagemaps on combined images with ismap usemap tutorial
One byproduct of automated image-slicing software is the plethora of images now populating the Web. As early as 2002 (King 2003) the average web page had over 24 embedded objects, with over half the total page size consisting of images. Today when we analyze web pages we commonly see 50 to 60 images per web page. The more round trip server requests you require in your pages, the longer and more indeterminate your load time becomes. One way to reduce the number of HTTP requests is to combine adjacent images into one composite image and optionally imagemap the links to different areas. This tutorial shows both client and server side techniques you can use to save precious HTTP requests and speed up your site.
CSS Overlays: Using CSS Positioning to Overlay Web Objects – css layout tutorial
An overlay is when one web object overlaps another. Overlays are often used to highlight or draw attention to important items on websites to raise conversion rates. This article shows how use CSS positioning to avoid slicing and dicing your overlays and assembling with tables. Along the way we’ll look at the workarounds we used to make the technique work with different browsers (most importantly IE5.x Mac and Safari).
Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace tables with css layout form tutorial
In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible.
Bookend Lists: Using CSS to Float a Masthead – replace tables with css layout list tutorial
A common visual element in many websites is to position two blocks of content on either end of a navigation bar. The left block of content typically displays global navigational tabs or drop-down menus. The right shows today’s date or perhaps a simplified search form. This article shows how to create a “bookend” look with elements on either end of a box using CSS-styled lists. This CSS-layout technique saves a significant amount of HTML code over table-based techniques. Tests with working code yielded savings in page size ranging from 30% overall to over 73% for the HTML code alone.