Tag: html5

Firefox 4 HTML5 Forms – Input Types

Posted on by Michael Bishop

Speaking of Firefox 4, I’ve gotten a few comments on my post about Firefox 4 app tabs, and while trying to respond, I discovered another new ‘feature’ in Firefox 4, support for HTML 5 input types. Inadvertently I was using the same input for my URL field as my email. I had created some custom formcontrols for Habari’s FormUI templates for HTML5 support, which had the right input types, so at first I didn’t see why I was getting the error. However with help in Habari’s IRC channel from Mike Lietz, he pointed out in my theme.php file I was calling the email formcontrol for URL as well as Email. Fixing that, I was able to submit my comment.

Firefox4 HTML 5 input type email errorA quick Google search turned up that , indeed, Gecko 2 (Firefox 4) supports HTML5 input types. I had also checked in Chrome 10.x and it too gave the same error, which means it also supports the input types. IE 9 nor Safari 5 have support for the input types (Mac, ironically the Windows version seems to support it). Finally, Opera 10 has supported this for a while, as well as iOS Safari.

So what does it all mean? Why use it if it’s not really supported in all major browsers? Well, first, using type="email" or type="url" won’t break anything. Browsers that don’t support it treat it like a text input. But those that do, well, as you can see in the screenshot, you get instant validation without any heavy lifting by your site. As support grows, you won’t have to update any code. iOS Safari support includes providing a different default keyboard layout (the ampersand and .com keys are on the home screen). I can’t speak to Android’s browser, though I’d suspect it has similar behavior. Really there’s no reason not to start using them.

Additional Resources:

Towards a Responsive Design

Posted on by Michael Bishop

I am not sure I had really paid attention to the term responsive design when I started the redesign for this site. I just knew I wanted something that would be as readable on an iPhone as it was on my large desktop monitor. I made some conscious decisions to remove a bunch of extraneous elements not for the mobile viewing, but I simply wanted to focus attention on what ever it was I was writing about. Sidebars full of links, tweets, buttons and badges might have been novel 6 years ago when I started this site, but not so important to me now.

I also wanted to learn more about HTML5 and CSS3. For my own site, I’m completely not interested in supporting old browsers, save for using a HTML5 polyfill for < IE 9. If someone is using IE 6, they probably don’t have much interest in what I’m sharing anyway. So I played with some max-widths and widths based on percentage until I found something that worked for me. Perhaps that’s not the best way to approach it, as the site really should be about those visiting, but I guess I made an assumption my browsers/screen resolutions/mobile devices were common enough that if it looked OK to me, it should look OK to visitors. Up until today, I was fairly happy with what I had come up with, save for the Youtube videos I’ve been posting. I have been experimenting with using the HTML5 iframe wrapper Youtube offers, and choosing a very large version of the video. Which wasn’t working out for smaller screens.

But as I’m studying more about the advanced concepts of responsive design and using media queries, I ran across Ethan Marcotte’s fluid images post. Lo and behold, I set

iframe {max-width: 100%}

and my video posts scale along with the surrounding content.

I’m not sure I will mess with this site anytime soon code or design wise, but I do intend to experiment with using the Less Framework and possibly the intriguing context aware responsive images script over on my cooking site, which is a blueprint based grid design spun off of the markup of this site. I don’t think it would take much to convert the grid to the Less Framework. I may think about a design that’s not quite as similar to this in the process.

Regardless of the direction, I’d like to thank Kevin Zurawel for his WordCamp Miami session on responsive design and piquing my interest on the subject even more.