The post New Adventures in Web Design 2011 appeared first on Carron Media.
]]>We absolutely loved it from start to finish. Everything about the day way exceeded any expectations that we had and we came away from this amazing event with heads full of exciting new ideas and a heap of new industry friends.
In this brief overview, I’m going to focus more on our experience of the day as a whole rather than a review of each of the speakers, but I will list a few links to some great reviews that go into more detail of each talk at the end of this post.
The venue for the conference was the Albert Hall in Nottingham, which provided an ideal setting for the day (even though the seats started to get a bit uncomfortable after a few hours). I kind of knew what the basic format of these types of events would be like, but I couldn’t quite picture in my mind beforehand how the day would pan out and what usual information I would be able to bring back and use in our day to day work here at Carron Media. At first, I was a bit worried that we would miss the start as the queue was literally around the block to get in, but fortunately Colly delayed the start until everybody was in. Even with the delay, the whole event felt very professionally organised, but still keeping a personal, intimate atmosphere.
Probably one of the most amazing aspects of New Adventures was the price; we paid £80 each for an early bird ticket. This wasn’t just a bargain, it was a steal. The opportunity to hear some of the industries top speakers was worth way more than this alone and when you factor in that it included lunch (the now infamous ‘Lunch in a bag’ complete with mini-quiches) and a free bar at the after party, it becomes even better value.
For the event, Simon produced a newspaper full of unique content and interviews and both PDF and physical copies can be purchased for a little as £1.50 on their website, which is well worth it and I would highly recommend that you buy one!
When I first saw the list of speakers, the two that immediately sprang out to me were Andy Clarke and Elliot Jay Stocks, whom I have admired in the industry and learnt a huge amount from and they certainly didn’t disappoint. Andy’s talk was beautifully crafted and used similarities in old school comic strips to tell his message about using space on a website to give the reader the impression of timing and telling a story.
The talks started of brilliantly with Dan Rubin‘s “The New Language of Web Design” talk where he spoke about the language that we use and just how important this language is when dealing with clients. This was the ideal start as it got my head thinking straight away.
Jon Tan‘s talk “Language and the Lizard Brain” was a very interesting and thought provoking insight into how we can understand the emotions of users and use them to build better websites. The last talk of the day was from Brendan Dawes who’s highly entertaining talk focused on product design and his passion for stationary.
One thing that certainly resonated with me was the part of Tim Van Damme‘s talk where he detailed how it was our responsibility to pass on our knowledge back to the community. It was really reassuring to hear this as I learnt my way in the web business from the blogs and websites of other designers & developers and I think that it’s important that this trend continues. I can’t think of many of industries where this transfer of knowledge so openly happens and that makes us pretty unique.
I have to admit, I was initially expecting a bit more practical geeky stuff and perhaps some more code based tutorials form the talks, but as it turns out, I think all of the talks were way more useful and I’m glad that they weren’t all about code and design trends.
Even though the event was really well organised and the talks were inspiring and entertaining, there main thing that both Lou and I took away with us was the sense of being part of a community, even though we had only met everybody for the first time that day. As I said, I think that this is really unique and there aren’t many industries where we have the opportunity to talk to so many like minded people.
There are no ego’s or social hierarchies here, just lot’s of liked minded individuals who are more than willing to chat and share their knowledge with you. And you can’t beat that.
This really was a truly wonderful and enjoyable experience and I really want to thank Simon Collison and his team of hard working volunteers for putting on such a well organised event. It was so apparent that Colly put heart and soul into getting it right, and he did.
Also, thanks to all of the speakers for giving us a load of great talks and sources of inspiration. Although I’m risking sounding a bit cliched and over emotional, we’re can’t explain enough how much we enjoyed meeting so many new people and we are really looking forward to catching up with you all again in 2011 and beyond!
UPDATE: Read Lou’s review on her day out
The post New Adventures in Web Design 2011 appeared first on Carron Media.
]]>The post Why IE6 will probably out live IE7 appeared first on Carron Media.
]]>There are several well supported campaigns running in the web design community (and beyond) to bring the end to this life sapping browser. The most notable are the Death to IE6 and the Bring Down IE6 campaigns, both of which receive my full support for trying to change the web for the better. Most of the big names on the Internet are getting in on the action as well with Facebook and YouTube (amongst others) displaying messages to users who visit their sites using IE6.
However, a conversation with a old friend of mine brought me crashing back down to Earth and to remind me of the true reality of the situation. There are an extraordinary amount of web users out there who still have to rely on (through no choice of their own) the services of IE6 to provide them access to the Internet.
Why? Because the corporate networks on which the users browse through to 8 hours a day are still running IE6. For example – my friend works in the IT department of a fairly large law firm in London. They have spent the last 2 and a half years deploying Internet Explorer 7 to their users. The main reason for this massive project is the amount of bespoke web based applications that their business relies on to function. The money men of world don’t care if a users browsing experience is ruined by an out of date browser, especially when the bill to replace the old systems could run into the tens of thousands of pounds.
There is even more reason for large companies to stick with the old browser, Microsoft will still support Windows XP SP3 (of which IE6 is a supportable feature) via their Extended Support program until April 2014 – See Microsoft’s Windows XP: The facts about the future article and the Microsoft backs long life for IE6 BBC News report.
This notion of large companies sticking with IE6 is supported when we looked at some global usage stats for the different browsers. The W3Counter Global Stats site claims that in August of 2009, IE6 still held a 14.04% share of the global Internet browser market, while Hitlist market share stats show the August figure to be 25.25%.
Of course, every website is different. You (or your web developer) must all check your own site statistics to see what your percentage of your visitors are using IE6. If the numbers seem too big for you to ignore, then don’t ignore them! Using my friends company as an example again, their website statistics show that over 40% of their visitors are using IE6, and that doesn’t include their own staff! I can only imagine how many companies out there are in the same situation.
The moral of the story is this – for the majority of websites, IE6 is here to stay. If yours or your clients site stats suggest that your visitors are still using IE6, then you should support it. Simple as that. It’s your responsibility to provide as many of your visitors with the best possible experience when they visit your site. If that means spending those extra hours fixing the problems created by IE6, then so be it. The web, after all, is for everybody to enjoy.
What are your views on this? We would love to hear them. Please comment below and let us know what you think.
Thanks!
The post Why IE6 will probably out live IE7 appeared first on Carron Media.
]]>The aim of this tutorial is to show you how you can modify the standard Google tracking code using the power of jQuery to get extra information from your Google Analytics reports. With jQuery, we can get Google Analytics track your file downloads and clicks to external sites without having to trawl through your code and write any extra markup.
The post Extend Google Analytics with jQuery appeared first on Carron Media.
]]>The aim of this tutorial is to show you how you can modify the standard Google tracking code using the power of jQuery to get extra information from your Google Analytics reports. With jQuery, we can get Google Analytics track your file downloads and clicks to external sites without having to trawl through your code and write any extra mark up.
We are also going to use a new feature of Google Analytics which are known as ‘Events’. This should give you a good base for you to build your own code and extend the power of Google Analytics even more.
If you haven’t already, head over to the Google Analytics site and sign up for a free account. You will need to setup a Website Profile, which should be pretty self explanatory.
When you have your unique tracking code, either from your new Google account or from your current websites tracking code, take a note of the UA number, for example: UA-1234567-1. This is your unique identifier which tells Google what website to track and we will need it later on. If you already have the tracking code installed on your website, remove it now. Otherwise you could end up duplicating your stats!
Before Google released the new pageTracker._trackEvent()
function, we would use the normal pageTracker._trackPageview()
function. To make your external links and file downloads stand out from your normal page visits, you can pass this function a modified url. For example, say we wanted to track the download of a PDF called myfile.pdf. We would add a pretend folder in front of the file name. This folder may not exist on your site, it’s there so you can easily spot downloads in your Google Analytics reports.
We could call this function like so:
pageTracker._trackPageview('/downloads/myfile.pdf')
You may wish to use this method instead of the newer functions, it’s up to you. However, I would recommend that you take a look into the new functions as it allows you to track much more.
For more information about tracking events read, the Google Analytics Event Tracker Guide. You will see how flexible the new method is and you can expand on this tutorial to track other events on your website.
At present, the new event tracking function is still in beta on the Google Analytics site and not all accounts have access to view them by default. However, this is not a problem as you can add it in manually. When you are logged into your Analytics, type the following url into your browser: https://www.google.com/analytics/reporting/events. This will take you to events page. Once there, click on the “Add to Dashboard” button above the report and this will add the Events Tracking Overview section to your dashboard.
There are a couple options available to you when you load the jQuery code; you can download a copy from the jQuery site and call it locally, or as we will do, call it directly from the Google code library. For more information why this is the better way to load jQuery, read 3 reasons why you should let Google host jQuery for you.
In the <head></head>
section of your HTML, copy and paste the following code.
This load the minimised version of jQuery 1.3.2, which is the current verison at the time of writing, you may wish to check to see if there is a newer version available. For more information about jQuery, take a look at the jQuery Documentation.
Still in the <head></head>
, directly beneath the code we have just inserted, enter the following:
Again, the process is the same, but this time we are going to extract the file extension into a variable called extension
using yet another regular expression. If the link is an absolute link (i.e. it has the full http://www.mydomain.com/ in the file path), we removed the protocol and domain name as we don't really need this in our Google Analytics reports as we already know that the link is local to our site. Make sure you replace mydomain.com
with your own domain name.
Here is the code in full (with the gaps removed so it fits on the page better):
With the power of jQuery and the new Google ‘Events’, it is clear that you can take your website statistics further and produce more meaningful reports. This will help you gain a better understanding of how your website is being used and what your users and looking for, which can only be better for all concerned.
You can download the full code below, make sure you add in your own UA number and domain name.
extendga.js 1.62kb
Have you extended this code further? Have you found any other uses for the new Google ‘Events’? Perhaps you have written your own jQuery plugin with it. Please comment below and let us know, we would love to hear if you have found this useful in any way.
Thanks!
The post Extend Google Analytics with jQuery appeared first on Carron Media.
]]>I'm going to list a few of the more important tags here with some examples of their use. Hopefully this article will provide you with some guidance to why we should use them.
The post Under used HTML tags appeared first on Carron Media.
]]>I’m going to list a few of the more important tags here with some examples of their use. Hopefully this article will provide you with some guidance to why we should use them.
As the name suggests, the <address>
tag is used to display contact details of the author of a web page. This means that you can standardised the format of either yours or your users contact details to make them easily identifiable.
The important thing to note is that the <address>
tag is not limited to just a postal address, but you can include any contact details, such as a name, email, phone number, URL, etc.
For example:
Written by: Ian Harris
Email: info@example.com
Phone: 01234 567 890
Although the <address>
tag should be used where possible, that is a better alternative in the form of microformats. Take a look at the hCard Microformats wiki page for more information.
The <abbr>
and <acronym>
are two very similar tags that are used to provide the user with additional information about an abbreviated phrase. The <abbr>
tag is used to define terms such as CMS (Content Management System). The <acronym>
tag defines an abbreviated term as if it can be spoken as a word, for example Radar (Radio Detection and Ranging). These tags are incredibly useful because when the user hovers their mouse over the abbreviated phrase, the full defined description is displayed as a tool tip.
Here is the code for these two examples:
CMS
Radar
Hover over the following to see them in action: CMS and Radar
It is common practice to style these tags with a dotted bottom border so that users can identify that these tags have additional information attached to them:
abbr, acronym {
cursor: help;
border-bottom: 1px dotted #000;
}
Another good reason for using these tags is that they are used by screen readers and search engines to draw extra information from your content. This helps you to create accessible and search engine friendly content, which of course is what most of us are trying to achieve.
The <cite>
tag is used to indicate a citation and allows you to reference the source of information. This tag is probably most commonly used in conjunction with the <q>
and <blockquote>
tags as it allows you to specify the source of the quote.
As with the <abbr>
and <acronym>
tags, you can add the title
attribute to display some extra information when the user hovers their mouse of it.
For example:
O Romeo, Romeo, wherefore art thou Romeo? - William Shakespeare
O Romeo, Romeo, wherefore art thou Romeo?
– William Shakespeare
It’s worth pointing out that the <q>
tag has only just been supported by Internet Explorer in version 8.
The <del>
and <ins>
stand for deletion and insertion respectively. It’s quite common these days for an author to show the end user where content has been edited after it’s initial publication, especially when the content can be updated by more that one person. The <del>
tag will add a strike-through to it’s contents, where as the <ins>
will add an underline.
My favourite type of music is rock reggae.
This is displayed as: My favourite type of music is rock reggae.
You are no doubt aware of the <ul>
and <ol>
tags and their uses, but there is another list called a definition list which looks like <dl>
. In the traditional sense, this type of list should be used if you create a list of definition terms with associated descriptions. However, W3C list specification seems to indicate that you can use the <dl>
tag to list any terms where there is a direct relationship between them.
The <dl>
tag has two child elements which are <dt>
and <dd>
which stand for definition term and definition definition. There can be multiple <dd>
tags associated with each <dt>
.
For example:
This is displayed as:
The final two tags in this list are subscript, <sub>
and superscript, <sup>
. The same results can be achieve using CSS, but whats the point when you can use these two built in HTML tags.
There usage can be seen in the following examples:
The chemical formula for water is H2O.
The chemical formula for water is H2O.
Today is the 12th April.
Today is the 12th April.
In reality, you may rarely use some of the tags listed above. However, you should definitely keep them in mind and make sure you use them correctly when the need arises. The key to writing semantic code is to use the correct HTML tags for the correct application.
Semantically written code will help you product search engine friendly and accessible content, which after all, is what we should all be doing.
The post Under used HTML tags appeared first on Carron Media.
]]>The post 5 Simple but useful JavaScript snippits appeared first on Carron Media.
]]>
This snippet will take the user back to the previous page that they have viewed. Pretty much like the standard browser back button really:
Previous Page
I’ve read quite a few mixed opinions about adding a link that allows users to print the current page. Some developers think that their users will already know how to print the page using the browsers toolbar and don’t need us cluttering our pages with unnecessary links. Others believe that we should make it easy for the user and remind them that they can print this content if they so wish. I am with the latter, but whatever your opinion, here it how you add a print link:
Print
On occasions, you might need want to give the user the option to easily close the current browser window. For example, you have created a CMS that uses pop-up top display information. This snippit will close the current browser window (or tab):
Click to Close
If you are asking the user to perform a certain action, like deleting something, you can prompt them to confirm that they definitely want to go ahead. This snippit intercepts by prompting with a Yes/No box and a message of your choice. If the user selects Yes, it will carry on to the URL in the link. Selecting No will just cancel the action.
Delete
Sometimes you may link to images that are hosted on other domains, such as photos in your Flickr account. As this is external, you cannot guarantee that this content will always be available and if the site hosting the image was to go offline, you would be left with that nasty red cross that gives the impression that you don’t look after your site. The snippet below will display a default image if the external image is unavailable (obviously, you should only link to images where you have permission to do so, nobody likes a bandwidth thief).
I hope these are useful to you, they have certainly helped us. Thanks.
The post 5 Simple but useful JavaScript snippits appeared first on Carron Media.
]]>The post UK Postal Counties List appeared first on Carron Media.
]]>You can see how it is easy to get it wrong though, take a look at the Wikipedia list of UK counties. The list of counties has changed quite considerably over time, especially in Wales.
As we were only interested in postal addresses for the web form, we decided it would be quicker and easier to compile our own list using the postal county data in this Wikipedia article. So here is a zipped file containing the HTML list as well as a XML list we created of the current UK postal counties. We hope this helps you out in some way. It may be worth just keeping these lists on file somewhere, you never know when you may need them.
UKCounties.zip 1.55kb
The post UK Postal Counties List appeared first on Carron Media.
]]>Sometimes, however, it might be necessary for you to create a RSS feed yourself. Perhaps you have just won a new client who's current site has a old bespoke CMS which they like and want to keep, but you want to be able to publish their updated content via RSS. Hopefully this tutorial will help you to achieve this.
The post Create an RSS feed with PHP appeared first on Carron Media.
]]>Sometimes, however, it might be necessary for you to create a RSS feed yourself. Perhaps you have just won a new client who’s current site has an old bespoke CMS which they like and want to keep, but you want to be able to publish their updated content via RSS. Hopefully this tutorial will help you to achieve this.
RSS, in its current form, stands for Really Simple Syndication and is a family of web formats to publish frequently updated content. The RSS Feed (as it is commonly known) can then be read by the users feed reading software or by another website which wishes to ‘syndicate’ the content of that feed.
The RSS format is based on XML that is built using standardised tags. Here is an example of a basic RSS document, we will be generating something similar using PHP later in this tutorial:
My RSS feed
http://www.mywebsite.com/
This is an example RSS feed
en-us
Copyright (C) 2009 mywebsite.com
-
My News Story 3
This is example news item
http://www.mywebsite.com/news3.html
Mon, 23 Feb 2009 09:27:16 +0000
-
My News Story 2
This is example news item
http://www.mywebsite.com/news2.html
Wed, 14 Jan 2009 12:00:00 +0000
-
My News Story 1
This is example news item
http://www.mywebsite.com/news1.html
Wed, 05 Jan 2009 15:57:20 +0000
Take a look at the RSS Wikipedia page for a full history of RSS and it’s various different versions.
As we know, RSS is made up of standardised XML tags which you would normally find in a flat XML file. What we are going to do is create this standard XML data dynamically using PHP. This means that the URL for our feed will end with the .php extension, but we will tidy this up later in the tutorial.
So, lets start building the PHP script. The first thing we are going to do is tell PHP what type of data we would like to output (I am going to break each section of the script down, but I will include it in full at the end):
The header()
function that we have called is telling PHP to output our data using the XML MIME type as well as to use the ISO-8859-1 character set. This makes sure that our content is delivered to the users in the correct format.
Now we are going to define our database connection details and create the header XML tags for our RSS feed. I'm going to statically assign the feed information tags just to keep it simple, however, you may wish to expand on this to dynamically set these. That way, you can re-use this code as a function or even go a step further and use it to build your own PHP class. The actual feed data will be kept in a variable called $rssfeed
.
DEFINE ('DB_USER', 'my_username');
DEFINE ('DB_PASSWORD', 'my_password');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'my_database');
$rssfeed = '';
$rssfeed .= '';
$rssfeed .= '';
$rssfeed .= 'My RSS feed ';
$rssfeed .= 'http://www.mywebsite.com';
$rssfeed .= 'This is an example RSS feed ';
$rssfeed .= 'en-us ';
$rssfeed .= 'Copyright (C) 2009 mywebsite.com ';
Next, we need to extract our data by looping through our MySQL database to create the <item>
tags. I'm not going to explain this part in too much details as it's not point of this tutorial and you may do this differently. We are going to assume that our MySQL table ("mytable") has columns called title, description, link and date which hold the relevant data:
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD)
or die('Could not connect to database');
mysql_select_db(DB_NAME)
or die ('Could not select database');
$query = "SELECT * FROM mytable ORDER BY date DESC";
$result = mysql_query($query) or die ("Could not execute query");
while($row = mysql_fetch_array($result)) {
extract($row);
$rssfeed .= '- ';
$rssfeed .= '
' . $title . ' ';
$rssfeed .= '' . $description . ' ';
$rssfeed .= '' . $link . '';
$rssfeed .= '' . date("D, d M Y H:i:s O", strtotime($date)) . ' ';
$rssfeed .= ' ';
}
$rssfeed .= '
The first part of this section connects to the MySQL database using the constants which we defined at the start of the script. Then we perform a basic SQL query to pull out all our data from the database in date order. The final part of the query, DESC
, ensures that the newest content will appear first in the users RSS reader.
Next, we look at each row of data from the results of the query using a while
loop. In each loop cycle, the first action performed is the extract()
function to create a set of variables that take the name of the columns of the database, in my case $title
, $description
, $link
, and $date
. We then add the data contained in these variables to our main $rssfeed
variable. When it reaches the final row of data, the while
loop ends and we apply the closing XML tags.
The final step of the script is to actually output the data we have collected. This is simply done by echoing the $rssfeed
variable. Here is the code in full:
';
$rssfeed .= '';
$rssfeed .= '';
$rssfeed .= 'My RSS feed ';
$rssfeed .= 'http://www.mywebsite.com';
$rssfeed .= 'This is an example RSS feed ';
$rssfeed .= 'en-us ';
$rssfeed .= 'Copyright (C) 2009 mywebsite.com ';
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD)
or die('Could not connect to database');
mysql_select_db(DB_NAME)
or die ('Could not select database');
$query = "SELECT * FROM mytable ORDER BY date DESC";
$result = mysql_query($query) or die ("Could not execute query");
while($row = mysql_fetch_array($result)) {
extract($row);
$rssfeed .= '- ';
$rssfeed .= '
' . $title . ' ';
$rssfeed .= '' . $description . ' ';
$rssfeed .= '' . $link . '';
$rssfeed .= '' . date("D, d M Y H:i:s O", strtotime($date)) . ' ';
$rssfeed .= ' ';
}
$rssfeed .= ' ';
$rssfeed .= ' ';
echo $rssfeed;
?>
I mentioned earlier that I would tidy up the .php extension of the feed. I don't know about you, but I find this a little bit ugly. When you see RSS feeds that have been generated by WordPress for example, you don't see the actual file name, you just get the containing folder. To do this, create a folder in the root directory of the site and call it 'feed'. Create a file in this new folder called 'index.php' and copy the code above into it. This leaves us with a nicer looking feed URL, in the case of this example, http://www.mydomain.com/feed/.
It really isn't that necessary to tidy the feed URL, but I think it just looks a little neater.
Now that you have created your feed, you can link to it from your site or publish it using a service such as FeedBurner. But there is an extra step which will allow your visitor's browsers to automatically detect the RSS feed on your site. In the <head>
section of you pages, include the following tag (obviously changing the URL to your feed):
Thanks for reading, it's the first tutorial we have published and we hope it helps you out in some way. Please leave a comment below, we would love you hear what you have to say.
The post Create an RSS feed with PHP appeared first on Carron Media.
]]>