| Designing your website for speed keeps all of your | | | | The extra advantage? |
| visitors happy. You never know what sort of a | | | | It is a much cleaner code that another programmer |
| connection your visitors are using. They may be using | | | | can easily read and use. |
| mobile phones, their blackberry or even a old modem | | | | The Other Extreme |
| connection. | | | | Class selectors can are often overused. |
| The speed at which your websites loads on their | | | | For example, you may need to style some elements |
| browser is important to your website's success. | | | | within a {{div}}. |
| Cascading Style Sheets | | | | All of the elements could be styled using one class |
| When you decide to design your site for speed, one | | | | applied to the entire {{div}}. |
| important consideration is the Cascading Style Sheets | | | | Avoid unnecessary like this: |
| that can help you speed the server response time | | | | {{div class="rightsidenav"}} |
| for your clients. | | | | {{h2 class="rightsideheading"}}Right Side Site |
| Cascading Style Sheets make websites much more | | | | Navigation}}{{/h2}} |
| efficient. They allow the browsers to cache | | | | {{ul class="rightsidelist"}} |
| style-related information from the .css file directly so | | | | {{li class="rightsideitem"}} item 1{{/li}} |
| that information does not need to be downloaded | | | | {{li class="rightsideitem"}}{{a href="#"}}{{span |
| every time the users load a page. | | | | class="sidelink"}}item 2{{/span}}{{/a}}{{/li}} |
| Optimize Your CSS Code | | | | {{li class="rightsideitem"}}item 3{{/li}} |
| Even if Style Sheets are naturally more efficient than | | | | {{/ul}} |
| HTML tables you can still optimize the CSS code to | | | | {{/div}} |
| make your website cleaner and faster. | | | | Instead, make one {{div class="something"}} for all |
| Group Your Code | | | | of the elements using one class like this: |
| First of all try to group your code. Instead of writing | | | | {{div class="rightsidenav"}} |
| out the full:margin-top: 10px;margin-right: | | | | {{h2}}Site navigation{{/h2}} |
| 20px;margin-bottom: 10px;margin-left: 20px; | | | | {{ul}} |
| You could be using the .css defaults (top, right, | | | | {{li}} item 1{{/li}} |
| bottom, left) and write your code as:margin: 10px | | | | {{li}}{{a href="#"}} item 2{{/a}}{{/li}} |
| 20px 10px 20px; | | | | {{li}} item 3{{/li}} |
| Simplify Class Use | | | | CSS Optimizer Tools |
| Instead of stating a class multiple times: | | | | There are CSS optimizer tools on the market that |
| {{p class="decorated"}}the first bit of text{{/p}} | | | | can help with this process of merging similar |
| {{p class="decorated"}}and the second {{/p}} | | | | selectors, remove useless properties and removing |
| {{p class="decorated"}}and so on{{/p}} | | | | whitespace. |
| {{p class="decorated"}}to the bitter end{{/p}}you | | | | Cascading Style Sheets can help you speed the |
| should use: | | | | server response time for your clients and there are |
| {{div class="decorated"}} | | | | CSS optimizer tools can help make you a real pro at |
| {{p}} the first bit of text {{/p}} | | | | this. |
| {{p}} and the second {{/p}} | | | | A Better User Experience |
| {{p}} and so on {{/p}} | | | | Do this and your online visitors will appreciate their |
| {{p}} to the bitter end {{/p}} | | | | visit, even if they don't realize the work you have |
| {{/div}} | | | | done to make it a better experience. |
| This will speed things up. | | | | |