EvoBloggito

Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section

Author: Ray Gulick; Published: Jul 12, 2009; Category: CSS, Design/Development, Information Architecture, PHP for Designers; Tags: Design/Development, Information Architecture; 10 Comments

Good website navigation not only helps visitors find the information they are looking for, it also tells them where they are on a website. This is especially important in light of the fact that people may arrive anywhere on a website via search or a link from another website. They will appreciate some indication of what section of the website they are in; sort of a “you are here” marker.

Essentially, we want to tell the navigation list that, if the navigation section is ‘X’, then this particular navigation list item should have a "current" class applied to it, which would allow us to style that item to highlight the navigation section. But the last thing we need, if we’re busy and have better things to do, is to edit the navigation on each page individually: every time we add or remove a page or change a navigation item name, we would have to update the navigation on every page.

We can make our lives easier with PHP. Remember, PHP executes on the server: you must upload your files to a PHP-enabled server to see it work. It will not execute on your desktop unless you have a local server set up. But if so, you are way beyond this little tutorial…

Below is the HTML for a very simple list-based navigation, and below that, the accompanying CSS. See the demo here»

The demo navigation should look like this:

The HTML

<ul class="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="what.php">What We Do</a></li>
<li><a href="who.php">Who We Are</a></li>
<li><a href="why.php">Why We Do It</a></li>
<li><a href="need.php">Why You Need It</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>

The CSS

ul.navigation { margin:0px; padding:0px; list-style-type:none; }
ul.navigation li { display:inline; margin:0; padding:0; }
ul.navigation a { float:left; display:inline; font-size:14px;
     font-weight:bold; text-decoration:none; white-space:nowrap;
     padding:2px 10px 2px 10px; background:#fc0;
     border-left:1px solid #fff; }
ul.navigation a:link, ul.navigation a:visited { color:#000; }
ul.navigation li a:hover { color:#fff; }

Create a PHP include from the navigation list and place a call for it on each page.

This include is placed on each page in place of the navigation list with the following call for the include:

<?php include("includes/navigation.php"); ?>

This calls for the include, which was named “navigation.php”, and placed in a folder called “includes”.

Add PHP code to the list items in the include file to display the “current” class when called for:

<ul class="navigation">
<li<?php echo ($navsection == 'home') ? ' class="current"' : ''; ?>>
  <a href="index.php">Home</a></li>
<li<?php echo ($navsection == 'what') ? ' class="current"' : ''; ?>>
  <a href="what.php">What We Do</a></li>
<li<?php echo ($navsection == 'who') ? ' class="current"' : ''; ?>>
  <a href="who.php">Who We Are</a></li>
<li<?php echo ($navsection == 'why') ? ' class="current"' : ''; ?>>
  <a href="why.php">Why We Do It</a></li>
<li<?php echo ($navsection == 'need') ? ' class="current"' : ''; ?>>
  <a href="need.php">Why You Need It</a></li>
<li<?php echo ($navsection == 'contact') ? ' class="current"' : ''; ?>>
  <a href="contact.php">Contact Us</a></li>
</ul>

Add styles to highlight the navigation items when list item has "current" class applied.

ul.navigation li.current a:link, ul.navigation li.current a:visited
     { color:#fff; background:#000; }
ul.navigation li.current a:hover
     { color:#fff; background:#c00; }

One last thing: put the appropriate navigation section info on each page.

At the very top of the HTML page, prior to the doc statement, add the following 3 lines of code:

<?php
    $navsection = 'home';
?>

Note that this particular example would be found above the doc statement on the home page. Because it matches the navsection statement attached to the home page list item on the menu, that list item displays with the “current” class.

This technique works well on the top level of list-based drop-down menus as well, though I have found that it’s easier to attach the "current" class to the link rather than to the list item. CSS, of course, must be adjusted accordingly.

Web Designer, Web Developer: What’s the Difference?

Author: Ray Gulick; Published: Jun 18, 2009; Category: CSS, Design/Development, Usability; Tags: CSS, Design/Development; No Comments

The terms "web designer" and "web developer" can mean just about anything, depending on who’s using them and why. I’m going to make a case for definitions that indicate two different skill sets, with each offering different services (perhaps with some minor overlap on occasion). Hopefully, there will eventually be widespread agreement about the differences and areas of overlap in the designations. In the meantime, there’s a comment form at the end of this post that begs for your disagreement with (or support for) my opinions about these terms.

Web Designer

Web designers are first, and foremost, designers. They might be able to tinker with javascript to make an existing jQuery plugin look or behave the way they want, and they might be able to copy and paste and rework some minor php, but they’re unable to write their own functions. And databases? Fugeddaboudit!

However, web designers are experts at CSS, Photoshop, and XHTML. Given half a chance, they can bore you to death with discussions about how to clear floats or when (or if) it’s appropriate to use tables. They understand web typography, color, spacing of elements, navigation, directing eye-path, enhancing user experience and accessibility, and have at least a working knowledge of information architecture.

Assuming they’re good at what they do, when they complete a website, it looks good, it’s easy to navigate, the information is readable, and the site’s look and feel supports and enhances the content. Web designers are sometimes referred to as "front-end developers," but in my mind this term indicates some expertise in javascript.

Web Developer

Web developers offer significant programming services and database development in whichever flavors they have chosen to master. At a personal level, they may or may not also be web designers, but usually not. Few people are competent at both design and programming (I don’t know a single expert programmer I would hire as a designer).

I’ve also found that the term "programmer" means different things to different people ("designer" is subject to interpretation also: everyone who owns a copy of Dreamweaver or InDesign calls themselves a designer). Some people who press buttons in .NET call themselves programmers, even though they are unable to write even the simplest functions. As a result, when they’re part of a web team, the rest of the team adapts to the needs of the software, instead of having the programmer adapt to achieve the desired result.

At a company level, a web development company may be comprised of people who, individually, could not offer both design and programming at professional levels of competence. I consider myself a web designer. My company is a web development company because my business partner has very strong complementary skill sets in programming and database development. We’ve always joked that, while we can accomplish a lot together, individually we’re kind of pathetic. At least I think she was joking…

The Optimal Line Length Principle Applied to Web Design

Author: Ray Gulick; Published: Jun 16, 2009; Category: CSS, Design/Development; Tags: CSS, Design/Development; 6 Comments

The other day I pointed out some of the differences between web design and print design. It started me thinking about some of the things I learned as a print designer that are also applicable to web design. One of the most useful is the Principle of Optimal Line Length. It states that, for any given font-size of a multiple-line block of type (like a paragraph), there is a range of line lengths and line-heights that most people consider easily readable.

Those 3 attributes—font-size, line-height, line length—are inter-related.* Change one, and you may need to change at least one of the others for most people to consider the text readable. In simple terms it means that, the wider the line length, the greater the line-height must be. Or, the bigger the font, the wider the line length. Or, the greater the line-height, the bigger the font.

Below is an illustration meant to demonstrate the relationships between the 3 attributes. In the top section are 2 blocks of text, each with 13-pixel font-size and 16-pixel line-height. Too my eye (and this is why it’s called a principle, not a rule that has formulas and ratios), the wider lines look too tight and dense. However, with the same font-size and line-height in a much shorter line length, I think it looks very readable.

Below that is a section that includes the same font-sizes (13 pixels) with a line-height of 22 pixels. Further below that section are font samples that also have a line-height of 22 pixels, but a font-size of 18 pixels.

So how does this apply specifically to web design? Because of my awareness of the principle, I always consider the line length as well as the font-size when specifying line-height. Also, I never create "fluid" layouts that expand the width of an area that contains text, because sooner or later, the expanded or contracted line length will make the text unreadable (in my and many other people’s opinions). I love IE7′s (never thought I’d be say I love anything about IE) and Firefox’s "scale-up" feature, because when a viewer wants to make the font bigger, it makes everything bigger (line-height and line length), preserving the optimal line length relationships.

Because it’s a principle rather than a rule, designers have some latitude in which to exercise their judgment. As a web designer concerned with readability, I look for the "sweet spot," in which font-size, line-height, and line length allow people to read multiple-line text blocks comfortably and easily.

*Only 2 of the 3 are actually "attributes" in CSS, and I’ve used the CSS hyphenation for them, which may not be "correct" according to Webster’s Dictionary or your high school English teacher.

Free XHTML/CSS Template for Use with Photoshop 4-Column Grids

Author: Ray Gulick; Published: Jun 1, 2009; Category: CSS, Design/Development; Tags: CSS, Download, Template, XHTML; No Comments

A couple of days ago, we made some 4-column grid Photoshop templates available. By popular demand (OK, 2 people asked; but we’ve had hundreds of downloads) we’re furnishing a basic, barebones XHTML/CSS template to be used with the Photoshop grids. The template and style sheet match up with the Photoshop file "1024browserbase_960.psd." To use this XHTML/CSS for the other Photoshop grid templates available, adjust column widths and margins in the style sheet as appropriate, using the information on the Photoshop templates as a guide.

To point out the obvious (if you’ve looked at the template), the style sheet contains minimal styling, and cannot be considered a completed or comprehensive style sheet: it contains just enough styling to make the example elements behave, and it makes no attempt to be pretty. It supports the basic 4-column grid structure, but is only a starting point for your own website based on the Photoshop grid templates. It’s not meant to be a template per se, but a basic "framework" you can use as a starter. The major page areas that are defined are the header, navigation, content (with maincontent and sidebar) and footer. Depending on your design, the homepage XHTML/CSS may be significantly more complex than the "inside page" example provided.

Use and modification of these templates requires a basic understanding of XHTML/CSS and Photoshop. We would love to have you point us to websites you create using these templates, or hear your feedback here on our blog. This template has been tested in Mac and Windows Firefox 3.0, Safari 3.2.3, IE6, and IE7. As with the Photoshop grids, the template is available under a Creative Commons license, to be used and abused in anyway you see fit. The documents validate as XHTML 1.0 Strict and CSS level 2.1.

Download XHTML/CSS 4-Column Template»

Free 4-column Grid Photoshop Templates for Better Web Design

Author: Ray Gulick; Published: May 30, 2009; Category: CSS, Design/Development; Tags: Design/Development, Download, Grid, Templates; 15 Comments

UPDATE 9/29/09: If you’re looking for a 4-column grid-based WordPress theme, take a look at Evo4 CMS.

Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).

In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.

Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.

Zipped files are approximately 288k each.

Download: 4-column, 960 Template
Download: 4-column, 960 Uneven Columns Template
Download: 4-column, 996 Template

ALSO, download the Free XHTML/CSS template that goes with the first Photoshop template!