Words from Alejandro U. Alvarez
Posts tagged optimization
Optimizing your landing page
Jun 12th
There is no need for me to prove to you that an optimization in your website's landing page will improve your Return on Investment (ROI) and your Rate of Return (ROR). As a matter of fact it is probably one of the hardest, most over-looked, and most important parts of SEO for a website. It is merely the showcase of your business, it is a fact that most of the visitors will simply decide whether to stay or not by simply looking at your home page.
Then, what should I be doing to prevent this? I've thought of this same question, and I've came up with the following statements, check right now how well you are doing the job:
(They are not in any particular order)
- Your homepage is persuasive and it makes the visitors feel confortable:
A common mistake is writing on the go the content you display and forgetting to check for errors, the text you write on your homepage is probably the most important one, and errors on it will make you lose all your credibility. Other usual errors are the lack of images, low resolution images, unconnected images... The visual aspect is even more important, since it determines the visitor's first impression. - You provide easy navigation that focuses on the most important links
You must always show the visitor clearly what the next step should be. Brighter colors, out stand from the other links, do it however you want, but make sure that there is a path from the homepage to the result you want to achieve, whether it is to contact you, view your showcase, buy your product... - Your content resolves any possible doubt the visitor might have
People won't know what your incredible product is, so for example an "About" page is a must-have. If you are unsure on how to organize the doubt-resolving content consider building a FAQ, which provides easy access to all possible problems a visitor will encounter - Your copy has been optimized to capture visitors
The content you write is the most important part once a visitor has gone past the homepage, he has already decided that your site "looks" worth watching, now you must prove it with content. Test whenever possible what is best for your niche, long text? short text? - Your idea is clear after no more than 4 seconds of looking at your homepage
If that was not true then you have to redo it. Your main point, idea, product, basically what you are offering must be completely clear for the visitor after no more than 4 seconds. Too much information without something in common and the visitor will probably be out, visitors want to know what they will find before having to actually search for it. - You think your homepage is great
This is the most important one, Do you think your homepage is great? If you don't then don't waste your time reading this lists, delete it and start from scratch, do something you consider good, then you can bother with the tiny details.
Hope you could agree with all the statements!
Image formats review
Apr 29th
For all of you designers out there that don't understand exactly what is the difference in "lay" terms of the most common web image formats I will go on with a little explanation and examples for you:
The background is a PNG image that is always the same, and the images are set over it
PNG
This is a relatively new file format, it stands for Portable Network Graphics, and it's primary characteristic is that it has lossless data compression, meaning that it won't lose any quality whatsoever.
And the other greatest thing about it is that it has full alpha support, meaning that it can have different opacities and transparencies.
Here are below some examples of PNG images with different backgrounds:
The size of the PNG file on top (100x50px in a row of 4) is of 12,4Kb
As you can see it can be perfectly seen even though the background is changed (stripes, solid color, alpha transparencies bg, and transparent bg)
GIF
GIF image format is probably the most common one in the web, or at least it has been for the past years. It stands for Graphics Interchange Format, and it has 3 characteristics that make it unique and sometimes useful:
- It has lossless data compression (Pretty much like PNG)
- It supports animations, although they increase a lot file size
- It supports transparencies, although it doesn't support alpha opacities.
Here is the same demonstration as before, but now with GIF graphics on top:
In order to look good GIF images with transparency often use a surrounding border, that should match the background color. As you see in the example the image looks just great when displayed over white, but when displayed over other types of background colors the transparency looks awful.
A great advantage though is that this GIF image weights 4,04Kb, against the 12Kb of the PNG file...
JPEG
JPEG stands for "Joint Photographic Experts Group" and it is not the actual name of the format, it is the name of the comitee that created it, but since everyone decided to call it this way, lets stick to it 
JPEG offers some characteristics that are worth looking at when designing for web, it uses lossy compression, which basically means that when saved it will lose quality.
Depending on its use this may not be bad. For example in this site's design I've used JPEG files for backgrounds, since the quality loss contributes to the "rustic" effect, but it should never be used for logos or sharp things.
The good use for JPEG is for large photographs, big backgrounds, or other large images.
Here is an example of the dice image, using different compression quality:
Since there is no transparency the background will be seen always as white...
High quality:
Medium quality
Low quality
File sizes were:
- High quality: 31,2Kb
- Medium quality: 26,2Kb
- Low quality: 25,0Kb
Conclusion
When designing you should try to use GIFs as many times as possible, since they provide the smallest file sizes, and better quality than most JPEGs. In the cases where you need alpha transparency you should consider changing to PNGs, but avoid their use, they'll increase a lot page load time...
Have fun designing