Brian Webster - Blog

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.

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.

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.

“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.

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.

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.

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

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.

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.

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.

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.

My parents live on a farm in Northeast Iowa. Because of where they live, their choices for Internet service providers is very limited. They use a dial up service provider.

I’ve been to their place the last three weekends. When accessing the Internet, I they connect at a whopping 26.4 kbs. Boy, was that slow.

This got me thinking of something I used to say a few years ago, and I think it’s as relevant today as it was then, although I’ve changed the wording a little.

“Web designers, developers, and content providers should always test their work using a dialup connection.”

It’s not possible to provide all content at a reasonable speed over dialup, and that’s OK. However, I’ve seen many cases where the download time could be approved simply by resizing a photo. Testing over a dialup connection would help solve this issue.

I’ve looked for, but haven’t yet found an Add-on that would cause Firefox (or IE) behave like they are on dialup connections. Any suggestions of how to do this?

The first two posts in this series showed a way to markup an HTML form, and apply styles to it. This works well for any field where the label comes before the field.

Typically for checkboxes, we put the checkbox field first, with the label after it. The HTML code is similar to the other form fields. The differences are that the <label> is now after the <input> tag, and we’ve wrapped this pair in a <div> section with a class attribute.

<div class="alignMe">
  <input id="employee" type="checkbox" name="employee" />
  <label for="employee">ISU Employee</label>
</div>

Now we add a couple styles that hook into this new class:

fieldset .alignMe {
display:block;
margin-left:6.9em;
}

fieldset .alignMe input {
width:20px;
}

With these added, we end up with a form that looks like:

The extra <div> tags and the corresponding styles allow you to shift the checkbox so it’s in line with the other form fields. You can use this technique on other form elements such as radio buttons as well.

Related Articles:
Forms with CSS (1 of 3) - HTML Markup
Forms with CSS (2 of 3) - Styles