It’s finally time to give it a test in Internet Explorer, let’s see how it looks like…

WHAT??? That looks a lot worst than I was expecting… What the heck is going on?

You try changing your css, but explorer doesn’t change at all… You verify if you’re actually working on the right file, and yes in deed, you are. You try to add some basic css properties, but again, it doesn’t change a bit. The problem is…

Internet Explorer completely ignores html5 new tags

OMG! Until when this stupid browser is going to give me head aches – you say out loud.

At this point you have two options:

1. Change your entire markup and css to use old tags
2. Use Remy Sharp’s fix. The only downsize: It completely depends on Javascript

IE simply ignores all the elements it doesn’t recognize, regardless of CSS. By using javascript’s function document.createElement(), we iterate through the markup and recreate all the tags that are not recognized by IE.

Quick copy/paste solution

Here is the code taken directly from Remy’s site:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I’m thinking it might be a good idea to condition the code to IE versions lower than 8, since IE9 will have html5 support and it might be coming soon, but that’s up to you:

<!--[if lte IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I feel stupid for not being aware and for not testing earlier in IE. It took me a while to figure out what was going on.

Get more information from this sites:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
http://remysharp.com/2009/01/07/html5-enabling-script/

Content is the reason why people visit your website. They are searching for information. If they can’t quickly find what they’re looking for, they leave.

Learning how to make your content easy to access, helps your visitors find what they’re looking for. They don’t want welcome messages or animated splash pages. They want to find what they came for… and quickly.

For writing effective content you must get in your visitors mind. Most of us believe that we know who our users are; We believe that we know what they’re thinking.

Unfortunately, we don’t realize this is false until we get closer to them; until we study them, their needs and their day to day life.

To understand your visitors you must create personas.

A persona is an imaginary human created by you. This persona has:

• Name
• Age
• Occupation
• Needs
• Skills
• And even a picture.

By creating this persona, your mind leaves its own ego and starts thinking according to this imaginary person.

The final goal of creating personas is to help you understand your visitor’s questions and create real life scenarios.

Everything on your website should fulfill a scenario

After you create a list of personas, it’s time to think of possible scenarios. Scenarios are short stories that give you a good sense of the people who come to your site; What they want to do at your website.

“Scenarios tell you the conversations people want to start” – Janice Redish, Letting go of the Words

I’m traveling from the U.S. to India next month. Do I need a visa?

My niece will be two years old next week. I’m looking for a cute dress to send to her.

If your content is not fulfilling any scenario, what’s the reason of having it? Change it to fulfill a scenario or delete it.

Breaking down long content helps visitors organize your website’s ideas

Whenever you see a “wall of text” keep in mind that:

• Your users won’t read it, or
• It will be a pain in the butt to read (and they’ll be swearing at you for making it so hard to read).

Break “walls of text” by making good use of these elements:

• Lists
• Tables
• Simplified text
• Sub headings

Lists
If you find yourself separating items by comas or enumerating items, convert those items into a list.

• It helps your visitors skim
• Makes the content easy to grab and go.
• Saves your users from having to create a mental list.
• Help visitors find the item they’re looking for faster.

Tables
Consider using tables when you need to compare numbers, have series of “if, then” or similar situations.

• Tables help you organize information in a more visual way
• It makes the content easy to grab and go.
• Visitors look for their question on the left column and when they find it, they look for the answer on the right column(s).

Simplified Text
It helps users understand what you mean by just reading it once. Simplify your text following these tips:

• Remove any welcome message.
  If you don’t want to remove it, think of what real life scenario the welcome message is fulfilling. Usually your answer will be none.
• Remove any fluff words that don’t mean anything.
  Words like ’simply’, ‘basically’, ‘due to the fact that’, ‘at this point in time’ can be completely removed or changed for a simpler word. Reading your sentences without fluff words sound a lot simpler
  We are simply the best drug store. Our installations basically have all kinds of medicines for you.
• Change complicated or technical words for very simple ones.
• Write one to three short sentences for each paragraph, no more than that.
• Try to avoid using comas. Break the sentence into two or more sentences instead.

Sub headings
Also called sub titles. This helps users by telling them what they’re going to find after the heading. They can also make a general meaning of your document by only reading the sub headings.

Sub headings can be formatted like:

• Questions (E.g: “Why is good content necessary?”)
  Use questions when your user comes to the site with questions. It’s a very good technique for clicking with your visitor.
• Statements (E.g: “Good content helps visitors find what they’re looking for”)
  This technique helps to get a better understanding of what’s below the heading. Notice the main headings of this article are formated like statements.
• Action Phrases (E.g: “Write good content by following these basic rules”)
  Use this technique when you want to encourage your user to do something or follow a list of steps.
• Nouns (E.g: “Good Content Writing”)
  This format can be used in some specific cases; most of the time for labels. Nouns are not conversational, unlike questions, statements or action phrases.

Naming your links efficiently saves visitors from feeling lost

Naming links is one of the most important tasks while developing content. If you’ve read the phrase ‘click here‘, you’ve seen bad link names.

Knowing what to put between the <a> tag is very simple, just follow these rules:

• No ‘read more’, ‘click here’, ‘more’ links
  Users usually skim through the text by jumping from one link to the next. Having a more descriptive link would help users know where that link is going to take them. By having a ‘read more’ link, you obligate them to read what is before and after the link to understand what it is.
• Have links match your page titles
  If visitors click on a link called ‘How to find a girlfriend’ they want the page where they are redirected to be titled ‘How to find a girlfriend’. This not only supports consistency through your website but it also makes the user know right away that he’s in the right place.
• Use your visitors words
  Avoid using your website marketing lingo for links. If you create a new section called ‘volcano power’, give the link a more descriptive name. Use your visitor’s words. Users won’t understand what you mean until after they click the link.
• Use action phrases for links
  This is a great technique to encourage your users to do something. For example: If you’re linking to a page where users can write their own comment, don’t name the link “comments”. Name it something like “write a comment” or “send us a comment”. Whatever works best.

“Inverted pyramid” text makes visitors interested enough to continue reading

The inverted pyramid text is the total opposite of how we were taught in school. For this method you write the key message first. And you expand the subjects as you write. This technique is frequently used by journalists in newspapers.

Writing this way helps visitors quickly identify if they’re really interested or if they’ve read enough and want to stop.

There’s a similar technique for introducing new concepts to users. Let’s call it the known->unknown technique.

To use the known->unknown technique you start the paragraph with something the users already know and introduce something new in the second sentence. Then, in the start of the next paragraph you use the information that you introduced in the second sentence of the previous paragraph.

It’s easier to see it in action than to explain it. I’m going to use an example from Janice Redish’s book, Letting go of the Words (again):

Notice the first line of the first paragraph talks about something the user would already know if he’s looking to import yams into the US. The second line of the first paragraph introduces new information, indicating the yams need to be fumigated.

In the second paragraph, fumigation is already old information for the user, so it’s used to start the paragraph. Then the second sentence introduces new information.

Using this method makes users feel a lot more comfortable with what they’re reading and saves them from feeling lost in the process. It also helps educate them about unknown subjects.

Where can I find more about content writing?

Most (if not all) of this information was taken from Janice Redish book, Letting go of the words. It’s an excellent book that I recommend all web developers and everybody related to read.

Of course there is a lot more detail in the book. It will teach you, using a lot of real life examples, what I just mentioned here.

My writing skills still suck, but at least now I’m able to identify bad content and improve it by 10000%.

I also recommend that you read DON’T MAKE ME THINK by Steve Krug. A really well done book that talks about helping your users understand what the hell you’re trying to say and lots about web usability.

What’s new?

DOCTYPE

<!-- Before -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Now -->
<!DOCTYPE html>

Most browsers will parse documents with that doctype as html5. That simple

CHARSET

<!-- Before -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Now -->
<meta charset=utf-8 />

What was removed?

This tags are no longer valid in html5

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>

Frames were removed as well.

<frame />
<frameset>
<noframes >

Obsolete tags were taken out of html5 as well:

<acronym>
<!-- Use abbr instead -->
<applet>
<!-- Obsoleted in favor of object -->
<isindex>
<!-- Replaced by usage of form controls -->
<dir>
<!-- Obsoleted in favor of ul -->

Tag’s attributes referring to visual characteristics were removed as well. Just to mention some:

align, background, bgcolor, border, clear, height

What changed?

<a>
<!-- Now it can contain block elements. Hurray! -->
<b>
<!-- Now represents text whose typical typographic presentation is emboldened -->
<hr />
<!-- Now reprensents a thematic break in paragraph-level -->
<i>
<!-- Now represents text in an alternate voice or mood -->
<menu>
<!-- Has been redefined to be usefull for toolbars and context menues -->
<small>
<!-- Is now used to represent small print in documents, generally for legal purposes -->
<b>
<!-- Now represents importance instead of strong emphasis -->

New stuff, the exiting part!

A bunch of new tags have been created to satisfy the common needs that HTML coders find everyday.

<section>
<!-- Generic document or application section -->
<article>
<!-- INDEPENDENT piece of content of a document. E.g: Blog entry, newspaper article -->
<aside>
<!-- Content slightly related to the rest of the page. *cough* side bars *cough* -->
<hgroup>
<!-- Header of a section. E.g: To include title and subtitle, or company name and slogan type of thing -->
<header>
<!-- Group of Introductory or navigational aids. Doesn't necessarily needs to be at the top of the document, it can be the header of a section of the page -->
<footer>
<!-- Footer for a section. Can contain information about the author, copyright, etc. -->
<nav>
<!-- Section of document intended for navigation. -->
<figure>
<!-- Associate a caption with some embedded content, such as graphic or video. -->
<figcaption>
<!-- Provides caption for the previous tag's embedded content -->
<video>
<!-- Video and audio multimedia content. Very exciting tag   -->
<mark>
<!-- Run of marked text. E.g: Can be used for marking keywords of a search in a long text -->
<progress>
<!-- Represents a completion of a task. E.g: Downloading, performing series of expensive operations -->
<meter>
<!-- Represents a measurement, such as disk usage. -->
<time>
<!-- Represents a date and/or time. Very exciting tag   -->
<canvas>
<!-- Rendering dynamic bitmap graphics on the fly. Very exciting tag -->
<command>
<!-- Represents a command the user can invoke -->
<details>
<!-- Additional information or controls which user can obtain on demand -->
<datalist>
<!-- Used for creating a list of options for the new 'select' tag. -->
<keygen>
<!-- Control for key pair generation. -->
<output>
<!-- Represents some type of output. E.g: Calculation result -->

Input tag’s type attribute now has the following values:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Depending on the device or browser used, this can prompt change the way to input the value. For example, if browsing from an iPhone, the datetime value promts the native way for the iPhone to choose a date+time.

The type attribute can also be used for automatic browser native validation purposes.

For more details on form changes, take a look at http://diveintohtml5.org/forms.html

Visit: http://www.w3.org/TR/html5-diff/#new-attributes for more new attributes in html5 that you need to know about.

New html5 API’s

Other than tags, html5 implements a bunch of new API’s (think of it like javascript libraries) that will help you develop better applications in a faster way.

• Video & Audio: API for playing of video and audio; it can be used with the new video and audio elements.
• Offline Apps: An API that enables offline Web applications.
• Editable Content: API for editing inline content; use it with the new global contenteditable attribute.
• Drag & Drop: API for drag & drop elements; use in combination with a draggable attribute.
• History: API that exposes the history and allows pages to add to it to prevent breaking the back button.
• Geolocation: API that provides scripted access to geographical location of the device that’s browsing the site
• Local Storage: API for persistent data storage of key-value pair data in Web clients (how exciting is that!?)

Examples:

Check out html5 examples here http://html5demos.com/ they have everything and more of what I’ve said here and it’ll also tell you the current browser support.

Designing for the Social Web

The most important lessons I learned?
If I would have only 2 seconds to explain to you the most important part of the book IMHO, I would say: “Identify your desired users and have an authentic conversation with them.”

Make it easy for your users to send you a feedback or to contact you and listen to what they have to say. At the end everything turns around the user: Design for signup, design for ongoing participation, design for collective intelligence, design for sharing, this are all tools/actions the user will be using/executing.

Joshua creates a framework called AOF (Activities, Objects and Features), which sets what you should prioritize when you’re in the designing/planning process. To wrap the idea in a few lines: Focus 90% of your energy in defining the main Activity you will be doing (what your users are/will be doing) and making sure it always kept in mind through the planning process.  Identify the Objects that people interact with while doing the main activity. Define the core Feature set after having an activity and objects defined, think of it as the actions people perform on the objects.

What did I learn from the book?

• I learned that the real value of Amazon is the products reviews section.
• Everything that you think you know but you don’t really apply it very much, he breaks it down and explains it with real life examples, helping you get a more solid concept of what you already know.
• Your application is not based on the features it has, it’s based on the main activity it supports. When you’re thinking of your application, don’t define it like this: It’s going to have a blog, it will also support user registration and profiles pages, the user can subscribe to the news letters, etc. As the AOF method says, define your activity first and that should be the main thing.
• Respect the power of an authentic conversation with your users. That’s the path to create passionate users.
• How to make the user feel unique and at the same time make him feel like he belongs to a common-likes group.
• How to encourage your users to participate by reciprocity laverage.
• How you create signup friction through forms and how you can reduce it (this section of the book was really good!).
• How to measure your success with numbers (although is not very specific, it gives you a nice introduction and overview of it).

I’m currently reading a new book called ‘Letting Go of the Words – Writing Web Content that Works’ by Janice Redish, it seems pretty promising, I’ll post my review as soon as I finish it (and a link to buy it from the amazon store so I make money *Muhuhuhahaha – Laughs with evilness*) .

Have you read designing for the social web?

Tell me what you think about it!
Did you hate it? Did you love it?
What did you learn from it?
What was your favorite part?

Want to read this book?

Write a comment if you have any questions about it, or if you want to know something in specific.
If you’re decided to get the book, get it here Designing for the Social Web, it’s better than all the other places where you can get it. *Muhuhuhahaha – Laughs with evilness again!*

Have questions?

I’ll be happy to help you, just post them as a comment and we’ll discuss it!

<div class="section">
	<h3 class="title">Title</h3>
	<span class="description">...</span>
</div>
<div class="section">
	<h3 class="title">Title</h3>
	<span class="description">...</span>
</div>

This code will let you access the child elements of ‘.section’ when you use an ‘each’ function

<script type="text/javascript">
$(function(){
	$('.section').each(function(i,element){
		$('description',this).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
	});
});
</script>

I hope this helps someone, I kept forgetting how to do this, so this is mostly a reminder for myself.
Source: http://stackoverflow.com/questions/306583/jquery-this-selector-and-children/306904#306904

<!--[if lt IE 7]><style type="text/css">@import url(http://www.joelevi.com/securityupdate/bar.css);</style><div id="advBrowserWarning"><a href="http://www.joelevi.com/securityupdate/securityAlert.html"><b>WARNING!!!</b> Your version of Internet Explorer has known security issues! To protect your computer please correct this now. Click here for options...</a></div><![endif]-->

This is a great idea! I just found this post that talks about a technique for scaring the crap out of IE6 users… Although is something I’m not going to apply in my websites (it’d be so funny though hahaha), it’s a pretty nice way to make them migrate to a better browser:

Check out this post here

Enjoy! and comment if you’re applying it to your website hehehe

1. Keep Indentation: I want to code to look nice, but if it’s not indented correctly as I submit it, then it’s garbage
2. Support Different Languages: I’m going to be writing post about Javascript, PHP, XHTML and I need all these languages/markups to be highlighted
3. Line number/Plain code view: You should be able to switch between plain code view and line number. I couldn’t find specifically what I was looking for but this one had a different approach to solve this problem.
4. W3C Compliant: The code produced has to be W3C Compliant.

After like 1 hour of research and testing, I found SyntaxHighlighter Evolved! here is the plugin’s website: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/.

To install it you can go to your Wordpress Admin panel and look for SyntaxHighlighter Evolved and install it.

To use it:[language]…code…[/language]
Example:

[javascript]
$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});
[/javascript]

It’s pretty straight forward, for better details on how to use it, I went to my Wordpress Admin Back-end > Plugins > Installed, then I looked for SyntaxHighlighter Evolved and clicked on Settings, at the bottom of this page you’ll see the details of what parameters you can pass to change the functionality.

Do you know another code highlighter that works better than this one?

I found this cool website where I read that ie7 does something weird with the stack order when it renders the page and solves the problem using jQuery. Surprisingly I just copied and pasted the code (after analyzing it of course) and it fixed my problem!

Here is the code! for more details on this solution go to Vance Lucas Website

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

We’ll be discussing here new technology trends, things that I’ve discovered, things that I think they’re cool, general solutions, questions and other interesting stuff, so stay tunned for more posts . I don’t promise to write here every single day, but I will keep it up to date!

Thanks very much for visiting and if you want to stay tunned on my latest projects, adventures and more, follow me on twitter.

Cheers and keep your code clean!