In this CSS tutorial we will look deeper inside the building of a form. You see forms everywhere on the web and they are most often used to gather information about the visitors. The examples are everywhere: contact forms, polls, surveys, search forms.

There are a couple ways to produce a proper formatted form. A couple years back, I did the formatting with tables, because I simply didn’t hear from CSS (it was there, but not as popular as it is now!). It worked alright, but in today’s web-world you should better use CSS to do all your formatting.

Today, we will create a fully accessible, proper formatted form. This form should be accessible for almost everyone.

The beginning

We’ll start with the structure of the form. Take a look below:

HTML

<form id="info" method="post"> <fieldset>
<legend>General Information</legend>
<ul>
	<li> <label title="Name" for="name">Name <span>*</span></label> <input id="name" name="name" type="text" /></li>
	<li> <label title="Email" for="email">Email <span>*</span></label> <input id="email" name="email" type="text" /></li>
	<li> <label title="Address" for="address">Address </label> <input id="address" name="address" type="text" /></li>
	<li> <label title="Postcode" for="postcode">Postcode </label> <input id="postcode" name="postcode" type="text" /></li>
	<li> <label title="Comments" for="comments">Further Comments </label> <textarea id="comments" name="comments"></textarea></li>
</ul>
</fieldset>
<fieldset>
<input id="Submit" name="Submit" type="submit" value="Submit" />
<input id="Reset" name="Reset" type="reset" value="Reset" />
</fieldset>
</form>

HTML Explanation

The fieldset element is there to divide our complete form in different parts. Say a “General Information” part, a “Specific information” part etc. We give a name to that fieldset by adding a legend element to it. You’ll see what that will give in a working example.

<ul> and <li>

We are moving on; In the next codes, you’ll see the ul and li elements. This is an un-ordered list and is used to style all the question/answers in the same way. We “order” the questions and answer fields using a list.

Inside the <li> element

You will see that inside the li element a label, a span and input element are placed. The label element is there to connect the question to the answer field. When you click on the question your focus moves right to the answer field. The title is there to give your visitors more accessibility options.

Asterix

I’ve placed the asterix sign inside the span element to indicate which fields are required. The input element is the field where your visitor should answer your question. Nothing hard about that I guess.

As you might notice, I didn’t use any div elements in the structure. We don’t need them, as we are able to style our form using these basic codes.

Let’s format

If you understand the structure of our form, I will start explaining the formatting via CSS, if not, read the whole article again. Let’s go.

CSS

ul{
list-style:none;
margin-top:5px;}
ul li{
display:block;
float:left;
width:100%;
height:1%;}
ul li label{
float:left;
padding:7px;}
ul li input, ul li textarea{
float:right;
margin-right:10px;
border:1px solid #ccc;
padding:3px;
font-family: Georgia, Times New Roman, Times, serif;
width:60%;}
li input:focus, li textarea:focus{
border:1px solid #666; }
fieldset{
padding:10px;
border:1px solid #ccc;
width:360px;
overflow:auto;
margin:10px;}
legend{
color:#444;
margin:0 10px 0 0;
padding:0 5px;
font-size:100%; }
label span{
color:#f00;  }
fieldset input#Reset, fieldset input#Submit{
background:#E5E5E5;
color:f00;
border:1px solid #ccc;
padding:5px;}

CSS Explanation

I will explain some of the codes that might be hard to understand to the beginning CSS designer. ul li input:focus makes the form for non-Internet Explorer- users more accessibile. Read more about this in the following article.

The fieldset input#Reset, fieldset input#Submit style declarations are there to style the Submit and Reset button. They need a proper look as well, right?

I think the rest is quite understandable. If not, please leave a comment or email me.

There you are

And there is your nice looking, accessible CSS based form. This tutorial form is there to learn you the basics of an Accessible CSS based form, and it is up to you to think of the thousands of variants that are waiting to be designed! Good luck with experimenting your way to the top.

HTML has many properties. There are a couple of them we don’t use that often and we will discuss one today. It is called the ABBR property and is used to explain and mark-up abbreviations. We bloggers write for the web and we shouldn’t forget the text should be understandable for everyone.

You might have seen news sites and information websites use this property. In the text, an abbreviation is underlined with a little gray and dashed line. When your mouse rolls over that link-look-alike, you come to the conclusion it is something else. An explanation about the abbreviation shows up. You might have seen this property more than you think.

Ok. But what is the point of using ABBR in your website? These arguments should convince you:

1. Better for Accessibility – Using ABBR properties in your website will only optimize the accessibility of your website. Some visitors might don’t know terms like “SQL”, “AI” or “NASA”. Look at yourself, do you know them all? You should try as hard as possible to make your content as accessible as possible.

2. Educate your visitors – Many websites and blogs are here to teach people with their knowledge. Those have different subjects and different visitors. When they are reading an article, everything should be clear about the topic. When acronyms or abbreviations aren’t clear enough, the visitor might do not understand the whole article.

3. Multiple purposes – Not only are you educating your visitors, you will make it easier for spell checkers, translators and speech synthesizers to understand the meaning of an abbreviation and therefore the meaning of a sentence.

4. Search engine optimizing – Another advantage is the search engine (yes, they are everywhere!). When you are using an abbreviation instead of a couple keywords, the SE isn’t totally clear what you mean and therefore they couldn’t display the most accurate data to their users.

When you are using the ABBR function in HTML, it will explain the abbreviation to the search engine as well and you have yourself an extra keyword. Always great, right?

How to use ABBR?

ABBR is not hard to use. It only uses the “title” tag to explain the abbreviation. As always, CSS is around the corner to style your ABBR tag in a way you prefer.

<abbr title="Structured Query Language">SQL</abbr>

When you add ABBR to an other “SQL” abbreviation elsewhere in the page, around it is everything you need to do.

When ABBR, and when Acronym?

Some abbreviations like “URL” and “SQL” are pronounced letter by letter by some, and as a normal word by others. The ABBR property should be used in these cases. Other abbreviations are just normal ‘words’ like “NAVO” or “ASAP”. Those should be surrounded by the acronym property.

<abbr title="Structured Query Language">SQL</abbr>
<acronym title="Naval Oceanographic Office">NAVO</acronym>

Disadvantages?

Everything has its disadvantages. The use on a blog or website has a major problem. Internet Explorer will not play along as it simply doesn’t recognize the property.

But there is a solution for Internet Explorer. We can add something extra HTML to the original codes:

<abbr title="Structured Query Language"><span class="abbr" title="Structured Query Language">SQL</span></abbr>

In Internet Explorer, ABBR isn’t recognized and therefore not styled. The extra span is there to get this done in another way. Below are the style declarations you should use if you want your visitors to think they are dealing with the original ABBR property:

abbr, acronym, .abbr {
  cursor: help;
  border-bottom: 1px dashed #ccc;
}

Conclusion

Internet Explorer is always bugging a webdesigner. All we can do is waiting until all IE users switch to a better browser. This is hard to achieve and in the meantime… We have to live with it.

I think the advantages of this property really are great, and the Internet Explorer problem is not that big. Thanks for your time.

Fonts is a though subject when we are talking about accessibility. Many of the webdesigners out there design and code their website in a way they like it. They use a header image they like and they use the font family and font size they like. Sometimes (if not often?), they forget all machines and browsers are different and do not have the same settings.

This means the content of the website is not displayed to the visitors as the designer wanted. But how are we webdesigners supposed to use typography, if we don’t know how the text is displayed on other computers and browsers?

The tips I will give you in this article will improve your design. It’ll give you more control power over your content and typography. Ready?

1. Use universal fonts

Windows is not the same as a Mac machine and Windows ‘95 differs from Windows XP. They don’t have the same fonts installed by default. Fortunately, a couple fonts are installed on all those machines and we call them universal fonts. For example, fonts as Arial, Times New Roman and Courier New are included in the most systems around the world. It is safe and recommended to use these.

If you designed your content and you used different fonts and sizes on your website, we call it typography. But you shouldn’t experiment with fonts that you have downloaded from the internet because the visitors usually don’t have this font installed and therefore, they will only see the default font. If you are defining a downloaded font via CSS, you’d always add a couple standard fonts as a back-up. An example below:

body { font: Times New Roman, Verdana, Arial, Helvetica, sans-serif; }

2. Font sizes

Font families belong to typography. The same goes with their sizes: large headings, smaller paragraphs, and bolded links, to name a few. Unfortunately, most webdesigners don’t know how to use font sizes in proper way, and as a result, some visitors will get an accessibility problem. Learn on below.

According to Alistapart’s investigation and testing, it isn’t safe to use pixels to define your font size. Points aren’t safe either. What about Percents? Or Ems? Ems are recommended by the W3C. And yes, Alistapart tells you the exact same thing, with a little extra tip to smooth things up. Look below:

body {   font-size: 100%; }
p {      font-size:0.75em; }

The style declarations I’ve shown above will do the job. The only thing you should add is the font-size:100%; to your body property and now you can use Ems to define your font size. With this codes, everything is perfectly readable and resizable in most (modern) browsers like IE6+ , Firefox and Opera.

3. Use a correct line height

A paragraph text should be easy to read. This can be achieved with solid, accessible font families and font sizes. A part most webdesigners often forget is the area between the lines (“Line-height“, as it is called in CSS). A paragraph is much easier to read when a proper line-height is defined.

Recently, Eric Meyer did some investigation regarding the behavior of line-height in CSS. He tried different fonts and he came to the conclusion a “normal” line-height doesn’t exists. It changes per font. We can define line-height in the same way as we styled our font-sizes a couple minutes back.

body {      font-size: 100%;
            line-height:1.5em; }
p {         font-size:0.75em; }

Again, the text is now fully resizable and accessible. Your paragraph is displayed correctly in most (modern) browsers.

4. Website based font-size resizer

With the latest JavaScript libraries around the web, it is possible to improve your website by adding a font-size resizer. It will make your website more accessible, as a lot of people didn’t look for resizer options in their browser. A resizer on your website makes things easier.

Even when people know their browser has a resize option, this website based resizer has its advantages. As developers, we could specify the area to resize. For example, the text of your article should get resized, without messing up the layout. My resizer does the same job, so it is possible!

The web offers many ways to build a resizer. Here is the one I use myself. It works correctly.

5. Checking your website.

If you are in your office or at school, check your own website on the available computers. Most of the time, you only see your website from your own, development computer and most likely, you have changed some settings. Your website might look good on your computer, but maybe not on another one.

You are not your only visitor (I hope!), and people are visiting your website from all over the world. Check your website statistics and see with which browsers users are visiting. If 30% uses Firefox 2.0, be sure you browse your site in Firefox 2.0. Do the same thing with the other browsers.

It is always good to test your website. You become a visitor of your website yourself and you see what others are noticing. This knowledge can only help you improve your website.

Conclusion

Accessibility is important and you have all the information you need about accessibility and fonts. These are the tips I think, are the most valuable, but if you think an important one is missing, please contact me. This will only make this article more up-to-date and helpful.

If you think this article was useful, consider subscribing to my RSS feed to get the latest articles as soon as they will be available.

Thanks for reading and if you have a question, please do contact me. Comments, emails or IM messages are appreciated. As always.

Every blog should provide their visitors with the most pleasant experience. Content is the most important part of a blog, as this is where visitors are coming for. Without this content a blog will never become a success. How this content is displayed and how easy it is to navigate that blog plays a serious part at keeping visitors. A user-friendly theme in combination with great content will give your readers trust and interest, which will most likely bring them back for more.

As mentioned, a blog design should be designed for its users. You could ask for the user’s needs before starting the developing process, to find out what they are looking for in your blog. You’ll come out better: User-friendly and at the same time, it is a pleasure for the eye.

This article describes what users are looking for and how you can improve your design and more important your blog (and your visitor base).

1. Accessibility

Important part. Not all visitors use the same device, computer, browser, and/or settings. Maybe, your weblog is not visualized the way you or your designer wanted to. Some users might have disabled images or JavaScript, some might have a 800×600 resolution. You should prepare for this, make sure they can read the content and view the site as good as possible. Remember, you are publishing for all users and it should be your goal to let everyone read your content. Read more accessibility tips.

2. Organize your page

When a user lets his eyes go over a page, he should see the important things first. Users are looking for content. Make sure they see content. The most blog readers start looking for the navigation, the RSS feed link or button, your categories or a search form. To make your weblog as organized and user-friendly as possible, make sure those items are in sight.

3. Information

Your visitors do visit your weblog for a reason. This reason can vary: one weblog has some great articles on webdesign, others on music and another on Prison Break. Your task is to place all the content you feel your visitors need right in front of their eyes. They’ll find the content they need fast and they are satisfied. Again, content is the most important part of a blog, so make sure you have it.

4. Advertisements

Watch out for advertisements. It is nice to make some money of your blog, but make sure you don’t cram your content full of advertisements. Users aren’t coming for the ads, they are coming for your content. If you want people to advertise, organize the ads and spread them over your whole page. In my opinion, you should leave the content as readable as possible. A weblog (ea. my weblog) lives from its visitors and if you press to many advertisements to their chest they might leave and never come back.

5. Cluttering

Users scan a page, but they also scan an article for useful information. A proper use of bold texts, images and headings will separate the article in information blocks and makes sure the readers pay attention to the most important information and/or keywords of the article.

Some smaller points

6. Navigation – Users want to move around a weblog the way they like. They need info, so make sure you ordered your content under the right navigation items to let your users find information fast.
7. Loading time – Not everyone is on a very fast cable connection. Optimize your design to load fast with every connection. Users navigate away when it takes to long.
8. Sitemap – A sitemap is especially with larger blogs, a must-have. With one click, your visitor can view all information on your blog. This is seach engine friendly.
9. Page title – Use a page title which describes the content the page is loaded with. An example: “How can you make your blog user-friendly – Divitodesign.com”. There’s a smart plugin available to do this for you.

Interested in more?

I hope you enjoyed this post and learned something. You could subscribe to my RSS reader and read articles as soon as I post them!

What is accessibility? What we are talking about is the accessibility of a website. Can your website be viewed by people using other mediums? Or can it be used by deaf people? A common mistake people make is that accessibility is something for people with a handicap. Dont think that way; Accessibility is for ALL your website users. One guy might be deaf, the other one might has a small screen resolution, and another guy might not want to load images. All those people should see a normal website with good understandable content.

Validation

As always, validate your website. Validation is an important part of developing your website. There could be a small error in your HTML or CSS, and your testing browsers render it the good way. But what happens when an older browser doesn’t render it correct, or render it at all? Visitors with that older browser might not see all the content and/or miss some parts. Therefore, always try your website in different browsers and versions and most importantly, validate your HTML and CSS.

Different mediums

Not all people are visiting your website on the standard computer, with the standard browser. There are also people visiting via a cell phone, while many browsers can be using different settings, as well as versions and screen resolutions. Is there a way to develop your website for all those different types? No, you can’t. The only thing you can do is check your website in all different types of mediums and look if there is something you can do about a possible display error. Keep this in mind.

Images

Remember, there are people who are on a dial connection. Those visitors have to wait a long time before a website loads. In order to make a webpage load faster, they often browse the internet without images. On the spot the image would have been located their browser displays the ‘ALT’ text. Therefore, adding an ‘ALT’ text is a MUST for making your page more accessible.

Some images are located in the content. When an image doesn’t load, the alt text is displayed inside the content. Visitors might read over it and don’t see there is an image located. Make it noticeable. Try something like this: ‘ — CSS MENU EXAMPLE – -’. This will not tell people you are using an image, but it’ll get noticed much more and faster. Alt texts are also good for an extra keyword for onsite search engine optimizing.

Watch out for background images as well. When not loading images, the text could get lost in the background because there isn’t a proper contrast. Those people should be able to read the content too. Make sure your font color is readable when the images are turned off. A good way to check this is to try it yourself in your own browser.

Colors

Some older browsers don’t recognize color ‘names’. Example, ‘green’ won’t be displayed the way it should in some very old browsers. They usually use the standard value if they don’t recognize what to do with the entered value. A way to have more browsers render the colors you have chosen, use the color’s prefix. 99.9% if not 100% of the browsers render prefixes the correct way.

The ‘FONT’ element

Some time ago, I read an article on accessibility, and they told me something I didn’t know about the ‘FONT’ element. In a lot of browsers, it is possible to change the standard used font, font color and background color. When using the following codes on your website, it is possible the browser will use this color. The user defined its own colors, but they won’t be used there. The background color doesn’t change and this might cause problems with readability of the content.

Javascript

When using Javascript, remember there are people who have it turned off. Those people should still be able to use your page the way it should. Always try to avoid Javascript in important parts of your website like navigation. If you are going to use it, use it in a proper way and make sure people can use the important parts.

That’s it

As I told you before, it isn’t possible to make your website 100% accessible for all visitors out there. The only thing you could do is optimize your webpage the best possible way, by following some tips given today in this article.

If you want more information on this subject, I suggest you should take a look at the ‘Webmaster Guidelines by Google‘. Google rewards Accessibility by better index and rank your pages. Another page you should visit is the ‘W3’s Accessibility guide‘, where you can get some more in-depth information together with a guide your website should comply to if you think accessibility is important.

Thanks for reading and see you next time!