Archive for the ‘Design’ Category

Slow Connections

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?

Advertisements

Forms with CSS (3 of 3) – Checkboxes

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:

Form with Checkbox Included
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

Forms with CSS (2 of 3) – Styles

After doing the semantic HTML code for a form, as shown in “Forms with CSS (1 of 3) – HTML Markup“, your form will look like something like:

Form without Styles Applied

While this is usable, we can improve it by adding some styles. Here are the styles I added:

fieldset
{
display: block;
margin: 0 0 1em 0;
border: 0 solid #FFFFFF;
border-top: 1px solid #000000;
padding: 0 1em 1em 1em;
width:275px;
}

fieldset legend {
font-weight:bold;
}

fieldset label, fieldset input, fieldset select {
display: block;
width: 150px;
float: left;
margin-top: 8px;
}

fieldset label {
width: 6em;
padding-right: 20px;
}

fieldset br {
clear: left;
}

The resulting page looks like:

Form with Styles Applied

As you can see, you can drastically change the look of the form with just a few styles. If you wanted, you could add still more styles for additional formatting.

The styles for this example were adapted from the web pages “CSS2 – Tableless Forms” and “The Man in Blue > Experiments > Form Layout“. I only made a few modifications from these examples.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (3 of 3) – Checkboxes

Forms with CSS (1 of 3) – HTML Markup

When I develop web pages, I try to use web standards complaint HTML code and CSS for layout and design. This gives a lot of flexibility in the design while being usable for people using screen readers and other browsers that don’t use CSS.

This has worked fine with regular web pages, however I’ve always struggled with how to mark up forms to be semantically correct. After doing a little research on the subject, I’ve switched the way I typically write forms. I’m still learning so am open to suggestions to improve my skills.

Some of the forms I used to write would have elements that looked like:

<p>
  First Name:
  <input id="txtFirstName" name="txtFirstName" />
</p>
<p>
  Last Name:
  <input id="txtLastName" name="txtLastName" />
</p>

When I wanted the input boxes to line up vertically with each other, I’d either add the necessary spacing using “ “or build a table with labels in the first column and input fields in the second.

I’ve come to realize that there are better ways to do this markup. The way I typically do this now is:

<fieldset>
  <legend>Name</legend>
  <label for="txtFirstName">First Name:</Label>
  <input id="txtFirstName" name="txtFirstName" />

  <label for="txtLastName">Last Name:</Label>
  <input id="txtLastName" name="txtLastName" />
</fieldset>

This adds a little more HTML code, however provides more semantic information. Once you get used to coding the form like this, it’s pretty easy. A huge advantage of using the <fieldset> and <label> tags, you have a lot of hooks to use with your CSS. This makes it easy to format the form. More information in “Forms with CSS (2 of 3) – Styles

Note for ASP.NET programmers: The third tip in this article from Standards Schmandards shows how to tie your <label> tags to the tags that is generated from <asp:TextBox>.

Related Articles:
Forms with CSS (2 of 3) – Styles
Forms with CSS (3 of 3) – Checkboxes

Book Review – Web Standards Solutions

About two years ago, we were just getting going with web standards and cascading style sheet (CSS) based layout. We were struggling to make some of our pages look and feel the way we wanted them to, and with inconsistencies between different client machines and browsers. It seemed like we were spending a lot of time with the CSS, and I was questioning to myself whether it was worth the trouble. I just didn’t “get it”.

Matt Heerema, our web designer at the time, sensed that I was struggling, so he loaned me his copy of “Web Standards Solutions” by Dan Cederholm. He told me it was an easy read, and that it would help me in understanding why complying with web standards was something we should strive to accomplish. He was right.

Sometimes technical books are somewhat dry, with a lot of theory, and you need to force yourself to read though the tough parts. Not this book. After starting reading, it was hard to put down. The chapters are short, informative, and interesting. I read the book in about 3 sittings.

Each chapter in the book takes a topic, and shows 3 or 4 methods of implementing that functionality in your web page. For example, the chapter on headings shows how you can make text stand out as headings on your page using a span tag with embedded styles, paragraph tags with bold text, or heading (<h1>, <h2>, etc.) tags. It explains the advantages of using the the heading tags, which is the web standards compliant method. It then goes on with some “Extra Credit” of how to apply some styles to your heading tags to make them really stand out.

This book will give you an appreciation for why web standards are important, and will give you an introduction to CSS. It will not give you a complete understanding of CSS, but will hopefully leave you hungry for more. You can then pick up another book that does more advanced CSS techniques, such as the followup book “CSS Mastery, Advanced Web Standards Solutions”.

I liked this book so much, I purchased a copy to have on my book shelf. Whenever someone says they are interested in learning more about web standards or CSS, it’s the first book I recommend. It is a must read for anyone doing web development. More information can be found from the publisher’s web page.

The Markup and Style Handbook Cover Image