Web Design and Build

Older Entries

New HTML5 elements and IE8 Last updated:20 May 2010

I was reading a discussion on a forum last week about HTML5, and thought I’d have a quick mess around with it to see what happened with various browsers. I created a test page using the new tags provided by HTML5 (<header>, <footer> etc.).

This page doesn’t display correctly in any browser that I tested (FF3, IE6/7/8, Chrome2, Safari 4, Opera 9.63 or even Opera 10 beta2), although FF, Chrome, Safari and Opera all display the <aside> element correctly for some reason.

I then applied display:block to the css for all the new elements and tried again here.

Slightly to my surprise the page looks fine in FF, Opera , Chrome and Safari. Slightly less surprisingly, it fails horribly in IE6 and IE7. The biggest surprise for me was that it looks just as bad in IE8. I suspect, on reflection, that the browsers that worked did so because of their treatment of unrecognised html elements, rather than their support for the new HTML5 elements.

HTML5_IE8HTML5_Opera

Here’s what it looks like in IE8 on the left (pretty much the same as in IE7 and IE6) and here’s how it should look in Opera 9 on the right. I have to say I expected it to be OK in IE8, given that’s the pretty much the newest browser I tested with. So much for HTML5 support in IE8…

Conclusion: being able to use even the simpler features of HTML5 looks a long way off…

Tags:
Posted in Web Design and Build | No Comments

Turn your handwriting into a font Last updated:10 May 2010

I came across a great little webpage yesterday that will let you turn your own handwriting into a font:

The quick brown fox jumped over the lazy typographer. And the numbers look like this: 1234567890. It looks quite like my normal writing, maybe a bit neater.

Snazzy or what?

I rendered the font for the web with Cufon, which I find far simpler to use than sIFR. I notice that Safari and Chrome don’t render the underline on the hyperlinks (looks like a known issue with webkit browsers), and neither, I’ve just noticed, does IE8. Additionally in Safari/Chrome the text appears on top of my flyout menu (solved with z-index), however. Firefox, IE6/7 and Opera are fine.

Posted in Web Design and Build | No Comments

A song for the frustrated developer Last updated:28 March 2010

Came across this little song this morning. Very funny and very true……if a bit geeky.

Tags: ,
Posted in Web Design and Build | 1 Comment

The joys of IE6 Last updated:20 March 2010

IE6 logo Find myself in an interesting situation at the moment – enforced usage of IE6 at work. Good reasons for this of course, one application used in this organisation will only work with IE6. Quite a common situation.

What’s interesting is what doesn’t work in IE6 – including two websites for web design agencies I was looking at last week. One of these actually said that their site didn’t work in IE6 and told me to upgrade my browser (I can’t), and the other one just broke (badly) in IE6. Another different site I viewed on the same day used transparent pngs, which aren’t natively supported by IE6. Update: Found another two web design agencies whose pages break in IE6 this week – and these were New Media Age Top 100 agencies as well.

Although I use IE6 at home, I use it exclusively for testing websites I’ve built to make sure they’re OK, so don’t normally come across so many issues.

Personally, at the moment, much as I’d like to ignore IE6, I don’t think it’s acceptable to do so. Excluding people using IE6 from using your website is equivalent to saying, in UK terms, that it’s unavailable in Scotland and Northern Ireland. Or, in US terms, unavailable to most of the people in California.

Tags: , ,
Posted in Web Design and Build | No Comments

Loading a webpage in stages Last updated:1 March 2010

I reworked my homepage this weekend and wanted to display the latest Wordpress blog post on it. No problem there. However, the initial response times for my blog are sometimes quite slow, and this then meant that the whole of my homepage was slow to display, because the page was waiting for the blog to respond before displaying anything.

So what I wanted to do was display the home page immediately, and then load the blog post when it’s available. The solution was to use AJAX, which turned out to be very straightforward. More information on AJAX here, but essentially it allows a page to communicate with a server without refreshing the whole page. First things first – here’s the php code to retrieve the latest post from Wordpress as follows (I originally had this on the homepage itself):

<?php require($_SERVER['DOCUMENT_ROOT']."/blog/wp-blog-header.php");
query_posts('showposts=1');
while (have_posts()): the_post();?> 
<h2><a href="<?php the_permalink(); ?>" title="Blog">
Latest blog: <?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile;?>

I saved this code separately into a file called latest_post.php (stored in my “includes” folder).

In my homepage file I added some “placeholder” code where I want the blog post to appear. This will be displayed until the data comes back from Wordpress:

<div id="latest_post">
<h2>Latest blog: loading...</h2>
</div>

Note the id of latest_post assigned to the div. Then I added the following javascript code to the <head> section of the homepage

<script type="text/javascript">
window.onload = new Function("loadXMLDoc('/includes/latest_post.php');");
function loadXMLDoc(url)
  {
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  document.getElementById('latest_post').innerHTML=xmlhttp.responseText;
  }
</script>

The function loadXMLDoc retrieves the php file I’ve created above (latest_post.php) and then the last line replaces the text within the element with id “latest_post” with whatever is retrieved. This is standard ajax code which can be used for any purpose. Only the last line is specific to my page.

The code window.onload... calls this function when the page is loaded.

So, when the page is requested the php and html that’s on the page display the page with the placeholder text, but without the blog post, so the page loads nice and quickly. Once the page loads, the javascript is fired which calls the AJAX function to retrieve the blog post, and this loads on the page when it’s available.

This was the first time I’ve used AJAX, and it seemed quite a neat little solution, so I thought I’d post it here. This is the basic solution which could be further enhanced with some error handling.

Tags: ,
Posted in Web Design and Build | No Comments

Older Entries