In our previous Quick and Dirty posts, we looked at speeding up and optimizing various aspects of webpage code, whether this is CSS, PHP or just shortening the amount of time it takes to generate XHTML code.

Now in this final installment, we’re going to look at a way to optimize page load times in general.

Speeding Up Page Load Time

There are many ways to improve the amount of time it takes for webpages to load. We’ve looked at using CSS shorthand to reduce the file size of stylesheets and how to write more efficient PHP code. Combining these tips will help, but there’s a lot more that can be done to speed up your page loads.

Yahoo’s Best Practices for Speeding Up Your Web Site

Yahoo’s list of 34 best practices (broken into 7 categories) to make your website lightning fast:

• Minimizing HTTP requests
• Use a content delivery network
• Add cache control
• Gzip components
• Put stylesheets near the top of your code
• Put scripts at the bottom
• Avoid CSS expressions
• Make javascript and CSS external
• and more…

Optimzing Page Load Time

Contains an in-depth look at how to speed up not only the time your website takes to load, but also tips to speed up your browser so it can load pages you view quicker.

Speed Up Your Pages With YSlow

YSlow is a Firefox extention that works with Firebug to analyze your webpages and show why they are running slow.

Did I Miss Any?

Did I miss any great tips for speeding up your page loads? Tell us about it in our comments.

The Quick and Dirty Series

• CSS Shorthand Tips
• Lightning Fast Page Setup
• Optimizing PHP Code (For Fun and Profit)
• Speeding Up Page Load Time

Subscribe to our RSS feed and keep up-to-date on all of our great web and graphic design articles.

Even though this blog is relatively new, there have been many great web and graphic design-related posts in the last few months of 2008. Let’s take a stroll down memory lane and look at just a few (21, actually) of the topics we’ve covered.

Tutorials

• DIY Online Incremental Backups
• BlogDesk Part 1: Publishing Posts to WordPress
• BlogDesk Part 2: Posting to ExpressionEngine

ExpressionEngine

I’ve written several posts about ExpressionEngine. Here are a few of the most popular.

• Javascript Templates in EE: Speeding Up Page Loads
• Easier Editing in ExpressionEngine and WordPress
• Learn ExpressionEngine in 2 Days

WordPress

Within minutes of WordPress 2.7 being released on WordPress.org, there was the WordPress 2.7 Upgrade Checklist. This contains tips on upgrading your site, including making sure your plugins and themes are compatible with the newest version of WordPress.

Online Tools and Services

We’ve reviewed and highlighted several online services and websites that make your job as a web or graphic designer much easier.

• Automatic, Painless Backups With Mozy
• Free Icon Search Tools
• 4 Royalty-Free Photo Search Engines
• 5 Free Online Photoshop Alternatives
• Free Online Billing and Invoicing—Curdbee
• Manage Multiple Email Accounts With Zenbe

Web Design Code

• Don’t Remove Visual Cues For Links
• Quick and Dirty: CSS Shorthand Tips
• Quick and Dirty: Lightning Fast Page Setup
• Quick and Dirty: Optimizing PHP (For Fun and Profit)

Graphic-Related Posts

• 12 + Mega Icon Sets For Designers
• OpenX Admin Icon Set
• 10 More Free Icon Sets
• Inspiration: Retro Clothing Labels

More to Come in 2009

These are just a few of the great posts that have been featured here on the blog and there’s more to come in 2009.

This blog is updated 2 times a week—on Mondays and Fridays/Saturdays. The Monday posts deal with web design-related topics and things of interest to web designers. The posts at the end of the week usually deal with graphic design topics.

If you haven’t already, subscribe to the RSS feed so you won’t miss a single post.

In the previous 2 weeks, we’ve looked at how to use CSS shorthand to reduce the size of your stylesheets, and how to speed up the development of HTML pages.

In this week’s quick and dirty set of tips, we’re going to look briefly at optimizing PHP code.

Increasing Site Performance In PHP

Unlike optimizing your CSS code, usually your main goal in optimizing PHP code is not to cut down on file size, but rather speed up the loading and performance of your pages.

Knowing the most efficient ways to get what you want accomplished in PHP can give your pages a boost as far as processing and loading speed.

Here are 3 tips to help you optimize your PHP code and make your pages load faster:

1. If a method can be static, declare it static. Speed improvement is by a factor of 4.
2. echo is faster than print.
3. Use echo’s multiple parameters instead of string concatenation.

Source: Reinhold Weber

Read all 40 PHP optimization tips

Is It Worth Optimizing My Code?

If you follow the above optimizations, just how much will these speed up your site?

When optimizing any type of code, it’s important to keep in mind that the time spent optimizing your code may be better spent if it’s only going to improve performance slightly.

Some of the tips listed above may not improve performance or speed enough to be worth the time invested in optimizing you PHP.

Devolio has a great post (with graphs and charts and statistics) showing which PHP optimization tips work, and how much impact these have on loading and performance speed.

Practical (and Impractical) PHP Optimizations

As with optimizing in general, moderation is important. I don’t believe all the 40 optimization tips should be used, but there are several that can greatly improve your pages performance.

More Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup
• Optimizing PHP Code (For Fun and Profit)

Subscribe to our RSS feed and look for new installments of Quick and Dirty Tips.

In a press release Thursday (Dec 11, 2008), the W3C has promoted the new WCAG 2.0 Web Content Accessibility Guidelines into the current recommendation.

The new WCAG 2.0 Web Content Accessibility Guidelines (current W3C Recommendation) builds and expands on the previous WCAG 1.0 Accessibility Guidelines released several years ago.

The WCAG 1.0 and WCAG 2.0 Checkpoint Comparison is a great place to start if you’re already familiar with WCAG 1.0 and are looking to implement the new changes.

Building Sites With Accessibility in Mind

The nice thing about the new WCAG 2.0 checkpoint list is that it explains the reasons behind and benefits of each checkpoint.

It also explains how to meet these criterion, and also how to fail to meet them. This helps designers and developers to not just rigidly go by the letter of the recommendation, but rather, adhere to the intent.

I think this will make for much more accessible sites in the near future because it stresses building sites that meet the intentions behind the guidelines instead of just having checkpoints to meet.

What do you think of the new WCAG 2.0 Recommendation? Have you started using these on any of your sites?

Last week we learned how to save time and file size by using CSS shorthand in our CSS code. This week we’re looking at a tool to speed up creating your XHTML pages and files.

Each time you get ready to begin a site, you have to add certain things to each page:

• Document Type Declaration (DTD - XHTML Strict, Transitional, etc)
• Page encoding (UTF-8, etc)
• Link your stylesheets (CSS)
• Import/link your javascript library or choice

You may also add folders in your work directory for:

• PHP includes
• Images
• Flash
• etc

All of these things are pretty standard. Even those these things are pretty straightforward, making a new file, or copying and pasting from a previous project can take up valuable time better spent on the meat of the site code.

Generate Code With Deploy

I’ve been using an online tool called Deploy. This gives you a dead-easy way of choosing your DOCTYPE, linking CSS, importing the jQuery library (and common plugins) and creating common file folders.

It then generates the code in a nice ZIP for easy download. You can also bookmark the page and regenerate the code again without having to choose the options all over again.

Project Deploy is a great time-saving tool for any web designer.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup

Subscribe to our RSS feed and look for a new installment of Quick and Dirty Tips.

What would you do without email? Email is one of those things that’s a necessity when working on most projects. So it’s not surprising that most of us (designers and non-designers alike) have at least 2 email accounts.

How do you keep track of all your email accounts when you’re out of the office?

With work-related responsibilities, I have 6 email accounts that need to be checked throughout any given day. I manage those email accounts with Thunderbird and an array of folders and rules that I’ve set up when I’m at my computer. However, when I’m not at my work computer, I have to sign into 4 or 5 different webmail accounts to check my email.

A Better Way to Manage Your Emails

A while back, I heard about Zenbe, a free online service that allows you to manage multiple email accounts from one single Zenbe account. I’m going on vacation in a few days, so I finally got around to setting up an account and playing around with it.

With Zenbe, you can:

• Manage and keep track of emails from multiple email accounts (with tagging)
• Collaborate and share files, emails, calendars, agendas and chat through private ZenPages
• Update Facebook and Twitter accounts
• Chat through Google Talk
• Easily view and sort attachment files

Not Just Webmail

More than simply checking multiple email accounts; you’re able to actually manage all of your email from multiple accounts. Big difference.

If you’re pulling emails from multiple email accounts into a single inbox, you’d better have a good way to organize them. Zenbe does an amazing job of this with very minimal input from you.

Zenbe’s main window and interface is easy to use and intuitive.

When you set Zenbe to link to an email account , you can enter tags for that account. When Zenbe pulls emails from that email account, it then automatically tags them so you can see what account they belong to in a glance—even without opening the email.

These tags are also automatically applied to the emails you send from Zenbe—letting you keep track of which emails you sent from which account.

If you want even more control over your emails, you can setup rules and apply tags based on criteria such as who the email’s from, the recipients, subject, etc. This lets me tag emails from specific clients and is a nice alternative to the folders I currently use in Thunderbird.

You can also tag individual emails manually if you want.

Also note that Zenbe doesn’t reroute your emails—they still get delivered to your regular email accounts and thus to your desktop email program of choice.

Collaboration With ZenPages

Zenbe has something called ZenPages that lets you communicate with others easily. You can add:

• Sets of emails (by email address or tags)
• Files
• Calendars
• Agendas and more

After you create a ZenPage, you invite people by email address to share the ZenPage with you (Note: the people you invite don’t need a Zenbe account to use the ZenPage). New emails, files and such are added to the ZenPage automatically as they come in.

You’re able to collaborate and share files back and forth on a secure page. Only those who you choose to invite get a link to your ZenPage. You can even chat live right from the ZenPage.

ZenPages Video Overview

Subscribe to the RSS feed for the ZenPage and you’ll be able to see when people add content to the page.

ZenPages are great solutions for those who are collaborating on a project and want to have related information easily accessible to everyone involved.

Contacts and Your Address Book

Another great feature is that you can easily import your address book into Zenbe. I just opened my Thunderbird address book, exported to CSV and imported the file in Zenbe. Zenbe makes it easy to organize those contacts as well.

I have a huge list of email contacts in my address book. After importing them into Zenbe, I can check the star next to each one that I want to make a favorite. Then, I can choose the option to show the full list of contacts, or only my favorites. I use this to show only the people I contact the most.

Zenbe lets you add unlimited email accounts and phone numbers to a single contact. You can enter and add more details such as more than one address (if for instance there’s an office address and a residental one).

If you don’t have any email rules setup, you can also search for emails from specific contacts right from the address book.

Zenbe also pulls in Gravatar icons for the contacts in your address book when available.

The handling of contacts is nicer and feels more like an actual desktop app than any other web-based app (including Gmail) that I’ve used.

More Than Just Email

Even though managing multiple email accounts from one account is simple with Zenbe, and sharing information almost fun with ZenPages, there’s lots more that you can do.

Calendar

Zenbe has its own calendar. You can also import calendars (.ICS and .ICAL formats) or subscribe to web calendars.

It’s important to note that the events that are imported from other calendars are editable, but do not sync back to the original. This may not be a deal-breaker for some, but if you just want to keep track of your agendas and upcoming events, this works just fine.

Zenbe also sports agenda and todo sections in the sidebar. These, like most of the features in Zenbe, are simple to learn and pretty intuitive.

Social Networking

You can link to your Facebook, Twitter and Google Talk accounts right from the Zenbe sidebar.

For example, the Facebook tab lets you:

• Change your Facebook status message
• See updates from your friends
• Get notified of new messages and friend requests

A Powerful Tool For Email and Communication

Zenbe is a full-featured tool for communicating with your clients across multiple email accounts, Facebook, Twitter, Google Talk and more. If you have more than one email account and you’re looking for a better way to manage and organize your email, give Zenbe a try.

Remember: it’s free and it doesn’t take over your existing email accounts (meaning all your emails will still be sent to your desktop app).

I’ve decided to provide some quick and dirty tips and code snippets over the next few weeks that are useful for beginners and good reminders for us that have been building websites for a while.

This first set of quick and dirty tips involves 4 CSS shorthand tips for shortening the amount of code you have to use, thus reducing the file size of your stylesheets:

1. CSS colors
2. Remove units for zero values
3. Background colors and properties
4. Margins and padding

CSS Colors

The most accurate way to define colors in CSS is to use the hexadecimal values. For example:

• #FFFFFF = white
• #000000 = black
• #CCFFFF = light blue

We could just leave it at that, but if you use these values over and over again, it gets monotonous and adds extra bloat to your code that you don’t need.

Instead of using the 6 characters that make up a color in hex, we can shorten it to only 3 characters like so:

• #FFF = white
• #000 = black
• #CFF = light blue

As you see, the hex values change, but the colors stay the same. To shorten the hex values, think of the color values as 3 pairs of characters (which is what they really are).

If both letters/numbers in each pair are the same, you only need to use 1 of them. Do this for each pair and you will get a hex color that’s only 3 characters long (plus the #).

Note: This only works when both values in every hex pair are the same. The following examples can not be shortened:

• #3C3C3C
• #3F3A2C
• #CCFFF1

Zero = Zero

This is one that’s overlooked by a lot of beginners. Zero is zero—no matter if you’re talking pixels, ems or percentages (0px, 0em, 0% = 0). There’s no need to include anything after a 0 (zero) value.

It’s all the same, so there’s no need to add the type of measure you’re using to zero values. This is a tiny thing maybe, but over a stylesheet, it can really reduce the file size.

Defining Background Colors and Properties

In CSS, you can define a rule for the background color of an element or class like this:

#some-element { background-color: #FFF; }

This works, but you can shorten this to simply:

#some-element { background: #FFF; }

You can also define other background properties such as a background image (and associated properties) all at once like so:

#some-element { background: #FFF url(../images/go.png) 100% 100% no-repeat; }

This sets the background color to white (#FFF), assigns a background image (go.png), anchors it to the bottom right of the element (100% and 100%) and makes sure the background image doesn’t repeat.

Margins and Padding

The code to set margins and padding can be shortened in CSS as well.

Imagine we have an element that needs a margin on the right and bottom of 10px, while the top and left sides have no margin applied to them. We could setup a rule like this:

#callout {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	}

This gets the job done, but it’s terribly long-winded. We can shorten this dramatically by entering the values of each side as 1 set of 4 numbers:

#callout { margin: 0 10px 10px 0; }

Much shorter, eh? We removed all the separate definitions for each side and combined them into one string.

This works by thinking of each side like a clock. The order of numbers is clockwise: top, right, bottom, left. Each side’s value is separated by a space.

We can also shorten margins and padding in other ways in some situations. If all the sides have the same amount of margin, you can use just one value:

#callout { margin: 10px; }

In this example, all sides will get a 10px margin applied.

If the top and bottom margins are the same and the right and left sides are the same, you only need 2 values:

#callout { margin: 10px 5px; }

Here, the top and bottom get 10px margins and the right and left sides get 5px.

Finally:

#callout { margin: 10px 5px 20px; }

Here, the top gets 10px, the right and left get 5px and the bottom gets 20px. In this example, the final (4th) value doesn’t need to be defined as long as it’s the same as the right side - in this case 5px.

These shorthand tips apply to defining padding as well.

I hope you enjoyed these quick CSS shorthand tips. There are more ways to shorten your code, but this will get you started.

Look next week for more quick and dirty tips. Subscribe to our RSS feed to keep updated.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup

That’s right. The much anticipated update to WordPress-WordPress 2.7 (final release) is making its debut on WordPress.org after months of development, testing and anticipation! Hurray!

Before you go and upgrade, check your themes and plugins to make sure they’re ready for the newest version of WordPress first.

The dust is still settling on the WordPress website (I haven’t heard an official announcement from WP yet), and some links are still pointing to the 2.6 docs, so I thought I’d post the correct links to the 2.7 docs and guides.

Download WordPress 2.7

Is Your Theme Compatible?

There have been some changes to themes for WordPress 2.7-primarily in the code for comments. Do yourself a favor and check out the Migrating Plugins and Themes to 2.7 section if you’ve made your own theme or are heavily customizing an existing theme.

Also, check WP’s list of 2.7-compatible themes.

Are Your Plugins Compatible With WordPress 2.7?

It’s vital before making the jump to 2.7 that you make sure any plugins that you rely on have been updated and work bug-free on WordPress 2.7.

Check WP’s list of plugins that work with WordPress 2.7

Ready To Upgrade To 2.7?

If your theme and plugins all check out and you’re ready to upgrade to 2.7, take a look at WordPress’ Extended Upgrade Instructions.

I’m not making the leap myself for a couple week probably. There are still some plugins that I’m going to wait on be updated before I take on the upgrade.

What are your upgrade experiences? Let us know in the comments.

Keyboard shortcuts are vital for navigating and performing various actions quickly, and are very helpful for designers when working on projects. Firefox has a keyboard shortcut for just about everything.

Unfortunately, finding and remembering them all can be difficult. Also, shortcuts differ slightly between Windows, Macs and Linux versions of Firefox.

Firefox Keyboard and Mouse Shortcuts

Fortunately, AccessFirefox.org—a site dedicated to showcasing accessibility tools and features in Mozilla Firefox—has a great list of Firefox keyboard and mouse shortcuts. You can filter shortcuts by operating system (Windows, Mac, Linux) or view them all at once.

Accesskeys Keyboard Shortcuts

Some websites use accesskeys to allow people with disabilities to access site navigation links by keyboard. This is a requirement for most sites in the UK.

View our list of keyboard shortcuts for activating accesskeys in all major browsers and OS’s. This list contains the keyboard shortcuts to activate accesskeys in Firefox, IE, Safari, Opera, Google Chrome, Konquerer and Epiphany in Windows, Mac OS X and Linux (Ubuntu).

On the previous version of this site, I used accesskeys for the main site navigation. However, because of no clear standards and the chance of interference with browser shortcuts, I decided not to include them in the current version.

Leave us a comment and tell us what Firefox keyboard shortcuts you use the most.

If you have logged into Google Reader this afternoon, you may have noticed some subtle drastic changes.

Ex-nay on the Rounded Corners

The biggest and most obvious changes involve the Google Reader interface. No more rounded corners. Also the light blue in the sidebar and elsewhere has been replaced with plain white and a more subdued color scheme.

Personally, it seems as though they are realigning their design to match the basic look of the Google Chrome browser.

But beyond the visual look, there’s some added functionality as well.

More Room

You can now expand and collapse the navigation sections in the sidebar to show and hide information. This is a welcome addition for those (like me) who have a huge number of feeds and don’t always use the Home and Shared sections. This gives more room for your list of feeds.

Edit: The search has been improved as well. Now when you go to choose which tags to search through, you can start typing and the tags are filtered as you type. This helps speed things up if you have a huge list of tags.

The Refresh button has been moved from the sidebar and now resides at the top of the main Reader window.

I haven’t had time to tinker and explore yet, but I’m looking forward to it.

For a more in-depth list of the changes to Google Reader, see Google’s Blog post.

What do you think about the new design? Love it? Hate it? Meh?