Archive for the ‘Design’ Category

Does Design Matter in Web Development

Last week, I was asked to make a change to the sign up form on the “Spend Smart. Eat Smart.” web site. After making this change, I was asked why I took the red bar out of the footer. My response, the change I made  should not have effected the footer.

After digging into the problem, we discovered that the change that had cause the red bar to go away had actually happened 6 days prior. This means that the design was broken for almost a week before anyone noticed. If someone had noticed, it wasn’t important enough for them to contact us. And this is a site that gets fairly regular updates, at least a couple each week.

When people come to us to develop a new web site, the conversation is usually focused on how the home page will look. It seems to me like we should spend a lot more time on content, and less on design. I’d love to work on sites where we talked about the content pages first, and then how that content flows up to the home page, rather than the other way around.

Most of the articles I’ve found (search for web design vs content) say that design is important in that a site should look professional, and should not distract from the content. They also say that content is what usually drives people to your site, and the content on your site is what people want to see.

To be clear, I am not picking on the Spend Smart. Eat Smart. web site. I think they do a better job with content than do many of the sites we work with. I especially like their related blog, and that they are using blogs posts as content on their main site. We are trying to duplicate these concepts on a Managing Tough Times web site, which is in the middle of a soft launch, with the hard launch coming in a couple of weeks.

Do your web sites incorporate the right balance between design and content?

Advertisements

FireFox Add-on – Web Developer Toolbar

The Web Developer Toolbar is the reason I started using FireFox. A couple years ago, I was just getting started with cascading stylesheets (CSS) and web standards, then Matt Heerema showed me this tool. I was hooked.

Web Developer Toolbar inserts an additional toolbar in Firefox. One of the cool things it lets you do is change the CSS your browser uses to display a page. To do this, select the CSS menu in the toolbar, and select edit. You can then change any of the styles on the page. This is much easier than changing the stylesheet on your web server and reloading the page.

I use this feature almost daily when working on web pages. Once I get something working in my browser, I’m able to copy the CSS, and paste it into the real stylesheet on the server. Not until this step will other people see the changes you’re making.

It allows you to do other things as well, such as disable javascript, disable images, and disable stylesheets. By taking these three steps, you are able to get an idea of what GoogleBot will see when it accesses your page.

Another thing it will do is outline certain elements on the page. For example, you can have it outline tables, or depreciated html tags, or a host of other elements. This can be invaluable when helping others troubleshoot issues on their web pages.

The last feature I’ll mention is the tools menu, where you can do things like verify that your CSS is valid, that the HTML is valid, and that your page passes Section 508 validation. You can also get a speed report for your web page.

I’ve just scratched the surface of what the toolbar can do for you. If you work on web pages, either as a developer or designer, I think you’ll find the Web Developer Toolbar has many useful options for you.

Resizing Images

On Monday, I received a call from an author of one of our county CMS pages. He was trying to upload a PowerPoint file, and the CMS was not accepting it. He was trying to upload a file that exceeded the 5MB per file limit. The primary reason for this limit is that most of the users of our web pages probably don’t want to wait for that big of file to download.

I suggested a few options that would allow this PowerPoint file to be uploaded. These included:

  1. Save it as a PDF file.
  2. Resize the photos used in the PowerPoint file
  3. Do a Save As…
  4. Split the file into part A and part B

About an hour later, I receive an email saying that he had resized the photos, then did a Save As to create a new PowerPoint file. The new file was 856KB, down from 6.5MB. This new file was easily uploaded into the CMS.

By doing a pretty simple process, he drastically reduced the file size, therefore making the file download a lot faster for the people that want to use this file. And the best part is, he did not have to compromise the quality of the presentation. Instead, he used photos that were appropriately sized for the way he was using them.

We typically tell people to do the resizing using Picture Manager. This is a utility that comes bundled with Office 2007. Here is a document that talks about how to use Picture Manager.

Although he was using a the photos in a PowerPoint file, the same principle also applies to web pages. Resize your photos before including them putting them on your web pages. The alternative is to set the display size in your HTML code, however, the browser still needs to download the whole image.

As a side note, we have been looking for a good solution to be able to dynamically resize images at runtime. We’d like to be able to upload the full image into the CMS, and have the CMS resize it when serving up the page. If you are doing this, I’d like to hear about it.

Master Pages in .NET 2.0

One of the big improvements with .NET 2.0 is master pages. A master page is a template that you use to build the structure of your web pages. You use it to do things like branding, top navigation, side navigation, footer, etc. Anything that you want repeated on every page can be placed in a master page.

Before .NET 2.0, we would build things in user controls, and add the user controls to our pages. This worked reasonably well, until you wanted to add a new feature, such as a search box to all your pages. If you didn’t have a suitable user control on your pages, you’d create a new user control, then add that to every page in your web application.

With .NET 2.0 or later, you can add the search box to the master page, and every page using that master page will automagically get the search box. This can save a huge amount of time. I learned this a few weeks ago, when I had to modify project that was created in .NET 1.1.

On master pages, in addition to the branding and navigation elements, you provide one or more content ares. These content areas are where the individual pages are responsible for populating the content. However, the content page does not have to populate every content area, you can pick and choose which content areas to use. For example, if your master page has an area for a sidebar, but your page doesn’t have content for the sidebar, you simply leave that area off your content page. It is an error, however, when your pages implement a content area that is not on the master page.

SharePoint makes extensive use of master pages, so this is a concept I will continue working with and expanding my knowledge.

QOTD: Jeff Atwood on Usability

Usability is something everybody on your team– not just the designers– should be thinking about throughout the lifecyle of your project.
Jeff Atwood (Coding Horror)
The Peanut Butter Theory of User Interface Design

Well said Jeff.

Book Review – CSS Mastery

CSS Mastery (Advanced Web Standards Solutions)” by Andy Budd, Cameron Moll, and Simon Collison, is a good resource for how to use web standards and CSS in designing and laying out web sites. Although it’s by different authors, it is a good followup to the book “Web Standards Solutions“.

This book takes a task, and explains in detail how you might handle it. For example, chapter 5 is on creating navigation bars and chapter 7 is about site layout using CSS. We use many of these techniques in most of the web sites we develop.

Other useful chapters are on troubleshooting problems with your CSS, and hacks to deal with browser incompatibilities. We have Microsoft to thank for many of these hacks. IE 7 is much improved over previous versions. It is still good to be aware of these techniques.

Here is a link to the publisher’s web page for the book.
Advanced Web Standards Solutions Cover Image

The two Web Standards Solutions books give a good starting point for people that want to learn more about CSS. In addition, there are thousands of web sites that offer help with CSS. I also recommend having an expert you can ask questions, thanks again Matt.

Recently, I was asked if I know of any training on using CSS, so I’m looking for recommendations. If you know of any professional development opportunities on learning CSS, either online or traditional, please post a comment.

Using DIV Elements for Formatting a Page

Floyd asked me to post an example showing some formatting on a <div> element. I built a test web page using the code from “Which to Use – div or span?” and some text borrowed from a recent ISU Extension News Release. Without any formatting, the page looked like this.

Unformatted DIV Example

By adding a couple of styles, it was easily changed this to look like this.

Formatted DIV Example

Remember that the <div> element had an id=”message” and the <span> tag had class=”date”. These hooks are used by the styles.

#message {
width:185px;
float:right;
border:solid black 2px;
margin-left:10px;
padding: 0px 10px;
background:red;
}

#message .date {
font-weight:bold;
color:blue;
}

This is just a very simple example that touches on what can be done by styling <div> and <span> elements. I recently worked on a web site using this technique, but can’t show it here because the site is password protected.

Using styles with <div> tags is one of the major factors that allow us to layout pages without the use of <table> tags. It takes a more <div> tags and styles than I wanted to show in this post, but can be fairly easy to accomplish. Let me know if you want to see more about how we do tableless layouts.

BTW – I’m a firm believer that <table> tags should only be used for tabular data, not for laying out web pages.

Action Buttons on Web Forms

Today I read an article titled “Primary & Secondary Actions in Web Forms“. They tested 6 forms where they changed the location and/or appearance of the primary and secondary action buttons, ie “submit” and “cancel”.

It surprised me that the users finished the form quickest when the two buttons had the same appearance. I would have thought that by having the submit button stand out more, it would have been faster because it would pull the user to the correct button. However, when tracking the eye movement, users had more fixations when the buttons had different appearances.

Although it was slightly slower, users said they appreciated the visual effect of having the submit button stand out more than the cancel button. It made them more confident that they were clicking on the right button.

The article also made the point that many forms do not need secondary actions. Don’t include them unless they serve a real purpose.

This article is an interesting read, and will be a part of a book by Luke Wroblewski titled “Web Form Design Best Practices“. After reading this article, I am looking forward to reading the book once it come out in early 2008.

Which to Use – div or span?

When I’m writing code for web pages, I normally have to stop to think when to use a <div> tag, and when to use a <span> tag. The big difference is that <div> is a block-level element while <span> is an inline element.

Block-level elements usually contain other elements, including text, inline elements, and other block-level elements. You can think of them as boxes. They are normally displayed with space before and after this box, unless you modify this behavior with CSS.

Inline elements usually contain text or other inline elements, and are displayed where they occur. They are usually used to give your document more semantic meaning.

Here is a simple example:

<div id="message">
  <p>The current date is <span class="date">August 28, 2007</span>.
  Labor Day is just around the corner.</p>
</div>

Notice how the <div> tag surrounds a chunk of content that contains a <p> tag, which is another block-level element. The <span> tag simply surrounds text within the content.

With these tags in place, we have plenty of hooks for CSS to use to format this content. By having the date in the <span> tag, we can do special formatting on the date if we choose.

Firefox Add-on – IE View Lite

Last week, I was talking with Lynette about a problem she was having with a web page. During the conversation, she said she usually uses Firefox, however there are a few pages in which she needs to use IE. I told her about a Firefox Add-on I use called “IE View Lite“.

When you have IE View Lite installed, it adds an option in the right-click menu for “View This Page in IE”. This makes it very easy to switch to IE when you run across a page that doesn’t work in Firefox. Simply right click on the page, and select this new option in the dropdown menu. If this is a page you need to use a lot, you can configure IE View Lite to always use IE  for that page.

While useful for normal users of the web, I consider this tool a must have for web developers/designers. It allows you to use Firefox for your development, then easily switch to IE to find out what IE breaks.