The University of Missouri makes heavy use of Hannon Hill’s Cascade Server, a XSLT-based content management system. This is a fairly advanced tutorial that assumes some basic familiarity with that product.

Now, one of the things that sets Cascade apart from other content management systems is it doesn’t build live pages on the fly. Changes to files and templates must be published out before they will be live on the server. The downside to this is that even a fairly minor edit, like changing contact information in the footer, may require your entire site to be republished. For a large site, this might take a significant amount of time.

Fortunately, there is a solution. We can move our boilerplate content to separate files, and instead configure Cascade to use PHP includes on the live site. I’d like to share my method for setting this up, using a site footer as an example.

Diagram of the setup for PHP includes with Cascade. This is explained in detail below.

Include File Template

The first step is to create a template for files we’ll be including with PHP:

<include><system-region name="DEFAULT"/></include>

These files will just contain the content we attach to the DEFAULT region. The <include> is only there because valid XML requires a root node. We’ll be stripping it out later on.

Configuration Set

Next, we’ll create an “Include File” configuration set with the following options:

1. Template should be the template we just created
2. XSLT Format should not be set
3. Configuration can be published must be checked
4. Output File Extension should be .php
5. Type of Data should be XML
6. Include XML Declaration in Published Files must be unchecked
7. The DEFAULT region does not need a Block or Format set.

Include Files

Next, in Cascade, create an includes directory in your web root (it’s possible to store the include files elsewhere, but note that it requires a minor edit to the _include file described below).

Then, create a new page that uses the “Include File” configuration set we created earlier, and name it footer.

Block and Format

Next, we need to setup our Block and Format. We will use the same Block and Format in two places:

1. For the DEFAULT region of our include file.
2. For the region of our standard pages where we want to use the include. (Probably FOOTER for this example).

The Block will consist of the HTML for the footer, wrapped in a <system-xml> tag (again, since valid XML requires a root node). The Text Block option is good for this purpose.

<system-xml><p>Copyright © 2012 — Curators of the <a href="http://www.umsystem.edu">University of Missouri</a>.
All rights reserved. <a href="http://missouri.edu/dmca/">DMCA</a> and <a href="http://missouri.edu/copyright.php">other copyright information</a>.
An <a href="http://missouri.edu/eeo-aa.php">equal opportunity/affirmative action</a> institution.</p></system-xml>

The Format will look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:import href="/_internal/stylesheets/_include"/>
    <xsl:output indent="yes" method="xml"/>

    <xsl:template match="/">
    	<xsl:call-template name="output-content">
    		<xsl:with-param name="filename">footer</xsl:with-param>
    		<xsl:with-param name="content">
    			<xsl:copy-of select="system-xml/node()"/>
    		</xsl:with-param>
    	</xsl:call-template>
    </xsl:template>
</xsl:stylesheet>

In this file, an XSL template is called, named output-content, that has two parameters: the filename, footer, and the actual content of the include, which is, in this case, selects everything in the Block in-between the <system-xml> tag.

It’s worth noting, that the block doesn’t necessarily have to be static HTML. A XML block can be used, and all you have to do is make sure that the result of your XSL transformation is placed in-between the <xsl:with-param name="content"> tag of the output-content template.

_include

Now, output-content is defined by the _include stylesheet we’ve brought in via xsl:import. Here’s the definition for that file. Note that, you may need to update the xsl:import statement to accurately reflect where you’re storing the _include stylesheet.

This file determines contextually whether or not to bring in one of the include files with PHP, or to simply output the content.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output indent="yes" method="xml"/>

    <xsl:template name="output-content">
        <xsl:param name="filename"/>
        <xsl:param name="content"/>

        [system-view:internal]
            <xsl:copy-of select="$content"/>
        [/system-view:internal]

        [system-view:external]
            <xsl:processing-instruction name="php">
            # Location of includes directory
            # (set to just off the server root - change it if you're storing the includes elsewhere)
            $includeDirectory = $_SERVER["DOCUMENT_ROOT"] . '/' . 'includes/';

            # Filename parameter from XSL template
            $fileName = trim('<xsl:value-of select="$filename"/>');

            # Full path of the include file
            $includePath = $includeDirectory . $fileName . '.php';

            # Just output the content if
            #   1. The file that's executing this code *is* the include file
            #   2. or the $isInclude flag has been set to true (see the else block)
            if (($_SERVER["SCRIPT_FILENAME"] == $includePath) or ((isset($isInclude)) and ($isInclude === true)))
            {
                </xsl:processing-instruction>
                <xsl:copy-of select="$content"/>
                <xsl:processing-instruction name="php">
            }

            # Otherwise, bring in the contents of the include file
            else
            {
                if (file_exists($includePath))
                {
                    # Setting $isInclude to true forces the include file to output its content when it's brought in
                    $isInclude = true;

                    # Capture the content of the include
                    ob_start();
                    include $includePath;
                    $content = ob_get_contents();
                    ob_end_clean();

                    # Strip the "include" root tag and print the contents
                    preg_match_all('/&lt;include&gt;(.*)&lt;\/include&gt;/s', $content, $matches);
                    print_r($matches[1][0]);

                    # Reset the $isInclude flag
                    $isInclude = false;
                }
            }
            </xsl:processing-instruction>
        [/system-view:external]
    </xsl:template>
</xsl:stylesheet>

That’s it! Now to make changes to the footer, all you have to do is edit the footer block we defined above, and then publish out /includes/footer.

For convenience, here’s a ZIP file containing all of the files discussed in this post:

Download Resources

I recently revisited an old site I had built in order to give it some design tweaks. It was built a few years ago and I was amazed at how simple the CSS was. It was just over 100 lines of code (I liked to put my selector rules all on the same line.) and I could see how everything was styled at a glance.

This is no longer the case today. With CSS3, simple CSS markup is a thing of the past. Now you have to deal with browser prefixes, complex gradient rules and transitions. Things start to get verbose and you end up repeating yourself … a lot.

CSS compilers

CSS by itself is not dynamic. It’s not a programming language, so it doesn’t do any work for you. You have to literally write out every rule … over and over again. Because of this, there isn’t any way to use variables, operations or functions.

This is where a CSS compiler helps out. It lets you write CSS in shorthand and gives you the option to use variables, operations and functions. Then the compiler reads the code and spits out plain CSS that any browser can read. You can compile on your computer, on the server, or even in the user’s browser.

There are several flavors to choose from.

• LESS CSS
• Compass/Sass
• Stylus
• Scaffold

All do very similar things. You just need to pick the one that works for you.

Why I chose LESS CSS

• It has a syntax very similar to CSS.
• You can write regular CSS with it, so it’s easy to get started with.
• You can compile it server-side, browser-side, command line or using a simple GUI app.

The biggest reason I chose LESS CSS is because of the variety of easy to use compiling apps, like Less App, CodeKit, SimpLess, or WinLess. With one, I can compile a static CSS file that I can use on my site and not depend on a server/browser side script. This also allows others on my team to edit the file without a compiler if needed.

Some ways LESS CSS saves me time

Variables

What everyone wished CSS3 had. I can set variables for my colors, fonts, paths and more and then call them anytime.

@tan: 	rgb(199,195,147);
#foo { background-color: @tan; }

Output

#foo { background-color: rgb(199,195,147); }

Color functions

With LESS, I can now take one of my color variables and adjust it. I can darken, lighten, saturate, desaturate make transparent or mix color values. Hex, RGB – it doesn’t matter. If I base it all off of variables, I can change all of a site’s colors easily.

@black: 		#000;
#foo { background-color: lighten(@black, 80%); }

Output

#foo { background-color: #cccccc; }

Nested selectors

Now my CSS can be nested and visually grouped. It can also begin to match my DOM structure. Be careful not to nest too far. Things can get out of hand real fast.

#header {
	width: 100%	
	background-color: @tan;
	h1 {
		color: #fc3;
		&:hover { color: #ccc; }
	}
}

Output

#header {
	width: 100%	
	background-color: rgb(199,195,147);
}
#header h1 { color: #fc3; }
#header h1:hover { color: #ccc; }

Mixins

This is a real time saver. Do you find yourself using the same rules over and over again? Tired of writing browser prefixes every time you use CSS3? Mixins help with this.

• Clearfix (You don’t need a class in the markup anymore.)
• Gradients
• Buttons
• Browser prefixes

/* A mixin, 5px is defined as default radius */
.border-radius(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
/* Use on a selector */
#header { .border-radius(6px); }

Output

#header {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

Here are a few handy mixins to get you started.

• Less Elements
• Preboot.less

Imports

Just use @import and easily pull in existing code to be compiled into your singe CSS file. This is perfect things like a reset CSS ruleset. Remember the cascade and import in the correct order.

@import 'reset.less';
@import 'ios.less';
@import 'mixers.less';

IE hacks

Just bake them in using this easy method. Keep all your code together. (The IE8 one needs to be escaped when using LESS CSS.)

border: none~'\9'; /* IE 8 or lower */
*border: none; /* IE 7 or lower */
_border: none; /* IE 6 or lower */

Include even more comments

LESS CSS will strip out comments in the compiled CSS, so document your code as much as you want! You’ll be glad you did later.

FAQs

“You’re saying I have to learn another language to write CSS?”

Yes. You use jQuery, right? How’d that work out for JavaScript?

“But the command line is scary. Isn’t there an easier way to compile?” or “Do I have to depend on some server-side script?”

I’m glad you asked! Give one of these super-easy GUI apps a try: Less App, CodeKit, SimpLess, WinLess, Compass App. They will compile on your desktop giving you a nice, static CSS file to upload.

“I’m a designer not a programmer. How am I supposed to deal with this?”

If you use LESS and the LESS App, you can write CSS the way you’ve always done it and start adding easy things, like variables, as you learn them. Then get more complex. Soon, you’ll be a LESS CSS master!

“I work with a team. How are they supposed to edit my code when I can’t?”

They should learn one of these frameworks too! But, if they don’t, just use a compiled CSS file on your site that they can simply edit when you aren’t around.

“The compiled CSS is not efficient and results in complex selectors, slower performance and larger files!”

True, but the compiled CSS is for a machine to read and if you minimize the output, file size won’t be an issue. Also, the performance impact of CSS selectors is pretty negligible. I think the time saved during development and maintenance is worth it.

Web design is a field prone to major shifts. For the last few years, the advent of the mobile web has commanded our attention. We must now assume that almost any site we produce will be viewed on a variety of devices—from phones, to tablets, to traditional desktops.

I believe the next major development will be high-definition displays, and this is a shift we should begin preparing for as soon as possible.

What is a High-Definition Display?

Simply put, it’s a display with a lot more pixels. We already have high-definition screens in the mobile space. The iPhone 4, introduced in June 2010, features a “Retina” display with a 640×960 resolution—double the pixel density of previous iterations.

Just like application developers, designers of mobile-optimized websites have had to increase the size of their graphics to avoid looking pixelated on the new device. A quick example:

Unoptimized on the left, optimized on the right. Larger graphics are required to look crisp on a Retina display.

It’s worth mentioning that, with a hi-def display, pixel dimensions expressed in CSS or HTML do not represent real device pixels. “1px” is a 2×2 pixel box. An element with a width of “320px” and a height of “480px” will cover the entire screen of an iPhone 4. If you have an image that has real dimensions of 320 x 480, however, it will be blown up to fill the actual space.

Implementing High-Definition Support

So, how does one deliver high-definition images to devices that support them?

Background Images

For background images, it’s pretty easy to swap in high-resolution graphics using media queries:

/* Initial element */

.element
{
    background-image: url(images/photo.jpg);
    width: 100px;
    height: 200px;
}

/* Replace the image for higher-resolution devices */

@media screen and (-webkit-min-device-pixel-ratio: 2)
{
    .element
    {
        background-image: url(images/photo_2x.jpg);
        background-size: 100px 200px;
    }
}

background-size is important here. It should be set to the same dimensions as the standard definition image, otherwise it’ll display with the same 2x factor.

Inline Images

Inline images are a bit more complicated. There are numerous solutions to the problem, but I would recommend Troy Mcilvena’s Retina Display jQuery Plugin. If the plugin detects a pixel density of 2 or higher , it look for high resolution versions with a given suffix (it’s set by default to “_2x”, so if the image is named “photo.jpg”, it’ll check to see if “photo_2x.jpg” exists). If this larger image exists, it’ll swap it in. Pretty simple.

Moving Beyond Mobile

Now, there’s a lot of evidence that within the next few years we’ll be dealing with screens with larger hi-def displays. It’s heavily rumored that the next iPad revision will come with a 2048×1536 “Retina” display. Similarly, Microsoft has hinted that Windows 8 will support devices with hi-def screens. Rumors are rumors, but it seems clear that the emergence of these devices is not a matter of if, but when.

Because site redesigns can be time consuming, and a given design may stay in place for years at at time, it’s important to begin laying the groundwork for support now.

Design (and Think) Bigger

Here are my recommendations for potential changes to your design workflow:

• Obviously, the main thing is to ensure that you can easily create hi-resolution versions of any graphics you have on your site. If your process starts with a Photoshop comp, double the width and height of your standard template. Viewing at a zoom of 50% will give you a rough idea of what your design would look like in the browser.
• While simply increasing the size of your images will get the job done, the higher-definition size opens up the opportunity to improve the level of detail in your graphics. This is especially important for icons and illustrations.
• Use vector images wherever possible. This can mean doing more of your working more in programs like Illustrator, or simply taking advantage of the vector tools Photoshop has to offer. It’s also possible to output images to a direct vector format like SVG, though it remains to be seen if doing so will become a popular option.
• Use CSS3 effects wherever possible. Commonly used effects like gradients and rounded corners are generally easier to create with CSS, and because they’re programmatically generated, free us from having to produce extra images, or worry about the extra bandwidth cost they incur.

While it’s certainly unclear what will constitute best practices for dealing with these high-definition displays, I’m confident that making these workflow adjustments now will ease the transition down the road.

When developing a dropdown menu for your site, it’s important not to assume that all your visitors will be navigating with a mouse. Some might be using the keyboard exclusively to navigate your website.

Fortunately, enabling keyboard access is a relatively simple task.

Here’s a typical dropdown menu example, one that follows the popular Suckerfish model:

View Dropdown Menu Example

It uses an unordered list, with second level lists for the dropdowns. These dropdowns are absolutely positioned off-screen until the user mouses over one of the top level menu items. The relevant CSS looks something like this:

.nav ul ul
{
    position: absolute;
    left: -9999em; /* push it off-screen */
}

.nav ul li:hover ul,
.nav ul li.hover ul
{
    left: 0; /* bring it back */
}

Note that the additional ul li.hover ul rule is specifically for Internet Explorer 6, which unfortunately doesn’t support the :hover pseudo class on anything besides the <a> tag. The hover class is applied with Javascript.

So take a second look at the demo again, and instead of using a mouse, try using the tab key to go through the links.

View Dropdown Menu Example

At most you’ll get an outline around any top level links that are selected, and no visual indication at all if one of the second level links are selected. So what do we do about this?

Javascript to the Rescue

First, we’re going to make the dropdown show up when a top level link or any of its children receive keyboard focus. We’re going to use jQuery, a popular Javascript framework, for this task:

$(document).ready(function()
{
    $(".nav").accessibleDropDown();
});

$.fn.accessibleDropDown = function ()
{
    var el = $(this);

    /* Setup dropdown menus for IE 6 */

    $("li", el).mouseover(function() {
        $(this).addClass("hover");
    }).mouseout(function() {
        $(this).removeClass("hover");
    });

    /* Make dropdown menus keyboard accessible */

    $("a", el).focus(function() {
        $(this).parents("li").addClass("hover");
    }).blur(function() {
        $(this).parents("li").removeClass("hover");
    });
}

Simply put, this script does two things: First, it adds the class hover to any <li> tags found within our menu (a <div> with a class of nav) on mouseover, removing it on mouseout. It does this primarily for the benefit of Internet Explorer 6, but this will be applied in all browsers with Javascript enabled.

Second, if any links within .nav receive keyboard focus, the class hover will be added to any <li> tags that are parents of the focused <a> tag. This allows the dropdown to be visible while the user is tabbing through the menu items.

Compliment :hover with :focus and :active

Now, making the dropdown visible on keyboard focus clears the primary accessibility hurdle, but it’s also good to have keyboard focus trigger the same visual effects you get when using the mouse.

To that end, almost anytime you’re using the :hover pseudo-class on an element that can takes keyboard focus (links, especially), you should have equivalent rules for the :focus and :active pseudo-classes.

Our CSS has two rules, one for top level links and one for second level links, that would benefit from this:

ul a:hover
{
    /* On hover, make top level links brown with white text */
}

and

ul li:hover ul a:hover,
ul li.hover ul a:hover
{
    /* On hover, give second level links a tan background */
}

To add the same effects for keyboard focus, these rules should look like this:

ul a:hover,
ul a:focus,
ul a:active
{
    /* On hover and focus, make top level links brown with white text */
}

and

.nav ul li:hover ul a:hover,
.nav ul li.hover ul a:hover,
.nav ul li.hover ul a:focus,
.nav ul li.hover ul a:active
{
    /* On hover and focus, give second level links a tan background */
}

Finally, it’s also a good idea to make one more change to the rule for top level links:

ul a:hover,
ul a:focus,
ul a:active,
.nav ul li.hover a
{
    ...
}

This allows the top level link to stay “selected” as you hover or tab across links in the dropdown menu.

So, let’s take a look at our revised demo:

View Fixed Dropdown Menu Example

You should be able to easily browse the menu simply using the tab key. Our menu is now beautiful and usable for all visitors.

Illumination Magazine won a gold medal in the Web Magazine category at the national CASE Circle of Excellence awards competition. Illumination received the only gold medal awarded in the category.

Congratulations to the MU Office of Research for a job well done.

Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?

The problem is with color profiles and here’s how to manage them.

Color profiles

Most Web browsers do not use color profiles (the exception is Webkit and Firefox), so you have to tone without them or you’ll get a color shift when you go from Photoshop to a Web browser making all your hard work toning moot.

1.) In Photoshop CS5+ with no documents open, go to Edit/Color Settings.

2.) Then, under Working Spaces, change the RGB dropdown to Monitor RGB - Display. This will Turn off color management for RGB images.

Proof setup

1.) In Photoshop, with your image open, make sure View/Proof Setup/Monitor RGB is checked.

2.) Look to see if the proofing environment is active by making sure that View/Proof Colors is checked.

Now you are working with an image as it will look in a browser.

Save for Web

1.) To save the images for Web, go to File/Save for Web & Devices and a new window will pop up.

2.) Click the 2-up tab to see the original and the Web version side-by-side.

3.) Under Preset, select your file format and quality settings.

4.) Uncheck Embed Color Profile and Convert to sRGB. For the Preview option select Monitor Color.

5.) When done, click Save.

The resulting image will look the same in a Web browser as it did in Photoshop.

More technical info

If you still want to figure out how to use color profiles in your photos on the Web, check out the article Save For Web, Simply. It does a good job in explaining what Photoshop is doing and how it applies to Web images.

If you’re as weird as me and find this stuff fascinating, you can learn even more with these articles:

• Web browser color management tutorial
• Web browser color management guide

In this presentation, we take a look at some of the new things CSS3 can do and what parts you can begin using in your designs now.

View presentation

View in the latest versions of browsers like Chrome, Firefox, Opera or Safari to see all CSS3 examples. View in other browsers to see how they render when there isn’t CSS3 support.

Examples include:

Color vision deficiency, or color blindness, is a very common disease that affects about 8% of the population. For the MU home page that equals about 2,000 visitors a day. That’s a significant number of users, so it’s important that we add a color blind test to our regular set of accessibility checks.

Why would you want to do this? Here’s a conversation I had with my color blind co-worker:

Me: “Hey, Paul, did you see the new Star Trek movie? What did you think about the green girl?”

Paul: “She was green? I thought she just had a bad spray-on tan!”

Not being able to tell that the Orion girl was green doesn’t really detract from the movie experience, but if 8% of your users can’t see something important, like blue text links next to black text, you are in trouble.

Since Cynthia Says doesn’t check for color deficiency, this test is often overlooked. There’s no reason not to test since there are a few handy, free tools that make checking your site easy.

Check your site design

Color Oracle
An application that will simulate the different types of color blindness on your computer. I like this option because you can test your design at the Photoshop mock-up stage before you begin to code.

Photoshop CS5
Under the View/Proof Setup menu, you can now simulate a few different types of color blindness on your document.

Colorblind Web Page Filter
A Web-based service where you submit your site URL and it will return a version as it appears to a color blind person. It’s a bit slow, but easy.

More color blind resources

Are Your Web Pages Color Sensitive?
This site has a few good tips on designing your site. One tip I’d add is making sure your embedded links are distinguishable from the rest of the text by using something other than a different color, like underlines.

As Seen By The Color Blind
A good article that explains color blindness and gives plenty of examples.

The 2010 Higher-ed Web Awards, put on by EduStyle, have announced this year’s winners and Illumination Magazine won Best Magazine Site!

Congratulations to Josh Hughes and the MU Office of Research for a job well done.

In this presentation we will learn what cross-site scripting is, how an actual attack takes place and how to test if our Web sites are vulnerable to a cross-site scripting attach. Then we will discuss how to mitigate the risks of being vulnerable to a cross-site scripting attack.

View Presentation