HTML5: video on a web page

Tweet

Using HTML5 in order to display a video on a web page is easy and complex at the same time.
You might wonder why I'm saying so and that's why I wrote the following short guide. We will see the syntax, advantages and disadvantages of using just HTML5 to display videos.



The syntax
Let's start from the HTML syntax:

<video width="800px" height="600px" controls="controls">
  <source src="test1.mp4" type="video/mp4">
  <source src="test2.ogg" type="video/ogg">
Your browser does not support the HTML5 video tag.
</video>

Fairly easy, isn't it? Well, maybe not...

CSS3: can we use it or not?

Tweet

Do you like CSS3? Do you think it gives you a big help in doing things you've never dreamed of?
Are you aware of what browser is supporting your wonderful new CSS?
Let's see those obscure CSS3 properties and whether we can use them freely or not...

CSS: IE hacks

Tweet

In March last year, I've published a post about CSS conditional statements. The article explains how to create conditional statements and load specific stylesheets for specific Internet Explorer versions.
We all know that, in order to guarantee a cross-browser full compatibility of our web sites, the above solution gives us a possible clean way out of the problem.
With that in mind, there are situations when we don't really want to create different stylesheets for each version of IE, and a simpler solution would be preferable.
Those are the cases where we can use the famous IE CSS hacks.

Compatibility: do we need to consider IE7 support?

Tweet

I recently had a interesting conversation with a friend of mine. He develops web sites and we were talking about compatibility. Or, to better put it, how many situations a developer should consider when testing a new site. We started counting browser versions, and then we considered all the possible screen resolutions. After that, we added tablets and smartphones with related browser mobile versions.
We ended up with a long list and we were quite bewildered. If you stop for a moment and think about it, developing a new site, ensuring full compatibility, is a complete and utter madness.
I tried to shorten the long list of possible situation and the first thing that came to my mind was Internet Explorer, which, we know, is the most problematic browser. My friend said that we could remove IE7 from the list. I was not so sure. Then we made a bet: let's see how many 'major' web site do support IE7.

It has been a dirty job, but someone had to do it. And I did.
I tested a lot of corporate web sites using Internet Explorer 7 in a Windows Xp environment with a 1280x1024 screen resolution. However I would like to show only the following sites, that might be worth mentioning:

1. BBC;
2. Facebook;
3. Google;
4. HP;
5. Sony;
6. Nokia;
7. Twitter.

Would you like to see the results? Ok! Follow me.

HTML: HTML5 new input types

Tweet

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

• email;
• url;
• number;
• range;
• dates;
• color.

As you can see they are quite interesting. Let's take a tour and see how they work.

Web Development: how to test IE compatibility

Tweet

Lately, we have seen an increasing interest in HTML5 and CSS3. The (not really recent) introduction of new features has been cautiously followed by web developers, and I don't know what's your feeling, however my impression is that the path to the new web is just full of pitfalls.

I recently had to develop a new web site and, because it was a very basic one, I decided to experiment a bit. I must say it has been quite satisfactory (coding-wise), however I had to spend quite some time to test it. I wanted to have almost a full compatibility and - as we have seen lately - the browser that gave me most troubles has been Internet Explorer.

In order to test a web site for compatibility issues, I usually publish it in a not-known sub-dir and then display it with different browsers. I test it with Safari, Opera, FireFox, Chrome and Internet Explorer. In addition, I use services like Browsershots and IE NetRenderer. However, they usually take a lot of time (especially the first) and because we know that time is money, I recently decided to look for something else.

Browser Support: even Google is dealing with compatibility issues

Tweet

As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features in Blogger as well as many other Google Apps such as Gmail, Google Calendar, Google Talk, Google Docs and Google Sites.
 
This is some news. It has been published on Blogger Buzz just last Friday (July 14th).

I've been talking about browser compatibility and support a lot lately. Older browser versions are still around, and - as web developers - we have to face more and more troubles just to make "everybody happy". When I recently had to show a new web site I developed, I couldn't believe my eyes when I saw IE6 running on the meeting room pc. And you can imagine how difficult has been to explain how IE6 is some very old software ("I bought the pc just 5 years ago! It's not old!") and that it should have been replaced a few years ago with a newer version.

I believe the above news is definitely a very good news. Everyone should force people to use newer browsers - and possibly auto-updating ones. That will make us, web developers, take a deep breath of relief!

You can read the original post (Blogger Buzz: Update on Browser Support) and then, please leave a comment about it in the section below.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.

HTML5 and Internet Explorer 8: not good friends

Tweet

With the gradual introduction of HTML5 new tags, web developers have questioned its use because of compatibility issues. I've already explained that with new elements you might always have troubles. Personally, what makes me really mad is not knowing exactly what will happen when I use HTML5. Will the web site look as I thought? Will it always look and behave as I see it in my testing browsers?

There's another thing to be considered: the future of internet will be "mobile". We've already noticed that the most used word when talking about the future internet is "mobile". Everything's going mobile. New technologies and new devices are capable of surfing the internet with mobile applications. I'm thinking about smartphones or tablets (prominent market analists think that 2011 and 2012 will be tablet years).

Said that, it is quite clear that web developers will have to (or should have already) start to develop sites and applications in a different way and use HTML5 new features. We should consider the way an iPhone user will see a web site. Possibly we will have to create a standard version and a mobile version of the sites - if we don't want to let mobile users go away or maybe even never reach our homepage.

To get to the point, it's been quite a while since I've started to look around to gather information regarding HTML5. It is quite known that Internet Explorer and HTML5 are not very good friends. Actually, IE doesn't even consider HTML5 new elements. That could be a big problem. But there's a workaround!

Browser statistics: which is the most popular browser?

Tweet

When publishing recent post on CSS3 and HTML5, I started wondering about browser compatibility. What's the point in using state of the art technologies when - potentially - only few browsers can benefit from it?
Recently some well known blogs have published statistics about browsers popularity and so I thought I should share some thoughts about it.