Mozilla Firefox and Google Chrome are both very attractive web browsers for technology specialists and web designers. This popularity is due to the browsers’ free and open source distribution, their unique features, and their extensibility.

It is the extensibility, in particular, that wins the browsers points for web designers. With the right extensions, web designers can turn their browsers into web development applications, affording them with a wide range of design and analysis tools.

Firefox Built-in Features

First, we will take a look at some of the built-in features that ship in each browser, and then preview some of the numerous extensions available for web development.

Mozilla Firefox

View Source

The primary built-in feature for Firefox is “View Source“.  On any website, right click on the current page and select “view source” from the menu.  A new window will open showing the complete HTML code of the site. View Source includes syntax highlighting, word wrap, the ability to go directly to any line, searching, printing, and the ability to reload the page to pick up any changes.

With View Source, you can also view the source code of a particular selection.  Simply select a portion of your website, right click, and click “View Selection Source”.

View Page Info

Right click on a web page and click “View Page Info” to see information about the current site.  “Render Mode” information will tell you if the browser is able to load the page according to web standards. Other information like Encoding and Size are also useful for usability evaluation.  The “Media” tab will show you the address of every image or other media on the page and give you a preview of it. To view info about a specific image, right click on the image, and click “View Image Info“.

Extensions

DOM Inspector

DOM Inspector gives the user a thorough outline of the entire web page.  It displays the source code in an expandable tree, and clicking on any source element provides more information, such as associated styles/classes.  Selecting any one element will also highlight the actual area in the browser window.

View Source Chart

View Source Chart is a colorful way to view the DOM information of a page, and it is also a good way to learn how HTML works.  Each element is color coded and provides a very visual experience for viewing DOM structure.

Web Developer

Web Developer is an add-on toolbar that provides a plethora of features for web designers. Features include design and analysis tools for CSS, forms, images, and more.

Firebug

Firebug is a web development suite of tools that includes an editor, debug tool, and monitor.  With it, web designers can edit any web page directly in their browser.

Chrome Built-in Features

View Source

Like Firefox, Chrome includes a built-in “View Source” Feature.  Two of the major differences are that that Chrome’s View Source opens in a new tab rather than a separate window, and it shows line numbers by default.

Inspect Element

Thanks to its Webkit engine, Chrome ships with a built-in DOM inspector.  Right click on a page or highlighted portion and click “Inspect Element”.  Elements are displayed in tree form, complete with syntax highlighting.  In the right column, the selected code’s style is displayed.  Inspect Element also includes a scripts inspector.

Web Developer

A port of the Firefox extension of the same name, Google Chrome’s version of Web Developer provides most of the useful web development features found in its parent.  Rather than install as a toolbar, the Chrome version maintains Chrome’s low profile by installing as a tool button.  Clicking on the button expands a floating menu over the page.

Speed Tracer (by Google)

Speed Tracer is a sophisticated tool used to identify and fix performance issues.  It provides both numbers and visual representations of data.  Speed Tracer examines Javascript, layout, CSS, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.  Data is collected in real time, as you are navigating through a site using a simple “record” button.

Lorem Ipsum Generator

Need to stick some dummy text into a site you are working on?  Lorem Ipsum Generator makes it easy to insert random Latin text into your pages until you are ready to put in real content.

Pendule

Pendule is another web developer tool for Chrome which competes with Web Developer.  Like Web Developer, Pendule provides tools for many aspects of a site, including CSS, Javascript, forms, images, and accessibility.

More Options

This is, by no means, a complete list of web design extensions for these browsers.  The extension sites for both browsers list numerous others, many of which you may find helpful.  If you still cannot find the exact tool you need, you can also search for free online tools.  Both Firefox and Chrome are available for free download, as are most of their extensions.

As a busy web designer on the go, you need access to online tools and resources that can help you maintain a high level of quality and also make you more efficient. Whether you need photos, images, or just want to grind out some awesome code, there is a site on the web somewhere that can make your life easier.  Here are a few we have selected that you might find useful.

Stock Photos

A website can have phenomenal design, but without photos (particularly photos of happy people), your site will always be one that came close but could not deliver.  There are plenty of sites that sell royalty free stock photos, and I strongly recommend you consider them when your project budget permits it.  However, there are also a few sites that offer free photos.

The Stock Xchng

The Stock.XCHNG is not your typical photo sharing site.  The photos are uploaded by competent photographers, and the site maintainers review them for quality before accepting them.  It provides free stock photos, always in high resolution. Restrictions vary according to photographer, with some requiring no further permission to use and other requiring credit and prior contact for permission.

Freedigitalphotos.net

One way a site can make money is by offering free service and “premium” service for a price.  Freedigitalphotos.net allows downloading of low-resolution free digital photos, with the option to buy higher resolutions for print and graphic design.  Like Stock.XCHNG, the photos are high quality from real photographers and include shots of professional models.

EveryStockPhoto.com

We all know there are a lot of free quality photos available on Flickr, Wikimedia Commons, and other photo-sharing sites.  Everystockphoto.com allows you to search for free, Creative Commons licensed photos all over the web.

Online Image Editing

Image editing on your desktop with your dual monitors will always be a more pleasant experience, but online imagine editing still has its place, especially if you need to edit images and photos while traveling.

Pixlr

This is a free online image editor and painting application — no registration required.  The one thing it does require is Adobe Flash player.

FotoFlexr

Designed specifically for touching up photos, fotoflexer.com integrates with many social media sites and provides the user with immediate, free access to the editor.  Like the other online image editors, it requires Flash.

Photoshop Express Editor

Yes, that Photoshop. Adobe’s much-loved image editing software is available, in limited form, over the web.  It is free to use and offers many Photoshop features, while stripping out ones that may not be the most commonly used, or that provide more advanced features.

Online HTML and Script editing

Ultimately, being able to easily edit your site’s code is the most important feature you can find to make your work easier.  These editors are completely browser-based and give you the freedom and flexibility to manage and design your HTML and web script documents.

Online-HTML-Editor.org

This online HTML editor is actually a commercial product, but the company that sells its offers it for free on their site, with the hope that users who like it will purchase a version for their own websites.  It is a WYSIWYG (What You See Is What You Get) editor with snappy response time and support for uploading current files, as well as saving new creations.

HTML Edit

This little HTML editor is probably one of the most unique I have come across.  It is a real-time HTML editor.  The top half of the page has a text box for entering raw HTML code, while the bottom contains a formatted page that changes as code is edited on top.  It works instantly and is an ingenious way to edit your code and see live results.  It also does not require any special plugins to work.

Edit Area

If you take your coding seriously, a simply HTML editor is probably not sufficient.  You need something powerful that can support multiple programming languages and offer a wide range of features.  Edit Area might be the tool you need.  It is not an online service but rather software that you can upload to your own website and use for free.

Amy Editor

Take the above-mentioned scenario and then throw it into the “cloud”.  If you need a powerful editor but do not want to host it on your own website, Amy Editor is one of the best.  With features like syntax highlighting and project organization, you may find yourself working out of your web browser more than any other app on your computer.

Be Free and Explore

Depending your needs, you may find some or all of these applications useful, and there are plethora of other tools on the web, offering everything from file storage to website monitoring.  The days of being bound to a single office computer are over, so take advantage of your free mobility and use that inspiration to create even more spectacular sites.

Whether you’re making templates for WordPress, Joomla, Drupal, or any other type of content management system or dynamic web application, there are universal management and organizational best practices that will make each experience less painful and more rewarding. By keeping your template organized and following a systematic scheme (even one you design yourself), you will minimize the time you spend recreating a site from scratch and the amount of time you spend troubleshooting problems.

There is no magic to creating templates. Like regular web design, it requires attention to detail and methodical implementation of sound code. It is like building a house, piece by piece, and like building a house, it is much easier with blueprints, stages of development, and pre-manufactured standard components.

Plan Well

The first step is to always have a plan. As artists, many web designers want to dive into the visual experience of the project and come up for air later when it is time to actually start punching in HTML tags. While there is some merit to looking at a project artistically, you also need to have a plan for the architecture from the beginning. This is especially true for many content management systems, which have certain structural limitations, no matter how artistic you are.

Therefore, it is important to know the “lay of the land” before you start building.  If you are working with a content management system that only allows a top module, a left module, a right module, and a center module, there is no point in initially creating a site that diverges from that scheme.  Realistically, most content management systems are more complex, but they do have real limitations, and you will serve yourself and your clients better by knowing them from the beginning.

As an information architect, I was taught to create wire frames and blueprints before I started making a website. Although it may pain an artistically-minded web designer to even consider such dull activities, you may find them useful.  When working with pre-defined limitations of web software, creating some type of blueprint will give you an idea of what you can design around the frame you are given. In other words, if the house you are building already has a frame with certain attributes, there is no point in designing pieces that cannot fit into it.

Create a Template for your Template

If you create the same type of site enough times, it becomes monotonous to have to troubleshoot CSS errors and DIV positioning issues that you are sure you had solved on the previous site. For each type of content management system, there are only a few possible structural scenarios. If you create a vanilla template for each one, removing any tags or data that make the template unique, you can plug in the template whenever you have a project.  Then, all you will have to do is customize it to needs of the client.

For example, if the project calls for a site with a top banner, a left column DIV, a large content area DIV, and a footer DIV, you can already have that created, complete with whatever script (such as PHP) that calls the CMS functions. When you create a site that requires that format, you can just plug in the custom CSS, images, etc. This will save time and prevent unnecessary hiccups that you may have already fixed on a previous site.

Label Everything

Sometimes it is fun to create as you go, paying little attention to organization, but when you are conducting business and churning out one site after another, you need some type of structure. Divide your CSS documents into relevant sections. You can divide it according to geographic sections of the HTML document or according to the type of tag (structural vs. aesthetic). Regardless of which method you choose, just be sure to have a method.

Once you have a method, label each major division and each section that covers a different element in the template. For example, if you have several CSS elements that relate to the center column of the template, put a label above it, such as /*Center Column*/ . It is simple but effective.

Similarly, you should label any HTML documents using comment tags like <!-- Center Column -->. Although it may seem unnecessary at the time, it will help later on in the project, especially if you need to go back and change something.  You will know exactly where to go, based on the labels you created.

Use a Revision System

For very small sites, this may seem like overkill, but a good practice for large sites with ongoing development is to label each revision with a version number. When you make changes to the site, copy the original files and archive them under a previous version, like 0.1.1. Then, when you start the revision, give that version a number like 0.1.2, depending on the amount of changes you are making.

You can use whatever system you want to label the versions. It can be as simple as 1,2, and 3. The point is to have a system and to have backup copies of previous versions in case something goes wrong or you need to remember how you positioned something in a previous revision.

Make Use of Folders

One of the best ways to get confused is to have one structure for your files on your computer and use another on the server. If a template CSS file will be in /templates/template-name/docs/css on the server, it should be in the same folder structure on your computer. That way, images will have the correct paths, and you will not have to worry about placing files in their correct locations.

Some CMS template systems allow you to upload templates as ZIP files. If all of your files are in the correct folders, ready to be uploaded, all you will need to do is compress the main folder into a ZIP file and proceed.

Keep Backups

Always have backups of any documents you create. Nothing is worse than working so hard on something and then having to do it all again because you somehow lost the work you had started. Furthermore, even after you complete a project, keep an archive of all completed work.  If a client ever needs their custom template again, you can send it off to them without having to redesign it.

Make It Easy For Yourself

By being well-organized and well-prepared, by planning well, and by keeping good records and backups, you can save yourself a lot of unnecessary trouble and time. Unless you are paid by the hour and just want to intentionally fumble around in the dark, you owe it to yourself to find ways to make a web design project as easy as possible so that you can move on to the next one and receive favorable reviews from customers.

If you are as old as I am, you probably remember when the World Wide Web, as we called it, was mostly just a bunch of hypertext pages. In other words, a website consisted of one page that linked to other pages, and if you were fortunate, the webmaster threw in a few scanned photos.

Fast forward to the 21st century, and we now have dynamic web applications that can do just about anything, even mimic an entire operating system.  While many developers are in the habit of using Adobe Flash or some other third-party software to create their web applications, you do not have to circumvent web standards to make your website interesting. A combination of HTML, CSS, and Javascript is really all you need.

One feature of the “Web 2.0” era that has literally popped up all over the web is the modal window. A modal window is essentially a window within a window. Rather than opening a new browser popup window, a modal window opens within the website and is completely dependent on it. Leave the website, and the modal window disappears.

Like most web functions, modal windows can be used for good and evil.  If you have visited Flickr.com recently, you might have noticed that they now have a modal window view option for their images, which is something many users probably enjoy. On the other hand, you have undoubtedly come across a site that pops up a modal window with an ad, survey, or other annoyance. They are immune to popup blockers, and some will stay with you even if you scroll down the page.

My hope is that this article will encourage you to use modal windows like Flickr and not like the latter example. They are convenient for things like internal login prompts, chat windows, and service notifications, all of which can appear without the user having to leave the page. Furthermore, modal windows can allow a user to run an entire operating system on a single web site, as is the case with EyeOS.

There are numerous ways to create modal windows and hundreds of variations in type, size, color, decoration, exit mechanism, and more. Today, we will cover a couple of different examples that you can use in your websites and customize to your liking. You can also download scripts that will create modal windows, as well as extensions for content management systems like Joomla, Drupal, and WordPress.

Modal Window Examples

Here are a few examples of modal windows.

Lightbox

The most common use of modal windows is for images, as I described in the Flickr example. To view an image in a modal window, the user clicks on a thumbnail of the image, and rather than opening the image on a new page or in a popup window, a modal window fills the web page, usually complete with a hover/shadow effect, a close button, and sometimes even a navigation to scroll to more images in the gallery.

Flickr still allows the user to view the image on a normal page, and this is the correct usage of modal windows.  It should not be the only method of viewing the image. The lightbox effect can also be used for embedded videos, an appealing alternative to having YouTube videos load directly on a web page, increasing wait time for visitors.

Login/Registration Forms

Have you ever found the exact page you wanted on a website, only to be told you must login to continue.  If you have an account already, it is no problem.  If not, you must click “register” and invariably be redirected to another page.  You may be redirected a few more times before you can try to find your way back.  Some sites will automatically take you back to the page you were on, but even that is not as convenient as a single modal window popping up to allow login or registration, and then disappearing, allowing you to continue on the same page.

By offering a modal login window to your users, you can save them time and avoid confusing redirects and lost or frustrated customers.

Notification System

The more advanced a web application is, the more there is a need to inform users of events as they occur.  Facebook, for example will alert a user when a new message or comment arrives.  If you have ever experienced an error on Facebook, you also have seen a modal window appear and present the error to you.  Rather than taking you off the page to display the error, you can close the little window and continue with something else on the page.

Contact Forms

Feedback on a website is very important, and contact forms are a necessity.  To avoid spam, most websites no longer display email addresses for contact, and even if they do, they usually still offer contact forms that can be used to direct users to formulate their questions in the most helpful way possible.

With a modal contact window, the form pops up and is easily accessible to the user, without forcing the user to another page.

Search Boxes

Websites come with a multitude of different types of search boxes.  Often times, just finding the search function on a website can be a challenge.  Then, you are presented with different styles, search methods, and destination pages, and that is just with a basic search.  Advanced searches can lead you further away from the main page of the site.

Modal windows can work for searching in many instances, but it has to be used for a purpose (like presenting options) rather than just a fancy gimmick or effect.

Help and Tooltips

A staple of operating systems for years, popup tips (not ads disguised as tips) are a useful way to give the user more information about a particular topic.  You can configure them to activate upon a user click or with a simple mouseover.

Now that you have all of these wonderful ideas for modal windows, you should give them a try.  Here are some helpful links to get you started.

• Prototype Window
• SIMPLE MODAL
• SUBMODAL

Part of the job of a web designer is to create a site that is both beautiful in its visual presentation and also fast in load times and downloads. This is sometimes a difficult balance to maintain. Large file sizes make for slower load times, so any bytes you can shave from your files (HTML, CSS, and Images) will reduce the wait time for your site’s visitors.

Making customers wait for a website to load is no different than a waiting room at a doctor’s office or a line at a grocery store. It is not completely avoidable, but you should make an effort to make the process as brief as possible.

Images, in particular, are the some of the biggest culprits for slow-loading sites.  While including some images as part of your site’s design often adds a needed asthetic appeal, piling on too many creates frustration for your site’s visitors, particularly those on slower Internet connections, slower computers, and mobile devices. Just because you created your website on a 3GHz, Quad-core machine with 4GB of RAM, does not mean Sally Netbook will have the same computing power.

There are three aspects of image optimization that you should evaluate when making your images ready for the web:

1. File Format
2. Resolution
3. Bit Depth

1. File Format

The most common file format we deal with when snapping photos on our phones and downloading wallpapers is JPEG, but it is not the only format at your disposal.  JPEG uses compression, and that compression is inherently lossy.  The more you compress your JPEG file, the blurrier and lower quality it will become.  What makes JPEG appealing is that it can use dithering and smoothing to produce decent-quality photos with small file sizes.

At one time the GIF format was certainly one of the most widely-used image types for web design.  It compresses well, without losing quality.  What it does lose, however, is bit depth, which we will discuss later.  GIF is good for small images that do not require millions of color variations and depth (i.e. not for photos).  They also have support for brief animations.  You can use GIF compression to create very small image file sizes.

In the mid-1990s, the PNG format was introduced.  Like GIF, the compression was lossless, but it also added features like alpha channels (for variable transparency), gamma and color correction, and two-dimensional interlacing.  PNG can also compress files better than GIF in most cases.

At first, browser adoption for PNG (particular in Internet Explorer 6) was mediocre at best, particularly in terms of transparency support.  Later versions of all browsers support these features, and it should generally not be a problem.

PNG is great for higher-quality images, especially if you want to avoid quality loss, but beware of using them for photos, as the file size will be greatly increased in comparison to lossy JPEG files.  PNG can also compress and reduce bit depth, while still maintaining reasonable quality.  This makes PNG an acceptable replacement for GIF images.

2) Resolution

Image resolution is very important when dealing with computers of numerous shapes and sizes.  If you are in the business of sharing or selling photos, then multiple image resolution sizes are important, but the smallest sizes should be used first.

In other words, if the user is deciding which images to download, the first page he encounters should be thumbnails; small 75×75 pixel or 100×100 pixel images should be sufficient.  Clicking the thumbnails can open an intermediate-sized image in the 500×400 range.  A final click can then be used for the full sized image.  This will reduce the number of unnecessarily large downloads for photos the user may not actually want to see up close.

Photo by Victor Svensson

The other important point to remember about resolution is that image resizing must be down in the backend.  This means, either resize the images using an image editing program on your computer or use some type of web application to dynamically resize the images on the server, prior to sending them to the web browser.  But never upload a large image and then use HTML code to scale it.  When users visit a site with an 1200×1020 image scaled to 350×220, for example, their browser will still have to download the full size image.  If you reduce the size prior to uploading, however, they will download a much smaller file.

3) Bit Depth

Bit depth essentially refers to the number of colors an image uses.  1-bit is for monochrome pictures (i.e. black and white).  8-bit uses 256 colors.  16-bit uses 65,536 colors, and 24-bit images can have up to 16,777,216 colors.

Photo by wikimedia.org

For images other than photos, particularly those used to enhance your design in simplistic ways (i.e. rounded corners of a box or button backgrounds), use 8-bit PNG files.  Most image editing software, including Photoshop, has support for indexed PNG files.  You can also further compress the files with software that is specifically designed to create smaller PNGs, like pngnq.

Photo by wikimedia.org

Use Images Sparingly

One common mistake of inexperienced web designers is to use images when they are not actually necessary.  A divider with a solid color background and a shadow, for example, does not need to be an image.  Modern browsers support CSS techniques that will allow you to accomplish the same goal with minimal code and no images.  Future versions of HTML and CSS will support even more complex rendering to produce effects like gradients and SVG graphics and animations.

There are times when images are simply necessary, and you should save your bandwidth for those instances.  Once you have created a site, add up the bytes used by images on a single page.  Add that number to the HTML and CSS file sizes to see how much a user will have to download to access one page of your site.  Hopefully, the number will be small.

By carefully preparing the images you use on your website and using images sparingly, you can ensure that your site’s visitors will get the best experience possible.  When website visitors view a clean, fast-loading, accessible website, they are more likely to return and use the site again.  That is better for you, your clients, and your wallet.

In the past decade, the web browser landscape has changed dramatically. At the end of the browser wars (Netscape vs Microsoft Internet Explorer), Microsoft was victorious, and Netscape seemed to lay floundering with no hope for recovery.

After Netscape’s quiet descent into the open source world, releasing Mozilla, and its eventual resurgence with Mozilla Firefox, developers who had become lazy, coding only for Internet Explorer (IE), were faced with a new dilemma.

Microsoft ending support for its IE version for Macs also helped to usher in a new browser from Apple: Safari. Add Opera and now Google Chrome, and the chance that coding for one browser and actually having your site look the way you intended on all the others, becomes very slim.

Browser market share aside, it is just part of web design best practices to make sure your website can reach as wide of an audience as possible. That means developing sites that work on desktop browsers, tablets, netbooks, screen readers, and mobile phones.

The easiest way to ensure cross-browser compatibility is to code according to W3C standards. Unfortunately, even that alone will not guarantee your site will be uniformly identical across all browser platforms. It will require testing, re-testing, and patience.

There are a number of issues to consider when designing for multiple browsers:

1. XHTML support -  At this time, most current browsers support all XHTML functions, but you may still need to check some.

2. CSS support – This is spotty, depending on the browsers.  There are some features Microsoft may choose to never support.

You will have to evaluate browser compatibility for CSS on a per-selector basis.  None of the browser makers implement support for a particular version of CSS across the board.  Instead, adoption is gradual, and more support is typically added with each release.

CSS2 is currently supported on IE8, IE9, Firefox 3.x, Safari 4 and 5, Google Chrome 4 and 5, and Opera 10.x.

IE8 does not come close to supporting CSS3, while the other above-mentioned browsers nearly support it but not perfectly.

For example, the box-shadow selector in CSS3 is supported by some but not others, and some of the browsers require specific indication that you are coding for them. IE 6, 7, and 8 do not support it at all, while IE9 is said to support it fully. Firefox 3.0 does not support it, while 3.5 and later supports it with the -moz- indicator. Similarly, Webkit-based browsers like Safari and Chrome support it with a -webkit- indicator. Opera supports it since version 10.53.

My point in mentioning this example is to show you that, while there are some great features available in the newer standards like CSS3, you will still have to use some old hacks to get true cross-browser compatibility.  For a box shadow, for example, you will have to rely on images, unless not having the shadow in some browsers will not affect the overall quality of the site.

3. Javascript – Here, the situation gets even more complicated.  Javascript engines for the various browsers are very different, and even if they support the same features, they may appear different.

Like CSS, you will have to test each browser independently to get an idea of what is supported and what is not.  You should also test for speed, as some javascript functions may be very slow in certain browsers.

4. Future features (i.e. HTML5) – All of the browsers still need improved support for future HTML features.  There is nothing wrong with coding for the future to make sure your sites will stand the test of time and still be compatible with browsers that do not have support.

If you do include any HTML5 functions in your website (like the video tag for iPad compatibility), you should also include an alternative, since most browsers will not be able to view whatever you insert.

5. Backwards compatibility – The sad truth is that some people still have old computers with old browsers like Internet Explorer 6.  You will probably not be able to make a site look perfect in newer browsers and IE6, but it does not hurt to make some effort to ensure your site at least still functions on antiquated technology.

To give an example of a feature that requires backwards compatibility, try testing PNG transparency in various browsers.  Most browsers have supported it for quite some time, but Microsoft did not support it in IE6.  This means that the background of a transparent PNG image will not display correctly in that old browser.  To fix that, there is javascript code you can add to mask the lack of PNG transparency support and fool IE6 into displaying it correctly.

How to Test

I have repeatedly stressed that you need to test browser compatibility, but actually being able to do that may not be easy.  If you have a Windows computer, you will be able to test all of the major browsers: IE, Firefox, Safari (albeit not in a truly Mac environment), Chrome, and Opera.  If, however, you are on a Mac, you will not have access to Internet Explorer.

There are a couple of options.  One is to use a virtual machine like Parallels, Vmware, or VirtualBox (free) and install Windows in it.  This will allow you to view IE performance in an actual Windows environment.

Another option is to use a compatibility site, a website that allows you to view how your website will look in multiple browsers.  Some popular ones include:

1. Browser Shots
2. CrossBrowserTesting.com
3. BrowserCamp
4. Adobe Browser Lab

In addition, you should also run HTML and CSS standards tests:

1. validator.w3.org
2. jigsaw.w3.org/css-validator

It may be more difficult to find testing sites that accurately display how your site will look on a mobile browser, but most are based on one of the major rendering engines like Webkit, Gecko, or Opera’s engine.  If you are truly unsure, you can try some of the mobile browser emulators available for download.

Finally, always make sure your site is accessible and can stand up to odd resolution changes (especially common with digital projectors), and other atypical displays.  Once you have all of that settled, you can actually begin working on content.

At one time, most websites had simple text links. Even an experienced web designer would, at best, organize some type of simple text list or table for their menu. If they wanted something more fancy (i.e. mouseover effects or image backgrounds) the only way to accomplish it was with an external plugin, such as Java. That often slowed websites to an unusable state.

CSS changed all of that, providing web designers with styling flexibility in lists, particularly when used to make menus. Without using Java, Flash, or even Javascript, you can have elegant looking menus that are fast and standards-compliant.

Getting Started

First we should define a few terms. A “list” in HTML lingo refers to the sets of tags used to list a number of items, either sequentially or not.  A sequential list is called an “ordered list” and is represented by the <ol> tag.  A non-sequential list is called an “unordered list” and is represented by the <ul> tag.  In web browsers, the default ordered list will have Arabic numbers and look like this:

1. Roger
2. Lila
3. Cal
4. Ming

An unordered list will use bullets by default and look like this:

• Eggs
• Cheese
• Milk
• Bread
• Juice

The first step to creating a list menu is to make the actual list in your HTML file. Create a div container for the list, which will allow you to place it where you want on the page.  The <ul></ul> tags will surround each list item <li>:

<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>

Next, add id’s to the list tags to identify them in your CSS file.

<div id="navcontainer">
<ul id="navlist">

For a basic navigation list, that is all you have to do to create it. If you want to manipulate backgrounds, colors, hover actions, and more, the rest of your work will take place in the CSS file.

CSS Settings

Find a good spot in your CSS file, or create a new one. Begin by adding the navcontainer id and assigning a width to it:

#navcontainer { width: 200px; }

The next step will be to specify the style and attributes of the unordered list as a whole:

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, sans-serif;
}

Rather than displaying a style of bullet or numeric character, “list-style-type: none” will remove all list-item markers and leave only the words in the list.

The next items to configure are the list items themselves. In this case, you will style any list item in the container with an “a” link tag.

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
color: #fff;
background-color: #1A5101;
border-bottom: 1px solid #E9F1D9;
text-decoration: none;
}

The element “display: block” tells the list item to take up the full width allowed for it and to place a line break before and after each item. This will essentially make vertical buttons. The “text-decoration: none” removes the underline from the link.

Finally, specify the style of mouse-over for the buttons. In CSS the mouse-over effect is called “hover”, and an item’s style can be changed however you like, when the mouse pointer hovers over it. In this case, we will only change the background color and text color.

#navcontainer a:hover
{
background-color: #DEF1DE;
color: #1A5101;
}

That is all it takes to create a vertical menu using CSS. If you would like to try out your own versions, you can download the HTML and CSS files and customize them however you wish.

Horizontal Menus

With just a few lines of code, you were able to create a vertical menu with CSS.  You can use a similar process to create a horizontal one. The first thing you should know is that you do not have to change the HTML code at all. You can use the exact same HTML file and just change the tags in the CSS file to morph your list into a horizontal menu.

For the horizontal list, you will apply styles to the #navlist id rather than the #navcontainer. Changing the list from vertical to horizontal actually only requires one small tag change from “display: block” to “display: inline”.

#navcontainer {
padding: 0;
margin: 0;
text-align: center;
}

ul#navlist
{
background-color: #1A5101;
padding: 5px 0 5px 0;
white-space: nowrap;
font-family: Verdana, Arial, sans-serif;
}

#navlist li
{
list-style-type: none;
display: inline;
}

#navlist a
{
padding: 3px;
}

Notice the “white-space: nowrap” element, which prevents the list from wrapping at the end of the line when there is white space. Also notice that you can remove the “width” setting, but you are free to add a height setting, if you want to change the height of your menu.

Like the vertical menu, the next step is to specify the colors and behavior of the links and mouse hover effect.

#navlist a:link, #navlist a:visited
{
margin: 0 3px 0 3px;
padding: 1px;
color: #fff;
border: 1px solid #fff;
text-decoration: none;
}

#navlist a:hover
{
background-color: #DEF1DE;
color: #1A5101;
}

With just those CSS tags, your vertical menu will now be a horizontal menu. You can view the HTML and CSS file for the horizontal menu and customize it to your liking.

Background Images

If you have a particularly fancy website, you may find simple solid background colors for your buttons to be too plain. With CSS you can create background button images for normal and hovered states, without using javascript or any other additional code. We will use the first vertical menu example as our template and only change a few settings.

First, create images, and make sure they are the exact size of the buttons you want to display on your page. Create one button  image for the normal state, save it, and then alter that image (i.e. make it lighter, darker, or a different color) and save it under a different name for the hovered state.

In the “navcontainer a” tag, you need to add a “background-image” element that will take the place of the background color:

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
color: #fff;
background-image: url(images/normal.png);
background-color: #1A5101;
border-bottom: 1px solid #E9F1D9;
text-decoration: none;
}

Next, edit the “navcontainer a:hover” tag to use the hovered state image:

#navcontainer a:hover
{
background-image: url(images/hover.png);
background-color: #DEF1DE;
color: #1A5101;
}

Now, each button will have a background image that may look like any type of button you want, depending on your graphic design, and will also seamlessly change to another image when hovered.  Be sure to keep the image file size small so that there is no delay when users hover their mouses over the buttons.

There are a multitude of other styles and techniques for making CSS list menus.  Experiment, find new ways to beautify your websites, and share your discoveries.

As a web designer, it is important for you to keep up on the latest technology available to you. Although full adoption of HTML5 is probably still a few years away, learning how to create some HTML5 tags on your websites will put you ahead of the rest. Furthermore, some tags (the video tag in particular) have already been adopted by certain platforms (think iPhone and iPad). You can ultimately decide if you want to cater to those platforms or not, but being aware of them certainly cannot hurt.

In this article, we will only cover the very basics of HTML5, as each tag could have its own article, if fully explored in-depth. The canvas tag, for example, can be used to produce images for very complex and intricate Web tools, interactive apps, and even games. Nevertheless, you should leave this article with enough knowledge to begin adding HTML5 tags to your work.

First, it is important to know where HTML5 will work if you bother to go through the process of supporting it on your websites. Despite being in its early stages, HTML5 has been gradually adopted by most major web browsers. The big (and I do mean big) exception is Internet Explorer. The good news, however, is that the next version of IE (9.0) is expected to add many HTML5 tag support to its code.

Current browsers supporting HTML5 in their latest versions are: Mozilla Firefox, Apple Safari, Opera, Google Chrome, iPhone/iPad browser, and Android browser. Because adoption at this point may be sporadic, you should provide alternate methods of presentation, if you do decide to publish with HTML5 on a live website. We will not cover every HTML5 tag. You can, however, view a complete list.

<aside>

The aside tag, as the name implies, is designed to set content aside from the main content.  It is useful for creating sidebars and other related content.

For example:

<p>The big dog ran to the park.</p>
<aside>
<h4>The Big Dog</h4>
You can read more big dog stories on the next page.
</aside>

<audio>

Use this tag to insert streaming audio into the user’s browser.  With it, no plugin is required.

Example:

<audio src="music/Foha/lastsong.ogg">
<p>Your browser does not support the audio element.  Please download the audio file below.</p>
</audio>

Content between the opening and closing tag is fallback content, in case the user’s browser does not support the audio tag.

<canvas>

This tag can be used to create graphics within the web page, without the need for uploading actual image files.  Like the <audio> tag, elements are inserted within the opening tag, and anything in between the opening and closing tag is “fallback content” for browsers that do not support it.

Here is a simple example from Mozilla.org:

<html>
 <head>
  <script type="application/javascript">
function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
  </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

<dialog>

If you have ever found publishing plays on a website to be tedious, the “dialog” tag will ease some of your tension.  With it, you can easily distinguish between the dialog speaker and their actual words.

Example:

<dialog>
<dt>Hero
<dd>You killed my father!
<dt>Villain
<dd>A necessary evil.
<dt>An evil that cannot go unpunished.
<dd>Then you will join your father in death.
</dialog>

Like most HTML tags, you can assign styles to the tags, making them consistently appear however you wish.

<embed>

The <embed> tag allows you to easily insert applications or content from plug-ins (such as Quicktime player).  You can specify height, width, and content type.  Unlike <audio> and <video>, there is no closing tag and, therefore, no fallback text.

Example:

<embed type="video/quicktime" src=/media/bunny-hop.mov" width="800" height="480" />

<header>

This tag specifies items contained in headings, subheadings, and other preliminary information.  It can enclose other tags, such as <h1> between its opening and closing tags.

Example:

<header>
<h1>The Beginning of the Ed</h1>
<h2>A book by Kensony Lippet</h2>
</header>

<header>
<h1>The Beginning of the Ed</h1>
<h2>A book by Kensony Lippet</h2>
</header>

The <header> tag can hold style elements to customize the appearance

<footer>

The <footer> tag is basically the same as the <header>, only it appears at the bottom.  It will usually contain copyright information, terms of use, privacy policy, “last updated” date, etc.

<mark>

Use the <mark> tag to highlight relevant text in a specified context.  This is useful for annotating or enhancing text.

Example:

<p>Another new feature that was previously previewed and is now available to all is the <mark style="background-color:yellow;"> Blogger Template Designer</mark>.  With it, users can choose from 19 stock templates and create customizations to suit their needs, including background images, colors, and layout manipulation.</p>

<video>

Perhaps the most popular HTML5 tag of all, the <video> tag has received a tremendous amount of press, largely because of the controversy over which format is best.  Nearly all browsers have some support for the HTML5 video tag, but they do not all support the same video formats.  If you do use it, be sure to have an alternative for each browser and for those that do not support HTML5 at all.

Like the <audio> tag, the <video> tag has a closing tag, and “fallback content” can be placed in between.  The web designer can specify autoplay, loop, controls, width, height, and poster (which displays an alternate image, if the browser has not yet loaded the video).  The web designer can also include style elements within the tag.

Example:

<video src="media/videos/last-dragon.ogg" width="320" height="240" controls><p>If you can read this, it means that your browser does not support the video element. </p>
</video>

Because the landscape of this technology is changing rapidly, I recommend that, if you do use it, do not use automatic browser detection to determine if your site should display the content or offer an alternative.  This will only alienate your users who may have a browser you did not consider.  The better method is to publish the <video> tag and then also offer an alternative method (such as a direct link to the video or an embedded Flash version).

Current support for the <video> tag:

HTML5 still has a long road ahead to get final W3C standardization, so there is no need to panic if your website is not ready for it right now. When it does come, you will be able to offer your site visitors more clarity, consistency, speed, and embedded/streaming content.

Last week, we learned the basic structure of Joomla templates, how they interact with Joomla’s backend, and how to make a very basic template.  Now that you have basic template creation mastered, you will most likely want to make a full template that can actually function on a website and give you all of the flexibility in options and design that you need.

We will cover five steps of Joomla template creation: creating the templateDetails.xml file, organizing the structure of your document, creating CSS styles, adding graphics and background images, and finalizing your template for personal use or public distribution.

1. Create the templateDetails.xml file

This file is very important, and your template will not function properly without it.  In templateDetails.xml, you will declare the name of your document, author, copyright, all of the modules, image files, and extra css files.

Although knowledge of XML is helpful, you can learn it very quickly, even if this is your first time.  Unlike HTML, XML tags can be anything and are used to define data.  For example, the first tag in the templateDetails.xml will be <name></name>.  Here you will insert the name of your template: <name>MyTemplate</name>.  Follow the same method to enter the version, creation date, author, author URL, copyright, license, and description. Take a look at the example file to see how the first section should look.

The next part of the templateDetails.xml file is used to declare any files in the template package. This includes index.php, css/templates.css, any image files, and even the templateDetails.xml file itself. To declare a file, use the following method:

<filename>css/template.css</filename>

and

<filename>index.php</filename>

Notice that you must use the relative path in relation to the templateDetails.xml file, so an image file, for example, will be in images/image-name.png.

The final section in the templateDetails.xml file declares module positions.  This is very important because only modules declared here will appear in your backend.  All you have to do is list the ones you want to use.  For example:

<position>right</position>

See the example document for possible module positions.  Ultimately, you can decide what positions actually exist and where they will be placed in your HTML template.

2. Organize Your Structure (index.php)

In the previous part of this series, you learned about jdoc statements and how to place them in the index.php file, which is the primary HTML template document. Creating the HTML structure is completely dependent on your needs and your aesthetic taste, but you should know how each jdoc statement will display its contents, as this will help you find an appropriate spot to place it.

• Header: This should contain the title as an image banner or text and should link back to the Home page.
• Top elements: Top elements include the breadcrumbs or pathway and the top menu.  Typically, these will be defined by a series of DIVs.
• User elements: You can place one, two, three, or even four user boxes on your site.  These can theoretically contain any module, although they are typically used for “latest news“, “top articles” and other leading modules.  This might also be a good spot to place third-party modules, like a frontpage slideshow.  Typically, user modules will be page-specific.  In other words, you might place the modules on the frontpage but not on full article pages.  All of those settings are controlled in the menu settings of Joomla’s admnistrative backend.
• Left and right modules: As the names indicate, these modules are usually placed on the left and right respectively inside of floating DIVs.  Both are optional, and depending on the size and structure of your site, you might have both, one, or neither.  Module types include the login module and syndication module.
• Footer: This is something I usually create manually to include my own site’s copyright license information, bottom text menu, and possibly links to a sitemap and other text-only documents.

3. Create Styles

The css/template.css file will contain all of the styles for your entire site.  As a result, the document can get quite long, and you should take care to organize it thoughtfully.   There are two ways to approach this.  The first is to separate it into sections: structure (size, width, etc) and visuals (colors, fonts, and images).  The other approach is to follow the structure of the index.php file, listing all of the styles according to their actual positions on the site.

4. Add Background Images and Graphics

All background images should be established inside your CSS file, rather than in the index.php document.  You should also declare any images you create in the templateDetails.xml file.

Because your template.css file is inside a subdirectory of the main template directory and the images directory is in another, you need to make sure to link images using the proper relative path.  For example, an image named header.jpg should be linked in a style like this:

background-image: url(../images/header.jpg);

That will tell the server to go up a directory to the main template directory and then go into the images directory.

5. Finalize Template

Once you have all of your components complete, there are a couple of steps you should take to finalize your template.  The first is to upload it and test it.  Simply copy your entire template directory to the “templates” directory on your website.  When you go into the Joomla backend, you should see your template listed.  If everything looks fine, take a screenshot of the template and save that screenshot to the local template folder on your computer.  Resize it to about 200px wide and save it as template_thumbnail.png.

Make sure you have all of the necessary folders and extra files, most of which you can copy from a default template (see the first article of this series).  Once you do, create a zip file of your entire template folder, saving it as the name of your template (i.e. MyTemplate.zip).  If you decide to distribute your template, users only have to upload your zip file, and it should install correctly.

Joomla template creation can be fun and rewarding, whether you use your new templates for personal use or decide to sell them.  Once you have made a few practice templates and feel comfortable making them, you should be able to truly customize Joomla to meet any needs of the websites you design.

Joomla is a powerful yet easy to use content management system that is free to download and open source (allowing free customization).  It is has become a very popular choice for web designers because, like many modern content management systems, it allows the designer to fully turn over control of the site to the client, after the template design is finished.

The reason clients love Joomla is that they can configure it from within a user-friendly web-based control panel and easily add extensions to it. Users add extensions simply by uploading the zip file provided by the extension developer, and Joomla’s website includes a catalog of over 5,000 extensions.

While using Joomla is very simple, modifying or creating templates for it takes a little more training. In this introduction, we will cover the template structure, how the template interacts with the backend, and the setup of a basic XHTML+CSS Joomla template.

1. Template Structure

In the Joomla filesystem, templates are housed in a directory called “templates”.  Each template will have its own directory and will be named accordingly.

/SITE
/templates

/MyTemplate (name this whatever you like)

/admin
/css
template.css
/html
/images
component.php
favicon.ico
index.html
index.php
params.ini
template_thumbnail.png
templateDetails.xml
templates.php

Not all templates will have the “html” folder, but if you want your Joomla template to be pure XHTML with divs and no tables for structure, simply copy the html folder found in the “beez” template directory to your own template directory.

The two main files that you will edit are “index.php”, which is in the /SITE/templates/MyTemplate directory, and template.css, which is located in the /SITE/templates/MyTemplate/css directory.  The index.php file will contain your XHTML code and the php includes that will call up Joomla components and modules.  The template.css file will contain your CSS styles for the entire site.

2. Template/Backend Interaction

Joomla is written in PHP, and all interaction between the template and backend uses this language.  Fortunately, you do not really need to know any PHP code to create or modify a template, only that a few PHP tags should be present and never need to be altered.

For example, certain PHP tags can be used to automatically link to files, even if the directory structure changes.  For example, the <?php echo $this->template ?> will automatically insert the URL into your template directory, even if you copy the template to a new site. Therefore, when linking to the CSS file, you would use:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

The easiest way to get started is to copy the header from one of the default Joomla templates, since all of the variable content in the header tags will be controlled in the Joomla backend.

The other portions of Joomla are placed on the page using “jdoc” statements.  Each statement is used to include a specific component or module in Joomla.  For example, <jdoc:include type=”component” /> will insert the appropriate component for a given page.  All of the content contained in that component will appear wherever you place that jdoc statement.  This allows for tremendous flexibility because you can insert that include into a div, specify the size, color attributes, alignment, and any other html or css you wish.

The <jdoc:include type=”head” /> element is the only jdoc statement that appears between the <head></head> tags.  All metadata specified in the Joomla backend will appear in its place.

Modules are identified by the jdoc:include type=”modules” statement, and each module name is declared within the statement:  <jdoc:include type=”modules” name=”modulename” />. For any module, just replace “modulename” with the actual name (i.e. breadcrumbs, footer, right, left, user1, user2).

The <jdoc:include type=”message” /> statement will include any system or error messages on your page.

3. Basic Joomla Template

A basic Joomla template will have the necessary jdoc statements in the index.php file, the XHTML structure around the statements, and CSS styles in templates.css that correspond with the IDs and classes in your index.php file.  Assuming you are familiar with normal web design, the rest of the process will be familiar.

This is what your basic Joomla template structure for index.php will look like (Joomla code is included in bold).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div id="container">

	<div id=”top-modules”>
	<jdoc:include type=”modules” name=”top” />
	</div>

	<div id=”left-modules”>
	<jdoc:include type=”modules” name=”left” />
	</div>

	<div id=”content”>
	<jdoc:include type=”modules” name=”message” />
	<?php if($this->params->get('showComponent')) : ?>
	<jdoc:include type=”modules” name=”component” />
	<?php endif; ?>
	</div>

	<div id=”right-modules”>
	<jdoc:include type=”modules” name=”right” />
	</div>

</div>

</body>
</html>

Your index.php file can certainly be more complex than this, but you should now have a basic idea about the general structure of a Joomla template and how differs from a regular html/css website.

In the next part of this article series, we will explore Joomla templates in a little more depth, learning how to set up one from start to finish, as well as some important CSS tags that are embedded in the Joomla system.  In the meantime, it might help you to take a look at the Joomla documentation for the topics we covered.

• Joomla Templates
• Jdoc Statements
• Beez Template

Get Updated

Keep yourself updated with our new Free WP Themes releases and Featured Web Templates, Happy Blogging!