Ever get turned off by a website because it takes too long to load? Even the most patient viewers start getting frustrated by 5-10 seconds. If you aren’t on a dial up connection, there is no excuse for slow load times. Luckily, there are two great tools out there that can help you speed up your website.

Firebug

The first tool you might already be familiar with, Firebug (if not, prepare to have your mind blown). Firebug is a great tool on Firefox for debugging, breaking down and testing styles on your website. It also allows you to monitor how things are loading into your site.

The Network Monitoring tab gives you a nice time line of when things are loading into your site. Hover over a file to get more specific info.

To use the Firebug Network Monitoring, first you must have Firebug plugin installed on Firefox. Once Firebug is installed, enable Network Monitoring by clicking the arrow to the right of the Net tab and choosing “enable”. Now refresh the page you want to monitor (while Firebug and the Net tab are open). As the page loads, each file will show a progress bar relative to all the other files.

From this data you can determine what exactly is slowing down your site. If an image is taking a long time to load, consider reducing it’s file size or creating a sprite. Requesting a lot of .css or .js files? Maybe consider condensing them into one larger file to reduce the HTTP requests. If you are having trouble deciphering all this data, I would recommend trying out YSlow.

YSlow

The Yahoo Performance team has identified a set of rules that affect performance on web pages. YSlow integrates with Firebug to determine whether your site complies with these rules. If not, it will give you recommendations on how to improve it.

If you don't feel comfortable analyzing the data in Firebug, let YSlow do it for you!

YSlow is another Firefox plugin, but in order to use it you must have Firebug installed first. Once Firebug is installed, you can download YSlow for free here. YSlow will now appear as a tab inside Firebug. Open up the tab and choose “Run Test” to try it out.

YSlow will analyze your site and give you grades on your performance. If you find yourself getting an F in a certain category, YSlow will offer a recommendation and reference link with more information. If you want to find out more about YSlow, check out the documentation.

As the web designer/developer it is your responsibility to tweak your site for optimum performance. So, before you start blaming the server or client’s internet connection, check out your site with FIrebug and YSlow. Even if you aren’t having any issues with your site, it is still worth checking out Firebug Network Monitoring and YSlow. There are always way to improve performance and learn something new.

On August 3rd and 4th, Chris Heinen will be teaching a WordPress.com class at Noble Desktop. WordPress makes it easy to create and maintain a website, even if you have no web design background. This is probably why WordPress is the most popular blogging platform on the web today! Check out the complete syllabus.

Below are a few of the topics covered in the course:

• Setting up an account with WordPress.com
• Customizing an account
• Creating Posts
• Adding Pages
• Including Media (Images, Movies, PDFs)
• Creating Link Lists
• Customizing the Blog’s Appearance
  • Uploading Custom Graphics
  • Using Pre-Made Themes
  • Choosing Custom Fonts with Typekit
• Using the Dashboard

At the completion of the course you will have a fully functioning blog, web address and the skills required to run it. Your blog will be up and running!

This is the first of two WordPress classes Noble Desktop will be offering, the second of which is currently in development. This class is geared for anyone and everyone, no experience with computer graphics or coding is required! Even if you are a web designer who is unfamiliar with WordPress, this is the first step to learning it so you understand how to make posts, pages, etc.

The second class will be geared to web designers who already know Dreamweaver, HTML & CSS. That class will focus on WordPress.org, including how to install it on your own domain name, and how to build custom themes for WordPress. If you are new to WordPress and want to design your own themes, you will want to take both classes.

This class meets for 6 hours total. Each student gets their own computer with a 19″ monitor. Included is a custom Noble Desktop workbook with CD.

Sign Up

I stumbled across TimThumb while working with the Smooth Slider WordPress plugin. For some odd reason, Smooth Slider was converting all my nicely optimized JPGs into huge PNGs (60kb .jpg turned into a 400kb png). This was unnecessarily slowing down the load time for the website I was working on, so, I decided to investigate.

It turned out the culprit was an older version of the TimThumb.php script. After downloading the latest version from Darren Hoyt’s site and uploading it to the appropriate directory in Smooth Slider, everything worked great. In fact, I was really impressed about how easy TimThumb made it to scale and crop my images.

How to use TimThumb

Grab a copy of the source code and save it into a new document called ‘timthumb.php’. Then place that file in the scripts folder on your site (ex: /scripts/) and call the image like this:

<img src="/scripts/timthumb.php?src=/images/pic.jpg&h=75&w=75&zc=1&q=100">

The query string determines what image is going to be cropped, and the properties of the new image:

?src=/images/pic.jpg&h=75&w=75&zc=1&q=100

Here is the breakdown of the different parameters:

• w: width
• h: height
• zc: zoom crop (0 or 1)
• q: quality (default is 75 and max is 100)

Image on the left is the original and the one on the right is it's TimThumb counterpart. Notice how the script both scales and crops relative to the center of the image.

Some important things to note:

• TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed.
• Once installed and in-use, TimThumb will automatically create a /cache/ subfolder with proper write-permissions. If your host server doesn’t allow this by default, be sure to manually change the /cache/ folder permissions to 777.
• In addition, make sure the folder which contains TimThumb is set to 777.
• As in the example, use absolute paths for your script and images
• To really speed things up and make use of the advanced caching checks added to the script, copy these rules to your .htaccess file.

Conclusion

TimThumb looks like a great script for resizing images on WordPress templates and plugins. Including a cropping script gives the developer control over what is displayed on the site, regardless of what size image is uploaded. This both improves the user’s experience as well as ensures a consistent style for the template/plugin. I plan on using TimThumb in the future and encourage you to try it for yourself. Also, be sure to check out Darren Hoyt’s site for the latest code updates and demo.

On June 24th and July 21st, Chris Heinen will be teaching seminars at Noble Desktop. These hour long seminars will give an introductory look into WordPress and will cover the following:

• Blogging with WordPress
• WordPress as a CMS
• WordPress Community
• Examples of advanced WordPress sites

So, whether you are interested in just starting a blog, or using it to manage a website, be sure to stop by. If you have any advanced questions on WordPress, Chris will be staying after class to help.

It looks like both the afternoon and evening seminar on June 24th are fully booked! So keep an eye on the seminar registration page for any openings or sign up early for the July 21st class. You can sign up by clicking the following link to Noble Desktop.

Register

As you may have noticed, I have been slacking in the post writing department for the past month.  This is because I have been crazy busy preparing a new set of courses for Noble Desktop. In the near future, Noble Desktop will be offering beginner and advanced courses in WordPress. It is a big undertaking to create these courses from scratch, but I can’t wait to start teaching!

Noble Desktop is fantastic desktop publishing and web design school located in SoHo, NYC. They offer a variety courses in software ranging from Photoshop to Final Cut Pro. I personally have attended dozens of their free seminars and am excited to be contributing to the school.

If you are curious about the course or WordPress in general, I suggest signing up for one of my free seminars. They will take place May 24th and June 24th. Make sure to do it soon because they are filling up fast!

Classroom at Noble Desktop (photo: Noble Desktop)

The web generation is full of free loaders. We grew up getting our music for free from Napster, ripping movies with BitTorrent and using free social networking tools like Facebook. We expect our content now and we want it for free. This is the environment people are facing when developing a business plan for the mobile web. Daunting task, but don’t despair their are a few business models you can pursue.

App Stores

The Apple App store has been a successful business model for many, but it is difficult to stand out amongst the crowd.

The first and most obvious venue to sell your applications would be in an app store. App stores provide a powerful outlet to sell device specific, native applications. When you post your application in a store you can either make it available for free or charge a fee. If you charge a fee, expect to have 30% cut of whatever profit you make selling from their store. This may seem like a big cut, but it is very reasonable considering the exposure and credibility you receive in the marketplace. As the Apple’s over 4 billion downloads has proven, if the content and experience is good, people will be willing to pay.

Side Note: While app stores serve as great marketplaces, keep in mind native applications themselves have some setbacks. Developing unique native applications for multiple platforms takes more time and money. I would recommend looking into developing a single mobile web application and using a program like PhoneGap to convert it for iPhone, Android, Symbian, Palm and Blackberry.

Subscription Fees

With Grooveshark, you have the option to subscribe to remove ads.

If your content is really good, then people might be willing to subscription fee to “upgrade” to premium version of your app. This model is often coupled with an advertising model. For example, Grooveshark, a popular free music library give you the option to remove ads if you upgrade to the “VIP Pass”.  Hulu is also toying around with the idea of providing a premium subscription option to compliment it’s ad revenue. I know what you are thinking, I would never pay for something I could get for free! But what if that subscription allowed you to watch more recent episodes of your favorite shows, on demand, with fewer commercials and from the comfort of your own device? Then you might be willing to fork over the cash.

Advertisements

The true power of mobile devices, is that they provide their users with contextual information relative to their current needs and location. This is a wet dream for advertisers because they can reach out to you when and where you are most likely to make a purchasing decision. Now, to burst you bubble, recent studies have found ad revenue is not as profitable as selling applications (see above slide show). This is due to the is a significant drop off in the usage of applications after the initial purchase (people have short attention spans, I like to call it App ADD). In order to be compete with the revenue generated from a paid app, you would need to “bombard” the user with ads. Even larger companies like Hulu are having a difficult time supporting themselves purely on ad revenue. They have found themselves lengthening the duration of ads on their site. I wouldn’t rule out ad revenue as an option, but you would need to rethink a new system because the traditional system alone is a rough route.

Virtual Goods

The concept of selling imaginary, intangible goods online may seem like a crazy business model, but in fact they make up the bulk of revenue from in the social gaming industry. FarmVille, a Facebook game application (and soon to be mobile app), has over 82 million players worldwide and is a great example of this model. This farm simulation game is free, but also gives you the option to purchase farm “cash” and “coins” using real money. FYI, FarmVille was bought out by EA Games for 400 million dollars last year. The social gaming industry brought in 1 Billion dollars in 2009 and is predicted to bring in more than 4 billion by 2013 (Reuters). If you can design the next hit game, you might be able to turn a good profit by selling virtual goods.

Conclusion

It is estimated that by 2015 the mobile web will have more subscribers than the desktop web (Morgan Stanley). This mass exodus to mobile means we need to modify the way we conduct business on the internet. Does this mean the mobile web is destined to be cluttered with mini banners? I hope not. Businesses will more likely use a hybrid of some of the business models listed in this article, as well as some new ones. I can’t wait to see what new approaches people discover to profit in this growing industry.

On May 1st, WordPress is releasing version 3.0 and with it a lot of cool features. The one I am most excited about is the ability to create custom post types. Because frankly, I am tired of hacking WordPress to perform more like a CMS. With custom post types you will be able to better organize your content and create websites for your non-web-savvy client that they can actually manage.

Back in the old days…

Currently on WordPress 2.X, you are basically limited to pages and posts to display your content. This is perfectly fine if you want to deliver your client something that looks like a blog. But what about posts with multiple content areas and unique layouts? Now you could create custom fields with html and hack template to get a desired effect, but do you really expect clients to handle this when you pass it on? Plus, it will get awfully messy when they have to sort through categories and filters to find their content.

Enter WordPress 3.0 and Custom Posts

In WordPress 3.0 posts are now under you control. Instead of manipulating posts to meet your needs, simply create a new post type (and leave posts where they belong… your blog!). Lets say you have a website that features a list of cars for sale. Instead of hacking posts, you would create a post type called “Cars”. Here you could manipulate the meta boxes to match the needs of that particular post type.

Custom page types live in the sidebar of you dashboard. Pretty neat, eh?

As you can see above, the “Cars” custom post type is nicely incorporated into the dashboard menu. You don’t have to worry about adding a car category or fumbling through posts to find the right content like in WordPress 2.X.  Everything car related can be found in the “Cars” post type, just the way it should be.

But wait there’s more! What customized post type would be complete without customized columns in the edit page? Check it out:

With a little code in your functions.php file, you can even customize the layout of the columns on your edit page.

Using Custom Post Types

Creating a custom page is surprisingly, pretty easy in WordPress 3.0. First of all, if you want to try the following code, make sure you have WordPress 3.0 installed (if you can’t wait for the release, pick up a copy at the Nightly Builds). Then go into your template of choice and open up the functions.php file.

This will add a “Cars” custom post type to your dashboard:

register_post_type('cars', array(
 'label' => __('Cars'),
 'singular_label' => __('Cars'),
 'public' => true,
 'show_ui' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'rewrite' => false,
 'query_var' => false,
 'supports' => array('title', 'editor', 'custom-fields', 'author')
));

Using the register_post_type function you create your custom post type with the label of ‘Cars’. This post type supports a title, editor, custom-fields and author. We will use the editor and custom fields in or posts in just a minute, but first lets style the edit page columns.

Add this code to your functions.php just below where you declared your register_post_type function:

add_action("manage_posts_custom_column", "my_custom_columns");
add_filter("manage_edit-cars_columns", "my_cars_columns");

function my_cars_columns($columns)
{
 $columns = array(
 "cb" => "<input type=\"checkbox\" />",
 "title" => "Car Type",
 "description" => "Description",
 "price" => "Price",
 "availability" => "Availability",
 "comments" => 'Comments'
 );
 return $columns;
}

function my_custom_columns($column)
{
 global $post;
 $price = get_post_meta($post->ID, 'price');
 $availability = get_post_meta($post->ID, 'availability');
 if ("ID" == $column) echo $post->ID;
 elseif ("description" == $column) echo $post->post_content;
 elseif ("price" == $column) echo $price[0];
 elseif ("availability" == $column) echo $availability[0];
}

This just added six columns to your custom edit posts page (checkbox, title, description, price, availability and comments). It fills that content dynamically using information from the post you are about to create. Go into your freshly made ‘Cars’ post type and choose ‘Add New’.

Enter in some content and make sure to use ‘price’ and ‘availability’ as your custom field names (these specific values are called upon in the code you just wrote):

Make sure to use 'availability' and 'price' as your names if you are following along with the tutorial.

That’s it! You just created your first custom post type. Now that you have your Cars custom post type set up, you can begin styling your templates accordingly. Best of all, when you hand this over to your client, it is much easier for them to update their site. They just need to enter their copy into the editor and custom fields and they are done.

WordPress 3.0 will make it so much easier to use their platform more like a CMS. So, stop wasting time hacking WordPress posts and start using custom post types! If you want to check out more of their new features and updates, check out http://codex.wordpress.org/Version_3.0.

Also, a special thanks to Konstantin for inspiration and Dave Holm for his help refining the code. Be sure to check them out!

Last year I read an interesting article in Time magazine that predicted the future of the business landscape would look a lot like World or Warcraft. I know what you are thinking… and no, it wasn’t predicting a world of goblins in business suits and negotiations with battle axes. What it did predict was a highly collaborative and merit based system much like the game. Which in my opinion is exactly what this world needs to get on track.

As a freelance web designer, I am no stranger to this collaborative and merit based landscape. For me, collaboration is an essential tool for handling larger projects and easy to do in the digital workplace. The internet has made it possible to work with and for people that you may never actually meet in person. Rob Carter, Chief Information Officer at FedEx explains the concept very well:

WoW, as its 10 million devotees worldwide call it, offers a peek into the workplace of the future. Each team faces a fast-paced, complicated series of obstacles called quests, and each player, via his online avatar, must contribute to resolving them or else lose his place on the team. The player who contributes most gets to lead the team — until someone else contributes more. The game, which many Gen Yers learned as teens, is intensely collaborative, constantly demanding and often surprising. ‘It takes exactly the same skill set people will need more of in the future to collaborate on work projects,’ says Carter. ‘The kids are already doing it.’

Imagine the potential of a working environment where employees can collaborate from virtually anywhere in the world and be rewarded based on their contributions. The success of business would no longer be limited by local intellectual resources of an area. Also, people will be more motivated if there is a direct relationship between the quality of their work and their compensation.

Recently, I stumbled across a great TED talk by Jane McGonical that extends upon this thought. She views this gaming culture as a catalyst in the evolution of humans into “super powered hopeful individuals”. She believes that the if we could redirect the energy and skills of the gaming community towards real world issues, the results would be unbelievable.

What excited me the most about her talk was how low-energy game systems and wireless internet would contribute to online gaming. Jane predicted in the next decade there would be an increase from 500 million to 1.5 billion online gamers. Think about that for a second, in ten years, a 1/4 of the world’s population will be interacting with each other through games. If games have access to 1/4 of the worlds population, imagine what other ideas and information the world will have access to.

Games aren’t going to solve the world’s problems, but will undoubtedly effect our culture in the future. The world will become smaller and people will be rewarded based on their hard work. It’s both an exciting and scary prospect. Competition will be fierce because employers can hire people from around the world. People will expect to be paid based on their contributions and not their seniority. It will be a competitive environment, but through competition, comes innovation.

A common issue for jQuery beginners is figuring out what selector to use in their code. You know what element you want to manipulate, but you just can’t figure out the correct selector syntax. Luckily, there are a couple tools out there to assist you in this process, Selector Detector and Selector Gadget. These bookmark wonders both allow you to dynamically analyze objects on your page, but which one is right for you?

Selector Detector

The element clicked is highlighted in red and the selector recommendation is outputted in a pop-up window.

Jessie Morris came up with an excellent tool for finding that pesky selector. He calls it the Selector Detector, and it is awesome.

The Selector Detector comes in the form of the bookmarklet, just like Firebug Lite. To use it simply bookmark the link, navigate to the page you want to use it on and select bookmark. A window will then pop up in the top right of your screen and display the selector of elements you click on. That simple.

Overall, Selector Detector works very well at selecting specific elements, however there are two setbacks. First, it only works one way. You can select an object to display it’s selector, but you can’t enter a selector to highlight the object. Second, it defaults to finding a very specific element selector. This means when you click on the second paragraph in your layout it will give you the selector specifically for that second paragraph and not all the paragraphs found on the page.

Demo (right click this button and bookmark it to make it available outside this site)

SelectorGadget

Here I am specifying that I want the bookmarklet link (green), and not every link (red). The selector is displayed at the bottom of the screen.

SelectorGadget is a similar tool made by developers Andrew Cantino and Kyle Maxwell. It is implemented using a bookmark just like Selector Detector. However, unlike Selector Detector, it allows you highlight elements via their selector and change the specificity of your selector search.

SelectorGadget allows you to highlight elements via their selector. This is handy in situations where you think you know the correct selector, but just want to double check. Just enter in your guess into the SelectorGadget text box and the program will highlight your selector on the page.

Another cool feature of SelectorGadget is it’s ability to change specificity. Meaning you can be as broad or specific as you like in your selector search. As you can see in the picture above, not only could I specify that I wanted the selector for a basic link, but I could also narrow that search to include just links with the .bookmarklet class. This is all accomplished by simply clicking existing highlighted areas to narrow the search, or clicking unselected related areas to broaden it.

Demo (right click this button and bookmark it to make it available outside this site)

Conclusion

If you are looking to find one specific element on your page, I would recommend using Selector Detector. Its precision is greater than that of SelectorGadget. However, if you are trying to find the selector for multiple objects, Selector Detector might be overkill. In this situation I would say SelectorGadget would be your best bet. SelectorGadget makes it very easy to change your specificity and then double check your work highlighting elements via their selector.

I hate to say it but they do. To be fair, it’s not their fault, it’s just that the standards of traditional print design do not always carry over to the web. It’s your job as the web designer to explain this newer medium to them and prevent them from overbearing the project. There are several key differences between web and print in terms of layout, precision and typography.

The primary difference between print layouts and web layouts is the space you are allotted. Print designers are often limited to fit their designs in a set number of pages. If the client wants a 10 page book or a Tabloid sized poster, that’s all you have to work with. Hours upon hours are spent finding the most efficient way to utilize this space (without making your original design look like crap).

Life Below 600px is a provactive article about designing below the fold. Make sure to click on the link below and read all about it.

While web designers are also constrained by the resolution of their target devices, they don’t need to worry about wasting paper. Adding more content can either be accomplished by including more pages or extending downward. Paddy Donnelly wrote an excellent article titled, Life Below 600px, in which he discusses designing “below the fold”. He argues that you don’t need to squeeze your website into the top 600px (initially viewable area on most monitors). In fact, that just leads to cookie cutter websites and mediocre layouts. Let your client know they can open up their designs and take advantage of this unlimited space.

They also need to know that sometimes precision needs to be sacrificed for flexibility. Print designers obsess over precision, and you would too if you only had one shot to print. Everything needs to aligned to the grid, quotes should hang, ragged lines balanced and orphans removed. While I don’t encourage sloppy design, achieving this level of precision in the web is nearly impossible.

The web is a different beast than print when it comes to precision. While print designers deal with one printer and can have absolute control of the outcome, web designers’ work displays different depending on what browser, monitor, computer or mobile device they are using. So, while it is possible to align your website to a grid, as A List Apart demonstrates, it would be foolish to expect it to render that way on every desktop and device. Let that print designer client know that sometimes precision must give way to graceful degradation.

Even a web "safe" font like Helvetica is not immune to different browser renderings (Firefox OSX vs. Firefox Windows XP courtesy of Adobe Browser Labs).

Another factor beyond our control is typography. For the same reasons that pages display differently, fonts will vary from computer to device. Even web “safe” fonts are not immune to slight variations in tracking, kerning and leading. Web designers don’t have the benefit of consistency when it comes to type. There is a point where old school print designer will just have to let go and except that their will be subtle differences. They will also need to understand what fonts can be used in a web project.

As discussed in my article Font Freedom, your choices are limited when it comes to type. There are image replacement and font embedding workarounds, but they require time to accomplish. They are also not without cross browser vulnerability. Let you client know what is possible and how this will increase the time and estimate for the project.  This way there are no surprises when they ask for a whole site that absolutely must be designed with Papyrus.

Print designers are entering an unfamiliar realm in which their rules and guideline may no longer apply. They may have a keen eye for design, but as your client, it is your responsibility to keep them informed about what is and what isn’t possible. The more you know about their profession the easier it will be to form a constructive relationship.