(*Note this is a general argument, not taking into account site specifics such as stats etc.)

For me, the bare minimum we should be doing is switching over to the new HTML5 doctype and begin to take advantage of as many features as we can such as the new form elements, and format of javascript links etc. HTML5 has been designed to be backwards compatible so switching to the new doctype will have no ill effects at all.

Personally I would go one step further and begin marking pages up using the new structural elements such as header, footer, section, article etc, making use of Remy Sharp‘s excellent HTML5 shiv to display these elements properly in IE. I know there are accessability issues surrounding the use of javascript to render page layout, as those users without javascript will see a poorly rendered layout. I’m usually a firm believer in everyone being able to access a site regardless of the device they’re using and it’s capabilities, with javascript adding extras which if taken away do not affect the functionality of the site. However, with HTML5 now at a mature level and with IE6 still hanging around I think it’s time we took a step and dragged users along a bit by beginning to use these new elements and serve javascript up to IE and older browsers.

I understand the reasons for being wary of this approach, it’s not fully accessible, relies on an externally hosted file and introduces an extra point of failure for the site if the external file can’t be loaded for some reason. However, the number of users with javascript turned off is negligible and with the rise in popularity of use of frameworks such as jQuery and MooTools means that those small percentage of users will be well used to websites not looking spectacular. For me the benefits now outweigh the drawbacks and we’re not doing as well as we can by sticking to the tried and trusted methods and we should be pushing the envelope a bit further if possible.

For me it’s not a question of whether we use HTML5 (or some of the newer CSS3 declarations), but how much of it we use?

Having attended the DIBI Conference in April and been witness to the brilliant presentation given by Andy Clarke, I was fascinated with a technique he demonstrated with pure CSS of items appearing to flip over on hover, and wanted to try this for myself. I had the ideal project coming up which was an end of year university site that required building, and this would have been perfect for it. Each “card” was going to have an image of the module and when flipped over would have some text information and a download link of the work. Alas, I wasn’t successful at the time and had to abandon that idea as time ran out.

I was still determined to figure it out though and I’ve kept returning to it in the months since until I finally cracked it!

Take a look at the demo. – You’ll have to be using the latest version of Safari to see it in it’s full effect

I know this is a long way from web standards and being able to use in client work but it’s good to experiment and know what’s possible. To achieve the effect makes heavy use of webkit only properties such as -webkit-backface-visibility, -webkit-perspective and -webkit-transform-style

I won’t go into the full code structure but the technique is achieved by hiding the back until it is hovered using -webkit-backface-visibility and positioning to achieve. Feel free to look at the full HTML and CSS to see how it was done.

CSS media queries have been around for quite a while, with CSS 2 introducing media=screen and media=print also available to create print stylesheets, but CSS3 has added to this with the new media queries which allows much more targetting of browser types. These allow different stylesheets or different rules to be targetted by declaring the widths of browsers. Examples of this include:

@media print {
body{width: 100%}
}

Or more advanced targetting such as:

@media screen (max-width: 1024px) {
body {background: #fff;}
}

The CSS spec states that:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

This means that sites can be optimised to both the device and screen resolution, although one could argue that by hiding certain elements on smaller devices is changing the content. For example, if this site is scaled down to 800×600 the “about” section on the homepage is not displayed, as this prevents horizontal scrollbars and is not essential. Users can still access the navigation and the latest posts, but I feel that this information can be removed and not alter the experience too much.

Media queries have received a lot of attention recently with the A List Apart article on Responsive Web design and excellent uses of the technology by Simon Collison and Jon Hicks, and whilst I was impressed with them I held off from experimenting with it for a while, as I didn’t know too much about them and they seemed a little scary!

However after experimenting with them recently on this site, it’s a really simple technique of over-riding your default stylesheet with specific styles for the devices and browser sizes stated. Although screen resolutions are increasing and very few users are still using 800×600 or even 1024×768, the art of progressive enhancement means that these users shouldn’t be ignored and media queries allows sites to be tailored to these users. Resize your browser to see how this site reacts to smaller browser sizes, although there are more impressive examples out there.

Having played with them now and seeing the power of what can be achieved, I’ll definitely be making use of them in future projects, both at work and in personal projects.

This time last year, I was lucky enough to be at Summercamp down at the Carsonified offices in Bath and thought I’d write an update of the things that have happened in the last year and how the event has helped me in the last 12 months. Summercamp was billed as an event aimed at full-time students and founders of startup web apps who were just starting out. Places were limited to 8 only and as there was only three weeks between the event being announced and the event itself, I applied immediately and to be honest, kind of forgot about it as I didn’t really believe that I would be accepted. I was delighted however when Trista got in touch to say that I had been awarded a place.

As well as myself, the other attendees were:

• James Proud (founder of Gig Locator)
• Jonathan Dalrymple
• Rob Day
• Matt Dempsey
• Felix Rennicks
• Amaury Moulron
• Ross Bearman

Across the 8 of us were a wide range of skills and talents, with Gig Locator being in beta at the time and has since launched and doing well, and Rob was organising a one-day conference called Tomorrow’s Web which took place just a few weeks after Summercamp. There was a mix of designers and developers across the attendees and the sessions were also evenly spread between design, development and business/career issues, all of which were interesting in their own. Full write ups on the event are available her with part 1 and part 2.

In the 12 months since, things have changed a lot for me as I am no longer at university and am now in full-time employment and have also improved both my design and development skills over the last year. My own website has been re-designed several times since and have also learned more coding skills, focussing on HTML5 and CSS 3 and even dabbling in php!

As more of a designer than developer I was more interested with the design focussed talks and I thoroughly enjoyed Mike‘s talk through on what was then the recent Carsonified re-design and how he approached it. I also enjoyed the talks on development techniques and how to approach the task of building and testing sites, with Ryan‘s introduction to A/B testing being an interesting session.

The whole experience was brilliant and if Carsonified were to ever run it again, I would recommend to anyone to apply for a place. I’ve benefitted greatly from the experience (even playing Wiffle Ball!) and I’m sure all the other guys have gained a lot from it also.

There are a few ways to add in CSS support for unsupported browsers using JavaScript but nothing that really offers a one stop simple solution for achieving decent CSS 3 support cross browser, and one service which was recently announced was eCSStender, which promised that by downloading and including a couple of JavaScript files that a wide range of CSS 3 techniques could be implemented cross-browser, crucially without any vendor prefixes required.

Recently, I was working on a project which would have benefited from this library as development time would have been drastically reduced with the benefit of cross browser compatibility for techniques such as border-radius, box-shadow etc and I began coding with this in mind.

There was initial success with Firefox recognising the standard border-radius without the need for the -moz- prefix, and this appeared to work cross-browser. Except for Internet Explorer, any version. After many attempts at trying to get this to work, I gave up.I recently heard that border-radius was not supported in IE with eCSStender, and I’m wondering what all the hype was in the A List Apart article. It was billed as a simple solution to easily achieve CSS 3 compatibility, but if something as simple as border-radius doesn’t work in IE then what’s the point? There are other ways of achieving compatibility and eCSStender was not all it was made out to be in the article.

It was billed as the saviour to vendor prefixes and greater flexibility, whereas in reality it is none of these.

Not even a year since the last re-design, it’s that time again. Whilst I liked the previous design at the time, it wasn’t too long before I started getting the itch to re-do it again. I wasn’t entirely satisfied with the design after a while and recently found the time to re-do it again, keeping the same loose structure and style but updated slightly and less cluttered I think.

For a good while I wanted to include as much information as possible and the site didn’t always have room to breathe and there was limited amounts of whitespace, but this time I’ve tried to space things out better and provide more whitespace to display the most important elements of the site clearly. The same structure is kept as before but just slightly altered to show off the content a bit more.

The site is built using HTML5 and CSS 3 wherever possible  and as such looks better in the good browsers and should gracefully degrade in the not so good ones (hello Microsoft!). IE6 I didn’t bother wasting my time with this time, very few people visit this site using that browser and it wasn’t worth my time. Instead, I served it the excellent Universal stylesheet from Andy Clarke. The site works fine in IE7 and IE8 although it doesn’t have all the bells and whistles that it should have. I also upgraded to WordPress 3 and have been playing about with the new custom post types, I’m not quite there with it yet but should have them fully set up and working soon.

I also created a custom iPhone stylesheet which displays the site in a basic manner at the moment, which will improve over the next few weeks as I learn more about creating a specific iPhone stylesheet and improve on the usability and experience of viewing the site on an iPhone. At the moment, content is displayed but it needs more work to improve on the basic layout it currently has.

There’ll still be more improvements and tweaks to the site over the next few weeks as I don’t think it’s perfect and there are areas I need to work on, but I felt it was ok to release and work on the relatively small tweaks over time.

I’m currently in the process of re-designing this site and part of this process means updating it to utilise the latest HTML5 and CSS 3 elements where possible, and as a result of this I’ve used the time element in all dates such as post date and also other dates.

The format of the time element for dates is as follows:

<time datetime="2009-11-13">13 November 2009</time>

The datetime attribute has to contain an ISO 8601 date although the value can contain any date format you wish. When using this with the dynamic nature of wordpress, the following format produces a valid output for post dates:

<time datetime="<?php the_time('c'); ?>"><?php the_time('F jS, Y'); ?></time>

This will currently produce valid HTML5 and can be used in addition to “pubdate” to indicate that this was the date the article was published.

<time datetime="<?php the_time('c'); ?>" pubdate><?php the_time('F jS, Y'); ?></time>

Of course, time can be used elsewhere on the site where suitable, and in any string format you wish.

Having posted my thoughts on university before, both the good and bad points I was in two minds with what to do over the summer as the end of the educational year and holidays approached and I wasn’t sure whether it was worth carrying on or trying to seek employment within the industry.

I’d become disillusioned with university over the last few months as I felt the course had stalled slightly and I wasn’t picking up as much as I wanted to and felt that a lot of the content we were being taught had little relevance to the industry. (We were still told that table based layouts were acceptable on occasion). As the year finished I was still swithering as to what to do and decided that I’d decide over the summer as there was no immediate rush to make my mind up as the course doesn’t re-start until September but circumstances speeded that process up.

After a hectic couple of weeks, between completing the university year and everything that’s associated with that, I was offered employment with MTC Media here in Dundee and I was delighted to accept. My role is the front end development of websites and implementing the HTML/CSS/JavaScript, as well as designing and after four weeks of employment I’m really enjoying it so far. I’ve learnt a lot in the short space of time in my employment, from the mechanics of how a design agency operates to more technical aspects of coding and designing solutions for clients. Whilst I’ve designed and implemented several websites in the past, it’s much different now that it is my main job role and in a design agency, and I’m really enjoying it so far.

My knowledge is increasing all the time and at a much faster rate than it would had I stayed in education and for that reason I feel I’ve made the right decision.

Last week we had a visit from Rachel Andrew to university where she was to give a talk about The Web and The Future, and it was a good talk. She concentrated on the basics that are required to succeed in the industry, and made the point that we were ideally placed to experiment with the emerging specs of HTML5 and CSS 3 by using them on uni projects which provide a lot more freedom than client work. She explained the current state of the web industry and some of the exciting things which are in the near future such as improvements in typography, and advancements in other areas.

The talk was slightly delayed as over 100 folk turned up to hear her speak in a room with around 30 seats, so there was a slight delay as we moved into the main lecture theatre and Rachel did well to deal with the upheaval and still deliver a great talk. Speaking to a full lecture hall would scare the living daylights out of me!

It was good to see a leading name in the web industry up in Dundee and hopefully more will follow in time.

After my rant from the other week, where I questioned the benefits of continuing with my university career, I thought I would highlight one of the benefits of university and the projects that are required to be undertaken. Experimenting with new techniques and technologies can be beneficial whilst trying to get your head around things such as HTML5, CSS3 and jQuery for example. By having a clearly defined project on a university project that is not subjected to the same audience and restrictions as a “real-world” project.

Recently I’ve been working on a project which has allowed me to make use of a variety of HTML5 elements and also to use far more of the CSS3 techniques than I could get away with in a client project. Transitions and other experimental things such as background gradients can be used on more critical elements due to the nature of the project, whereas in a client site they should only be used on “extras” which were not design critical until the browsers have caught up with the specification.

Having these experimentation opportunities is critical for students as the techniques which are taught to us can often leave a lot to be desired (one lecturer still uses table based layouts!) and by carrying out some independent learning and having somewhere to experiment can be vital for any future employment opportunities. If a student is interested in gaining a career in web design, I also feel it’s important to have their own website which they can show off their skills and show any future employers that they are keen and have a genuine interest in the subject.

Students often suffer from a lack of experience and a limited portfolio when it comes to gaining employment but university projects can be beneficial as they provide projects with clearly defined goals and parameters. Whilst it’s good to create designs for fictional reasons and it can be extremely beneficial to practice design skills and play around out with the curriculum, it’s also good to work within the (sometimes painful) constraints of university projects.

Like anything, the more you practice then the better you will become at something and the same applies to web design, and students shouldn’t just wait for lecturers to hand out the work – they should create it themselves.