May 1st, 2010
It’s official, Flash is dead! Microsoft have effective killed it by siding with Apple, and dropping support for Flash video in its new, soon-to-be-released browser, IE9 (http://bit.ly/cxuVRM).
Along with Apples iPod Touch, iPhone and iPad devices, this has effectively made Flash a technology without the vast majority support it has relied on to dominate the web video market.
So will we mourn it’s loss? Well I’m sure Adobe are in crisis, but the ones I feel most sorry for are the Flash and Flex developers, who are now in a position that they are likely to have to retrain fast. As for the technology, it seems like flash was becoming an unacceptable combination of security nightmare, resource hog and accessibility nightmare.
There are many clouds in this silver lining though. Many sites will now need to start shifting over to html5, css3 and javascript rather than using flash. This gives an opportunity for designers and developers to have massive increase development over the next few month to a year.
The other upside is of coarse the possibility that Flash is the killer app., and that lack of support in IE9 will finally drive people to Firefox and other alternative browsers. My feeling is though that this is just the start and we’ll now see other browsers following suit.
What are your thoughts? Do you a Flash site that you feel can only be made with Flash, or are you happy to let it go?
Posted in Flash, General, Marketing, Web desvelopment, usability | No Comments »
April 23rd, 2010
So you have a big presentation tomorrow and you really need to get it slick and smooth but you just have one night to do it in.
You could spend the night rehearsing and going over the slides to make sure you know exactly what’s coming up. I’ve got another suggestion for you, and this one will make your presentation really sizzle. Spend a bit of time with your kids!
At this point you probably think I’ve totally lost it, but let me explain why spending some quality family time can be good for you and your presentation. I promise I’m not going to hit you with any new age relaxing stuff either, although there is something to be said for relaxing and getting some sleep before the big day.
Ok, so enough dithering, how can spending time with the kids improve your presentation? Simple, you are going to read them their bedtime stories and in doing so you will improve your presentation skills no end.
Reading to children is the ideal practice for presenting in a way, that will keep your audiences focus on you.
Pick a good book with good guys and bad guys. I like something like Narnia, Harry Potter, Septimus Heap and the like. Then when you read put some emotion into it. Change the volume, pitch and pacing of your reading to match the story. Your kids will tell you when you are getting it right by giving you their full and undivided attention.
When you have finished reading, go back to your presentation and think how you can use the same techniques when you present that. You might even like to write comments about how you present on the slide.
When you get to work and make your presentation, use these techniques and you will see that your colleagues and customers will respond so much better to even the driest of subjects. You are showing passion, and that in contagious!
The final benefit is of coarse that your kids will love it. Not only will you be spending time with them, but it will be time they will enjoy.
What more can you ask for, a great balance between home and family.
Tags: presenting presentation family kids work
Posted in General, Marketing | No Comments »
April 20th, 2010
In the previous post we looked at picking the social media to use to integrate into our website. In this case we decided on: -
We also have a WordPress based website for articles and contacts.
So now we have decided on our sites, how are we going to get everything linked together?
In this case one of our main objectives was to make the site easy to update, so a lot of our strategy was based on making sure that we took the easiest possible route to add or update any content. This content should then flow to other areas that may need it. The easiest section to visualise this on is photos: -
Photo Flow
Photos are required to be distributed quite widely so need to appear on Flickr, Facebook, Twitter (via a link) and the website. The easiest place that you can combine all these together, and is easy to upload to, via a simple email, is Flickr. Flickr will allow us to push content into all the other sites.
The way we can organise this is that all the distribution is in parallel. However that does give us the problem that Twitter posts (tweets) will appear in Facebook and the website alongside the photos coming in through other means. In this case we are going to let this go, as twitter posts don’t include the actual photo, just a link to it.
Rather than individually looking at each type of content, I have mapped them all below. If you have any questions, feel free to ask them in the comments.
The only thing that may be new in this map is that I have also added a link to Google Analytics. This provides data on the visitors to the website, but isn’t social media.
The next post concentrates on what we needed to be pushed through from each site and how we made all these connections.
<<< Part 2
Posted in Uncategorized | No Comments »
April 15th, 2010
This second post concentrates on selecting the right social media websites for the client, and how to try to ensure that traffic to their main site is maximised.
As I mentioned in the last post, my client in this case is an actor and the site is designed to both help him get new work, and to chat with his fans.
Firstly we looked at what type of content he was going to be able to put up on the site. In this case we came up with: -
- Video of his acting gigs and profile videos
- Photos, both as screen captures from his acting roles and profile pics that he has done
- Status updates from Facebook (he is on Facebook pretty much every night)
On top of this, I added Twitter as the ideal way to post messages while he is working on a set, and blog posts for longer stories he writes about some of the funny things he gets up to.
A Bit of Background on Twitter & Facebook
If you don’t move in web circles you will still probably have heard of Twitter and Facebook, but just to give you a bit of background: -
- Facebook – currently the largest social media website in Australia and the world. This is typically a closed system where only people you specifically allow, will be able to see your content (although Facebook is trying to change this). Facebook is most often used to connect friends that may have drifted apart, but is also used as an online meeting place for like minded people.
- Facebook Fan Pages – These are special Facebook pages that are open to outside searches and can be accessed by anyone. People can post comments, photos, video, events and more. Once you have a certain number of followers, you can also get a custom URL. In our case we got http://www.facebook.com/frankieoatway so it is nice and easy to remember.
- Twitter – the current darling of the social media world, news and tech community, where twitter usernames are now the de facto name badge. Twitter allows you to post short messages of 140 characters or less that say what you are doing there and then. They can be sent via the Twitter website, many phone applications and even SMS. These are great for very quick messages posts and are totally open to searches and casual visitors.
Both of these sites are great community builders and can drive a lot of traffic to a central location if you provide links to good content on your own website.
Having taken care of the text based social media, we need to look at blog posts, which is almost the same, but longer!
Blogging
Blogs started off as ‘web logs’ which were basically online diaries, but have evolved to cover pretty much anything up to very large news organisations. The great thing about blogs is that they are easy to update, and Google loves them as content is always being refreshed.
There are various blogging platforms including Drupal, Joomla, Squarespace to name just a few, but the 500lb gorilla is WordPress.
I have to admit that I am a WordPress fan, it is very easy to post to via the web, email or iPhone apps, you can set up static pages and there are 1001 plugins to add functionality to the system. It’s also free, and easy to install (many hosting companies will install it for you). You can also buy or create themes that customise your sites look and feel to just the way you want it.
As we were going to have our own hosting and URL (http://www.frankieoatway.com), WordPress seemed an easy choice to make. This was particular because of the ease of posting and changing content for the less technically minded, but also because of the links that can be set up to social media sites, and the text (RSS) feeds it produces that can be used in many other ways.
So we seems to have our text based information published. Next we look at some of the other media we need to incorporate.
Photos
The next content type we had to look solve was how to spread photos around the other social media properties, and back to the main WordPress website.
There are quite a few choices here, but sticking with the big boys, you have Flickr (owned by Yahoo) and Picassa (owned by Google). Both of these allow you to upload photos, organise, distribute and even edit them.
This was a difficult choice I have to say, but in the end I went with Flickr, probably because I am more familiar with it, but also because they have a very simple uploader I can just put on my clients computer.
Video
Video was an easy choice. Youtube has the widest reach and is easy to use. Setting up a channel also makes sure your video is collected together. The downside is in this case is that videos are limited to 11 minutes long, and in our case, that has meant we will also need to look at other channels such as Vimeo for short film releases.
Keeping It Together
When setting up these sites it’s important to try to keep things together, so that you have a consistent brand image across all the media you use. In our case we have used the same profile photo, same bio info and have managed to get the same url for all of the sites. That makes it really easy, as you can pretty much type in the URL knowing what you are going to see and once you land on the page the right person is confirmed by the profile photo.
In our case we were lucky as Frankie Oatway is not that common a name. We managed to get: -
As you can see we have consistent branding to avoid confusing messages to people who may want to see Frankies site.
The next post concentrates on how we planned to connect the sites so that they all talk to each other and updating one will trickle down into the other sites when and where we want it to.
<<< Part 1
Part 2 >>>
Tags: integration, Social media, website
Posted in Marketing, SEO, Social media | 1 Comment »
April 10th, 2010
This is the first in a series of posts looking at how social media can be integrated into a website, what advantages it has and why you would do it for particular clients.
I recently put together a website which integrates a clients site requirements, with social media such as:
- Facebook
- Twitter
- Flickr
- YouTube
These posts are a summary of what I have learned along the way. They include a summary as possible of my thought process, planning and how I implemented the integration.
Why Integrate Social Media into a Site
There are many reasons why you might want to integrate social media into a site including:
- To take advantage of existing community you have developed – This depends on whether you already have an active Facebook or Twitter following, for example. Taking advantage of these existing friends/followers can help drive traffic and interest in your site.
- To improve the visibilty of your site to search engines – Often getting a new site in front of Google can be difficult. However, Twitter and Facebook Fan Pages are being spidered by Google all the time, so links from these sources will help get your site initially spidered. The other factor is that creating these pages will get you inbound links to your website which will help with your ranking. How much it helps, coming from a social media site, nobody knows, but I’m guessing that the more followers/fans you have the better, and the more specific your discussion the better.
- To spread your content as widely as possible – One of the biggest problems I see is people with good content, but just not getting it out in front of their audience. By distributing your content as widely as possible you increase the chance that your content will be seen, your site linked to, and your product or service bought. This takes a bit of a leap of faith from marketers more used to control of their information stream, however structuring your content appropriately makes sure your name is out there, and that you are not annoying your readers/viewers.
- Ease of use, for a client used to social media sites – I threw this one in there because it is increasingly the case that clients, who may not know how to drive a websites CMS system, do know how to use Facebook and Twitter. By integrating these into your site, the page stays current, Google spiders it more, and there is also often more topical interest from clients.
There are more reasons than I have here, but hopefully this will be enough to get you thinking!
Case Study
In the case I’m going to look at, my client is an actor, Frankie Oatway, who’s career has all of a suddenly taken off after a move from England to Australia. He is a big user of Facebook with quite a few followers, but had never had a website before and wanted to keep everything as simple to manage as possible.
As an actor he was looking to develop fans, but was also looking to show his work as widely as possible to attract casting agents and may potentially release short films on the web.
In this case it was very apparent that Frankie was the brand, he is full of life and a really nice approachable guy. Social media was the therefore key to get his content in front of as many people as possible along with links back to his site (ideally with a high ranking in Google, for his name) so that agents could find and contact him should they need to, and fans could just have a chat with him.
The next post covers how we decided which social media to use and how we should develop his site.
Tags: add, integrate, integration, site, Social media, website
Posted in Marketing, SEO | 2 Comments »
April 10th, 2010
Ok, so this is a strange one, but I spent a lot of time looking for just the right brick texture for the background of a website. If you need to do the same, I thought this might save you some trouble.
Tags: background, brick, texture
Posted in General | No Comments »
November 26th, 2009
Just a short post on the use of navigation in banners. This was after one of my clients made the very valid point that they looked intrusive. I restyles the navigation to small squares which hopefully solved that but thought that my ideas on why banner navigation is a good idea might be interesting: -
- The banner provides a highly visual view of a product or service which is likely to catch the eye of a casual browser.
- If the banner changes while they are reading it and deciding whether to interact with it you have a problem that they would have to wait for the cycle to come round again. In practice they never do! They either look for what they are interested in elsewhere in the site or forget about it and go elsewhere in the site or to another site.
- In any of the cases above, you have missed the opportunity to interact with the client on something that has interested them, when they are interested in it, and may therefore have lost them as a potential client.
- By adding in a way to navigate backwards in the banner, you give them a renewed opportunity to read and to click the banner link
- The indication also gives a casual browser the ability to see that the banner will change, if they want to watch it.
- The disadvantage is that it can look intrusive if not well styled.
Tags: banner, navigation, rotating banner
Posted in Marketing, usability | No Comments »
September 24th, 2009
I have been working on a mega drop down menu system for quite a while using the recommended show/hide delays of about 0.1seconds to show the drop down and about 0.5 seconds to hide the dropdown (Jakob Nielsen).
After playing with this for quite some time I have realised that this is not the hard and fast rule I had originally assumed.
The menu I am looking at has two drop downs. The first shows an extensive product range. To make this easier to navigate, it is arranged in groups so that you run your mouse vertically down the left side of the menu. Until you do this, nothing appears on the right side (apart from some instructions). This means that your only option is to run your mouse vertically down, so there is no way you can leave the ‘hotspot’ that keeps the menu open. On top of that if you play with your CSS a bit you can extend the ‘hotspot’ a little outside the button which further reduces any problems.
The second menu is a contact us system with a small form and a map to mouseover and click on. This is at the end of the horizontal menu, so again with the correct use of some CSS, cutting across the menu bar doesn’t result in the menu closing.
Having said all this, what is the downside of having a menu closing later. The main one is that you can run across the main menu bar and have multiple drop downs open at once. Although you could fix this with javascript, this adds code when there is no real reason to.
Of coarse this all depends on the type of menu you are designing!
Tags: delays, mega drop down, show/hide, usability
Posted in usability | No Comments »
August 20th, 2009
I have recently been putting together some websites and have been using the Sitepoint book “Designing without tables” as a guide to some of the CSS techniques. What I noticed was that the author was structuring pages as follows for a 2 column layout: -
- Header with navigation
- Sidebar (floated to the side)
- Main content (positioned using margins)
- Footer
The trouble with this layout is that if you read the HTML from top to bottom, as a search engine or screen reader would, the sidebar content is higher up the page and is therefore given a higher priority than the main content. What this can mean is that Google misinterprets the information on your page, and in some cases what your site is about, which is obviously a big problem.
A simple solution is to use the same techniques to float the main content and the sidebar so that the main content can come first (have a look at the webxopt home page to see how this is done, and you can get the css from http://www.webxopt.com/styles.css).
This is all easy stuff, but on a 3 column layout you have the problem that you need to float something to the right, something to the left and have something in the middle too. That makes things difficult, but using the old trusty nested tables technique, you can do it as follows: -
- Header with navigation
- Div to contain main content and left hand sidebar. This is floated left. Inside this div there are two more divs, the first contains the content which is floated right, the second the sidebar which is floated left. The end result is a left hand side bar, and central content area.
- Div to contain the right hand sidebar, this is floated right
- Footer
The end result of this layout is a 3 column view with your most important information (your main content) at the top of the HTML document. An example of the code is shown here: -
<div id=”header”>
<p>Strap Line<br /> for the site</p>
</div><!– header –>
<div id=”wrapper”>
<div id=”navbar”>
</div><!– navbar –>
<div id=”content”>
<div id=”main”>
<div id=”copy”>
<h1>Main Heading</h1>
</div><!– copy –>
<div id=”image-bar”>
</div><!– image-bar –>
</div><!– main –>
<div id=”sidebar”>
<div id=”sidebar-content”>
<h4>News</h4>
<p>Here is some news</p>
<a href=”#”>Link</a>
</div><!– sidebar-content –>
</div><!– sidebar –>
</div><!– content –>
<div id=”footer”>
</div><!– footer –>
and the CSS is: -
#header {
margin: 10px auto;
position: relative;
height: 80px;
}
#header p {
width: 920px;
margin: 0px auto;
padding: 10px 18px 0 0;
position: relative;
color:#f8992b;
font: 16px Arial, Helvetica, sans-serif;
text-align:right;
}
#wrapper {
width: 920px;
margin: 10px auto;
position: relative;
background-color:#FFF;
border:#000 1px solid;
min-height: 450px;
}
#navbar {
width: 100%;
height: 22px;
margin: 0;
}
#content {
margin-top: 0;
}
#main {
margin: 20px 0 0 20px;
width: 645px;
padding: 0;
min-height: 300px;
float: left;
}
#copy {
margin: 0 0 0 20px;
width: 455px;
padding: 0;
min-height: 300px;
float: right;
}
#sidebar {
width: 220px;
float: right;
margin: 0 15px 0 0;
min-height: 300px;
}
#sidebar-content {
width: 220px;
float: right;
margin: 0;
padding: 20px 10px 0 10px;
min-height: 200px;
}
#image-bar {
margin: 0;
width: 170px;
padding: 0;
min-height: 386px;
float:left;
}
#footer {
clear:both;
width: 100%;
height: 22px;
}
The drawback to using this approach is that to reposition the different divs in the document is slightly more difficult, however for most simply respositioning such as print and mobile style sheets, this shouldn’t really be too much of a problem.
In my view the SEO advantages far out-weigh the downsides.
Tags: CSS, HTML, page structure, SEO
Posted in SEO | No Comments »
July 21st, 2009
This is actually a copy of a post from my personal blog http://simongriffiths.name. To be honest I think it is probably more relevant here.
I have recently updated my iPod touch with iPhone software 3.0, but to be honest I think that this is an issue that pre-dates the new software.
I have noticed that when I am going to play audio contents, which with me tends to be audiobooks or podcasts, my finger is never too sure what to do. It knows the icon is at the bottom of the screen but floats around not being sure what to hit.
Having thought about this for a while I think that it is a usability problem that relates to the icon definitions iTunes and Music.
When I go to play music or any audio content on my mac I always use iTunes. So the natural place for my finger to go is the iTunes logo. However I have found that if I am looking to play music I notice that there is a logo called music and that’s where I go. When you are looking for an audio book though you would not characterised this as falling under the music button and are more happy with it falling under the traditional iTunes description. This leads to the uncertainty and finger wavering that I often find myself doing.
In practical terms this is a simple mislabelling of icons. It would be relatively easy to have an icon that represented iTunes but label the button store (as it would be in the pc version).
The ‘music’ button is a bit more problematic. You could rename it ‘audio’ but would the average user know what that was? Instead of that, ‘listen’ might be a more appropriate label as this would be the action the user is trying to perform, and would cover everything from music and audio books through to podcasts.
It would be interesting to see if this relabelling did happen, would there would be an end to my finger wavering forever!
Tags: icons, iphone, ipod touch, usability
Posted in usability | No Comments »
