Basic Design Heuristics for Today’s Web Developer

A few basic design principles that every developer should have a fairly good understanding of can be picked up or gleaned from a quick run through of any print or Web design text.

Choice heuristics that are found in today’s best on-screen presentations, whether in Web, television or cinematic media, are the rule of thirds and the divine proportion.

The rule of thirds is widely known to be used in photography, and it more or less states that dividing an image into nine equal part can help one aesthetically lead the viewers eye to most important sections of the piece. Imagine overlaying a three by three grid on a photograph. The intersections of these gridlines can help you align the main features of your image.

The divine proportion is a similar guideline that comes in extremely handy for Web media. Also known as the golden ratio, the divine proportion is in effect if the ratio between the sum of two line segments and the larger segment is equivalent to the ratio between the smaller segment and the larger segment. When expressed algebraically, the divine proportion is equivalent to 1:1.61803… or 1:phi.

Shapes that are constructed with the divine proportion can be used to frame your Web site so that the smaller segment in the ratio makes up your sidebar or header, while the larger segment forms your content division or main section division.

Next, we’ll be covering some basic typography as applied to design, as developers will always be handling some type of … type.

Overview of Design Principles for the Web Developer

In today’s industry, you either see technological professionals occupying very specific niches within a company or ones that are forced to wear many different hats.

In the next couple of entries here at Taming the Wild Wild Web, we’ll be focusing on design inspiration for developers who typically only concern themselves with back-end production.

While it may be the case that you might not ever have to fill the role as the principle designer on a project, there are times when knowing about design rules and heuristics can help make your job of constructing and displaying data for page views and CMS modules a little bit easier and lot more worthwhile.

Skip ahead to basic design principles that developers should know, inspirational typography, behavior-level resources.

Routing the Request: A No-Javascript CSS Style Switcher

View the last three entries in Taming the Wild Wild Web for the necessary markup and code that is required to get our no-Javascript CSS style switcher up and running.

After you have that information down, we still need to construct the request router which will swap the alternate stylesheet for the current style sheet via our on-page trigger. In our example, this trigger is the link located in the page’s footer. Notice that it points to a PHP file.

Inside of this file is our request router and it contains the following:

<?php
session_start();

switch ($_SESSION[’style’]) {
case ‘default’:
$_SESSION[’style’]=’alt’;
break;
case ‘alt’:
$_SESSION[’style’]=’default’;
break;
}

session_write_close();
header(’location: http://www.flexiblephilosophy.com’.$_SESSION[’page’]);

?>

By reading the session variables set via the Web page itself, we can determine which page makes the request for the new stylesheet and which version of the page style is to be served.

Once our output is determined, we simple close out our PHP session for writing (we don’t want any data getting lost), and redirect our user back to the page which made the request.

That concludes our tutorial on a no-Javascript CSS style switcher.

You can view the live example at flexiblephilosophy.com.

The complete code can be viewed from the following links:

• The markup
• The default stylesheet
• The alternative stylesheet
• The PHP include
• The PHP router

Server Side Switch: A No-Javascript CSS Style Switcher

Navigate through our previous posts in Taming the Wild Wild Web to view both the overview of this project and the HTML/CSS of our dynamic server side CSS style switcher.

Now that we have the markup and declaratives written, we want our page to be able to switch its stylesheet when the “View alternative page style” link is clicked.

In our example, we’ll achieve such an effect by employing the use of some PHP. Our script will let us know a few things about the page itself; namely, where the request is coming from, what style the page currently has, and what page style the user desires.

We’ll save this information in PHP Sessions rather than cookies; so let’s add the session initialization to the very top of our page.

<?php session_start();  ?>

Next, let’s add some session variables to determine what page our request is coming from and the style currently set by the browser.

$_SESSION[’page’] = $_SERVER[’REQUEST_URI’];
if (!isset($_SESSION[’style’])) {
$_SESSION[’style’]=’default’;
}

switch ($_SESSION[’style’]) {
case ‘default’:
$href = ‘css/default.css’;
$title = ‘Default’;
$altHref = ‘css/alt.css’;
$altTitle = ‘Alternate’;
break;
case ‘alt’:
$href = ‘css/alt.css’;
$title = ‘Alternate’;
$altHref = ‘css/default.css’;
$altTitle = ‘Default’;
break;
}

Because this is an awful lot of code to add to the beginning of each of your pages, we’ll throw it into a simple PHP file (style-swap.include.php) and call for it at the top of each page, after our session initialization.

<?php
session_start();
include ’style-swap.include.php’;
?>

The variables that we are setting in our switch will be inserted into our link elements that set the current and alternate style sheets for the Web document.

Therefore, let’s modify our markup to receive these dynamic variables:

<link rel=”stylesheet” type=”text/css” href=”<?=$href;?>” title=”<?=$title;?>” />
<link rel=”alternate stylesheet” type=”text/css” href=”<?=$altHref;?>”  title=”<?=$altTitle;?>” />
Now, we’re almost ready to test our page. We still need to construct our trigger when the link to view the new page style is clicked.

We’ll cover that in the next entry at Taming the Wild Wild Web.

The Markup and Declaratives: A No-Javascript CSS Style Switcher

In the previous installment of Taming the Wild Wild Web, we discussed a new method for switching the CSS of a page without using Javascript.

Now is the time when we’ll begin constructing an example to showcase such server side functionality.

To begin, we’ll build a simple HTML page that has both a default and an alternate stylesheet.

First, let’s get to the markup:
You can view the entire HTML markup here.

The most important part of our document is the declaration for the two style sheets.

<link rel=“stylesheet” type=“text/css” href=“default.css” title=“Default” />

<link rel=“alternate stylesheet” type=“text/css” href=“alt.css” title=“Alternate” />

The corresponding styles for our document can be found here and here, respectively.

It is worth noting that in this example we redeclare our properties and values for every selector, but in a production level implementation you may want to only use a core style sheet and have the selectors’ properties and values that change only be present on your CSS files that will get the swap.

Notice that we have a link in our footer that references our PHP file which will route our style change request.

In the next installment of Taming the Wild Wild Web, we’ll go over the procedural aspects of this PHP router and the server side includes necessary to give our page its dynamic style switching capability.

A CSS Style Switcher Without Javascript

There has been a recent trend as of late for Web sites to provide visitors with alternate page view styles to enliven the browsing experience.

While this is a positive for Web standards and accessibility (as it gives those users with vision impairments an option to view high contrast page styles), it also makes for a pretty cool way to spice up a page with a previous-had or down-right different user interface.

Most solutions to this CSS Style Switcher require that users click a link which triggers a Javascript behavior-level function to switch the current stylesheet and set a cookie to the user’s computer to save their page-style preference for the remainder of the browsing session.

While I don’t feel that this is a bad solution - I actually have employed this in the past - I do feel that there are quite a few different ways one can achieve this same effect.

In the following entries on Taming the Wild Wild Web, we’ll be constructing a Server Side CSS Style Switcher using a small amount of PHP, HTML and CSS only.

Our Style Switcher will be a cursory introduction to a simple method that gives users the ability to switch page view styles via an on-screen link while keeping the toolbar functionality of choosing the Web page’s stylesheet. The style switcher will also save their preference in a PHP Session, thereby requiring no cookies being set on the user’s machine.

What is required for this project:

• One HTML file
• One PHP include (to keep our markup a little cleaner)
• One PHP file to route our page style request
• Two CSS files (to provide our choice of page views)

In the next installation of Taming the Wild Wild Web, we’ll construct our two different page styles so that we can get ready for some dynamic server side switching.

CSS Hacks for Google Chrome

Since Google Chrome is a Webkit based browser, we can target it’s screen rendering the same way we handle Safari.

While 90% of the time you will not need to hack around to fix a site for Chrome/Safari (if you are indeed developing with standards in mind) there are always exceptions.

The one problem I seem to have is when floating multiple elements in a singe div. There seems to be a 1px margin jog between Firefox and Opera/Safari/Chrome.

In order to target Webkit based browsers, we can use the CSS3 selector for the pseudo-class first-of-type.

Since we will only be employing one body element, we set first-of-type onto the document’s body and then combine it with whichever element we wish to target.

For example:

body:first-of-type #navigation { margin-top:-1px; }

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

Optimizing Your Web Site for Google Chrome

Google’s brand new open source browser debuted the other day, achieving 1% of the Internet perusing market share in no time at all.

This 1% seemed to detract from Firefox’s user base, and it is yet to be determined if more and more people will make the switch from the Internet dominating IE.

In such cases of platform switching, developers need to be aware if their sites are ready for these new up-and-comers.

As far as Google Chrome is concerned, it seems as though it bases its screen rendering on pages that adhere to Web standards (the basis for Google’s own Webmaster Guidelines), so those sites that are intrinsically constructed with standards compliance in mind will fare much better than those sites which trigger less forgiving browsers’ quirks modes.

If people make the jump to Google Chrome, be ready to see many a people not bothering with sites that no longer are maintained and constructed with proprietary syntax and markup. Consider Google Chrome as a marker for a future Internet-wide sweep of garbage collection.

The other notable feature of Chrome that seems ast0unding is its ability to recall pages for keywords that appear within their Web content.

The better your site is optimized for a given keyword, the better the chance that Chrome’s omnibar will recall its URL for a past visitor when the said keyword is used as a search term.

In the next installation of Taming the Wild Wild Web, we’ll discuss tweaking your CSS to deal with a few layout/design inconsistencies you may experience when constructing your pages.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

Working with a Variety of Image Types

All too often I see designers and developers fall into the habit of sticking with just one file type for their site-wide images. To me, this is terrible practice as doing so will generally lead to slow page load times and high bandwidth consumption. You see, not all images are created equal. Different image compressions have various attributes that make them more appealing for certain Web graphics.

A good heuristic is to use JPEGs for photographic quality images, GIFs for icons and line-art style graphics, and PNGs for when you require alpha transparency.

However, the above is not written in stone, nor will it typically result in the best file type choice every time.

I personally employ the use of Adobe Photoshop’s image optimizer (find it under Save for Web and Graphics from the File menu); and spend a considerable amount of time playing with the various options for each image that my layout requires. The few extra minutes spent here is a trade off well worth your time. It will save your visitors frustration and patience when waiting for your page to load before it hits their cache.

And before I go, here’s some food for thought: It is worth noting that not all JPEGs need to be saved at their maximum quality in order for the graphic to achieve its desired onscreen clarity and aesthetic effect. Check the file size difference between a 300 x 300 px image at 100% quality versus the same image at 75%.

jQuery PNG Fix for IE6 - Single Instance Images

For quite some time there have been a few Javascript fixes freely available for download which can correct the lack of alpha transparency handling for png images in archaic versions of Internet Explorer (archaic, in my opinion being anything less than IE 7) - but even to this day, not one of these scripts completely solves this issue with seamless integration and out-of-the-box working functionality.

The best installations require the external linkage and path updating of lengthy Javascript file(s) and 1×1 pixel transparency blocks. While not entirely inconvenient, at times all this seems like overkill just to correct one or two images that require the correct use of alpha transparency on your Web site.

With this being so, I found it generally more convenient to just make the required fix myself for these simple images using a little jQuery and some guidance from Microsoft’s Internet Explorer knowledge base.

Since I usually only need, say, a container div with a drop shadow or a small graphic with known dimensions to require such alpha transparency (both being CSS background images), I constructed this little personal fix that will correctly handle full png functionality for one CSS background image in IE 6.

The (X)HTML:

<!–[if lt IE 7]>
<script src=”path/to/javascript/pngfix.js” type=”text/javascript”></script>
<![endif]–>

The Javascript (pngfix.js):

$(document).ready(function(){

$(’.pngfix’).each( function() {
$(this).attr(’writing-mode’, ‘tb-rl’);
$(this).css(’background-image’, ‘none’);
$(this).css( ‘filter’, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”path/to/image.png”,sizingMethod=”scale”)’ );
});

});

Just add the class pngfix to the image that requires alpha transparency and update the path in the Javascript file. When you add the class png fix, our jQuery selector applies a ‘top-bottom-right-left’ attribute to it in order to be sure it has layout, removes its already defined background image, and applies the new fully functional PNG image to its filter property using Microsoft’s proprietary Alpha Image Loader.

I have thus far used this with little to no problems - but like I said this was simple personal fix that best works for background images that are attached to selectors that have layout or have known dimensions.

Customize it to meets your needs or use it as a base for a new out-of-the-box jQuery fix for the comprehensive use of alpha transparency in IE 6.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.