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).
Website Optimization
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.
First Impressions Count in Website Design – visual appeal, beauty and aesthetics, halo effect, cognitive perception, webpage judgments of credibility
Web users form first impressions of web pages in as little as 50 milliseconds (1/20th of a second), according to Canadian researchers. In the blink of an eye, web surfers make nearly instantaneous judgments of a web site’s “visual appeal.” Through the “halo effect” first impressions can color subsequent judgments of perceived credibility, usability, and ultimately influence our purchasing decisions. Creating a fast-loading, visually appealing site can help websites succeed.
Crop Images Contextually – image cropping techniques optimized jpeg gif & png graphics
Cropping and resizing your images for the Web is a common technique for creating smaller thumbnail images that download quickly. However, we’ve seen many sites that either use HTML’s width and height attributes to resize larger images, or minimally crop and resize their images to lose vital information (see Figure 1). A better way to create images optimized for the Web is to crop them contextually.
Refactor to Improve Code Design – software refactoring code to speed up javascript, java, and flash execution, download speed and coding changes
Refactoring is the art of reworking your code into a more simplified or efficient form in a disciplined way. Refactoring improves internal code structure without altering its external functionality by transforming functions and rethinking algorithms. Consequently, refactoring is an iterative process. By refactoring your JavaScript, Flash, and Java you can streamline its size, simplify your code, and speed up download and execution speed.
Sink the Splash Pages – improve bailout rates, credibility, and rankings by removing splash page screen
Splash pages are branding or branching pages that usually appear before the main home page of a site. Many splash screens are graphically rich to entice users to explore the site. Unfortunately, splash pages decrease credibility, traffic, search engine rankings, and web site performance. This article explores the effects of splash pages and offers some solutions to lessen the pain.
Use Server Cache Control to Improve Performance – apache web server settings for optimized caching with configuration files
Caching is the temporary storage of frequently accessed data in higher speed media (typically SRAM or RAM) for more efficient retrieval. Web caching stores frequently used objects closer to the client through browser, proxy, or server caches. By storing “fresh” objects closer to your users, you avoid round trips to the origin server, reducing bandwidth consumption, server load, and most importantly, latency. This article shows how to configure your Apache server for more efficient caching to save bandwidth and improve performance.
Get a Dedicated Server Hosting Your Web Site – web hosting dedicated host http compression server
A dedicated server is the next step up from a shared hosting environment. By moving to your own server you don’t have to worry about other sites slowing you down or crashing your server. Dedicated servers also give you total control over what software is installed your site, opening the door for additional performance gains.
Cut the Comments
Computer classes teach “structured programming” with well-commented code as one requirement of good programming practice. However, easily understood code doesn’t make for fast downloads on the Web. By cutting your comments you can shrink your XHTML, CSS, and JavaScript to download faster.