Let’s try to find the differences that help you to make the right choice.

Horizontal Positioning

This can be called one of the most important differences. You can position inline block children with parents using the text-align property. In other words, a clock-property container can be centered even without knowing its horizontal dimensions. For example, we can take pagination that needs to be centered. Quantity of pages doesn’t matter. You just can align all children in normal source order to the right of the container.

Floats can’t be centered. While left-floated elements are quite similar to normal inline-block elements, right-floated elements will change order. Thus, you will get the first element at the far right, the second elements will be on the left of the first element, etc. Some may object that this is quite useful behaviour. However, it is not always wanted. The advantage of floats is that you can float children in separate directions avoiding direct influence on its peers. For example, you can float the “previous” link to the far left, the “next” link – to the far right, while the number navigation remains to be centered. That can’t be done with inline-block elements.

Flow

Inline-block elements aren’t taken out of the flow. In other words, you don’t need clearfix class, abuse of overflow:hidden or some other trick to make the parent aware of its children. Quite useful.

On the other hand, floats are taken out of the document flow. It can cause a lot of trouble, but still you can float text around an image. Thus, you can clear floats forcing elements to the next visual line. It can’t be done with inline-block elements. You can use the ::after pseudo-element in combination with a line feed to force the following elements down, but it won’t work.

ul li:nth-child(3n)::after {content:”–fake enter–”;}

The Baseline

Inline-block elements are positioned against the baseline of the text. Thus, you have more vertical control. In case an element breaks to the next line, you can be sure that it will never appear behind some of the previous elements. It will always start at the left-most side of its parent.

Floats align at the top and can also be used to hang behind a previous float. With a list of floats reaching the right side of the parent, the next element will be hitting the left-most side or the right side of a previous float. It can be quite useful in some situations.

White-space

The most important disadvantage of inline-block elements is that they, as other inline elements, take into account HTML white-space. Floats don’t have such a problem and it can influence your choice greatly.

As you can see there are some differences that help you to decide which method to use. It also depends on the situation. For example, if you need control over alignment, then inline-block is the best choice. In case you need more control over individual elements, you should use floats.

Reference: www.onderhond.com/blog/work/inline-block-vs-float

Thus, newer browser versions will render documents according to the specs set with the referenced browser version in the meta tag. In other words, we just freeze web documents into a specific rendering mode of a browser version.

Here is quite simple syntax of this trigger:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Advantages

• It is a perfect solution for the IE team to make sure that if we render our documents in a specific version, these documents won’t break ever again. Thus, there are no worries about newer browser versions that can break your older documents. To upgrade documents for newer version you just need to change meta tag.
• The era of conditional comments referring to five different versions of a single browser is ended. You have one file to fix the bugs that makes things easier.
• All documents with no meta tag specified will get a default rendering. You also can render any version of the browser using special “edge” keyword. Thus, you can check rendering in all previous browser versions.

Drawbacks

• In case you don’t have the meta tag set, the default rendering will revert to IE7 rendering. Thus, the additions to newer browser versions won’t work unless the meta tag is specified.



• Anyway, the newer versions of IE still should contain the correct rendering of earlier versions. That may lead to some to unacceptable proportions. Of course, you can work with a separate set of rendering rules, but they cay be buggy too making things rather confusing.
• There is no good for people who have some other browser version than stated in the meta tag. Moreover, with updating their browsers often it can be a real problem.
• In case other browser vendors don’t accept this, it can be just another IE specific hack.

Some people can say that we should forget about unsavvy web developers and accept meta tag as something really great to live with. However, it is rather idealistic. Internet is not about web developers who build mean and slick websites. There is another big goal to achieve – web standards. Thus, IE can release its newer versions without breaking the web. Of course, meta tag is not a perfect solution, but perhaps, it is a good thing.

Reference: www.onderhond.com/blog/work/IE-meta-switch

Nothing is perfect in this world and CSS3 with its background color gradient proves this rule one more time. It is not for shortening CSS code, but only for making it more variable. For example, lately you can adjust a background color gradient using a background image only. In other words, you have to recut the image again and again in case the gradient needed tweaking. We all suppose that with CSS the necessary colours can be simply defined while the browsers do all the drawing. Sounds great, but don’t work in practice… at least as you expected.

To use CSS3 trying to solve the issues concerning the gradient property is quite time consuming because it doesn’t work across a range of browsers. Here is a sample of code to look through for the following explanation:

/* how it used to be */
background:url(“…”) left top repeat-y;
/* using automated gradients */
background:#FEF3D1;
background:-moz-linear-gradient(top, #FFF1CC, #FDF5D5);
background:-webkit-gradient(linear,0 0,100% 0,from(#FFF1CC),to(#FDF5D5));
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5)”;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);

This makes the fade available in FF 3.6+, Safari/Chrome and IE5.5+. Opera users and IE users without filter support can see the fall-back color. In contrast, using an image makes it available in every single browser version out there without any issues.

As you can see CSS3 syntax is a bit longer and it looks like a block of CSS which could style half a site. And that only for one fade.

Quality vs Availability

Image is just an image. It should attract attention and display colors you want. If not consider some details, it displays the way it was made across all browsers. However, it doesn’t work with CSS3 effects. At least not always. For example, Firefox gradients are of lower quality if compare with other browsers. We all know that light fades over large areas creating unnecessary stripes. All this is just gaps in quality you don’t want to accept working with images.

Animation is the other thing to consider starting to work with CSS3. It is neat, but doesn’t run smoothly. Acceptable, but not perfect. To replace Flash animation with other open standards is allowed in case the same level of quality is provided.

Most things that are cool in theory appear to be disappointing in practice. CSS3 is not an exception to this rule. Hope that all the problems will be fixed soon to let us admire all the best provided.

Reference: www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging

First of all, it should be noted that block level link works perfectly in simple cases, but can spoil things dealing with complex issues.

Vomit Bug for Your Design

The definition of vomit bug is quite simple:

When the browser’s parser rearranges the DOM completely differently to the markup, resulting in content being placed outside its original container.

The problem can occur when you are nesting links inside other links. Because of vomit bug, DOM can be scattered in different directions, except the one you laid out initially.

Here is the sample of html code that was used to generate dom structures:

<div>
<a href=”#block”>
<div>
<div>2010</div>
<div>5.0*/5.0*</div>
<div><a href=”#test”>test</a></div>
</div>
</a>
</div>

It is quite simple setup providing a block level link with several other block element and one nested link. In case you remove nested link there will be no problem. In case you leave it, you will get the following samples of doms taken from Opera 10.5 (1), IE8 (2), Safari 4 (3) and Firefox 3.6 (4):

Only Opera 10.5 shows dom correctly. However, in case you give a background color to the block level link, Opera stop working. The best browser rendering the block level link quite perfectly is IE6. But still the click area is not corresponding. In other words, block level links with other links nested inside don’t work. At least now.

As usual HTML and CSS techniques are great… but are not working perfectly. Just remember that in case you nest another link inside links block, it will break down completely. Till all these things are fixed you should use the links on the title and “read more” text. You also can remove all links inside a block level link to make things better.

Reference: www.onderhond.com/blog/work/nesting-links-how-to-make-your-browser-v

Let’s try to use the following:

ul li {display:inline; zoom:1;}

Seems to be quite simple, isn’t it? Just use display:inline and add a zoom:1 for block properties support. This fix provides you with basic inline-block support in IE6 and IE7 as well. What is more, you can decrease the use of unnecessary floats, eliminating the need for fixing certain overflow:hidden declarations and floats in general.

You also make “add zoom to backgrounds” option less harmful because it behaves flawlessly inside inline-block elements (while in floats it pushes the element to 100% width).

Note that version 0.8 has some additional fixes and better png detection. The 0.7 version was not good in using different syntaxes for background image declarations. Thus, you can get all pngs fixed easier.

Reference: www.onderhond.com/blog/work/ie6-css-fixer-0.8

Sometimes, we take the advice too literary and this may lead to various unnecessary problems with HTML. For example, when the developers had to switch from table-based layouts to div-based layouts, they turned everything into divs forgetting about the semantic purpose of the elements. It caused demonization of the div element. So, we should try to avoid such things and find the balance between structural and semantic elements.

In case you ignore structural elements such as divs and spans, you just forget about the original function of these elements and make HTML poorer language than it could be. Don’t forget that HTML is not only semantics. It also structures your document. The main difference between these types of elements is that semantic elements explain the purpose of an element, while structural elements explain the relation of its content to the content of other elements within a document.

For example, you can create two layouts. The first one made with four divs, preferred by minimalists while the second made with five divs. It is not all about structure, it is also about some sort of relationship. Thus, layout with four separate divs indicates that structurally all of them are on the same level. In case we use five divs where the main content and context area are grouped in a content div, we show that the relation between context and main content is a lot stronger or at least different than the relation to the other element. However, the content area shares a similar relation with header and footer.

In short, layout with five divs provides us with more information concerning the relationship between the separate areas and extra div that is used to group main content and context adds useful meaning to the document.

It is recommended to use divs and spans to bring structure to your document. Just separate elements from others that share a different relationship. You also can use them with a meaningful class or id in case you don’t have a valid semantic element to describe your content.

Of course, such elements as footer, header, article, section and aside also help us to define structures in HTML documents. And the main thing to consider is that these elements also hold semantic meaning to indicate the relationship of the elements. Try to use structural elements to reveal relations between elements to write better structured code and keep the document as semantic as possible.

Reference: www.onderhond.com/blog/work/html-foundation-of-the-web

Google – The Best?

With growing internet it is more difficult to find valuable sources. Don’t you notice that while looking for something on the Web you can wade through irrelevant and outdate sites for a long while till find the things you are looking for. Google is the leader in search engine market. However, it lacks some important things to make our browsing easier. First of all, we should mention date factor. With enough time to build strong link base, older articles have more chances to rank higher than more relevant, but recent articles. Thus, we can get outdated information.

Lack of recognition of content types is another drawback of search engines we should pay attention to. Looking for some film reviews people want to get the list of reviews but not pages with this word. Thus, semantics can be quite useful.

As we know some attempts were made to extend the semantic power of html code. Today there are two methodologies used: Microformats and html5 microdata. There is also RDF, but we will discus it later.

Microformats extend html semantics using standardized (not necessarily semantic) class names. The most popular Microformat is the hCard which holds the data of a person or company (name, address, contact data,etc.) There are also some formats defined, but as a rule, they are ignored by the web.

The other thing to use is html5 microdata. Using four properties (itemscope, itemtype, itemid, itemprop) you can add extra semantics to your html. However, there are some problems and all of them make things much complex that they should be. For example, most values for the itemprop seem to correspond with the class names you’d normally put on there, which you still need for styling.

Perhaps, we just overreaching here. We are trying to automatically and fully process content types on the web and it is great, but still all the users need is to find their search queries.

Trying to provide a full standardized description of a content type, we make Microformats and microdata too complicated. The other thing to consider is that most people appreciate raw data itself. Deciding to buy another TV we need to be transferred for valid product pages. That’s all. But we try to process everything at once. Maybe basic recognition will be enough instead of complete definitions of content types.

What we are trying to say is that instead of defining a complex model for content types we can start to define standardized and semantic base identifier. Let them be simple enough. For example, use “product” for products, “holiday” for holiday, “review” for reviews. You can prefix them but that’s all. Let it work and process the data within. Microformat ideology works, but sometimes it is too complicated and makes search results irrelevant that also leads to disappointment of some users.

Reference: www.onderhond.com/blog/work/extended-semantics-simple-is-better

Using the following tips you will take advantage of a browser drawing the borders at angles. One side of the border is coloured while others are transparent.

.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}

That was right triangles in the square. And now you can change border size and get acute triangles as well:

.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}

Be creative and create a lot of shapes to try. For example,

border-style:dotted;

or

border-style:dashed;

or

border-style:groove;

as well as

border-style:double;

You also can try the following to create classic chat bubble with no images used:

Hello!

.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}

.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}

However, it doesn’t work for IE6, because this browser doesn’t allow transparent borders. Anyway, there is some tip to fix it. All you need is to give completely different color such as green to the “transparent” sides. Then use filter: chroma in order to turn that colour transparent.

/* IE6 */
.chat-bubble-arrow {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}

Reference: hwww.onderhond.com/blog/work/css-triangles-issues

Some people may object such a statement but still web 2.0 can be compared with parties crowded with a lot of people that seem to talk and have a good time… till you appear in the very center of it. Then everything changes and you feel that nobody cares about noone. They just have fun, dance, talk… all by alone.

The same can be said about the web 2.0 sites that seem to be very nice places with us creating own profiles, sharing personal data and doing our part within the data provided. However, all these appear to be useless as soon as you become a part of this festive of communication.

What is more, some people don’t want to share their personal data and preferences to become just statistics. So, why do we should share all the information with unknown and unrelated people? In times when there is too much information to accept and understand, we still continue to join various sites to enlarge this amount of useless data.

Don’t forget that social web sites are the places dominated by statistics with various people you will never see or talk again. But still it provides you with the feeling of togetherness. Let it be called a false feeling, but still you can experience it. You can find out more interesting as well as stupid information to make your world brighter. You also can stop the conversation any time you want.

And the main thing is that you can meet the people you talk to. Of course, not all the people, maybe 1 of 50 or so. You can say that you are searching for some information, photos, tips, news… but still you are striving for communication. And the main thing to forget about the loneliness in the crowded party is to be sincerely interested… in others. If you really like to share your thoughts as well as to accept the ideas of other people, web 2.0 can be the place where you can forget about all the things we have been talking above.
Of course, Web 2.0 can be called antisocial web, but it is all up to you to disprove all the myths about it.

Reference: www.onderhond.com/blog/work/the-antisocial-web

However, we also should not forget about the other important thing… usefulness. Does your site really worth your visitors’ attention? Do you really believe that usability is the best way to the usefulness? Sometimes to make things too easy cannot be universal panacea. Sometimes it even can decrease the usefulness to a visitor.

Wish – Obstacle – Effort… – Appreciation?

As we know the more effort we make to get something the more we appreciate the things we got. Does this rule works for usability of your site? Let’s make an analogy. For example, you are sitting in front of your computer and have to work or study… or whatever you have to do. It is really important for you, but at the same time you are thirsty. There are two ways to solve this:

• You have no drinks at home. Thus, another “have to” appears – you need to go to the supermarket to buy some drinks.
• In case the fridge is filled, all you need is to get to the kitchen.

The main difference between these two samples is not that you can live without water for a month, but about the amount of effort you have to put into solving this problem and avoid dehydration.

Worth or Not Worth?

Is it worth your time, money, emotions, thoughts? These are the questions we ask ourselves all the day. If yes, we do things. If look at the sample mentioned above, most of us will wait for a while and go to the supermarket. The second sample should be the work of usability experts to make sure that juice and water is always in your fridge. If they are really professionals you will also have tea, coffee, ice or coke in your fridge all the time and even may not stand up from your desk, because they bring you whatever you want. Isn’t it your dream?

Usability expert tries to let the visitors navigate a site, sing up, buy stuff online as well as reacting posts easily. However, if all in this life was such simple, we do it all the time and convert so appreciated things in waste. In other words, quality would convert in quantity. Need example? Too many drinks on your desk will increase traffic between your desk and the toilet.

Posting comments on blog or forum can be the same. If it is too hard, people will not bother to post. In case it is too easy, people start to post without considering value. Thus, it is quite important not to forget about the balance, so that people will be able to contribute valuable feedback and find it difficult enough to spam.

RSS feeds are the other good sample. Most of us know that it will end in a pile of crappy RSS feeds that we will never read, but still click that link. The worst thing is that sometimes we can’t find really necessary and interesting information in that mess. We also can sort out all these links according their themes, but it will take some time, decrease usability… but improve usefulness.

All we know that the balance between effort, worth, quality and quantity should be found. But the main thing while trying to make sites that are easy to use is not to forget about making sites that are really useful.

Reference: www.onderhond.com/blog/work/usability-and-usefulness