| Is it possible to have an attractive website and still | | | | so the outcome is a small file size. |
| be optimized for search engines? The answer is | | | | Let's look at what efficient slicing means: |
| absolutely yes! Of course we tend to be mis-guided | | | | 1. Do not make large slices that contain lots of |
| about what will dazzle the visitor. It is not necessary | | | | different colors. Use a small number of slices where |
| to overwhelm your website with graphics, which will | | | | each slice contains a limited number of colors. |
| cause the page to download slower. Our intention is | | | | 2. Do not make a large slice that contains the same |
| to provide you with tips that will still be attractive, | | | | graphic structure. Slice a small portion of it and |
| while focusing on Easy Spider. Easy Spider is a term | | | | duplicate it in your code. This is a very common |
| we use at our firm that will optimize the HTML code, | | | | mistake that webmasters/programmers make when |
| but not the aesthetics of the website. | | | | dealing with gradient color background. |
| There is no question that most webmasters are | | | | 3. Do not use JPEG file format all the time. In some |
| developing websites that are complex and full of | | | | cases a GIF format will be much smaller in size. A rule |
| graphic design elements. Even though, we have | | | | of thumb - a slice with high number of colors will be |
| faster connection speeds today compared to 10 | | | | smaller in size using the JPEG format rather than the |
| years ago, we can go overboard and the page wills | | | | GIF format, and the opposite is also true. Check each |
| till download slowly. Of course the user will never | | | | option separately. Every 1KB that you reduce from |
| wait that long for a website to load, and will move | | | | the image file size will eventually add up to a |
| on to the next website in their search results. | | | | significant reduction in page size. |
| One does have to ask the question why | | | | 4. Consider using PNG graphic file formats that will |
| webmasters are still developing slow loading websites. | | | | provide you the balance between transparent |
| Primarily due to a lack of knowledge. The knowledge | | | | backgrounds and larger color possibilities. |
| of simple graphic optimization techniques that will | | | | 5. If you have text on a solid color background, do |
| allow them to maintain an attractive website while | | | | not slice it at all. Use code to create the background |
| keeping the page size smaller. | | | | instead. Remember that you can define both the |
| Did you know that a box with rounded corners can | | | | font style and background color of the area using |
| be achieved using CSS code only, without the need | | | | CSS. |
| for any graphic image? It is possible and although not | | | | Advanced Techniques |
| prevalent with all web browsers, we are heading in | | | | Graphically optimizing a website is more than just |
| the direction where the browsers will accept more | | | | knowing how to do image optimizations. There are |
| CSS alternatives. However the point we are trying to | | | | some advanced techniques that require a high level |
| make here is not about CSS vs. graphic images, but | | | | of programming. CSS2 has much more to offer then |
| that we tend to be stagnant in our knowledge and | | | | CSS does. Although not all browsers have adopted |
| do not keep up with the fast changing trends in web | | | | this standard yet you should be ready for when they |
| development. | | | | do. |
| For instance, Flash only websites, while attractive, | | | | PHP scripts have become more prevalent during 2005 |
| fund an interactive are not appropriate for search | | | | and actually feed the information that Search Engine |
| engine optimization. Consider keeping you web page | | | | spiders can use. PHP is preferable over JavaScript. |
| 90% regular text HTML and insert Flash elements to | | | | JavaScript's are still good possibilities to consider. |
| provide the interactive attractiveness. | | | | JavaScript also gives you a set of options to create |
| Granted one does believe that we should not limit | | | | some cool effects without needing to overload the |
| the web designer by placing any restrictions that | | | | page with Flash. Using limited tools like JavaScript |
| impact the final outcome. However, do consider | | | | compared to an advanced application like Flash to |
| implanting code wherever possible over graphic | | | | create the desired effects can be difficult. However |
| elements. Equally, consider the complexity of the | | | | think about the outcome. For a onetime effort you |
| graphics as the web sites structure, layout and | | | | can differentiate your website from others. You will |
| functionality are being planned. | | | | have an attractive professional looking website that |
| Another example is when the design is finished and | | | | loads quickly. |
| you are ready to slice it into small images to be used | | | | Get used to writing well optimized web pages |
| in the html code. Everything you do at this stage will | | | | because search engines are still the number one |
| affect the total page size. If your design contains | | | | method of finding information on the web. Search |
| rounded shapes that overlap each other or areas | | | | Engine spiders have to be considered in this cat and |
| with color gradients, then you must slice it carefully | | | | mouse game that will never end. |