Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers

For those of you late to the party, I would recommend you read the first two ever-so-interesting parts of this tutorial: Minimizing File Size and Minimizing Server Calls. The first part, especially, will introduce you to the importance of web page optimization. This part of the tutorial is written under the impression that you have either read the first two parts or found this page via Google in an attempt to answer one question in particular, in which case you don’t need and probably aren’t reading the introduction.

That said, part 3 deals with minimizing your web page’s parse time – that is, the time it takes for the browser to convert your document from markup to visual elements. Thus concluding the sequential steps of web page creation: creating the files in a manner to reduce their size, retrieving the files in a manner to reduce server stress, and finally loading and displaying the files in a manner that occurs swiftly.

If you’re using WordPress just forself, then everything that comes with WordPress preconfigured is probably fine, but what about when you have setup a client site with WordPress, which your client will be using as a content management system? Well, assuming your clients are like everyone else’s clients, they’re probably not familiar with WordPress, which means that the simpler you can make the interface, the better their experience will be.

In this tutorial, I will be demonstrating to you how to customize several different sections of the WordPress admin area, including Dashboard widgets, left menu items, post/page meta boxes, and list columns. By the end of this, your WP admin area will be much better suited to inexperienced clients, making both your life and their’s easier.

This tutorial will teach you how to use JavaScript to open links in a new tab or window and remain standards compliant.

Using JavaScript to append a target tag does work. It works for the same reason it works to simply put the target attribute in the markup; the browser ignores your document type declaration, regardless of what you set it to be.

Setting target in JavaScript is not using JavaScript to open the window. It is the browser’s interpretation of the target attribute, as defined by non-standard HTML, that opens the window. If the browser were to use actual XHTML standards, it wouldn’t know what to do with a target attribute, whether it was set by the markup or set by JavaScript.

If you’re reading this tutorial, it should be safe to assume you’ve read part 1, or you’ve mastered the majority of YSlow’s recommendations and are looking for one topic in particular.

If the latter, you won’t be needing this introduction. For everyone else, today you’ll be learning about how to minimize server calls. What’s that in layman’s terms? You’ll be decreasing the number of times a client will have to connect to your server to download files. But with all the bandwidth saved from the first tutorial, why are server calls important? Hell, your server can handle ten times the amount of traffic and still use the same amount of bandwidth. It’s not about bandwidth. Okay, it’s a little bit about bandwidth; but it’s mostly about the maximum number of connections a server can handle.

This first of a two part tutorial will go through the process of building an amazing button. We’ll begin by designing the concept in Photoshop and next week we will code the whole button.

Read on to start designing!

Anyone who has been in the web design business knows that there is virtually no end to upgrading your website. You have to learn the markup for a webpage, how to style it, how to make it cross-browser, how to use server-side programming, and so on and so forth. It’s a constant learning experience. After years of hassle, you finally have a fully-functional, Web 2.0 website! It works in all browsers and even passes validation! Satisfied?

Unfortunately, you’re not done yet. There’s a final step for all intended web programming professionals. It separates the men from the boys, the experienced from the amateurs. Why is it important when your site is already functional for all viewers?

If you aren’t already aware, I’m talking about optimization. Read on to learn more.

In our last article, we discussed how to use Firebug to troubleshoot CSS issues. This time, we’re going to be tackling an entirely different beast: JavaScript. Historically, JavaScript debugging has been a task left largely to the developer to figure out. Before Firebug, there were few if any viable JavaScript debugging tools available. The Firebug JavaScript console provides us with debugging tools, but it also allows direct interaction with the DOM through a command-line.

Firebug is one of the most valuable tools available to web developers today. Before the advent of Firebug, troubleshooting CSS issues and JavaScript bugs was a hit or miss guessing game. The response to Firebug from the development community has been overwhelming, with at least 64 extensions for Firebug appearing since the debugging tool was released.

Whether you’re a designer or a developer, Firebug is an indispensable resource that is easily configurable for one’s own specific needs.

Continue reading for Part 1 of our 3-part series, “Working With Firebug.”

Custom meta boxes are extra input fields that can be included on the post editor screen, allowing us to enter extra information about our post or page.

The custom meta box was a feature mainly implemented in WordPress 3.0, but has been around a bit longer, since 2.8. They are one of the more powerful features available to theme and plugin developers, but sadly not used that frequently.

Learn how to create your own custom Meta Boxes in this tutorial.

If you’re serious about web standards, there’s no good reason to stick with the XHTML 1.0 transitional doctype declaration.

As development of web standards has progressed, there has been an increasing push to abstract all of the layout and functionality of a web page from the content. The theory goes that XHTML should only be used to define the content of the page, while layout is left to CSS and functionality is handled by JavaScript.

This has led to the depreciation of the target attribute in XHTML 1.0 transitional, while it was dropped altogether from the XHTML 1.0 strict specification. What this means is that if you want to take advantage of the benefits of using the XHTML 1.0 strict specification, you shouldn’t be using the target attribute in any of your links.