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.

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.

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.

Recently I’ve been working on restoring a WordPress blog back to health after it was compromised, and after performing an upgrade to both WordPress itself and all contributed modules, I used the excellent WordPress Exploit Scanner to identify errors and inserted code within files, and it was able to identify that a malicious php script was inserted into the first line of almost every plugin file.


< php
eval(base64_decode("dfslgdgdfgdg...................")
?>

In order to restore the blog back to full working order it was necessary to remove this line from each file, and with there being over 20 plugins this was going to be a lengthy process. Fortunately by deleting the plugin and uploading a newly downloaded version this saved trawling through each file to remove the malicious code.

This was the first time that I’d used the WordPress Exploit Scanner but I will definitely keep it in mind for the future, both when there is a specific problem and also to check the health on any WordPress site.

After just completing my first Drupal theme created from scratch, it was a big learning curve trying to style certain aspects of the content, especially some of the Views generated content but that’s a discussion for another day. Wrestling with the different settings and style sheets included with modules took a bit of time and although it’s only a basic theme, I  was quite pleased with it. After completing this and fighting with the code to a certain extent, I was curious what changes would be made to theming in Drupal 7 after the involvement of Mark Boulton and the whole D7UX project.

I only downloaded the Drupal 7 Alpha at the weekend so not had much of a chance to have a really good look around but first impressions indicate that the code has been cleaned up a lot since Drupal 6 which should certainly make it easier for designers/themers to create beautiful and custom designs. I think one of the major things which has held Drupal back in comparison to other systems like WordPress and Expression Engine is the lack of high quality themes for Drupal, and there seems to be a barrier for non-developers within the Drupal community and a lot of designer v developer debates going on, but that’s for another time.

One of the best additions was the stark theme which is almost totally devoid of CSS which helps when installing modules to determine their included CSS and see the CSS easier. Having this is a great help as one of the things I found difficult at times was altering the module’s CSS and by removing this it will certainly make this process easier in development.

As a result of this, I’ve decided to alter it slightly and remove even the basic styling that it has and also conver this theme to HTML 5 in order to have as clean an install as possible for creating themes in the future. I’m hoping that once I’ve completed it I’ll be able to release it for others in the near future, which should give me incentive to make it as good as possible.

There’s always been a debate within the web industry about whether it’s better to gain a university education or to gain a job within the industry in order to build up a portfolio of work and experience. Having been at university for just over a year and gaining work experience at the same time, I can see both sides of the argument. Whilst I’m enjoying my time here, there are areas where the course could be significantly improved, with the latest set of modules described below:

Web Standards:

This module was essentially all about valid code and practices for accessibility and usability, all basic and essential things to know for any web designer/developer. I had a slight advantage for this module having known a lot of the areas discussed previously and knew all about the table layouts v CSS layouts and validators etc. However, it baffles me why this module wasn’t delivered in first year instead of the HTML module we had to endure with the tutor telling us that inline styles and table layouts were still ok to be used if we wanted.

MultMedia:

This module was all about Flash and ActionScript 2.0, which although useful and good to know it is not something that interests me at all and do not enjoy Flash work at all. The module is called Web MultiMedia but rarely ventures out of Flash and there is a lot more to multimedia on the web than that.

With the emergence of HTML 5 and the video and audio tags coming into effect within browsers, this could be a new era of multimedia embedded into sites but this has not been mentioned at all. The emergence of web apps such as Spotify etc have changed the way music is consumed on the web, and the Kindle has changed the book industry and popularised e-books.

Designing Interfaces:

This module was interesting and probably the highlight of the semester, with a lecturer who knew his subject and was passionate about it certainly helped. A lot of theory was introduced to the way that interfaces are designed and considerations were analysed in order to produce the most effective and attractive interface.

The highlight of the semester for me.

Law:

We had to endure a law module which was interesting, but too generic to really get me interested. The area of contract law is obviously essential to the industry as a key area is the relationship between client and designer and a good solid contract is key to this relationship. However, there was no mention of intellectual property or other law specific to computing and the internet which was a disappointment as this would have been more relevant and interesting.

The current semester has just started this week and new modules include Web Scripting, Marketing and Information Design which has the potential to be an improvement on the previous one. This post has turned into a bit of a rant about the failings of the course, and although it’s not all bad, I can see why people skip the university route and head straight for industry.

Photo Credit: Yellow Arrow

Over the past few weeks I’ve been reading more about HTML 5 and CSS 3 and how the respective specifications are progressing, and beginning to experiment with a lot of the new elements and selectors available. Although a lot of the new elements and ways to markup a site are not production ready, I’ve been working on a university project which allows a lot more freedom to experiment and as such I decided to mark up the entire site with HTML 5 and to also use a number of CSS 3 selectors where appropriate. Having read a lot about these new technologies, this represented the ideal opportunity to begin using the things which I had read about.

HTML 5:

Much has been written about HTML 5 and is now at a point where it is being used more and more in production sites, with browser support improving all the time (except IE of course!). I first heard of the new HTML 5 spec about a year ago when the first “2022 rumours” came out and I was a bit confused about the timeline and the development progress. However, over the past year it has come a lot more popular and the record was straight on the 2022 date. At FOWD Glasgow I was lucky enough to hear Bruce Lawson speak about HTML 5 and how it was being developed to be used now, and taking the things that we all do on a regular basis and streamlining these tasks. HTML 5 is designed to be used now, and as browser support increases it is becoming more widespread.

One of the first noticeable things about HTML5 is the Doctype, and how simple it is in comparison to the HTML 4.01 and XHTML 1 doctypes, which simplifies things a lot and this sets the tone for the rest of the page as I feel in general that markup is a lot cleaner by making use of the new elements such as section, article, aside etc reducing the number of divs used within a page.  Although the canvas element has got a lot of attention for some of the exciting things now native to the browser, but I found the video element a real treat to use and certainly cuts down on the amount of markup needed to embed a video into the page, which is not as big a problem as it once was. The only code required with the new video tag is:

<video width=”280″ height=”160″ poster=”img/roll.jpg” controls autoplay>
<source src=”video/roll.mp4″ type=”video/mp4″ /> <!– MPEG4 for Safari –>
<source src=”video/roll.ogg” type=”video/ogg” /> <!– Ogg Theora for Firefox –>
<img src=”img/roll.jpg” alt=”Our Famous Ham &amp; Cheese” title=”Our Famous Ham &amp; Cheese” />
</video>

The reason there’s two sources is that Safari and the Webkit browsers support the mp4 codec whereas Firefox and the Gecko based browsers only support the ogg codec. There is a debate ongoing at the moment at getting an industry wide codec supported to make life easier but I think there’s a way to go yet on that issue. After declaring the sources, it’s important to add an image or other fallback content for browsers which currently don’t recognise the <video> tag – I’m looking at you again IE!

That’s just one of the new tags available and there are a wide range of HTML 5 resources available to keep up to date with the development specification and techniques including:

• HTML 5 Doctor
• Bruce Lawson
• HTML 5 Gallery
• W3C Differences document
• WHATWG Current Working Draft
• A List Apart Article

I’ll post up the results of my HTML 5 experiement once it’s completed, which is a university project based around a sandwich shop and Coldfusion.

CSS 3:

As well as using HTML 5 for the firs time in earnest, I also used the opportunity to make use of some CSS 3 techniques for the first time and there is some exciting developments in this area which cut down the amount of CSS and styling needed. With the new specification techniques such as rounded corners, gradients, drop shadows and font embedding become much easier. The @font-face attribute has been around for a while but has become a lot more popular recently, as has the issue of fonts on the web with the emergence of services like Typekit and Fontdeck.

Rounded corners, drop shadows and gradients have been a popular “Web 2.0″ look for a while now but with CSS 3 these techniques are made much easier. In order to achieve fully rounded corners, it hasbeen known for up to 9 different images being used to achieve, however with the border-radius attribute it’s possible to achieve this with pure css. Although not an official attribute at the moment, it almost certainly will be and can be achieved at the moment with browser specific attributes such as -moz-border-radius and -webkit-border-radius. As ever, IE lags behind with no support for the border-radius element at all.

CSS backgrounds are set to change dramtically with support for multiple backgrounds and the use of rgba values offering new ways to set backgrounds via CSS. Currently, only Safari supports multiple backgrounds and if applied, all other browsers won’t see any background image so it’s not production ready at the moment but I don’t think it will be long before it becomes adopted in other browsers. The other change to the background element is the ability to set colours using rgba values to define the colour and opacity of a background. Drew McLellan kicked off this year’s 24Ways with an excellent article on the use of rgba values, and I’ve used rgba to create some semi transparent background in my university project, which negated the need to use transparent pngs andreduced page load for the user.

LIke HTML 5, we’re just at the beginning of  being able to use CSS 3 and whilst there’s not a huge amount of support available it won’t be too long before there is and will make coding beautiful sites that bit easier.

Once my university project is finished, I’ll post up a link and a description of the techniques used.

Having installed Drupal a fair number of times now, I’ve got into a routine of essential things that I run through for each and every project regardless of the details of that topics, things that are generic to any Drupal installation and thought I would share them here. These are the same steps that I go through each and every time, before adding the project specific modules and functionality etc.

1. Enable Clean URLs

Clean URLs removes the horrible “?q=” from the urls generated by Drupal when creating nodes, and makes the nodes easier to remember and more SEO friendly. When used with the path auto module it enables very clear and SEO friendly page paths.

2. Create an Admin Role

By default, Drupal is installed with two user roles, anonymous and authenticated users. This allows permissions to be set for visitors to your site and people who have registered to be a member. When the installation process is complete, you’re logged in as user 1 which is the only user with permissions to perform certain tasks such as running update.php and other admin tasks. It’s much more secure to create an a new role called adminstrator or something similar and grant it permission to do all the tasks that user 1 can do, and only log in as user 1 when running update.php etc. This also gives the opportunity to grant other users access to the administration pages whilst still maintaining control over the site.

3. Essential Modules

Like other CMS’, there are essential modules which are used on 99% of sites, regardless of the type of site. There are certain bits of functionality which are almost like an extension of core as they are used that often. The modules I find myself installing time after time include:

• CCK
• Views
• Admin Menu
• Page Title
• Path Auto
• Devel
• Advanced Help
• Date
• WYSIWYG & Editor

4. Install Themes

Like the Modules, there are themes which I install in every fresh Drupal project which are the RootCandy theme and Framework. RootCandy I use as my adminstration theme and for entering content on sites as it provides an excellent UI for this task and much better than the default Garland theme. As a designer, I like the Framework theme as a starting point for my custom themes as it strips out a lot of the styles and leaves me with a blank canvas so to speak from which to create themes.

5.Configuration

Once all these modules and themes are installed and enables, I always take the time to configure them all correctly as well as adding any other user roles required such as Editors, Forum admins etc. It’s much easier to set all these up right at the beginning before any content is added especially when configuring modules such as the page title and path auto modules.

With CCK and Views, I always have a plan written down of what content I require and the fields that will be needed as well as all the views which will need to be created before I begin implementing them within Drupal.

Does some of this look familiar? Do you have any other essential steps that you run through before creating a new Drupal project? Let us know in the comments below and we can all learn from each other.

You may have noticed a small grey box saying “Fonts from” in the bottom right of your browser window, which links to a page describing the fonts which are used on this site. This is part of the new Typekit service, which is able to implement a wide range of fonts into a website, giving designers more varied options when picking an appropriate font.

Traditionally, the “safe” fonts to use have been limited to a small number of common fonts which are installed on the popular operating systems, namely Mac OS and the Windows systems. Websites use the font files on the user’s machine, which lead to designers using the “font-family” attribute to display the fonts that they wish to use on the page, and due to this restriction the number of fonts were limited to these few common fonts. Recently, a technique referred to as @font-face enabled designers to upload fonts to their servers and link to them, which enabled a wider range of fonts to be used on websites. But the main problem with this solution was that not all fonts were legally allowed to be used by this technique, and also it was very easy for people to look at the source code and then download the font for themselves. This meant that even if it was legal for a paid font to be used with @font-face, it could be illegally downloaded very easily.

Typekit however is a new approach entirely which has the backing of the major font foundries and uses some JavaScript to display the fonts onto the site, meaning that fonts are not stored on the site server and can’t be illegally downloaded. This approach is more appealing to the foundries as they are able to have more control over their fonts, and the subscription plans mean that they will get a financial reward for their efforts.

Typekit is still in an invite-only beta phase and after attending FOWD Glasgow, I received an invite last week and subsequently signed up for the free subscription and so far I’m impressed. It’s so easy to use, there are a wide range of few fonts even on the free package, although this number will increase in the paid packages. In order to use the service, a user just has to login and create a “kit” before browsing the available fonts to add to that kit.

Once the desired fonts have been added, and it’s possible to add several fonts to each kit, the user is given or can select CSS classes which the fonts will be applied to before inserting these into the site code. After adding the 2 lines of javascript to the page header which applies the fonts then that’s it complete and the new fonts are added to the page. As these are alternate fonts, by still using the font-family and @font-face attribute then non-JavaScript users will still see an appropriate font and their experience will still be attractive.

The only slight notice is that on the free account it’s not possible to remove the badge that can be seen, and there can be a slight “flicker” as the original fonts are loaded and then the Typekit fonts are added in later, although it’s only a split second and certainly worth it for the benefit that it brings.

Overall my first impressions are very good and will consider upgrading to one of the paid accounts in time and once it is worthwhile for me to do so.