45: Speed up your website and increase conversions

http://www.modernblue.com/web-design-blog/

Speed up your website and increase conversions: quotation
"Something I have been thinking a lot about lately is website speed. The load times for one of my largest clients, OverstockDrugstore, were getting worse by the day. It was due to an increased amount of traffic coming to a website that wasn’t properly tuned. After taking a very aggressive approach to decrease load times, conversions (sales) increased by 1-1.5% on days following. It blew my mind (and others at the company) that load times would have a direct impact on conversions."

"If you think about it. it makes sense. 75% of their website visitors are new. So, they are visiting and experiencing the website for the first time. Also, many of them are coming from price engines. Most likely when they do a search on an engine, they go down the list clicking on each link. If the page loads slower than the other sites, they may either loose confidence or at least get a little impatient, which would cause them to choose someone else."

Another link:
http://www.roscripts.com/How_to_speed_up_your_website-175.html

44: OF LATE, WE HAVE GROWN FAT

"Yet in the past few years, as wideband became the norm, every mainstream site and its brother started acting as if bandwidth didn’t matter. Why use 1K of web form when you could use 100K of inline pseudo-Ajax? Why load a new page when you could load a lightbox instead?

Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.

As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.

So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank."

http://www.zeldman.com/2010/04/11/of-google-and-page-speed/

43: A few nice web tools online

Color contrast verification tool
Calculate a measure of readability
http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html

staircase gradations generator
http://slayeroffice.com/tools/color_palette/

Page Credibility
http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Evaluate.html

Free Web Performance Assessment
http://zoompf.com/free

http://tools.pingdom.com/fpt/
The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars.

42: Expectation Threshold 2 to 3 seconds

"Today’s web applications are more content and feature rich than ever, providing an interactive user experience. In addition, users expect these applications to be delivered immediately on a variety of fixed and mobile devices and browser platforms. A recent Forrester study found that “two seconds is the new threshold in terms of an average online shopper’s expectation for a web page to load, and 40 percent of shoppers will wait no more than three seconds before abandoning a retail or travel site.” Google has publicly stated that a half second delay in load time results in a 20% drop in ad revenue, while Amazon has found that a tenth of a second delay causes a 1% drop in sales. Now more than ever, slow page load times translate into lost customers and revenue. In addition, companies can save significant hardware, software and bandwidth costs by improving application speed."
http://www.businesswire.com/portal/site/home/permalink/?ndmViewId=news_view&newsId=20100621005528&newsLang=en

41: Online Button Makers

These links are helpful for when you are in a hurry or need a shortcut to produce a quick button. The output files are not optimized and can easily be reduce in half. This example was 9K after download and reduced to a 2.4K 8-bit PNG file. Creators of "microsites" have statistics showing larger "action" buttons, like "download" or "buy now," get better clickthru when they are large and use 18 point type (approx 18 px.) This example is 18 pixel font size.

http://www.buttonator.com/

http://www.lucazappa.com/brilliantMaker/buttonImage.php

http://creatr.cc/backgrounds/

40: Get To The Point

In the last entry, "Web Impatience", the quotes reinforce my philosophy of just publishing a "product or service positioning statement" on the home page and including simple navigation with minimum decoration. The user wants to know immediately what the point is of your website. "What's in it for me?" "Why should I care?" There must be instant recognition, simplicity, and clarity of why to stay or explore. Most home pages have too high of information density --aka clutter. Or in design language, "Emphasizing everything means emphasizing nothing." These bad habits slow page download time and visitor comprehension.

The more focused the site the easier to optimize. General purpose, generic, "authority" websites do NOT fill the needs of information seekers. Smaller fast sites are the solution. Distributed information prevents information overload. Don't present one bloated centralized site with 1,000 pages --rather 100 small sites that answer specific problems. It's time to break up big sites into separate URLs based on market need. This makes information easier to find. Severe self-imposed limitations are needed to avoid visitor "boredom factor", eliminate poor usability, and improve information findability.

39: Web Impatience

I did some studying about "web impatience." Here are some good links:

Web Visitors vs Users, Impatient vs Bored and how they affect Website Change Management
And some quotes:
Functionality vs Visual Design
"For the most part, functionality wins over visual eye candy with users. Business users routinely put up with desktop applications that do what they need without swooping curves, dripping in glass buttons and subtle gradients. There is however a growing expectation of a minimum level of visual design on the web. Maybe this  makes up for the fact that sites still rarely deliver everything a user wants."

The Impatience of Web Users
"According to the BBC, web usability guru Jakob Nielsen's latest report finds web users less tolerant and patient when it comes to web sites.
Some key quotes from Dr Nielsen in his BBC piece
"Web users have always been ruthless and now are even more so.."
"People want sites to get to the point, they have very little patience.."
"I do not think sites appreciate that yet,they still feel that their site is interesting and special and people will be happy about what they are throwing at them."
It's a big challenge for brands to get their emotions, richness and feelings across, when all a user wants to do is find out the price of a product.
I guess this is all about options and navigation, allowing the user to get to a place fast if they need to, but according to Dr Nielsen, most want to take the expressway."

Impatience rules the day online
"Few business web sites achieve this. They often provide a general summary and navigation which is difficult to penetrate. There is often some kind of company history on the front page and few obvious ways in which the visitor's issue is solved.

Nowadays, people are looking for instant solutions to specific problems. That means, for instance, that you can no longer have a web site that covers your topic of, say, marketing. Instead, you are going to need specific pages or sites that cover things like, "how to get more interest in postcard marketing in London". In other words, your web site offerings are going to have to be very, very specific.

Gone are the days of looking for millions of visitors to your web site. You now have to think of having millions of pages that target individual users. It is a complete reverse of where most businesses currently sit in terms of thinking. Most business web sites are being put together with the principles learned on the web in the late 1990s and the early years of this Century. Web users, though, have moved on. It's time for businesses to catch up."

38: Image Optimization Links

Image optimization and compression: tools, tips and tricks

Web Design Tips - How to Optimize Your Website's Graphics For Speed

Online image optimization, or taming robots

25% smaller PNG files

Nicole Sullivan: "Design Fast Websites"

Note: To get it right, you have to be brutal with images. You will notice the difference but the audience only will if they are designers and even then they may not.

37: Optimizing a simple Frame landing page

This project is a simple website for a local print shop. First, I've used an  existing color theme based on their business identity of red, black, and white. I don't usually go for "pitch black" backgrounds. I prefer a dark gray because it's easier on the eye. But the identity IS "pitch black." This makes for a power theme and I'll stick with it.

Images
Next, a GIF logotype is Adobe Garamond and also mimics their business card. The logo in the gray column is the only image file on the page presently. My goal is to use some greenery combined with light and shadow to decorate the page without loading it down too much.

The Logotype

The logo started as an untrimmed 2K GIF and then was optimized using SmushIt -- an image compression tool found in YSlow for Firefox. The final was 1.7K. Not a big savings but by minifying the landing page code another 1.5K was saved. This reduced the 15K page down to 12K or less. A near 21% savings. Most pages don't matter this much --but this site is using the GoDaddy Hack which slows download loading speed --and we don't have PHP-GZIP compression. So every detail helps. No reason not to do it. Googles Firefox addon PageSpeed generates minified code for you to install in your pages.

No Positioning Statement?
Normally, I'd prefer a positioning statement to a slogan, but design is sometimes a compromise. The page is liquid and can be "squeezed" to 800x600 pixels and still be readable and show everything. If elements disappear or are covered up, then the page is considered broken. 1024 x 768 px is the minimum but I thought I'd push it one notch further. Above is shown 1220x900 px.

Plain Jane

So the site needs some sprucing up now. We add the following image files:

1) A 2K JPEG, 30Q, lens flare with glow, CSS background image in the top left corner of the main frame.

2) A 2K, 32-color depth, GIF tiling gradient, CSS background image in the NAVBAR.

3) A 5K transparent GIF, 16-color depth, CSS background image in the gray column bottom right.

And here's what the additional 9K image elements look like on the page:

The 21K results: View it live.

Postscript: I added a aerial location shot to the page. 7K JPEG 30Q. Upping the pageweight to 28K.

36: Large Backgrounds

As a best recommended practice use CSS screen-centered large images, above 1700 pixels in width to cover almost 95% of the display sizes available today. The best solution is to blend the images’ corners into the background HTML color, so that users with larger screen resolutions won’t notice it. This eliminates the hard edge if visible. With HTML Frames, you only need to fill one frame so the image size can be reduced accordingly as a percentage of full-screen.

When I'm doing a depth of field (DOF) effect, I'll blur the background image and use a JPEG quality setting of "1." Yes. I said "one." This makes the floating images the emphasis. The top images can be sharp and in-focus --but smaller duplicates or crop of the background image. A repeated image --one fuzzy, one sharp.

How to: CSS Large Background

Backgrounds In Web Design: Examples And Best Practices

35: light and shadow effects for websites

5 Simple Tricks To Bring Light and Shadow Into Your Designs

1. Using A Light Source

2. Gradients

3. Highlights (horizontal rules)

4. Basic Shadows

5. Advanced Shadows

16 Great Photoshop Light Effect Tutorials

Examples: the splash screens from Linux Ubuntu 9.x and 10.x. These type of abstract screens can be made to be very lightweight.

34: Julia Mumford .com Continued Decorating Philosophy

In entry 15, I rebuilt Julia's site for speed making it 17K with a 50K background image = 67K.

The Original (where we left off. Boring!)

I decided to apply the "tradeshow booth" formula I described in entry 27. The simple elements are 1) color, 2) foliage, 3) lighting, and 4) legibility.


Color
The color theme was determined previously --and I wasn't going to change it but I did enhance the palette with a sampled yellow.

Foliage

I selected a shot by searching on "purple flower" at stock.xchng - free stock photo site. The original image is shown below and was 3.7MB. Very large!

I then cropped and optimized the image as a 30Q 17K JPEG.

This was then placed as a HTML Table cell background image with an inline style. This allowed HTML type to float above the background.


Lighting (depth and shadow)
A 13K GIF 32-color gradated "string tile" was created to use as a CSS background image. It repeats in the x-axis at the top of the page.

Legibility

The HTML Times New Roman "Julia Mumford" title was black and horsey. It was hard to read. Adding a inline Style highlight with a yellow #FFCC33 sampled from the flower made it pop and allowed the type size to be reduced significantly.


BEFORE- black large type over photo

AFTER- smaller black type on yellow floating over photo

The Julia Mumford website now appears more attractive and actually weighs less than it did (46K) --a bonus. What needs changing now? Those carrots no longer seem to match the theme --a pot of steaming food would be more appropriate, Maybe next time?

Stretchiness

The page is extremely liquid as shown in the image below. And the window can collapse even further and still not break. Try it live.

33: Helping The Client

A significant amount of my time is spent in educating, coaching, or hand-holding the client and gleaning web content from their "on-hand resources." Building the site is the easy part. My focus is producing forms and shortcuts to help clients quickly assemble material (reduce the learning curve.)

Of a 6-week website production period, about 2 weeks is spent waiting on the client --30%! Room for improvement.  Trimming decision-making is the first focus. Ultraspeed limitations help. Now my focus is helping the client make decisions on what's important and what isn't. I can produce custom sites for very little money, very fast --as long as the client stays within my self-imposed limitations. If they step out of bounds, I have to say, "Sorry. Keep shopping."

The client frequently DOESN'T know what's "good value." Or "How good is good enough?" This requires some educating and they then buy a web product based on "perceived value." Not how many hours or pages are spent. This is the secret of making money --not fluffing things up. Tell the truth instead.

I also screen my clients. 50% don't qualify. I don't do stores (well? within limits --say a dozen PayPal items), I don't do government or state or municipalities or churches or schools or non-profits. Those are monster sites and loaded with committee feature creep. Long-term slow turnaround projects.

32: HTML Frames Strength-- PRESENTATION

Molly Holzschlag's book titled "250 HTML and Web Design Secrets." She said: page 265 "Part of the problems with Frames is they go against the premise of markup --there job is presentational."  (Used $0.30 on Amazon. Save your money!)

PRESENTATION TOOL 

While she was explaining why to "never use frames", she inadvertently also explained one of Frames great values --as a presentation tool.

SECOND STORY

For many years, http://www.secondstory.com/ used Frames on their website. Note: I do not like the information density (aka cramming) on their new site. After 15 years, they finally  switched to more of a Flash-XML solution --very heavy on transparency effects --and dropped HTML Frames entirely. So it is now very slow loading. Bloat! They have sophisticated programmers now to babysit their code --and bells and whistles. Fixed overhead (payroll) is required. My point being, for storytellers, Frames provide a lot of possibilities for visual and textual materials coexisting on the screen. And simply. No high powered technical people necessary. This thought frightens web people!

HTML Frames provide a "shell" for framing offsite additions / utilities. Visitors never feel they've left the site. Very cozy. This is "transparency and comfort."

31: Quotation from Marty Neumeier about Simplification of Websites

AN INTERVIEW WITH MARTY NEUMEIER by Brian Alvey
Excerpted from Meet the Makers, April 20, 2003
http://www.meet-the-makers.com

Alvey: How does online branding differ from offline branding?

Neumeier: Online branding is still in its infancy, so practitioners are still groping for the answer to that question. Of course, the experience we have with a website will contribute to how we feel about a company. But what's missing in most web design is an understanding of the role differentiation plays in branding.

Since most web designers are throwing the kitchen sink into their sites, many sites tend to look alike. When designers start grappling with how to simplify their sites, they'll come face to face with brand. Once you simplify a design, everything that's left has to work harder.

30: Web Images: How good is "good enough?"

"Image quality" isn't even in the top 10 most important functions or features of a website. I see web design and stage set design as having a lot in common. It's the view from the back-row theater seats that count --not the up-close details.

Tools for image processing include: Adobe ImageReady --which comes with most versions of Photoshop, next is Photoshop and then Ubuntu GIMP. All of these programs have "Save for web" functions. This gives a much more compact file size than regular JPEG files. There are other programs, plugins, and online methods to improve file sizes. Note: GIMP requires a plugin to get "Save for web" features. Check your Linux "repository" for GIMP extras.

How good is good enough?

The person who cares the most about image quality is the owner or designer of the website, NOT the viewers. Viewers put this at the bottom of the list. Still the image needs to be recognizable and readable! Everyone has to decide their guidelines --but here are mine: make the image file sizes as small as possible in weight. Images are the main hogs of bandwidth.

Settings should not be arbitrary or rigid.

Some photos will compress tighter than others. Eventually, this become intuitive. Some images work better as GIFs than JPEGs --or better as PNG. It requires some experimentation. You soon learn the human eye is quite capable of discerning shapes and forms. The more random the image like water, soil, grass, etc, the more it can "tolerate" lossy compression.

Fancy Optimization Tools
There are two tools online extremely useful for optimizing images but are only available for Firefox as addons. Yahoo!s Yslow All Smush.it
and Google PageSpeed. Both require the installation of FireBug addon first.

JPEG Compression Guidelines for Speed
Usually, for photo images, JPEG compression is best. JPEG allows you to select a setting while previewing the image. I consider 70 high and is the quality I use for "portfolio grade" images. But the standard seems to have crept up to 85 or higher settings for all images. In other words, essentially little optimization at all! Try and resist this foolishness. It just doesn't buy anything in better quality. For normal images, I use a setting of 50. Smaller, less than 100-pixel-square images, can be pushed down to a setting of 30 --or switch to GIF. And for large backgrounds, with blurry depth of field effect, I drop down between 1 and 10. This causes noticeable image degradation but is only for "effect."

Guidelines for GIF Images
GIFs are compressed using the number of color represented (color bit depth.) You can really tweak some images hard using GIF compression especially text and illustration images. Plus in ImageReady, there is a "lossy" setting that can do some "serious damage" in a positive or negative way.

All Compression Techniques Require Good Judgment

I squeeze too hard for some designers tastes. That's because I realize the visitor doesn't care much. But they care intensely about page load speed. Beautiful doesn't count as much.

29: Modifying Blogger Environmental Sections

I've been showing the incremental process of designing "The Virtual Repository" for environmental biophysics .org. Above are two Blogger sections out of four. Each section has a header now to tie back the "feeling" of the Landing page on the main site. I've pushed the headers pretty hard for file size reduction. They are 15K to 20K GIFs. Some are a little grainy.

The banners have a "cooler" color combination and I may need to warm them up to match the Landing Page. Yet to be determined.

And a common HOME button.

This isn't quite what I'd like yet for return navigation. More of a "close window" button. Blogger has limitations like this --but is free. I also learned you can't create more than 3 blogs in one sitting. You have to wait about 24 hours.

28: Designing portfolio websites

A portfolio website for photography or fine art works best if it contains the following seven sections:

1. Landing Page Design [branding -- theming]
2. Image Gallery
3. About Page [The Interview]
4. The Testimonial
5. The Blog
6. The Process Page [how you work]
7. The Call to Action [ contact page and location of Galleries]

Example link.

27: Respository Site continued

The Repository Splash was very fast (10K) --but boring. The sectional page was loading fast enough (23K) that the SPLASH page could be dumped and everything moved up a layer. Also the large full-screen images were modified in Photoshop to give more depth using Render > Lighting and Render > Lens Flare --two simple filters. The SPLASH page presents one of six images. Each time the visitor lands on the page, they see a different one from what they saw the last visit. This is a cookie-based Flash widget from FlashDen. But to really give good effect, the dynamic image needs to be used on a Framed Hybrid website.

While working on this project, it occurred to me the simple formula of trade show booths apply well to landing pages. For a trade show booth, you must assume you'll receive the same attention span as a billboard at 55mph near a highway. Just a few seconds of decision making time. There are a few inexpensive details that can make a big difference. 1) color, 2) foliage, 3) lighting, and 4) legibility (1 inch for every foot reading distance.) In other words, 8 inch high letters at 8 feet. On a screen that would translate into a 2 to 3 inch high headline. (140px to 220px? That seems big, eh?) The SPLASH page seems to have these elements. What do you think?

The SECTIONS are Blogger pages, originally embedded in Frames. This made for clumsy bookmarking and so I made the pages standalone with a badge identity (home button) to tie back the look. This way visitors can enter from the blog or the website without confusion. Articles and downloads can be bookmarked, linked, or sent in emails.

The badge:

Also, the clients favicon.ico was added to each blog page and to the website for some additional continuity.

An ABOUT page was added that mimicked the blog pages design. The Blogger pages are modified and customized templates.

26: More experimental highspeed testing: Speed Strategy

Three layers deep: Speed Strategy
Screen resolution 1024 x 768 px minimum size shown.

1. SPLASH page: 10K (0.21 second load time with cached screen.)
There are only two string-background tiling GIFs on this page. One in each frame. Everything else is "pure" HTML.

2. Sectional INTRO page: Dynamic resizing image and text placeholder in a nested frame. Loads 23K in the bottom frame. 0.882 seconds buffered cache.

3. Embedded BLOGGER page for each section. Content updated by product managers. Shown here is placeholder content. 31K.

GOALS

Pages keep opening up with lighter space as the sequence progresses (less color coverage.) Successive pages load a little slower. We start at 10K > 20K > 30K --but the "information scent" is getting stronger. The "extra" time is tolerated better by the viewer. The header in the "blog" needs to be reduced in size. It's horsey.

The finished site will have 4 embedded Blogger pages.

25: How to use GZIP and PHP for speed.

GZIP is a software application used for file compression/decompression. GZIP is short for GNU zip; as the program was created as a free software replacement for the compress program used in early Unix systems, intended for use by the GNU Project. Version 0.1 was first publicly released on October 31, 1992. Version 1.0 followed in February 1993.

GZIP replaces patent-encumbered data compression algorithms.
Many client libraries, browsers, and server platforms (including Apache and Microsoft IIS) support GZIP. GZIP is often used in web applications and software such as PHP to improve speed. Hypertext PreProcessor (PHP) is a server-side HTML embedded scripting language. PHP is not always provided by a hosting server or may be a "paid" option.

Finding out how to use PHP-GZIP is a goose-chase even though the solution is really simple. PHP is something that need to be "switched on" on the server. Check your ISP for how to do this. Or assume it's on and test.

To convert an HTML file to PHP. Change the .html or .htm extension to .php. This will break your links so you'll probably have to rebuild them or use a search and replace tool in a text editor.

Add the following line of code BEFORE the opening HTML tag at the top of your code.

<? ob_start("ob_gzhandler"); ?>
<HTML>

* This source code was highlighted with Source Code Highlighter.

That's it. Simple. You can test to see if PHP is activated with YSLOW or PageSpeed tools. GZIP-PHP can compress the HTML code by 50% to 70%. It does not compress images.

Study: Web Users Prefer Speed Over Customization
The most important interface design factor is speed, according to a new HCI study. Good interface design is essential for widespread user adoption and ultimately website success.

24: TWEAKING- what counts and what doesn't

I built this 16K test site sometime ago and was revisiting the experiment. I wanted to see if it could be optimized with Google's PageSpeed addon for Firefox. The answer is: not really. A well built page, after optimization, only yielded about a 1 or 2K gain in page weight. The page load dropped from 0.7 seconds to 0.4 seconds after buffering. The initial load was, and still is, 3.7 to 4.0 seconds.

The things I did shaved about 1K from images and another 1K using GZIP-PHP compression. Was it worth the effort? No!

The page is at this link if you'd like to see it live.

Here are two screengrabs, one at 1440 x 900 px and the other at 1024 x 768 px:




The site is built using 4 HTML frames. Yes the vertical black bar is a "skinny frame." The other bar is composed of tiling string background images. And a seamless low-res 5K grunge tile at the top. The last image is a transparent 5.8K GIF with only 4 color-bit depth.

Improvements to this site "graphically" would be tighter CSS letter-spacing and line-spacing on the Courier headline and background CSS colors for link rollovers.

This is a good example of how color is critical to theme --yet costs nothing in pageweight. The theme was built from sampling the top tile and building from that using reverse-color lookup. See entry 07 for this procedure.

Four graphic image elements used are shown below:

23: LoBand landing page positioning

I'm convinced the most important and probably the only thing really needed on a LoBand landing page is your positioning statement. If you've never written a positioning statement or don't know what one is, visit this link.