CSS Cheat Sheets

As simple tool as this may seem, the CSS Cheat Sheet can be very useful. As developers we don’t always know every tag and piece of code in the book by heart, this is where this one-page reference sheet that lists all selectors and properties comes in handy. The cheat sheet also includes an effective visual example of the box mode and unit reference for CSS units.

Telerik Visual Style Builder

Telerik Visual Style Builder is an online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.

This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

CSS Type Set

CSS Type Set, a hands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

CSS Frame Generator

This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

Grid Designer

Grid Designer is a simple and basic tool that will help you create solid layouts. This tool will enable you to set columns, typography and export the HTML and CSS code. You even have the option of bookmarking every design in order to come back and edit it at a later time.

MoreCSS

MoreCSS is like a designer placing a JavaScript library in paradise. It allows you to effectively write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. The only requirement this tool has is the use of regular and simple CSS.

YAML Builder

This builder is designed for quick and effective development of CSS layouts, that are based on YAML. Yet Another Multicolumn Layout is a highly versatile (X)HTML/CSS framework, produced under the Creative Commons Attribution 2.0 License. Creating neat layouts is easier then you think with YAML Builder. This truly is one tool worth your time.

Drawter

Drawter Beta 2 written in JavaScript and based on the jQuery library enables you with the possibility to literally draw your website’s code. It can run on every single web-browser which makes it really useful and versatile. Every tag is presented as a layer you have drawn.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

Deploy

Deploy is a free open-source Web application that allows designers to select the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. With current versions you can utilize this tool for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites. Deploy saves time and organizes your codes parent folders and more.

Blueprint Grid CSS Generator

Blueprint Grid CSS Generator will help you generate various flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Doesn’t matter if you prefer 8, 10,16 or 24 columns in your design, this tool now enables you that flexibility with Blueprint. This generator allows you to cut down on your development time and build your site on an easy to utilize grid.

Format CSS

With Format CSS, you’re able to upload your CSS code and select from the options available to achieve code formatting the way you want. You can easily convert a compact CSS code into readable form with proper line-breaks and indentation or vice-versa. Use this tool for quick code organizing and the production of clean code.

Firdamatic

Firdmatic is an online tableless layout generator that lets you create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout is fast and easy.

JS Bin

JS Bin is a Web application that’s specially designed to aid JavaScript and CSS developers to test snippets of code in a specific context and debug the code collaboratively. In other words, it’s collaborative JavaScript debugging at your fingertips. You can also edit and test JavaScript and HTML as well. To finalize, you can save and send the URL to a colleague for review or help. They may make any needed changes if you allow them to.

HOW TO: Use Twitter Lists

Twitter Lists are Twitter’s long awaited “groups” feature. They offer a way for you to bunch together other users on Twitter into groups so that you can get an overview of what they’re up to.

HOW TO: Use Twitter Lists

10 Ways You Can Use Twitter Lists

Savvy individuals are looking for ways to use lists to further their personal/professional agendas, and while we are all still learning how to harness the power of this new feature, here are a few ideas to get the creative juices flowing.

10 Ways You Can Use Twitter Lists

Listorious: Discover the Best Twitter Lists

Listorious is a simple to use and very useful new web service for discovering the best Twitter lists. Simply, select a tag and you will be presented with the relevant lists.

Listorious: Discover the Best Twitter Lists

By Paul Andrew (Speckyboy and speckyboy@twitter).

Many website designers today completely ignore (or worse, avoid) the grid. While a vast majority jump right in knowing they want a 2 or 3 column design, never stopping to consider how the choices they make affect the usability, readability, and flow of a site. What if a shift in proportions, a change to the relationships of elements, or an adjustment to type size could make your site more usable and better able to communicate? The grid is the tool that can help you make better choices and therefore have more impact with your design.

However, don’t confuse structure with a lack of visual complexity. It is the very structure of a grid that opens up a multitude of purposeful, rational design decisions.

The Grid Online

When you first think about using a grid as the foundation for your website, you might have the tendency to feel boxed-in. In fact, you may have noticed a trend in web design where the grid is used as a design element. And for some purposes, that’s a good choice. On the other hand, with so many boxy designs there are a lot of sites that are starting to look like each other. Not so good if you’re trying to stand out in a crowd.

But just because you use a grid does not mean your design has to look like a grid. Effective designers can use a grid to achieve all sorts of unique layouts. A grid is a starting point, a skeleton, a frame to hang your design on. Grids help you achieve consistency and cohesion, make better positioning decisions, create pleasing proportions, develop visual symmetry (balance) and rhythm.

Using a grid offers designers a lot of flexibility withing a structured framework. But one of the best methods of achieving maximum impact using a grid is by breaking it. Going off the grid is a sure-fire way to call attention to a key piece of content — an effective device for making an element pop off the page. Used sparingly and intentionally, breaking the grid can help you achieve unexpected and interesting results.

Grid Frameworks

Take a look at the Wikipedia description of CSS Frameworks.

For web designers who want to build on a grid, a CSS framework can provide the underlying structure for a designer to build their web pages around. A CSS framework offers designers flexibility, browser compatibility, adherence to web standards, reduced coding errors, and possibly best of all saves time. There are a number of different frameworks, some simply provide the bare minimum others offer a grid system in addition to style resets, print styles, styles for other common elements, and templates for popular design software.

Two of the more robust CSS Frameworks are the 960 Grid System and Blueprint. There are many others, but these are some of the more popular solutions.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels, with 12-column and 16-column variants. There are printable sketch sheets, design layouts (for popular design programs), and a CSS file that have identical measurements. This framework uses classes to allow designers to rearrange elements independent of the order in which they appear in the markup so you can keep more pertinent info higher in the HTML, without sacrificing precision in your page layout. (excerpted and paraphrased from 960.gs)

Blueprint

This framework offers a CSS reset that eliminates the discrepancies across browsers, a solid grid that can support the most complex of layouts, typography based on expert principles that predate the web, form styles for great looking user interfaces, print styles for making any webpage ready for paper, plugins for buttons, tabs and sprites and tools, editors, and templates for every step in your workflow. (excerpted from www.blueprintcss.org)

Some simple frameworks that provide only the grid with no additional code or styles are CSS-Boilerplate and the 1KB CSS Grid. Both provide lightweight, simple solutions for starting your grid-based web design projects.

CSS-Boilerplate

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important. (excerpted from http://code.google.com/p/css-boilerplate/)

1KB CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid. (excerpted from www.1kbgrid.com)

Fluidity

The main problem with most CSS frameworks is that they are based on a fixed-width solution. Designers who embrace website flexibility and accessibility are likely going to need a fluid grid. Enter the Fluid 960 Grid System created by Stephen Bau which is a derivative of the 960 Grid System by Nathan Smith.

The nice thing about this fluid grid system is that it provides designers with all the benefits of using a fixed grid while allowing us to create something infinitely more usable for multiple audiences. For those of us who are comfortable giving up the control that a fixed width layout provides, the Fluid 960 Grid System is a great solution offering the ability to use a grid while saving the time of building a custom framework.

Designing on the Grid

Using a framework allows designers to get back to the creative part of our work. Having the underlying structure already built allows us to focus on creative design solutions. Of course, you’ll still need to manipulate your code, but working on top of a pre-built framework really gives us a big head start.

Start your design by mapping out the key content areas. I used the original 960 Grid System template for Photoshop which you can download directly from 960.gs.

Once you’ve got the sections where you want them, you can start to integrate the design elements.

Once you learn to appreciate the grid and its impact on your design, you are ready to break it. When done intentionally, breaking the grid can be a very effective tool for drawing attention to a particular piece of content. Think about where you might break the grid for a bit of visual impact.

The thing about using a grid is that you can achieve a consistent look and feel across a variety of pages. Using a grid, you’re homepage design layout will work with alternate sub page layouts, providing the user with a familiar look across your site while giving you the ability to create page designs that can accommodate different types of content.

Additional Resources

If you weren’t using grids as part of your web designer toolkit, I hope that by now you are intrigued by the possibilities that employing a grid can provide. Web designers need to invest in the grid, and too investigate further check out the following articles, websites, and tools that offer even more on designing with grids.

Grid Tutorials and Articles

• A Detailed Look at the 960 Grid System
• Prototyping with the 960 Grid Framework
• 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know (article)

Websites Dedicated to the Grid

• The Grid System
• Design by Grid

Grid Toolbox

• GridFox
• Grid System Generator
• Grid Designer 2.6b

40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application

CodeIgniter is an Application Development Framework – a toolkit – for people who build web sites using PHP. Here is the list of 40+ Excellent And Useful CodeIgniter Application Development Framework Tutorials & Resources that includes some useful tutorials and a few great resources that has been developed for programmer and designers.

40+ CodeIgniter Framework Tutorials for Kick-Ass PHP Application

25 New & Useful PHP Techniques & Tutorials

Finding new and useful PHP techniques can be difficult, in this great resource they have collected 25 tips, tricks, tutorials and of course, techniques.

25 New & Useful PHP Techniques & Tutorials

10 great Alternatives to phpMyAdmin

Most people in the web development world are under the impression that phpMyAdmin is the only MySQL client out there for websites. There are others, many more. The author of this post has listed and describes in detail 10great Alternatives to phpMyAdmin.

10 great Alternatives to phpMyAdmin

By Paul Andrew (Speckyboy and speckyboy@twitter).

1. Book covers

2. Brown paper textures

3. Anatomy of a really old book

4. Bark textures

5. Rusty textures

6. Vintage bum textures

7. Burnt paper

8. Metal textures

9. Grunge pack

10. Original scrapbook

11. Wood textures pack

12. Broken glass

13. Manhole covers

14. Liquid abstracts

15. Brown paper textures 2

16. Coffee stains

17. Local wood texture

18. Plain and grungy paper

19. Cracks texture pack

20. Dark Wood

21. Cardboard textures

22. Dirty textures

23. Rust textures pack

24. Notebook textures

25. Concrete and pavement

Coming to Terms with Wireframes

Wireframes are usually created using a variety of software applications geared towards design. Most developers find good use of Photoshop and Visio stencils because they allow you to save layers and libraries of commonly used shapes and elements. Once you’re able to develop your wireframe prototype, this will allow you to interact with your client in a variety of ways such as getting an up-front view of their sites design or redesign. This also means that the developer has a clear understanding of what technologies (i.e. JQuery, Ajax, etc..) need to be used for specific elements on the site.

A large portion of these common elements are absolute needs, and if not included then this can cause your visitors to experience, leave, and express a great deal of frustration towards your site. No one wants to visit a site that offers an unclear purpose, seems way to crowded, and neglects the need for vital elements such as navigation to be labeled and easy to find.

Vital Steps to Effective Wireframing

One of the biggest mistakes you can make as a designer on a development project is failing to plan. When you wireframe this is one of the very few vital steps you need to take v.s. the other 100 or so. This is where the conceptualization of an idea starts to take shape and form to allow interaction between the sites design and back end development. Below you will find a few tips that will enable you to make not only effective but better wireframes.

Functionality Contra Superficial

Many times the way you design your wireframe depends on the tools readily available. However, it should always be more about function rather than form at some point. Once you focus on function, form will start to take place. In other words, this means that you not need to create the best looking wireframe, just one that has promising function and form. A good wireframe would include the most important of elements such as boxes, buttons, dropdowns and more.

Spending Too Much Time on Wireframes

Your wireframe has nothing to do with design. Therefore try to avoid spending large amounts of time on making your wireframe “pretty”. If you add too much design then you will end up shifting your client’s focus onto un-important aspects.Wireframe is part of the development process, just remember that design should be left to designers.

Organizing Your Wireframe

As obvious as it is, sometimes it’s easy to forget how important it is to have a well organized wireframe. You can start organizing by splitting the sections that need to be separated such as news, products and user account/registration. Once you’re able to break up your wireframe correctly, then this will bring you one step closer to a more attractive and usable design.

Choosing the Right Tools

For most designers, the pen and paper is utilized as the canvas unto which creativity is transferred on. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept becomes much more then that. As successful designers it’s important that you use tools that you’re most comfortable with. This would increase the chances of raising the quality of work. A few tools used besides Adobe Photoshop and Microsoft Visio would be PM PowerPoint, and Designers Adobe Fireworks.

Color a Plus or Negative?

There are a few things one should avoid when designing a wireframe, one of those things would be to use too much color in your design. Our human eyes are captivated by components that posses any sort of color. We naturally begin to analyze the color scheme behind most of the things we see on a daily basis. Simply put, a wireframe with an exaggerated amount of color will more than likely distract you (or the client) from chief elements.

Although, greyscale is the standard for wireframing, it’s not always a horrid idea to use a VERY light touch of darker colors (black, navy blue, etc..) to separate your sections. However, if you utilize any form of color, it’s possible that your client could have a mal-reaction, i.e. questioning the actual colors of the site. This could easily become a set-back, or it can all together end the clients interest in using you for their sites design. Most designers limit the use of colors to links or elements that may not be included on every page. If you feel the “need” to use color, this wouldn’t be a bad idea.

Clean Examples of Wireframes

10 Essential OS X Apps for Pro Web Developers

The Mac’s always been a strong platform for design applications, but it’s now also the obvious choice for web developers. If you’re new to the platform or fancy some shiny new tools for working on websites, the list in this details the best you can buy.

10 Essential OS X Apps for Pro Web Developers

6 Apps To Help You Focus & Be Productive [Mac]

If you struggle with personal disorganization, suffer from the inability to finish anything without starting another or you can never meet a deadline, this post is for you. The six apps in this post will help you bring some stability back into your life and productivity back to your work.

6 Apps To Help You Focus & Be Productive [Mac]

35 Mac Apps to Improve Your Web Browsing Experience

Out of the box, your Mac is a powerful machine for making the most of everything the Internet has to offer, but there are a few tweaks, plugins and applications that can make it go a little bit further. Covering both Safari and Firefox, this post has 35 different plugins and applications that will help improve your web browsing experience.

35 Mac Apps to Improve Your Web Browsing Experience

By Paul Andrew (Speckyboy and speckyboy@twitter).

1. Old film

2. Tree Bark

3. Cracks and dirt

4. Rocks

5. Wood textures

6. Old Books

7. Clouds

8. Wood textures

9. Fire, Flame & Firework

10. Fabric Textures

11. Hardcore Vintage Grunge

12. Grunge & Paper textures

13. Grab bag

14. Anatomy of a dumpster

15. Color Grunge Textures

16. Smoke

17. Grunge walls

18. Plant textures

19. Bricks

20. Color Grunge textures

21. Leaves

22. Paint textures

23. Bokeh textures

24. Grungy paper textures

25. Vintage grunge

20 Handy Photoshop Tips For a Faster Workflow

You may use Photoshop on a daily basis, but I bet there’s at least one tip in this post that will give you the old ‘Why didn’t I know of this before’ moment! It’s tips like these that make the most common of tasks quicker and easier than ever to help speed up your Photoshop work-flow.

20 Handy Photoshop Tips For a Faster Workflow

Do’s and Don’ts of Photoshop Retouching

The number of options available for photo enhancement are now sky high, but what’s the best way to clean the photo up?
To simplify the retouching process, this post has highlighted the best and worst ways to create a clean, professional-looking photo in Photoshop.

Do’s and Don’ts of Photoshop Retouching

Setting Up Photoshop For Web, App and iPhone Development

Most people who have designed websites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all.

Setting Up Photoshop For Web, App and iPhone Development

By Paul Andrew (Speckyboy and speckyboy@twitter).

1. Observe How People Use Your Site

For your site to achieve its best possible performance, you need to understand exactly how the users use it and navigate around it. Some good performance-related questions that need to be investigated are the following:

• Where are the most users landing? This question is important because this page needs to be among the fastest to load. Once a user lands on a site and their experience begins they become much less likely to leave. These pages should have minimal JavaScript and the other pages on the site can send bigger packages of JavaScripts.

• Where are the most users leaving? Why are they leaving? Is it because that page is the slowest to load or have the users completed their goal? Try to understand what the users are experiencing. This page is your last chance to leave a lasting impression.

• How many pages are the users loading per visit? If most users are only loading 1 or 2 pages, it might not be worth sending the user an entire image sprite or JavaScript functions that are used on other pages. If the users are looking at many pages, it might be a good idea to use AJAX to minimize page loads.

• How many users have been to the site before and still have the page in their cache? In other words, will your site have a very loyal fan base and not many new visitors? This situation is rare but it lets you do more. It allows you to use bigger files, more Flash videos, and higher quality images.There are many tools out there for tracking your users. Google Analytics is the best free software that I’ve come across but Mint and Crazy Egg are great premium options. I find that Google Analytics and ClickHeat are a great duet for those on a small budget (in regards to both time and money). Please suggest more tools in the comments.

2. Take advantage of caching

The biggest bottleneck for websites is almost always the fact that it takes time to send files to the user’s computer and then wait for feedback. When this step can be skipped and the user’s browser does not need to request and complete a file transfer, the speed increases noticeably.

With modern sites that are more complex and more database-driven, caching becomes more difficult because the server cannot know when the page’s data has changed. While this problem can’t be avoided on all pages, some pages are static and can be easily cached.

That being said, even when a page does use a database for some of the content, that page can still be cached using some tools. Whenever the database is reloaded with new values for the page, these tools will go and retrieve the new page and then offer that up for caching. While this may not sound like the optimal solution, the load time of a site can increase dramatically for users.

I will explain this in more detail in point #7.

Splitting files appropriately is also important. If you have a page that optains a small percent of your visitors but that page contains a large amount of the JavasSript then that JavaScript should be split into two or more files. For example, Say a site has two JavaScript files: validation.js and rollover.js.

In this example, the page that 90% of people arrive at will only use rollover.js which is 14kb and another page on the site that receives 10% of the visitors will use validation.js which is 26kb. If those JavaScript files are merged into one, the users will only need to make one request, but the file will be 40kb and only 10% of the users will end up using the whole thing.

This is why it’s very important to analyze what your users are doing and if it’s optimal to send them everything.

3. YSlow

YSlow is a great firefox addon that anyone who works with websites should use. YSlow will analyze a site and give it a letter grade based on its performance. YSlow can be pretty strict, so don’t get too down if your site doesn’t obtain an A rating right away, but it’s a great tool and it will raise your awareness about where your site fails and where it succeeds.

Firebug is required for YSlow, but you should really have it already. It’s insanely useful (unless you’re trying to debug an IE bug).

4. Minimize JavaScript and CSS

Even the smallest files matter when servicing millions of visitors a month.

xkcd, an incredibly popular web comic, was getting 70 million pageviews per month in October 2007. This number has likely grown significantly since then. xkcd’s CSS file is 3.89 KB.

If that file was sent out for every pageview (which it isn’t due to caching, but let’s just pretend for the sake of this example), that would be almost 260 gigabytes of bandwidth per month.

Quickly putting that code into CSS Optimizer creates a file that is 2.39 KB. The bandwidth per month would decrease to around 160 gigabytes.
Clean CSS shrinks CSS code, but still retains its readability. It optimized xkcd’s CSS file to 3.272 KB.

That all being said, JavaScript files are usually much bigger than CSS files, especially when there are lots of jQuery plugins and YUI components. Luckily there are some great JavaScript “minifiers”.

YUI Compressor is definitely one of the best compressors but it’s not incredibly easy to use for people who aren’t experienced with command line programs. JSMin and Dean Edward’s Packer are also worth mentioning.

5. Decrease Image Sizes

Images usually make up the bulk of a website. The delicate balance between quality and image size has been discussed thoroughly. In the scope of this article I will only be able to scratch its surface but I will point you to other valuable resources at the end of the article. I strongly recommend reading them.

Designers will sometimes get into the habit of saving their images as 80% quality jpegs without looking at alternatives. Here are some very quick tips that can optimize images quickly and without going too in-depth.

• First of all, save your image in both a flattened PNG format and as JPEG at 80% quality and then compare them. The PNG file will usually have a slightly larger file size but it may look significantly nicer. From here you can decide which option is the best and tweak the JPEG’s quality percent appropriately.

• Now that you’ve decided to go with jpeg and you’ve tweaked your image to a quality setting that you’re happy with, let me ruin everything and tell you about a great little (command line) program that shrinks PNG files. Pngcrush doesn’t always make pngs smaller than jpgs, but it makes the competition much more interesting. After you run this on the PNG of your image you will be able to re-evaluate whether the JPEG file size and quality are better than the PNG’s.

• With both images loaded on a server somewhere, run Yahoo’s Smush.it App on both images. Smush.it does not reduce the image quality in any way, it removes unnecessary bytes and trims off anywhere from 1% to 45% off the image size. At this point you should be able to pick which image format you want to use.

• The final step for this process is to put some images into a sprite. This means to put images into the same file and then use CSS to reference the image’s location in the file whenever that image is used. By doing this, the browser will need to make fewer requests and usually the size of the sprite is smaller than combined size of all the images. A great tool for creating sprites is the CSS Sprites Generator. Be careful when creating sprites, as I mentioned before, the user only wants what they’ll need. If they’re only going to visit one page, sending them a sprite that contains every image in your whole site will slow down and hurt their overall experience. Separate your images into sprites according to how the average user visits and navigates around your site.

6. Lori

Lori is a really simple Firefox addon that displays some vital stats in the status bar. It displays:

• Time for first byte: The number of seconds from when the browser sends the first request until when the first byte is returned.
• Time to complete: The number of seconds from when the browser sends the first request until when the last byte is returned.
• Page Size: How big the page is.
• Number of Requests: How many requests the browser sent.

It’s a good idea to get into the habit of watching the numbers of various sites that you visit.

7. Dynamic Serverside Scripting and Database Requests

Server-side dynamic webpages, such as those written in PHP, ASP, Perl, JSP, and so on, will first execute code to build a file that can be viewed in a web browser. While executing this code, the script will sometimes send queries to the database to retrieve the content for the page. This introduces an extra step that does not exist for static pages written in simple HTML.

It is unnecessary for the scripts to repeatedly execute the same code for each unique user when the exact same file is generated every time. The optimal case would be for the server to check if the needed HTML file has been generated yet, and if so, send that instead of generating a new one. Luckily, there are existing tools that accomplish this.

I apologize that I’m only mentioning tools that use PHP, but they are the only decent and free tools available. If you know of any that I’m missing, please do not hesitate to write about them in the comments.

• ADOdb Adodb is a database abstraction library for PHP. Database abstraction is an extra “layer” between the scripting language (in this case, PHP) and the database. This layer is responsible for checking if the results of the current query have been recently retrieved, if yes, it gets those results from its cache instead of generating new ones. This ends up being much quicker for queries that get executed often and only slightly slower for queries that are executed very rarely.

• APC and eAccelerator These are two optimizers that cache compiled PHP files. They will make your PHP code respond to your users’ requests faster and lessen your server’s execution time. If you have the time and the resources, I recommend that you try both of them and track how they each perform.

8. Show the Page While Other Parts Load

When a user loads a blog post or an article, they’ll probably read a chunk of the article before reading the comments or looking for secondary content. To take advantage of this, you can load the secondary content after the primary content has been loaded. You can add this functionality to your page with AJAX. Chances are that your users won’t even be able to scroll down to the comments section before it loads.

9. Take Advantage of AJAX

AJAX has more uses than just loading comments. It’s great for validating form fields against the database as the user inputs their values. It’s really annoying when a form comes back because the username has already been chosen and then the user has to rewrite their password and figure out the CAPCHA again. Instead, use AJAX to give feedback to the user immediately and then they can be certain that they will only need to submit the form once.

Other great uses for AJAX include voting/rating systems, logging a user in, auto-complete for text inputs, updating RSS feeds, sorting lists, and many more.

10. Gzip Compression

When a file has been zipped, it means that the file has been compressed and Gzip is simply a free, open source version of the zip technology. Compressing a file can reduce its size significantly. The text of this blog post is roughly 16kb uncompressed and 7kb after gzipping. Turning on gzip compression can be a complicated task for people who are not experienced with changing Apache’s settings. I would recommend that you email your web host and ask if they could turn this on.

Further Reading

• Yui’s Performance Blog
• A List Apart’s article about image sprites
• Smashing Magazine article about jpeg optimization
• Smashing Magazine article about png optimization
• A good article about caching
• PHP Accelerators compared
• Wordpress pluging for adding Ajax
• Article about adding gzip to a site