In this article, I’ll share with you some tips for launching a website based on the experience of our own launch of Design Instruct.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

1. Have scalable web server resources

With today’s high-availability and cost-effective content distribution solutions such as Amazon S3, and on-demand instant scalability offerings of hosting providers such as VPS.NET, you can affordably have web servers that can take a beating from high-burst traffic.

Not only will having scalable solutions prepare you for the high-traffic that a website launch can generate, but it also future-proof’s your set-up as your website grows. High-availability, metered set-ups give you the ability to pay for just the resources you need right now.

For Design Instruct, we set up a CDN for distributing static files for our content-heavy pages, and scaled up our VPS resources temporarily on the day of the site launch because we were anticipating a huge burst of traffic.

Regardless of how big or small you think the traffic you’ll get is, it’s never a bad idea to get a web hosting solution that will scale—they’re tremendously affordable and you pay only for what you intend to use.

Don’t risk having your website crash and your launch day ruined because of a shoddy web server.

2. Get all of your social media accounts beforehand

Nowadays, social networking is integral to a website. Don’t wait the last minute to sign up and set up your social network accounts on Twitter, Facebook, MySpace, and any other site that you’re planning to engage in.

This guarantees that your preferred account name will be available before you become known and gives your visitors additional ways to communicate with as soon as they arrive at your website.

On Design Instruct, our social media accounts were established well before the site’s launch date. For example, we had our Twitter account set up close to a month ahead of our site launch.

3. Have content ready to publish for at least a month

The early stages of a website is filled with many tasks. One timesaving deed you can do is to have content ready to publish so that you can follow up your launch with great content. This also frees you up for the many other activities involved in this stage of your website’s growth.

For Design Instruct, we set out to have 10 tutorials ready to go before we launched the site. We didn’t quite make that goal before our launch date, though we had enough to comfortably go ahead with the launch. This enabled us to focus on tasks that needed to be tended to without fear that we wouldn’t have great content to publish.

4. Drop hints about the upcoming launch to build anticipation

Let people know that there’s an event that’s going to occur to help create some hype. If you want to keep the details undisclosed to the public—that’s fine—you can still let people know that something on some date is going to happen.

In Design Instruct’s case, we wanted to wait until the actual launch before revealing what the site was. That didn’t prevent us from dropping hints that there was something coming soon. We did it through interviews and on Twitter a month ahead of the actual launch date.

This type of subtle hinting can pique the interests of your long-time supporters and fans. And those are the people that count the most when your website launches.

5. Plan your tasks for at least a month after the site launch

The worst question to have after a site launch is, "Now what?" You need a clear goal and direction on how you intend to follow through your site’s launch. If you’ve planned for a big site launch, don’t let the initial interest fizzle out by not having a plan. Before you launch, you should know exactly how you want to proceed right after.

For example, on Design Instruct, we had a laundry list of things we wanted to work on. Having content ready to publish, we were able to focus on growing the site and improving the user experience for our readers.

6. Triple-check the technical details before going live

Measure twice, cut once. Better yet, measure thrice. Making certain that your early visitors will have the best experience possible when first arriving at your site means that everything needs to be working correctly.

Check to make sure that all hyperlinks work. Make ultra-sure that contact forms, email accounts, commenting systems, and all the other things that your users will interface with, is working properly.
One of the late quick fixes we had to implement just hours before Design Instruct’s launch had something to do with category pages.

Users visiting a category page from the sidebar links that didn’t have an associated tutorial under it simply said that the page could not be found. It gave the impression that there was something wrong.

We had to revise the message to say, "There aren’t any posts in this category yet. We’re working on it though, so please check back soon!" to let users know that the pages do work, just that there aren’t anything in them yet.

7. Launch on schedule

Whether you’ve announced your launch date or not, you should release your website to the public when you say you’re going to. This forces you to stay on point and work towards a goal. What can cripple and delay a website launch is the attitude of "It’ll be ready when it’s ready."

When you’re nearing launch day and you think you won’t have the site fully completed, launch anyway (as long as it’s presentable and usable).

Websites aren’t like conventional consumer products—you can update and upgrade them any time you want.

At Design Instruct, we were delayed with some of the site features we wanted to implement, such as a comment rating system and a post rating system.

We still went ahead with the launch and created a malleable and constantly updated Upcoming Features page that listed the things we wanted to do in the future. We would curate this list by adding and removing items based on what our users want.

8. Contact your friends and family about the site launch

The first thing to do after a site has launched is to contact your friends and family. Let them know that you’ve launched the site so that they can be the first to see it.

Our friends list is just a bit larger than most people just starting out. However, we still sent personal emails to our friends at Smashing Magazine, Abduzeedo, Envato and others. We announced the site launch here on Six Revisions so that our regular readers would be the first to know about our new site.

It doesn’t matter how big your list of friends and family is, they should be the first to know about your site’s launch.

9. Provide easy ways of contacting you

When you first launch a site, you have to give visitors ways to communicate with you easily. Your initial visitors are early adopters, and as such, they’ll be critical and will help you find things that might be wrong with the site, as well as suggest ways you can improve the site for future users.

For Design Instruct, we had several modes of communication available: email, Twitter, the comments section in the announcement post on Six Revisions, and the comments section in the welcome post on Design Instruct.

This enabled us to find out what early adopters thought about the site, and what they wanted to see in the future.

We were also able to discover bugs via reports in comments and Twitter such as the error in color profiles in our CSS sprite and forgetting to set up RSS auto-discovery.

10. Show site visitors a roadmap of what’s to come

Perhaps the most important thing you can do when you launch a site is to show your initial users that there’s more to come.

No one gets a site right on the first day. Unless you release your website, anything you think your users will want and need is just a guess. The people who will best help you figure out what works for your users are your users.

So we’ve set up an Upcoming Features page and asked our users to tell us what they want and what they don’t want.

We’ve periodically polled our supporters and fans through Twitter to determine what we should do next.

We also track all of our site changes publicly through our changelog and version history to show our readers that we are indeed moving forward with their suggestions.

Let your users see that you have more tricks up your sleeve and that they should stay on for the ride as your website continues to grow.

Share your own tips for launching a website in the comments.

Related Content

• How to Design for Your Worst Client: You.
• The Three Golden Rules of Site Redesigns
• 25 Beautiful Examples of “Coming Soon” Pages
• Related categories: Web Development and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

1. CSS3, HTML5 and Fonts as a Service

CSS3, HTML5, and Fonts as a Service such as Typekit that cater to web browsers that already support the @font-face rule, are giving web designers the creative freedom that they have been coveting for a long time.

CSS3 is opening up various new options for styling content on the web, from multiple backgrounds on page elements, better ability to select and style elements with greater specificity, and color gradients without reliance on static graphics, to simpler aesthetical improvements such as support for rounded corners without the need for complicated sliding doors techniques or JavaScript.

HTML5 is slowly but surely changing the way we mark up our pages, bringing us closer to the holy grail of the semantic web, opening up native support for open format multimedia such as video and audio, and bringing us better ways to interoperate with the content of a website.

Another change that web designers have been wishing for is being able to use any font on a web page, without using static CSS background image replacement or relying on JavaScript and Flash. The development of tools like Typekit and greater support for the @font-face rule are enabling site builders to use a much wider range of fonts in their design.

So what will change?

These are all web technologies that are guaranteed to make the web a more aesthetically pleasing place. Of course, expect these new things to be misused by Sunday driver designers; there will be some horrible font choices and misemployed color gradients that will produce unreadable and tacky page designs, but it’s the opportunities that they open up for capable and creative designers that will be most interesting.

Some reading for you:

• Typekit
• CSS3.info
• Play around with CSS3
• Get Ready for HTML 5
• 5 Exciting Things to Look Forward to in HTML 5 written by Chief Editor of Six Revisions, Jacob Gube, for ReadWriteWeb

2. Ways we browse the web

The browser landscape is alive and well, with better and faster web browsers such as Google Chrome, Firefox, Safari, and Opera. Web users today are provided with many choices that will surely drive competition and one-upping from these companies – stressful for their developers, but great for consumers.

The browser wars is in full force, and unlike the preceding browser wars where Internet Explorer dethroned other browsers to take hold of a majority browser share, IE is shaping up to being the "dethronee" this time around.

And changes in browsing the web aren’t just limited to the web browser competition, the way we digest content from the web is increasingly becoming removed from the traditional "sit in front of your desktop" way. Smart phones are becoming more common, TV’s are becoming web-enabled–and as are gaming consoles such as the PS3 and Netbooks and mobile devices such as the iPhone and the Droid are giving users an experience on a smaller screen than a traditional laptop.

Moreover, browsers themselves are changing. The launch of Google Chrome brought the WebKit engine, a layout engine that has a big portion of CSS3 and HTML5 specifications already implemented, to Windows-based computers better than Apple’s Safari port to Windows, and it may yet be a bigger milestone than many first thought. With Google aiming for a 10% share of the market over the next couple of years, a big push for users may well be coming. A large shift from the dominant web browser, Internet Explorer, is underway and may be successful next year. In Germany, Mozilla Firefox is close to overtaking IE’s market share as we speak.

These factors are revising the way we think about web design and accessibility. Do you have a mobile version of your site? What does it look like on a small screen? What does it look like on a large screen? What does it look like in a WebKit versus Gecko versus Trident browser layout rendering engine?

Attitudes towards viewing of websites across different media is changing as well, designers are increasingly becoming of the opinion that designs do not need to render the same everywhere, nor do they need to give the same user experience across all web browsers.

So what will it change?

There’s a good chance that you’ll start to see websites that don’t look the same in every browser. Techniques for progressive enhancement are more commonplace than before, giving users of modern web browsers a better web experience than those who will not or cannot use them. Furthermore, there’s already widespread acceptance towards foregoing support for antiquated browsers, putting the burden of getting users upgraded on the browser makers, and not the designers. This type of forward thinking will only grow in the upcoming year. What’s more, the changes in the way we view the web will shift focus to content, functionality and accessibility, but by no means at the expense of good, interesting and inspiring design.

3. Social media

No one can deny that 2009 has been a big year for social media: Twitter, for example, has become the buzzword in many a boardroom and office. It’s obvious that it will continue to a big part of the web in the future.

In many ways, the growth of platforms such as Twitter and Facebook has led the web to be much more community-oriented. Big changes could happen within social media and, no doubt, will be led by monetization of the media.

One of the big questions revolves around how you measure the impact and value of social media and how to get that value back. How valuable are 1,000 twitter followers? Do you start charging for the service? Answering all these questions will lead to significant changes over the next year in the social media arena.

Along with these changes will come increased focus in getting information in real-time. Google is already discussing real-time search to leverage the immediate and breaking information that can be found on sites like Twitter. How these changes are integrated into the current web system, especially in terms of search engine technology, could precipitate into some interesting developments and innovation in the way we seek information online.

So what will it change?

With more people participating in the creation of information on the web, the way in which we obtain information will shift from being from a singular source, into a more community-created source. Looking for information about, say, a car repair shop will show you recent tweets and Facebook updates about that company instead of outdated and static information.

4. JavaScript

Whilst CSS3/HTML5 has started to step on the toes of JavaScript, JavaScript itself has started to inch into the territory of Flash. The growth of frameworks such as jQuery and has made rich client-side interaction and asynchronous/seamless user experiences a reality. This leads to easier deployments of web applications, which in turn, increases competition, which in turn, leads to innovation.

JavaScript is already stepping into what, in the past, we would associate as being Flash’s territory, such as interactive games (which can be used for training and distance-learning applications) and complex and interactive data visualization. It should also enable us to replicate rich interfaces and flash type experiences in a much more accessible way.

And very recently, 10 years after the last major revision, JavaScript (known as ECMAscript in web standards organizations) has just finished a major revision of its specifications for the language. Once browser companies adopt these standards, web developers will be provided with more tools to improve their capabilities in creating web applications.

So what will it change?

Because CSS3 and HTML5 will replace a lot of what JavaScript is doing now (i.e. complex element selections, dynamic rounded corners, handling real-time editable web pages), we will see a surge in JavaScript developing into being focused solely on handling programming logic of webapps on the client-side. With the news of the major revision on JS specifications, we will see a progression towards better web applications that can interoperate much better with other web apps (for example, a major goal for the new set of specs is the security of JSON objects).

5. Software as a Service (SaaS)

Software as a Service business models have been knocking around for years. Top-notch SaaS such as 37 Signals products and Google Enterprise are more commonplace now than ever before.

The competition is fierce; the technologies are becoming affordable and requiring little upfront costs, which gives the little guys a chance to compete with the bigger guys. In the next year, we’ll see this competition increase, and hopefully, the outcome is innovation in web apps.

So what will it change?

SaaS’s as a business model will continue to replace more traditional software that require you to install and run them on your desktop. With so much more people connected to the internet, the demand is on internet-enabled, interoperable applications. In 2010, we are in for some surprise improvements driven by a need to stand out from the crowd.

What are your predictions for the next year?

What do you think will be the catalysts for change over the next year? How do you think the web technologies we have now will evolve? Leave us a comment!

Related Content

• Creating a Timeless User Experience
• 10 Useful Gadgets for Mobile Computing
• 10 Simple Web Accessibility Tips You Can Do Today
• Related categories: Web Development and User Interface

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project - Stat Share.

This article will help you make an informed decision on what CMS is right for you.

Evaluating Content Management Systems

Evaluating content management systems can be an overwhelming task, not because it’s rocket science, but simply because there are tons of them to choose from. However, with a structured approach to your evaluation, things can be much easier and less intimidating. Let’s talk about the things you should look at when deciding what CMS to use; here are eight characteristics that a good CMS should have.

1. Intuitiveness: easy to understand and use

Your CMS should have a GUI (Graphical User Interface) that’s easy on the eyes, doesn’t have overly complicated options, and offers simplicity in its administration interface. A good interface means that tasks pertaining to creating and managing your content will be quicker, saving you a lot of time and increasing your productivity.

You should also look at it from an end user’s perspective: if you’re building a content management system for a client who’s not "technology-savvy" and you choose a solution that requires a Ph. D. in computer science, it’s less likely that they’ll be able to use the system (thus, defeating the whole purpose of a CMS, which is to empower its users).

2. Flexibility and Ease of Customization

When taking into consideration a content management system, make sure that you’re not obligated to use their design templates. A large quantity of CMS solutions allows you to customize your own design without major restrictions. If your CMS forces you to choose a fixed and unalterable design template, then you’re stripped of creative license and your website will look like everyone else’s.

CMS’s that offer customizations on templates are Expression Engine, WordPress, and Joomla just to name a few; these content management systems boast and promote their ability to be easily modified.

3. Extensibility via Plugins and Modules

A good CMS will allow you incorporate helpful site features into your site by letting you extend the default configuration with plugins.

Plugins/extensions/modules (their terminology varies between different platforms) make a difference in terms of enhancing your site’s ability to provide your site users with useful options for interfacing with your site.

Look for a CMS with a powerful Application Programming Interface (API) in case you need to write your own extensions. Make sure that the CMS you’re considering already has a huge list of plugins. Though you might not need plugins right away, it’s important that this is available to you, later down the road.

4. No Need for Programming Knowledge

If you’re more "design-oriented" than anything else, make sure you select a CMS where you won’t need to have extensive programming abilities to publish and maintain your site.

There is a wide selection of CMS’s that have WYSIWYG editors, letting you edit content without the need for code. Having to edit text through HTML markup can be time consuming and takes you away from other aspects of your managing and building your site.

Complex sites, however, can require a CMS that will let you type in some code, edit files with extensions such as .php, .css, .html, and make changes without that need for a third-party source code editor.

5. Optimized for Performance and Speed

Taking into consideration the speed your pages load on the browser, and how fast your site can make a connection to a server, is vital. Choosing a CMS that is bulky will drive away visitors rather then bring them in. By visiting examples of live sites, you’ll be able to gauge somewhat how fast pages load.

Keep in mind that you can increase the load time of your site by choosing a good host, and adding plugins that cache/compress/minify feeds, CSS, JS and also caches your database objects. A case study on this subject can be found here.

A simple and free tool that you can use to evaluate page response times of your CMS candidates is YSlow. Install it and head on over to demo sites of your CMS’s to see how well it’s front-end performs.

6. Security

Adequate security for your site is very important and must be in place in order to protect your content. There are CMS’s that allow you to install specific plugins and edit files/permissions in order to increase security levels. Make sure you choose a management system that offers modules to protect the integrity of your site. You can also protect your site by selecting a CMS that allows you to easily assign a different username and password to each user. This will let you view and control what each user has access to.

For WordPress, be sure to read about essential security tips and hacks for WordPress.

7. Documentation and Community Support

Nothing’s more frustrating than trying to figure out how to do something, and not have references online that you can take advantage of. One way to ensure that you won’t be running into this problem is by reading through the documentation of your candidate CMS’s. Also, a quick Google search will tell you how popular and well-documented a content management system is.

The availability (or lack thereof) of support from users of the system can be a deal maker or deal breaker. When users are active and proud of being part of the community, you not only have access to individuals that are more familiar with the system, but also, you can be assured that the project will be developed continually. Nothing’s worse than investing your resources and effort on a dead (or soon to be dead) project.

8. Emphasis on Web Standards and Best Practices

Content Management Systems developed under web standards guidelines and best practices will ensure that you won’t get burned later down the road. When applications are designed with best practices in mind, you can be assured ultimate cross-browser compatibility, lean-and-mean code, and ease of maintenance.

Look for content management systems that promote the use of web standards, and those that put it at the forefront of their development and design philosophy.

Some Key Content Management Systems to Consider

Now that you know the key characteristics of a good content management system, let’s take a look at a handful of major CMS’s that excel in most, if not all, of those areas.

ExpressionEngine

ExpressionEngine (EE) is a flexible CMS for any scope of project. Within a few minutes, you’ll understand how to easily begin creating content. EE’s templating system lets you quickly see instant changes live. EE also has a multi-layered caching system to try and minimize the database usage. In addition, EE lets you embed and run PHP directly within its templates, very similar to WordPress.

ExpressionEngine has various features such as allowing you to have multiple sites with just one installation of their software. Just as we spoke in the above section dealing with connections and load times, EE has a unique template caching, query caching and tag caching keep the site running at a pretty quick pace by storing database queries in memory to reduce database connections when generating web pages.

WordPress

WordPress is one of the most popular publishing platforms currently available in the market, and it’s known for being an excellent blogging platform. WordPress is free and open source, and it can be downloaded and installed as many times as you want.

WordPress installations are very quick and easy. It only takes a few minutes for your admin panel to be operational. If coding is not your strong suit, then no worries, WordPress offers its users a WYSIWYG editor (called Visual Editor).

Business Catalyst/Goodbary

Business Catalyst/Goodbary (owned by Adobe) is a powerful ecommerce CMS for developers. This content publishing platform has an array of useful features such as email marketing and in-depth site analytics. Business Catalyst gives you an easy way for your business to gain an online presence in no time. GB allows you to easily keep track of a customer’s actions, build and manage a customer database of any size, and sell your products and services online. Business Catalyst integrates well with a lot of popular payment systems such as PayPal, Google Checkout and pre-integrated gateways.

Joomla!

Joomla! is an advanced CMS with excellent function and content management. The installation process is pretty quick and easy. Joomla! is a complete CMS allowing you to build simple to advanced sites. Joomla also has super support for access control protocols like LDAP and OpenID, and can interface with popular and open API’s such as Google APIs.

With Joomla!, you’ll have more then 3,500 extensions at your disposal along with the support of an entire community. With a simple extension, you can add almost any needed functionality to your site.

One downside to Joomla! is that their heavy-artillery list of extensions often require you to purchase them. Hopefully, in the future, they will make their plugins free in order to aid users on a tight budget.

Drupal

Drupal, a great open source CMS supported by a very active community, lets users publish content through any time with very little restrictions. Once the installation is finalized, you will discover features such as forums, user blogs, OpenID sign-ons, profiles and more. This CMS was written in PHP/MySQL for ease of customization and has one of the highest-regarded API’s in the open source content management system field.

Cushy CMS

Cushy CMS is a hosted and free content management system that’s lightweight, though powerful enough to jumpstart your site in a jiffy. With Cushy CMS, you have to add CSS styles to the sections that you will eventually change or edit. This CMS allows you to access and store content while it uploads this same data to server.

Cushy was built for content editors and designers and so it’s very simple and easy to manage. Being a SaaS, you don’t need to install or self-maintain the CMS.

TYPOlight

TYPOlight is great for site builders that will be maintaining multiple sites and is an ideal solution for web developers. If you’re thinking about creating a simple or advanced site design with great functionality, then TYPOlight CMS can definitely get the job done for you.

RadiantCMS

RadiantCMS is a Ruby on Rails app. Radiant has a very active community for core support and updates. If you are a RoR developer, it’s right up your alley. Radiant has concentrated on making things much more user-friendly for end users and web designers. RadiantCMS also contains an innovative custom tagging language (called Radius) that’s easy to pick up.

SilverStripe

SilverStripe is an open source application written on top of PHP and was designed with emphasis on flexibility. SilverStripe has many configurable options and is geared towards content-heavy websites.

This CMS was completely built on its own PHP framework, called Saphire. SS offers content version control and great SEO support. All users alike are welcome to customize the administration area for their clients or themselves.

The only downside with SS is that the default templates are garbage; however, that’s nothing a little elbow grease wouldn’t fix.

Textpattern CMS

Textpattern CMS is a very popular system for many designers due to its simplicity.

Textpattern strives to provide great content management that produces quick, easy, and desirable web standards-compliant pages. There is no WYSIWYG editor because Textpattern utilizes textile markup for content generation.

The backend is very easy to use and follow. New users will learn the administration section with super speedy ease.

Alfresco

Alfresco is a JSP enterprise content management solution that’s quick and easy to install. Alfresco lets you drop files into folders and convert those files into interactive web documents. This CMS isn’t as easy to become familiar with when compared to others, however, with a little bit of time investment, you’ll definitely get the hang of it. Alfresco could be targeted more towards the intermediate developer, although its pure functionality allows it to become very usable. The administration GUI is very organized, well maintained, and easy to navigate through.

Got tips on how to evaluate the right CMS? Do you have experiences (good or bad) with the content management systems shown here? Talk to us about it in the comments.

Related Content

• 16 WordPress Sites to Help You Build a Better Blog
• 10 Promising Content Management Systems
• CMS Showcase: 31 Remarkable Drupal Powered Websites

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.

Related Content

• Definitive Guide to Taming the IE6 Beast
• 10 Useful Firefox Extensions to Supercharge Firebug
• 10 Ways to Improve Your Web Page Performance
• Related categories: Web Development and User Interface

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

There are quite a lot of articles written about designing small for mobile devices, but what about the largest common resolution; High Definition (commonly referred to as HD or High-Def)?

This article is going to show you a process for making your site work for multiple resolutions by using a real-world case study: Debut Creative. Granted, you can use this without dealing with HD resolutions, but why not go extreme?

Debut Creative was recently designed to work in HD.

Introduction

HD has been getting more consumer use over the last couple of years with the ever-decreasing price points of Hi-Def television sets. They are not only easy to hook up to HD-capable computers, but also, modern gaming devices like the Wii, Playstation 3, and Xbox 360 also have internet-enabled browsers which can be used to browse the web. The time has come to consider designing for this popular format.

As over-the-top as HD web design seems, I recently designed my site, Debut Creative, for 1920×1080 viewing (currently the site layout is actually optimized for 1024, but the background frames it nicely for HD). There are a few serious considerations to make before building a site for 1920 screen resolutions, even if it is just the background.

Some Issues with supporting HD

File sizes is a major consideration. By the very definition of an HD site, any background image that spans the full 1920×1080 will be massive (two megapixels by definition). By extension, unless properly addressed, these large sizes could lead to needless bandwidth consumption for users who don’t need the full HD experience.

From a design perspective, I wanted my background gradient to frame the content nicely with the darkest edges coming in around the edge of the full-screen browser. Having one background that frames it in this way for HD would be inadequate for any smaller browser.

In Photoshop, all that is visible is the gradient layer that we want sized to the edges of different resolutions. Click on the image to see full-scale version.

The solution is simple; a JavaScript resolution sniffer with dynamic background image calls. Before we get to that, let’s talk about preparing images for HD.

The Image

The first step is preparing your background image in Photoshop (or an equivalently capable image editor). I began with an HD background (1920×1080px). In addition to my framing gradient, I added a layer of a heavily feathered brush stroke to make certain the background pattern faded to solid nicely so my pages background color can take over where this image ends.

When you have your background ready for HD: save it (and maybe make a backup copy). We’ll soon be cropping and removing lots from it!

HD Resolution at 1920×1080px. Click on image to see full-scale version.

To save web and mobile device optimized images, Photoshop has a feature called Save for Web & Devices (Ctrl+Alt+Shift+S). I played with the settings here to optimize this huge image as best as I can. I settled on saving it as an optimized JPG with quality at 53%, and I was able to get the image down to 111KB. This would be a painful 21-second download for a typical dial-up connection (for just the background image), but a manageable 5 seconds for the average DSL user. I’m OK with that.  Give your file a meaningful name like bg1920.jpg.

Save for Web & Devices optimization allows you to compare compression sizes. Click image to see full-scale version.

Now we’re going to repeat the steps for the other common resolutions. This is a great time to get into some keyboard shortcuts to blaze through the process. Here’s my play-by-play sequence for Photoshop for this example (some of the more ingenious designers out there may consider recording Photoshop Actions to streamline this process).

You’ll note I use Canvas Size to alter only the width. Changing the height as well would cause my navigation bar to become too short. Depending on your layout you maybe want to do Image Size which scales the image entirely (Ctrl+Alt+I).

First, I click on my gradient layer (the layer I’ll need to adjust with every resolution size).

Then it’s a simple process of:

#1 – Ctrl+Alt+C to open the Canvas Size option box

#2 – Tab twice to get into the Width field

#3 – Enter the width (widths the resolution sniffer will use include 1920, 1600, 1440, 1280, 1152, 1024, 800, 640. For common mobile resolutions, check out the List of common resolutions on Wikipedia.

#4 – Press the Enter key twice to confirm cropping and close the Canvas option box

#5 – Ctrl+T to activate the Free Transform feature for the active layer.

#6 – Hold down Alt and horizontally resize the edge of the gradient in to the new edge: Holding Alt makes the resize mirrored. It should snap to the edge of the document.

#7 – Press the Enter key to finish and render the transformation.

#8 – Ctrl+Alt+Shift+S to open the Save for Web & Devices option

#9 – Press the Enter key (the settings should be the same as last time) to save.

#10 – Name the file in the same convention used for your first file.

#11 – Press the Enter key to finish saving the file

Repeat!

You should now have a snazzy folder full of images. Since my web layout is set for 1024, I’m not going to use the smaller files; however, I am going to make a bg0.jpg that is a gradient-less and tile-ready version of my background that is a few hundred pixels square. This may be useful for mobile surfers.

When finished, you should have a folder of well named images of various size.

The JavaScript

Now that we have all of our images, we are ready to call them dynamically into our site. The following script works well with multiple monitor systems as well. Usually when it gets the screen.width value, it is detecting the width of your primary browser, not the resolution of your entire desktop. Some browsers may detect the screen that it is in.

Place the following call to the JS file after the <body> tag (placing it in the head will call the background before your CSS which may cause it not to render).

<script src="http://yourdomain.com/scripts/sniffer.js"
  type="text/javascript"></script>

Or if you’re using a theme like WordPress:

<script src="http://yourdomain.com/wp-content/themes/themename/sniffer.js"
  type="text/javascript"></script>

Now, naturally you’ll need the JavaScript. What the JavaScript resolution sniffer does is detect the screen.width and apply the appropriate CSS image backgrounds.

Some notes

I use "greater than or equal to" (>=) conditional operator to cover strange resolutions that might come across the site/

There is a "less than or equal to" (<=) operator for resolutions less than 799px. This should cover some netbooks and mobiles with smaller resolution.

This example just switches the HD background for my 1024px ready site – however, you could modify the code to call completely different stylesheets to change even the layout to work in different resolutions.

The code

/* Resolution Sniffer / Dynamic CSS Loader - HD |
via Arley McBlain http://debutcreative.com */

/* Common Computer Screens: 640,800,1024,1152,1280,1440,1600,and HD 1920 */

// File path to background images folder
var bgFolder = 'http://yourdomain.com/wp-content/themes/yourtheme/images/';

if (screen.width>=1920){
 document['body'].style.backgroundImage='url('+bgFolder+'bg1920.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1600){
 document['body'].style.background='url('+bgFolder+'bg1600.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1440){
 document['body'].style.background='url('+bgFolder+'bg1440.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1280){
 document['body'].style.background='url('+bgFolder+'bg1280.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1152){
 document['body'].style.background='url('+bgFolder+'bg1152.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
else if (screen.width>=1024){
 document['body'].style.background='url('+bgFolder+'bg1024.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}
// Optional
/* else if (screen.width>=800){
 document['body'].style.background='url('+bgFolder+'bg800.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
} */
else if (screen.width<=799){
document['body'].style.backgroundImage='url('+bgFolder+'bg0.jpg)';
document['body'].style.backgroundRepeat='repeat';
}
else {
 document['body'].style.backgroundImage='url('+bgFolder+'bg1024.jpg)';
 document['body'].style.backgroundRepeat='repeat-x';
}

The CSS

Finally, you might need to tweak your CSS. Simply forcing the background image to change might make your background color change to white automatically. Adding !important to your background classes that you don’t want to include in your JS file will force them to work.

body {
 background-color: #1a1c1c !important;
 background-position: center 0 !important;
}

Testing

So is it working? Change your desktop resolution and refresh your site. If you have a multiple monitor system you’ll only have to change the resolution of the primary monitor to test, regardless of what monitor the browser is in. If you want to test it on an HD set that is hooked up to your computer you may have to set this as your primary monitor.

Download

Download the script used in this article below and feel free to use on your own sites (you’ll have to modify it).

• sniffer.zip (1KB, ZIP)

Summary

We certainly have some time before HD websites become something in demand. It’s kind of rewarding being on the bleeding edge though right?

Related Content

• Definitive Guide to Taming the IE6 Beast
• How to Stay Ahead of the Curve as a Designer
• Essential Tips for Designing an Effective Homepage
• Related categories: Web Development and Web Design

About the Author

Arley McBlain is a web designer, web developer, and Founder/Creative Director of Debut Creative based in Ontario, Canada. If you’d like to keep in touch with the author, check out his personal site, ArleyM, and follow him on Twitter as @ArleyM.

1. Secure Site

When developing a website, you occasionally show the client progress. Depending on your setup, you use either an internal development address, or a subdomain like development.company.com to make it accessible outside for clients. What if you want to hide it away from prying eyes or search engines? There have been times when curious people have stumbled across sites I’ve worked on by trying subdomains, but this little module will put a stop to that. Secure Site uses HTTP authentication and prompts the user for a username and password before proceeding. It can also be used to secure RSS feeds.

2. IE6 Update

There is a huge push in the design community to wipe IE6 off the face of the earth. While most believe they should not worry about IE6 compatibility, simply redirect them to Firefox, or block them from viewing the site entirely, this module offers a more reasonable solution. When enabled, anyone viewing in IE6 will have a status bar update across the top of the browser that politely says that they should consider upgrading their browser.

3. Masquerade

Masquerade lets you quickly switch between user accounts by entering their name without needing to know their password. It’s very helpful for testing the functionality of modules as different users and roles without using ‘test’ accounts. It’s also helpful to see what the user is seeing when they report issues with your site.

4. AddThis

If you have a site with lots of useful content, AddThis adds a button to the bottom of a node. When you hover on it, it will pop up with options to share the content to popular sites like Digg, Technorati, Fark, Twitter, or direct email to a friend.

5. HTML Mail

By default, any email sent out of the Drupal application is plain text. As of Drupal 6, there is no setting to change this. If you ever tried sending an HTML email with Drupal, then you know that it would effectively kill any style you tried to add. HTML Mail will change the outgoing header types to text/html, and provide you with htmlmail.tpl.php so you can pretty up and personalize messages from your system.

6. ThemeKey

Have you ever had a splash page or path in your website that isn’t anything like your site theme? ThemeKey will let you load a different theme for pages or paths.

7. Username AJAX Check

Ever get tired of registering for a site only to find out the username you want is already taken? Username AJAX Check is simple: as you type in a name when registering, it will check to see if that name is available before submitting the form.

8. Views Group By

Views 2 is a fantastic module, however, there are some things it can’t do such as grouping using SQL on a field and using COUNT(). Suppose you had a custom view that showed how many nodes you had of each type or how many users there are of a particular role. This module will provide that functionality.

9. SMTP

This nifty module lets you send mail out through an SMTP server instead of using PHP to send mail. It works with SSL and services like Gmail. It’s great when used in conjunction with HTML Mail and other modules like Simplenews if you run newsletters on your Drupal website.

10. Job Queue

Job Queue provides functionality to queue up your cron jobs so they are executed in chunks instead of all at once, lessening workload on the server. If you are experiencing PHP timeouts when cron runs, or if you are having issues using Views Bulk Operations, give Job Queue a try.

Bonus module

Multiple Node Menu is a newly released and nifty module for working with multiple menu links. Please note that this this module is still experimental, so use it at your own risk.

Related Content

• CMS Showcase: 31 Remarkable Drupal Powered Websites
• 12 Essential Security Tips and Hacks for WordPress
• 10 WordPress Plugins Guaranteed to Save You Time
• Related categories: Web Development, Tools, and WordPress

About the Author

Kevin Quillen is a professional web designer located in Delaware. He works at Inclind Inc. where his official job title is Internet Architect. Check out his site – Kevin Quillen – where he blogs and hosts his portfolio. He works with Coldfusion, PHP, SQL, as well as web standards compliant CSS/XHTML.

In a previous article, we discussed FirePHP’s basic logging functions for debugging your PHP web applications. Although–as we have seen–it can be used for debugging purposes, its main utility is to log information about your web apps, and it does a terrific job in that regard.

In this article, I will introduce you to an old concept that seems to be forgotten by most web developers today: the importance of logging. Additionally, I’ll walk you through some of functions designed to keep your logging more organized.

We will talk about:

• Grouping messages
• Tables
• Benchmarking your code

We’ll also learn how to redirect trappable PHP errors to FirePHP, which is a neat and very convenient feature.

The importance of logging

While debugging is essential to ensure an application works, it does not explain why, for example, a user is having trouble subscribing to your newsletter when other users can.

Logging information will allow you to gather all available information so that you can trace the user actions in great detail. The more information you have, the easier it will be to recreate the user actions and find out why he/she is having problems.

Unfortunately, many web developers tend to disregard logging, making bug squashing a lot harder.

Taking the newsletter example that I mentioned earlier – if you have logged the user input, you might find that he/she is using a new 6-character top-level domain, and therefore your email validation routine is failing because of that. If you had fired up your debugger and fed it your own test data, you probably would never find the problem without talking to the user and asking for the data they used. That’s why it’s important to log, and the more information you log, the better.

FirePHP is an excellent logging tool; its only problem is that its logs are not persistent. It would be great if FirePHP logs could be redirected to a file for later analysis (we’ll talk about this in a future article), but for now we will explore some of the existing features of the FirePHP library.

Grouping messages

There are many situations where it’s useful to group related messages together, and FirePHP allows you to do just that.

Groups in FirePHP can be nested; this means that you can have groups inside other groups and you can expand or contract these groups in the Firebug console, making it easy to analyze related sets of information.

By default, groups are shown expanded, but that can be easily changed. You can also change the color of the group label by specifying a standard HTML color value.

A hypothetical grouping example

Groups are useful to keep your logging organized. Let’s take a hypothetical site that has the basic four sections that most websites have: a header, a navigation menu, a content area, and a footer area. You can group your messages by area so that you can easily find, for example, the navigation menu log or just the content area log. This way, your log is systematic and easier to examine.

You have two functions to aid you in dealing with groups.

• Group($groupName) – starts a group
• groupEnd() – ends a group

You can customize the group appearance this way:

Fb::group('collapsed blue group',array('Collapsed' => true, 'Color' => '#00f'));

Note: Be sure to use the latest Firebug version for this to work.

Let’s see a practical example of group nesting.

//creating a collapsed group named "Navigation Menu" colored green
fb::group('Navigation Menu', array( 'Collapsed' => true,  'Color' => '#0f0') );
  //and now a group to hold messages for the home menu
  fb::group('Home menu', array( 'Collapsed' => false,  'Color' => '#000'));
    //some bogus messages
    fb::info('current menu, added menu-on class');
    fb::warn('no url found for this menu');
  //closing home menu group
  fb::groupEnd();
//closing navigation menu group
fb::groupEnd();

You end up with the following result after expanding the first group.

Simple benchmarking

A functionality missing from FirePHP is the ability to count elapsed time which can be helpful if you are checking performance issues or are simply curious on how fast your PHP apps perform.

To help you with benchmarking, you can either extend the FirePHP class with your own benchmarking scripts, or you can create a simple helper class.

As we will not talk about extending FirePHP, we will build the helper class.

class fbTimer{
  protected static $timerStart = 0;
  protected static $timerEnd = 0;
  public static function start(){
    self::$timerStart = microtime();
    self::$timerEnd = 0;
  }

  public static function stop(){
    self::$timerEnd =microtime();
  }

  public static function get(){
    if(self::$timerEnd == 0) self::stop();
      return self::$timerEnd - self::$timerStart;
    }
  }
// this class is simple to use
fbTimer::start();
// some code you want to benchmark
fbTimer::stop();
fb::log("execution time :" . fbTimer::get() . ' seconds' );

Here is the output from the above class and class calls showing the total execution time.

Tables

Another nice way to group related data together are by using tables.

For FirePHP, a table is an array of arrays. The first array row is automatically used as the heading, and the number of columns is determined by the number of items in it.

Firebug will display the table label and allow you to show or hide the table data.

This might sound confusing, but as soon as you see the code, it will all make sense and you will then realize just how horrible I am with explaining things.

Let’s say you want to see the execution time of some queries – here’s an example to use.

$table   = array();
$table[] = array('Sql query','execution time');
$table[] = array('Select bla from foo where bar =1','0.32');
$table[] = array('Select bla from foo where bar =1','1.76');
$table[] = array('Select bla from foo where bar =1', '0.23');
fb::table('executed queries', $table);

This will create a collapsible table with all the information you provided.

Error handling

Another feature that will help to keep your web pages uncluttered and secure from accidentally leaking information to the public is the ability to redirect non-fatal PHP errors to the Firebug console.

You can send Convert E_WARNING, E_NOTICE, E_USER_ERROR, E_USER_WARNING, E_USER_NOTICE and E_RECOVERABLE_ERROR to Firebug automatically.

$p = new FirePHP();
// converts errors into exceptions
$p->registerErrorHandler();
// makes FirePHP handle exceptions and sends it to FirePHP
$p->registerExceptionHandler();

Now you should start receiving errors in the Firebug console instead of in your HTML source code.

Therefore, the following code will redirect errors to Firebug.

$p = new FirePHP();
$p->registerErrorHandler();
$p->registerExceptionHandler();
// a forced error
echo "-" . asd;

The above will output:

Conclusion

I hope that with this article, I’ve broadened your view on FirePHP logging features and showed you some tips and techniques on how to make your logging processes more complete.

Don’t forget that–when solving problem –the more information you have, the better, because typically error reports from users and technology support are very broad and lacking information, such as: "there is a user that can’t subscribe our newsletter, fix it."

What’s next?

On a future article, we will discuss a method for filtering your logs. We’ll also investigate a way for making logs persistent by storing them in a file. To make sure you get notified when this article is published, please subscribe to the Six Revisions RSS feed.

Do you have FirePHP tips?

If you have tips, tricks, and effective techniques for utilizing FirePHP, please share them in the comments. *edited by Jacob Gube

Related Content

• How to Debug PHP Using Firefox with FirePHP
• 10 Useful Firefox Extensions to Supercharge Firebug
• Awesome Things That Firefox’s Web Developer Extension Can Do
• Related categories: Web Development and Tools

About the Author

Nuno Franco da Costa is a web developer and sys admin. By day, he works at a design agency coordinating the development and sys admin teams where he developed a PHP MVC framework and a WEB 2 CMS. He loves to code and has a "getting things done" attitude. You can find over at his online presence www.francodacosta.com

For years, Internet Explorer 6 (IE6) has been the bane of existence for web designers around the world. Designers and users alike have come to enjoy the increasingly predictable, standards-compliant behavior of great modern browsers like Firefox, Opera, and Safari. Meanwhile, IE6 continues to haunt our designs, lurking in dark places while dying a painfully slow, agonizing death. As we await that grand and glorious day when IE6 is as dead as Netscape 4, let us be mindful of the endagered species of users who, for whatever sad reason, continue to torture themselves with that terrible beast of a browser.

So come now, let us celebrate these last days of IE6 with this definitive guide to taming the IE6 beast.

In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between.

Use conditional comments to target IE6

Conditional comments play an important role in getting IE6 to behave. Conditional comments are basically snippets of code that are included in your (X)HTML markup that enable you to target or filter specific versions of Internet Explorer. Here is a conditional comment that targets IE6 with a special message:

<!--[if IE6]>
  <p>Oops! Looks like you're still using Internet Explorer 6!
     You deserve better!</p>
<![endif]-->

This is an extremely useful method of delivering code and content only to IE6. Other browsers will see this conditional comment as an ordinary (X)HTML comment and simply ignore its contents. Thus, when adapting our web pages for IE6, conditional comments enable us to apply CSS styles directly, without interfering with other browsers. Although conditional comments are a proprietary Microsoft invention, they are arguably the best way to “hack” specific versions of Internet Explorer.

The easiest way to use conditional comments to target and apply styles only to IE6 is to include an “IE6-only” stylesheet in the <head> section of your web pages:

<!--[if IE6]>
  <link rel="stylesheet" href="http://domain.tld/ie6.css"
    media="screen" />
<![endif]-->

Then, in the ie6.css stylesheet, we place all of the IE6-specific hacks and other trickery that are needed in order to accomodate IE6. This enables us to consolidate our IE6 styles into a single stylesheet that is completely ignored by all other browsers. With this method of applying styles to IE6, there is no need for IE6-specific hacks such as the so-called “star-HTML” hack or the underscore hack. Selectors are simply targeted “as-is” from within the IE6-only stylesheet.

Of course, conditional comments can do much more than target IE6. By design, they are able to target or filter any version(s) of Internet Explorer for both HTML and XHTML. For more information on conditional comments, these fine articles are highly recommended:

• Microsoft explains conditional comments
• Learn more about conditional comments at QuirksMode
• Wrapping Your Head around Conditional Comments

Target and filter IE6 with “in-CSS” hacks

Despite the usefulness of conditional comments, there are situations in which you may decide to apply IE6-specific styles from within the stylesheet. A good example of this may happen during site development, when it is more expedient and practical to work with a single stylesheet, in which IE6 styles are located next to “normal” styles for easy comparison. Once development is complete, all “in-CSS” hacks may be consolidated to an IE6 stylesheet included via conditional comments.

Fortunately, when it comes to IE6, there is no shortage of these in-CSS targeting methods. Over the years, a few of these “hacks” have risen to the top of the pile, proving to be extremely useful and effective for targeting IE6. Perhaps the most widely used of these in-CSS techniques is known as the “star-HTML” hack:

/* target IE6 */
* html #selector { color: red; }

While standards-compliant browsers ignore this illogical selector, IE6 treats it as legitimate, even though <html> is the highest element in the document tree. This enables us to apply CSS styles exclusively to IE6 without interfering with other browsers. Best of all, this method of targeting IE6 is completely valid.

There are also cases where we need to hide styles from IE6. The following hack is referred to as the “child-selector filter,” and it enables us to apply CSS styles to all browsers except IE6:

/* filter IE6 */
html>body #selector { color: red; }

This selector is also completely valid, and readily applied by all standards-compliant browsers. It is effective because IE6 simply doesn’t understand its meaning.

Other useful methods of targeting and filtering IE6 include the !important hack, which is useful when you need to override a property value for IE6:

#selector {
  width: 200px !important; /* target other browsers */
  width: 100px;            /* target IE6 and lower */
}

When there are two identical properties for a selctor, IE6 will apply the second property, even if the first property includes the !important directive. Other browsers will of course apply the !important declaration, enabling us to target IE6 with the subsequent rule.

Enable alpha-transparent PNG support

One of the most frustrating shortcomings of IE6 is its lack of 32-bit alpha-transparent PNG support. When displaying a 32-bit alpha-transparent PNG, IE6 replaces all transparency with an ugly grey background. Fortunately, this is a well-known and frequently addressed issue for which there are a wide variety of workarounds and solutions.

Apart from avoiding the use of alpha-transparent PNG images altogether, perhaps the simplest way to ensure visual compatibility with IE6 is to stick with fully transparent PNG images, which are fully supported and displayed properly in all browsers, including IE6.

A more practical approach is to apply alpha-transparency via 8-bit PNG format rather than the usual 32-bit format. To do so, use a program such as Adobe Fireworks (Photoshop does not work for this purpose), save your alpha-tranparent PNG image in 8-bit format, and then include in your design as usual. 8-bit PNGs may not look quite as good as 32-bit versions, but their alpha-transparency degrades gracefully to full index transparency in IE6. This method enables you to employ alpha-transparency in all modern browsers without getting the ugly grey background in IE6.

Of course, it is also possible to enable IE6-support for 32-bit alpha-transparency. There are many different scripts that enable such functionality, but all of them ultimately rely on a proprietary Microsoft AlphaImageLoader filter that may be included in your CSS file as follows:

* html .iepngfix { behavior: url(iepngfix.htc); }

To make this work, you need to upload these two files to the same directory as your CSS file. The first file is a blank gif image, and the second file is an HTC script that provides IE6 (and below) with the functionality required for 32-bit alpha-transparency. This is the most basic implementation of the AlphaImageLoader filter, but more advanced functionality is also possible using a wide variety of freely available scripts. Here are a few of my favorites:

• DD_belatedPNG
• Unit PNG Fix
• TwinHelix IE PNG Fix
• Roundup of PNG Fixes for IE

Fix the broken box model

Early versions of Internet Explorer incorrectly interpreted the box model to include borders and padding in the calculation of the content width. For example, consider the following case:

div {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}

In modern browsers, the height and width of this division are each calculated according to W3C specifications as 100px + 20px + 20px = 140px. In early versions of IE, however, the height and width are each calculated improperly as 100px. This discrepency is responsible for many design inconsistencies between standards-compliant browsers and older versions of Internet Explorer.

Fortunately, the broken box model was addressed in IE6, which is capable of rendering proper widths for web pages that include a complete <!DOCTYPE>. When a complete <!DOCTYPE> is present, IE6 switches to either “standards-compliant mode” or “almost-standards-compliant mode,” both of which cause IE6 to correctly interpret the box model. Conversely, when a complete <!DOCTYPE> is not included in a web page, IE6 reverts to “quirks mode” and interprets the box model incorrectly.

Thus, the box-model problem is easily fixed in IE6 by including a complete <!DOCTYPE> and designing in standards-compliant mode. If you need to work in quirks mode, the next easiest fix is to avoid applying padding or borders on elements for which you have specified a width. You can always apply padding and/or margins to the enclosed elements.

Even with these solutions, there may be situations where it is necessary to control the height and width of specific elements. In these cases, we may use the “Tan Hack” to get the job done:

#selector {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}
* html #selector {
  \height: 140px; /* targets IE5 and IE6 in quirks mode */
  he\ight: 100px; /* targets IE6 in standards mode */
  \width: 140px;  /* targets IE5 and IE6 in quirks mode */
  w\idth: 100px;  /* targets IE6 in standards mode */
}

In the first set of rules, we apply our width and height as normal for all standard-compliant browsers. Then, in the second set of rules, we account for the broken box model in IE5 and IE6 quirks mode by adjusting the values for height and width to include the additonal padding and border widths. That’s quite a mouthful, so hopefully the code and comments will clarify the technique.

Fix min-width/max-width and min-height/max-height

Out of the box, IE6 fails to understand maximum and minimum height and width. This is incredibly sad for designers, as many layout scenarios require these properties to function properly. In modern, standards-compliant browsers, we can use the following CSS to acheive our goals:

div.max-height {
  max-height: 333px;
}
div.min-height {
  min-height: 333px;
}
div.max-width {
  max-width: 333px;
}
div.min-width {
  min-width: 333px;
}

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand these basic CSS properties. Fortunately, IE supports its own, proprietary expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max/min-width and max/min-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
  width: expression(333 + "px");
}

..Which is equivalent to this:

div {
  width: 333px;
}

There are two downsides to using IE’s expression attribute. First, as expressions are essentially JavaScript, they fail when JavaScript is disabled (or otherwise missing) in the user’s browser. Second, use of CSS expressions for min/max properties is very resource intensive and may negatively impact browser performance. Nonetheless, the setting of max/min-widths/heights remains an important tool in the web designer’s toolbox. With that in mind, here are some useful CSS expressions enabling complete min/max functionality in IE6.

max-width

/* max-width for IE6 */
* html div.max-width {
  width: expression(document.body.clientWidth > 776 ? "777px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width {
  max-width: 777px;
}

min-width

/* min-width for IE6 */
* html div.min-width {
  width: expression(document.body.clientWidth < 334 ? "333px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
  min-width: 333px;
}

max-height

/* max-height for IE6 */
* html div.max-height {
  height: expression(this.scrollHeight > 332 ? "333px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
  max-height: 333px;
}

min-height

Fortunately, we can skip the crazy JavaScript/CSS expressions when applying minimum height in IE6. Thanks to Dustin Diaz, we can set min-height in IE6 with this morsel of valid CSS:

/* min-height for IE6 */
div.min-height {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

Kill the double margin bug

Most web designers who have been designing sites for awhile are familair with IE6’s “doubled floated-margin bug.” This nasty bug rears its ugly head whenever you float an element (such as a <div>) in one direction and then apply a margin in that same direction. For example, if we do this:

div {
  float: right;
  margin-right: 10px;
}

..IE6 will (usually) double the size of the margin to 20px for no apparent reason whatsoever. Needless to say, this double-margin bug has wrecked many a fine web design, causing much pain and distress along the way.

Fortunately, this bug is easy to kill. Simply change the display type of the floated element from block to inline, like so:

div#selector {
  float: right;
  margin-right: 10px;
}
* html div#selector {
  display: inline; /* kill double-margin bug */
}

This solves the double-margin bug 99% of the time without issue. For those rare, unexplainable cases where this fix doesn’t work, you may need to workaround the issue by removing the margin and applying padding to either the parent element or to the floated element itself.

Clear your floats

Clearing floats is another common layout challenge, not only for IE6, but for many modern browsers. In a perfect world, an element that contains a floated element enlcoses that element entirely. In the imperfect world of web browsers, however, floats are frequently not entirely closed. When this happens, we say that the floated element has not been “cleared” by its parent element. Fortunately, there are several easy ways to clear your floats in IE6 and other browsers as well.

One of the oldest ways to clear your floats is to use the clearfix hack. This CSS technique works by generating content after the parent element using the CSS :after pseudo-class. The generated content then serves to clear the floated element. Here is a typical example:

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

To use this method to clear your floats, place it into your CSS file and change all instances of .clearfix to the selector of the element that needs to clear its floated ancestors.

Another CSS method of clearing your floats is to simply float the container element. For example, if you float an image within a container <div> that fails to enclose it, simply apply the following CSS:

div {
  float: left;
}

Then, if the containing element needs to behave as a regular block element, apply a width of 100% to force a line-break before the next element:

div {
  float: left;
  width: 100%;
}

So far so good, but there is an even better method of clearing your floats. By simply applying an overflow value to the container <div>, it will automatically expand vertically and clear its floated children. Here is an example:

div.container {
  overflow: hidden;
  width: 100%;
}

The width declaration is required for Internet Explorer and Opera, but it doesn’t need to be set at 100%; rather, you may use any width and unit of measure that is needed. If you don’t want to specify a width, you may specify a height instead. For the overflow property, you may use any of the following three values:

• auto – display scrollbars if content exceeds specified width
• hidden – never display scrollbars even if content exceeds width
• scroll – always display scrollbars, even if they’re not necessary

As well as this method works for clearing floated elements, there are cases where the overflow property can interfere with other aspects of the design. If this should occur, you may want to try limiting the scope of the overflow by using overflow-x:hidden; or overflow-y:hidden;. And remember, the width property may be replaced by height.

Fix other common IE6 problems

Wrapping things up, let’s run through a few other problems commonly experienced with IE6. These issues and their corresponding fixes are fairly straightforward, so I will spare you the lengthy diatribe and jump straight to the point. Keep in mind as you continue through this article that you should relocate and consolidate any IE6-specific hacks into an IE6-specific stylesheet, which should be included via conditional comments (see first section, above).

Fix relative positioning

Using position:relative in your designs is perhaps the easiest way to mess things up in IE6. Modern browsers display relatively positioned nested elements without issue, but IE6 frequently chokes up on even slightly complicated layouts. Fortunately, the solution is as easy as triggering hasLayout by adding zoom:1; to each relatively positioned element:

.selector {
  position: relative;
}
* html .selector {
  zoom: 1;
}

Note that you should not apply zoom:1; to any inline elements. Doing so will cause IE6 to treat them as block elements. Keep this in mind for the following solutions as well.

Fix negative margins

Negative margins are useful in a variety of scenarios, and most browsers handle them with no problem whatsoever. Unfortunately, IE6 doesn’t like negative margins unless you apply relative positioning to the target element:

.selector {
  margin: -1.5em;
}
* html .selector {
  position: relative;
  zoom: 1;
}

Note the addition of the zoom:1; declaration, which is required because of the relative positioning. Ain’t IE great?

Fix overflow problems

Using the overflow in IE6 will sometimes lead to unexpected, unexplainable display issues. Fortunately, we can resolve many overflow-related display problems by triggering hasLayout via — yep, you guessed it — zoom:1;. Here is an example:

.selector {
  overflow: hidden
}
* html .selector {
  zoom: 1;
}

Another strange overflow-related issue is observed when font-style:italic; expands the width of its parent element. Thankfully, this nuance is easily resolved by applying the following CSS to the parent element:

* html .selector {
  overflow-x: hidden;
}

Line up floated elements

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. Fortunately, there are two ways to fix this issue. The first is to apply a line-height:0; declaration to the parent element:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  line-height: 0;
}

Alternately, you may prevent stepdown by applying a display:inline; declaration to the floated elements:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  display: inline;
}

Fix your list items

Lastly, if IE6 decides to add an extra set of list items (<li>) after your list (<ul>), adding an HTML comment has been known to magically resolve the issue. Here is what your source code will look like before and after applying the fix:

Before:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  </ul>
<li>Internet Explorer</li>
<li>Internet Explorer</li>

After:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  <-- IE6 fix -->
</ul>

In Closing

With the CSS tricks described in this article, you are well-equipped to tame the IE6 beast and get it to behave when displaying your web pages. When it’s time to make your next design compatible with IE6, refer to this definitive guide for clear explanations and solutions for the most common IE6 issues. And of course, if you’ve got more tricks, ideas, comments, or questions, be sure to sound off in the comments section!

Related content

• JavaScript Debugging Techniques in IE 6
• Adopting a "Does It Really Matter?" Philosophy
• 20 Useful Resources for Learning about CSS3
• Related categories: CSS and Web Development

About the Author

Jeff Starr is a web-developing, graphic-designing alien from the distant planet Perishable Press. When he’s not flying through hyperspace, Jeff uses his alien powers to write amazing stuff about WordPress and design awesome websites for humans. Jeff comes in peace, so don’t be afraid to follow him on Twitter.

This article shares an elegant, simple, and more maintainable way of debugging Ajax apps via the web browser (more specifically for the Mozilla Firefox browser). You’ll learn the basics of leveraging Firefox in conjunction with Firebug and FirePHP to implement FirePHP libraries on web apps and logging messages in the Firebug console.

A Brief Introduction

When Ajax techniques became popular, developers faced a new problem: how can we debug Ajax requests and responses efficiently for complex web applications? If using a debugger was hard enough with the RESTful model, triggering an Ajax-specific request is a pain and a bit more difficult; dumping logs and information pertaining to those Ajax operations had to be done using JSON or XML.

This is where FirePHP helps, allowing you to log your debugging messages to the Firebug console. FirePHP doesn’t mess with your code (and it doesn’t require you to modify anything to trap errors): the messages you print are sent to the browser in the HTTP response headers, which is great when you’re using JSON or XML since it won’t break their encoding.

This makes FirePHP ideal not only for debugging your Ajax requests, but also your entire PHP codebase.

So, what is FirePHP?

FirePHP is an add-on for an add-on: it extends the popular in-browser web development tool called Firebug with an API for PHP web application developers. FirePHP is free and easily attainable via the Mozilla Add-Ons section on the official Mozilla site. The official FirePHP site can be found via this web address: www.firephp.org. Christoph Dorn is the person responsible for creating FirePHP.

What Do I Need to Get Started?

As you might have guessed, you need three things to get up and running with FirePHP, they are:

1. Firefox
2. Firebug
3. FirePHP

If you don’t have all of the above applications installed on your machine, click on their link to learn about how to download them for your particular system.

Installation of the three things above is a straightforward process. FirePHP can be a little tricky to install if you’ve just recently started learning about web development, but there’s good documentation out there about it.

This article is about using FirePHP, so I’ll let you handle the installation part (though feel free to ask in the comments – we’d be happy to help if you encounter issues).

A Couple of Tips

Once you’ve installed FirePHP, and included it in your web application, you are ready to debug and log data. But first, I’d like to share two helpful tips I’ve learned:

Tip #1: call ob_start()

Because the information is sent to Firebug in the HTTP Headers, you should activate the output buffering or you might get the "headers already sent error". It may sound complicated, but all you have to do is write ob_start() on the first line of your PHP script that you’re debugging.

Tip #2: don’t forget to disable FirePHP Logging when you go live

You have to disable FirePHP when the site goes live or you will risk exposing sensitive information to anyone that has Firebug/FirePHP installed (we’ll talk about how to do this later down the article).

And then just a general tip for Firebug/FirePHP users: it’s also a good idea to disable or suspend Firebug and FirePHP when you’re just browsing the web because they can really slow down some websites and web applications (such as Gmail, for example).

Getting Started with FirePHP Logging

This is the fun part where we start logging messages and reviewing the basic logging functions.

One thing to note is that, just like PHP, which (at least for PHP4 and PHP5) is a "pseudo object-oriented" language, you can use FirePHP in a procedural or object-oriented (abbreviated OO from now on) manner.

I prefer the object-oriented techniques and I encourage you to use the same pattern as it is considered the most popular and most modern approach to building apps.

The OO API allows you to instantiate a Firebug object to use it or to call its static methods directly. I’m a lazy guy and because static methods are more terse and require less typing, that’s what I use.

Instantiating the OO API Object

In your script, you can use the following code block to create the FirePHP object ($firephp).

require_once('FirePHPCore/FirePHP.class.PHP');
$firephp = FirePHP::getInstance(true);
$firephp -> [classmethod]

OO API with Static Methods

This is the format for calling static methods in your scripts.

require_once('FirePHPCore/fb.PHP');
FB::[nameofmethod]

The Procedural API

Here’s how to use FirePHP’s Procedural API:

require_once('FirePHPCore/fb.PHP');
fb($var)
fb($var, 'Label')
fb($var, FirePHP::[nameofmethod])

We will not get into any detail about the benefits and coding style of each API, I’ve included them here only so you see what options are available for you. In other words, I don’t want to start a flame war about which procedure is better – it’s up to you to decide and I’ve noted my preference.

Logging Messages and Information in the Firebug Console

Let’s talk about logging messages in the Firebug console (remember, this will only work if you’ve configured your app for FirePHP).

Examples of Basic Logging Calls

If you are ad-hoc debugging a bug, the following examples are what you’ll be interested in utilizing.

Fb::log("log message")

This will print a string that you pass to it onto the Firebug console. Using the above example results in the following message:

Fb::log($array, "dumping an array")

Passing an array (no more for loops or print_r() in your scripts) outputs the content of your array. The above example will result in the following message in the Firebug console:

Tip: when you hover your mouse on logged variables in the Firebug console, an info window will appear in the web page containing all of its elements. It’s a nifty feature, don’t you agree?

Logging an Information Message

Here is an example of logging information messages using the info method.

Fb::info("information")

This is the message it logs in your Firebug console:

Logging a Warning Message

Here is an example of logging a warning message.

Fb::warn("this is a warning")

This is the message it logs in your Firebug console:

Logging an Error Message

Here is an example of logging a warning message using the info method.

Fb::error("error message")

Here’s what an error message looks like in the Firebug console:

Enabling or Disabling FirePHP Logging

When your site goes live, you can (and should) disable FirePHP logging. Call the following line of code on the first lines of your script.

FB::setEnabled(false);

What’s great about this is that you can leave all of your FirePHP code in your scripts for later use – just pass either true or false when you want to turn logging on or off.

If your application uses a "config file" to keep track of global settings, it is advisable to set a configuration option to enable or disable it.

Conclusion

First, here’s a screen capture showing all of our messages in Firebug all at once (I ran it sequentially).

In this article, we covered the very basics of using FirePHP to help you debug and gain information about your PHP/Ajax applications easier and through the web browser. I hope that this results in you becoming convinced that you should explore your debugging options outside of "old-school" techniques such as using echo or print on top of your web page layout to see what a variable or array contains. Using FirePHP is so easy and convenient, and gives you much more options and data for debugging purposes.

In a future article, I’ll be covering more complex features of FirePHP and using Firebug to make this simple debugging tool a more robust and fully-featured logging framework.

So stick around, don’t forget to subscribe to the Six Revisions RSS feed so you get a note when that article is posted. * Article edits by Jacob Gube

Related content

• Four Ways Ruby on Rails Can Help You
• Using XAMPP for Local WordPress Theme Development
• 25 Excellent Ajax Techniques and Examples
• Related categories: Ajax, Web Development, and Tools

About the Author

Nuno Franco da Costa is a web developer and sys admin. By day, he works at a design agency coordinating the development and sys admin teams where he developed a PHP MVC framework and a WEB 2 CMS. He loves to code and has a "getting things done" attitude. You can find over at his online presence www.francodacosta.com

Though Firebug is already fully packed with features out of the box, several extensions out there can enhance its utility. In this article, you will find the 10 best Firefox extensions for Firebug that will make your life, as a developer or designer, easier.

1. Pixel Perfect

Pixel Perfect allows you to overlay web layouts and other design compositions onto a web page so that you can accurately (and easily) write your CSS and HTML. By being able to toggle a web composition on or off, web developers and designers can have a visual guide for pixel-perfect accuracy of the position and dimensions of web page components. Check out the video demonstration to Pixel Perfect in action.

• Install Pixel Perfect

2. Page Speed

Page Speed is an open source Firebug add-on for evaluating web page performance, giving developers suggestions on front-end performance optimizations they can carry out. Tests and evaluations are based on Google’s Web Performance Best Practices developed through Steve Sounder’s work. Make sure to read the Page Speed user guide for complete documentation of its many features.

• Install Page Speed

3. CodeBurner

CodeBurner, released by SitePoint, extends Firebug to provide a built-in HTML and CSS reference. The extension also presents contextual information based on what is currently in Firebug’s CSS and HTML panels. The references are very helpful, showing you information about browser compatibility and W3C Recommendation compliance of page elements, among many other types of information.

• Install CodeBurner

4. FireRainbow

FireRainbow is a simple Firebug extension that fills in a sorely desired function: code syntax highlighting. FireRainbow colorizes JavaScript, CSS, and HTML for improved readability of code being reviewed or inspected in Firebug. There are currently over 20 different FireRainbow themes that you can choose from, giving you some options for customization.

• Install FireRainbow

5. Inline Code Finder

Inline Code Finder is great for hunting down inline JavaScript and CSS and is perfect for developers refactoring existing markup to separate structure (HTML) from style (CSS) and function (JavaScript). The usage of the tool is simple: it searches the entire web page for inline code and provides the developer with contextual information about the inline code it finds. The newest version gives you the ability to filter certain groups of inline code.

• Install Inline Code Finder

6. Firecookie

Developing web applications that utilize cookies can be time-consuming. Firecookie, a Firebug extension, gives you a host of options and features strictly for working with cookies. The extension allows you to view, inspect, export, and manage cookies, log cookie events (creation, deletion, etc.), and much more. The latest version of Firecookie adds several improvements such as the ability to list only cookies sourcing from a subdomain.

• Install Firecookie

7. FirebugCodeCoverage

FirebugCodeCoverage is a benchmarking Firebug extension inspired by Selenium IDE for determining the percentage of your code being executed for time duration, known as code coverage. This is typically measured during automated testing to see how well the test cases are able to thoroughly test your code (with higher percentages being your goal).

• Install FirebugCodeCoverage

8. SenSEO

SenSEO is a Firebug extension that analyzes a web page and indicates how well it is doing for single-page whitehat search engine optimization. The extension checks for correct use of meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization.

• Install SenSEO

9. Yahoo! YSlow

YSlow evaluates a web page for performance and suggests potential places for improvements. YSlow is based on YDN’s Best Practices for Speeding Up Your Web Site and gives you letter grades on one of the three predefined (or user-defined) rule sets. It has a handful of useful features such as displaying information and statistics about web page components, and integration of optimization tools such as JSLint and Smush.it.

• Install YSlow

10. Firefinder

Firefinder is for quickly finding web page elements that match CSS or Xpath selectors that you input as your search criteria. Firefinder is great for testing which page elements are affected by a CSS style rule as well as for highlighting and finding elements that match your searches.

• Install Firefinder

Related content

• Five Ways to Speed Up Page Response Times
• Awesome Things That Firefox’s Web Developer Extension Can Do
• Web-Based Tools for Optimizing, Formatting and Checking CSS
• Related categories: Tools, Web Development, and JavaScript