Tag Archives: CSS

Don't get blacklisted by Google

Posted in Marketing on by Paul Boag

There are so many SEO companies and so much advice about how to get ranked highly on Google. How can you tell the good from the bad?

Jason from Toronto recently wrote to me with a questions about search engine optimisation:

I am desperate to improve the search engine ranking of my company website but I am confused by the contradictory advice online. We have even considered hiring an SEO company, but aren’t sure who is reputable. The last thing we want is to be blacklisted. Do you have any advice which might help?

It is true that Google comes down hard on sites who disregard their webmaster guidelines. Probably the highest profile example of this was when they effectively removed car manufacturer BMW from their search results for using doorway pages.

With many search engine optimisation companies still using these ‘black hat’ techniques, it is important to be able to tell the good from the bad.

Later we will look at some of the SEO techniques that can get you blacklisted but first lets examine ways to identify a less than reputable SEO company.

Spotting the black hat operators

Always be sceptical of any company that contacts you out of the blue. If you are going to hire an SEO company, ideally you should use a personal recommendation.

Definitely beware of companies who guarantee a particular ranking. If a company promises that you will be ranked number one on Google, ask for more information. It is relatively easy to get a website ranked number one on Google for an obscure term. However it is much harder to get ranked for something that is useful from a marketing perspective.

Also ask what happens if a company fails to live up to its guarantee? Is there any real value in their promise? The answer is probably not.

Finally ask the SEO company to clearly explain the techniques they are intending to use. If they are evasive with their answers they should be avoided.

If you do discover the techniques they are intending to implement, this will enable you to judge whether you are in danger of being blacklisted.

Know their techniques

Most search engines provided guidelines about unacceptable SEO techniques. Google in particular provide excellent documentation for website owners looking to improve their rankings. They provide advice on selecting an SEO provider and layout what it considers unacceptable techniques. These include:

  • Hidden text and links – Some SEO companies use hidden keywords and links that provide no value to the user, but are designed to increase search engine rankings. Techniques include adding text that is the same colour as the background, hiding content with CSS, setting the font size to zero or hiding text behind images.
  • Search engine only content – Using techniques such as redirects and cloaking it is possible to show different content to a search engine than to a real user. This approach is often adopted on sites built using Adobe Flash. However, this breaks Google’s terms of service and could led to you being removed.
  • Sending automated submissions to Google – Many website owners and SEO companies use software packages such as Web Position Gold to automatically submit their websites to multiple search engines. Again, this breaks Google’s terms of service and could led to you being removed.
  • Duplicating content – Although Google recognises that some content is duplicated for legitimate reasons (e.g. a separate print version of your site), it frowns on websites that deliberately duplicated in an attempt to manipulate search engine rankings.
  • Doorway pages – These are pages that are created with the sole purpose of ranking well for certain keywords. They often have poor content and exist solely to funnel users into the main site.
  • Keyword stuffing – This refers to the practice of loading a webpage with keywords in an attempt to manipulate a site’s ranking. This can results in a negative user experience, and could harm your site’s ranking.
  • Participating in link schemes – Although your site ranking is partially based on who links to you, link exchange programs are still a bad idea. Exchanging links indiscriminately without considering their relevancy will damage rather than help your ranking.

Will implementing the above techniques get you removed entirely from Google? Probably not. However, they could damage your ranking over the long term and will almost certainly be a waste of money implementing.

Should you therefore avoid hiring SEO companies? Not necessarily. There are many reputable companies offering superb advice on how to improve your rankings. It just depends who you go with.

136. Stagnation

Posted in Classic shows on by Paul Boag

In this week’s show we talk about overcoming stagnation and Ed Merritt shares a technique to achieve fixed footers without the use of javaScript.

Download this show.

Launch our podcast player

News and events

Design by committee vs design by community

We all know that design by committee sucks, but why? What is it that makes the process fail and what would happen if you took it to the extreme, and opened up the design process to an entire community?

That is exactly what Mark Boulton has done with the redesign of the Drupal website. With over 200,000 registered users this is a significant community and not the kind of environment where you would feel inclined to design in the open.

However, according to Mark it has generally been a success.

The key would appear to be scale. In design by committee you typically have a handful of decision makers, and one or two dominant individuals who overwhelm the others. It is an environment of conflict and compromise.

However when designing by community, the sheer scale of the community drowns out anybody who seek to dominate the process. You move from an environment of personal opinion to one where you are monitoring emerging trends.

So next time you have a client wanting to design by committee, consider opening up the process rather than locking it down to one or two decision makers.

Self Directed Projects

When was the last time you worked on a personal or internal project? Do you do anything that is not paid client work? If not, then according to IdeasOnIdeas you should start.

This post interviews several designers about their their non-client work. It becomes obvious as you read that self directed projects offer real tangible benefits. These include…

  • R&D – The chance to experiment with emerging technologies and techniques, that otherwise you would not get to try out.
  • Build visibility – Higher exposure online as people are attracted to your work.
  • Prove capability – Demonstrating your ability to deliver solutions not in your portfolio of client work.
  • Increase skills – Allowing you to improve your skills in areas where they are weak or have not been maintained.
  • Team building – Building a sense of common purpose among your team in a way that is more engaging than client work.
  • Creates passion – Allowing you to work on a project that generates excitement rather than ones that simply pays the bills.
  • As a release mechanism – The chance to play, and let off steam after the limitations of client work.

    • After years of spending all my time on client work, I have now reached a point where most of what I do is self directed and I can honestly say it is a joy. I also think it has been hugely beneficial for Headscape.

    Understanding Disabilities when Designing a Website

    Back when I was a teenager the government launched a massive campaign warning of the dangers of unprotected sex and in particular the risk of contracting HIV. It was a very powerful campaign and led to a generation growing up much more aware of the risks. However this campaign wasn’t followed up for the next generation and the rates of sexually transmitted diseases increased.

    Why do I bring this strange analogy up? Because I believe we are in danger of doing that with web accessibility. Many of us are getting bored of talking about accessibility. It feels like we are covering the same old ground. Why do we need another article about accessibility basics? We have heard it all before, right?

    Well maybe some of us have, but there is a new generation of web designers who have not. They need to know what we take for granted. Also, it wouldn’t hurt us to be reminded every once in a while.

    That is why I was so pleased to see Digital Web publishing an introduction to accessibility this week. Sure we have heard it all before and you might be tempted not to bother looking it up. However, I would encourage you to take the time. I guarantee it will give you at least one piece of advice which you fail to implement currently.

    More ways to find inspiration

    I often talk about how we need to look for inspiration beyond the web. In fact in this weeks Smashing Magazine, they post some incredibly inspiring graffiti that is worth a look. But, can we be inspired by other websites or does that always end in plagiarism?

    It’s a dangerous game when you start turning to gallery sites for inspiration. Before you know it you can find yourself lifting far too much of the design.

    How then can you be inspired without ripping off somebody else’s website? One way is to look at the design and ask yourself which specific elements you like. Is it the navigation, their styling of bullet lists or the way they handle the footer. By looking at individual elements rather than the whole you remove the temptation to copy the entire thing.

    This is what a designer from Portugal has done. He has made screen grabs of websites and placed them in his flickr account. However, rather than grabbing the entire site, in most cases he captures only a fraction of the page. He removes the temptation to steal a whole design and yet provides himself with inspiration next time he needs to design a comment form or build an online calendar.

    Take a look at his inspirational flickr feed and hopefully it will encourage you to take a similar approach.

    Back to top

    Feature: Overcoming Stagnation

    For many websites the days of rapid growth have passed and they have slipped into stagnation. How then can you re-energise a site and start it growing again? We look at this in this weeks feature.

    Back to top

    Listeners feedback:

    Fixed Footer without javaScript

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    Ed begins…

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough. Read more here.

    Back to top

    135. Libraries

    Posted in Classic shows on by Paul Boag

    In this week’s show we talk with John Resig on javaScript libraries and address the question what is more important when we release an app: speed or quality?

    Play

    Podcast: Download (27.5MB)

    Download this show.

    Launch our podcast player

    News and events

    The complexity tax

    Don’t you hate it when somebody beats you to the punch? I recently finished writing a report for our biggest client (Wiltshire Farm Foods). It talks a lot about the need to simplify and remove complexity. It is a lesson we should all learn and so I am in the process of turning extracts from the report into a blog post which we will cover in next weeks show.

    However, it would appear I have been too slow and that Gerry McGovern has beaten me to it with an excellent post on the cost of complexity. However, where I focus on why simplicity is important, he addresses the underlying causes of complexity.

    For me his post is summed up in the following quote…

    Most organizations are producing far too much content. Too many emails, too many PowerPoints, too many reports, too many webpages. All this content creation activity keeps a lot of people busy.

    If you are part of a large organisation or work on a substantial website you need to read this post.

    10 Rules for Driving Traffic Using Forums

    What do you do if you have no marketing budget but have some free time to promote your site? Well, there are a number of guerilla marketing techniques you could use but contributing to forums is one of the most effective.

    Sitepoint has posted an article explaining why forums are a great way of driving traffic to your site. It goes on to suggest 10 rules for doing so effectively. These include…

    • Build your profile
    • Follow the rules
    • Start by responding
    • Contribute your expertise
    • Don’t be a ‘me too’ poster
    • Don’t self promote
    • Explain yourself, but be brief
    • If you’re wrong, say so
    • Write intelligently and correctly
    • Negativity is a no-no

    This is an excellent article and one that you should definitely read before using forums as a marketing tool. If you do not, you are in danger of damaging your brand, rather than driving traffic.

    Accessibility in suit and tie

    The life of the corporate web worker who cares about standards and accessibility can be a frustrating one; hampered by office politics and archaic content management systems. In an article on the Think Vitamin site, Bruce Lawson looks at what you can do to make sure your projects are as accessible for your users as possible.

    Its a very pragmatic article, which I love. Bruce works from the premise that this is going to be tough and makes suggestions like "some accessibility is better than none". He also talks about the need for ‘buy-in from the top’ but goes on to provide practical tips about how to get that buy in. What is more, his arguments for accessibility were backed up with facts. For example…

    Finally, he looks at how to get content providers onboard through education and getting them writing HTML rather than relying on the WYSIWYG editor.

    UK Government Browser Guidelines

    Our final story raises an interesting discussion; should you decide which browsers to support based on popularity or capability?

    Apparently, the UK government believes we should test on the basis of popularity. In a draft document advising public sector websites, it suggests that if a browser appears in visitor logs as being below an arbitrary percentage of total “unique visitors”, then it should not be listed as being “fully supported”.

    On the surface this appears very sensible. However, as Jon Hicks points out on his site, this can create problems. He writes…

    It isn’t clear how the supported browser list would be enforced, but I’m concerned that this approach will encourage browser sniffing, a move that will exclude browsers like Omniweb, Shiira and iCab, simply because their name isn’t ‘Safari’. They share the exact same rendering engine, and therefore require no further testing. You can be more inclusive without spending any extra resources.

    In other words we should be defining our list of supported browsers based on capability rather than popularity. This is the approach used by Yahoo! and it is one that I would fully support.

    The Yahoo model supports all browsers through progressive enhancement and graceful degradation, without the need to test on every browser. Its a neat solution but one that the UK government guidelines specifically say they do not advocate…

    These guidelines do not advocate specific development methodologies, for example graceful degradation or progressive enhancement. However, it is widely accepted that sites conforming to open web standards such as XHTML and CSS are more likely to work well across a wide range of browsers.

    How come if they are widely accepted, do they not advocate them?

    Fortunately there is an opportunity to change things before this is set in stone. I recommend reading the WaSP article on the recommendations and then sending some polite feedback to the powers that be.

    Back to top

    Interview: John Resig on javaScript Libraries

    Paul:Joining me today is John Resig, who is famous for jQuery and the work that he has been doing with jQuery. John, it is great to have you on the show.

    John:Well, thanks for having me.

    Paul:I have to say this at the beginning. I have to get this out of the way. I absolutely love working with jQuery, and it’s an absolute pleasure. I remember twittering just a few days ago that every time I start doing anything in jQuery it makes me smile, so that’s got to be a good sign.

    John:Well that’s good. I’m glad to hear it.

    Paul: What I wanted to do today is get you on the show and not just for me to suck up and say how great jQuery is, but to kind of look a little bit broader at the subject of JavaScript libraries. Because I have to say from a personal point of view my opinion has changed quite a lot about JavaScript libraries and I’m kind of interested in your perspective on things as somebody that’s actually created one. I think the place I want to start is for a long time I had the attitude that you shouldn’t use JavaScript or indeed any library and that you should know the underlying code yourself and all of this kind of thing. Let’s start with the question of how do you know if it’s appropriate to use a JavaScript library? When is it appropriate to use it? What’s your opinion on that?

    John:Well, I guess my opinion is it’s always appropriate, and I mean the simple fact of the matter is that there’s two things. One is that when you’re developing, you’re trying to support, generally a large number of browsers simultaneously. This is the same as if you are doing CSS development, JavaScript development, you want to support a large enough market share and you want to make that development process easy. The problem is twofold that you’re going to be encountering weird browser bugs and the APIs, the different utilities the browsers provide, will be different. For example, Internet Explorer provides different ways of handling events from all the other browsers. So what libraries do is that they remove you away from dealing with browser bugs, which is huge. And at the same time they provide a simple interface that you can interact with that will just work ubiquitously.

    Paul:Is there a problem there in the sense of, you know, somebody came along and they basically learned to write jQuery for example from scratch, but never learned the kind of underlying JavaScript? Is there a problem there, do people need to know JavaScript before they start using a library?

    John:It depends on the library, but I don’t think you do. I don’t think you have to know JavaScript. In a lot of ways, at least in my experience with jQuery directly there’s a lot of people who have used jQuery who have never done any programming whatsoever. jQuery does embody a lot of advanced concepts but you don’t necessarily have to know them in order to make good use of jQuery. I know this sort of translates well into some of the other libraries but one point of concern you brought up was what if someone learns a library but doesn’t learn JavaScript? I used to be more concerned about that, if someone only knew a library and I guess from a purist perspective, that’s a bad thing. Fundamentally, you want people to be getting better at programming JavaScript, not this specific thing. However, I think the reality of it is, is that so many people are just using JavaScript or CSS or doing web design, they just want to get their job done. It’s not really a matter for them of becoming an excellent JavaScript programmer or awesome CSS user, you want to get from A to Z and finish their work in an effective manner that works everywhere. So I think it’s important to realize that this market, so to speak, exists. It’s a very large one. And that ignoring it completely will just leave users frustrated and going back to the simple cut and copy paste scripts that they used to use. So, I think what libraries are doing is they are instilling good standards, they are instilling good practices, even though the users don’t necessarily know about it. And then eventually what’s good is that since these libraries have these good practices that users can always open up a library and read about it and try to understand better what’s going on.

    Paul:I guess that’s always been a little bit of my concern with relying heavily on a library is that if you come across something that’s a problem or a bug or something like that, you can’t fix it yourself because you don’t necessarily know your way around the library. What’s your response to people that say stuff like that?

    John:Well by the same token if you encounter a problem with a browser you are far less capable of fixing that issue. There’s really no way about it other than that ultimately it would be good to have that knowledge, absolutely. I fully support people who want to do that and I’m writing a second book now encouraging people to do that, to dig into libraries, to learn more, to build their own. What’s important here is that you just don’t, you can’t force people to do it if they, one if they don’t want to or if they’re just not capable. There’s no reason I feel to force a designer, someone who’s a designer by trade to learn the fundamentals of object oriented programming, or functional programming. Theoretically that can help them some way in the future but what’s more important to them is doing good design and I think by helping people keep their focus where it should be. Obviously if a library is able to help programmers program better, that’s good as well. It’s all about helping people keeping their focus and making sure they aren’t down a rabbit hole getting sidetracked.

    Paul:I think that’s the thing that really attracted me to jQuery is as a front-end interface designer was the fact that I could pick it up and run with it very easily. The conclusion I came to is, “OK. Well if I do by some chance find a major problem with it, there’s a massive community of very clever people out there that I can ask and I can get help from.” So, that kind of reassured me, I think. If then, we’ve kind of come to terms with the fact: “OK we want to use a library.” There are so many different ones out there. Run us through some of the different options available and the pros and cons and how do you go about picking which library is right for you?

    John:Well it really depends a lot. There’s a coupe questions you need to answer. Probably the most important of which is you need to ask yourself, how do you want to write JavaScript? Because libraries end up augmenting or really changing the style of how you write JavaScript. So, finding a library that you like how it looks. It sounds very superficial, but you like how it looks, you like how the code feels is a great place to start. There’s obviously a lot of libraries to choose from. There’s a select group of libraries whose quality is generally above the others and the popularity of those libraries generally reflects the quality as well. Out of those I pick generally jQuery, Prototype, Yahoo UI, dojo, then also MooTools and sometimes XJS. What’s interesting is all those libraries are open source and they are all the most popular JavaScript libraries. I don’t think that’s a coincidence. It’s just a matter of fact that in the web these open source frameworks are going to improve better and attract more users and generally have better community to surround them. So out of these libraries though you break down into a lot of different paradigms for development. I’ll try to summarize as best I can, but it really is not substitute for trying it out yourself. Looking and seeing some examples you can have a pretty good feel right away. So, Prototype and MooTools, they both extend the native objects of the language. They both try to improve the JavaScript language itself. So they add new methods to arrays, they make strings better, at the same time they provide things like object-oriented code
    , and all the way out to doing things like events and AJAX. The normal things that you would expect. But at a very broad level they are trying to improve the overall quality of the language and of the experience. Then you have Dojo, Yahoo UI, and XJS and they are generally very modular, very package oriented and they have components you can easily snap in and out with nice ways of handling dependencies and it can end up being a very cleanly architected style of coding. They really support object-oriented code, and additionally events, AJAX, all the normal stuff you would expect. I would tend to group jQuery a little bit differently in that jQuery is more oriented toward improving the relationship between JavaScript and HTML and that it’s highly focused on searching through an HTML document, modifying some things, just getting in and getting out. Unobtrusive, and it doesn’t provide any language features, it doesn’t provide any object-oriented code writing features, it’s just hyper-focused at the task on hand.

    Paul:It strikes me from my experience with jQuery that it’s very much a tool that’s primarily focused at helping front-end interface people implement the kind of functionality that they require from a usability point of view rather than necessarily doing, I mean would you build massive applications in something like jQuery?

    John:It’s absolutely possible and people do it all the time. For example, T-Mobile’s T-Online in Germany, they built their entire user area so like their mail, their calendar, and everything using jQuery. So it’s absolutely used for very large projects. What I think is very interesting for jQuery at least is that while we don’t explicitly provide the object-oriented styles that most hardcore developers are used to we provide some very interesting alternatives especially they way it, like functional programming that I think actually end up suiting development very well. It’s very different, I will completely grant that, but it’s still very capable of scaling quite large.

    Paul:So if people go out there and they have a kind of play around with these different libraries and try each of them out as you say to kind of find what fits their style of coding, once they’ve found something that kind of codes in the way they would like to, for example for me the similarities between jQuery and CSS made it a very natural fit, but what are the kind of things that you should look for from a functional perspective? What kind of things should be included in a JavaScript library? Does that make sense?

    John:At the very core there should be a set of features. Of the libraries that I listed previously they all have methods for doing DOM traversal, so traversing through an HTML document, modifying an HTML document, events, so handling user interaction, animations and AJAX. All of them have some support for that to one degree or another. You can be fairly safe in knowing that if you pick a library you will have that base level. In my opinion those sets of features are probably the most important features and the ones that you end up using the most with your applications. Some people might say in their particular case that maybe animations aren’t as important, or maybe that they aren’t using AJAX, it really depends but for most of the time that set of features is fairly comprehensive. On top of that you really have to start to, once you’ve tried to use it, and once you’ve played around, there’s a whole set of secondary features that you kind of have to dig into, ones that aren’t immediately code-related. Things like the community around a library, the documentation for a library and even the health of the projects themselves.

    Paul:What do you mean by that last one, the health of a project?

    John:There’s a lot of things. In health, do they have an active development team? Are there developers? Are there multiple developers? It’s the famous hit by a bus; if a developer is hit by a bus will the project still continue? Is there a team will continue? Can you view the source code? Is there a repository where you can go? Is there a bug tracker where you can submit bugs? And finally is there a test suite, is what you’re going to be using going to be tested and analyzed to make sure it stays working. Another point that’s important to bring up is that a lot of browsers now are starting to integrate the test suites of these libraries into their test suite. So for example actually this is a lot of my work at Mozilla, was integrating the test suites of Prototype, Scriptaculous, jQuery, MochiKit, a bunch of libraries into our test suite such that if we ever added a change that caused a regression to happen in a library we would catch it and we would fix it on our end. Obviously we would do this in a very smart way, we wouldn’t just blindly be like, “Oh something broke!” We would communicate to the library what the issue was or whatever and this has been very big because now you can, there’s an extra level of safety and security here, in that you’ll know that if you’re using a library like this that it’s going to continue to work going forward in these browsers. That’s an extra level of safety that your personal code can’t provide. I think that’s very interesting. I want to jump back here really quick to the other issues I mentioned.

    Paul:Sorry, I distracted you there and we took you off topic.

    John:It’s OK, it’s OK, of community and documentation. So community, it can be usually be pretty easy to determine the health of the community. All these libraries will have some sort of a mailing list or a forum that you can go to. Just hopping on there, seeing how many messages are posted, seeing what the typical response is like, how they treat new users, just stuff like that it can be really useful because if you’re just starting out, you know you’re going to have some pretty basic questions. Do they understand your problems? Do they help you out? Doing some searches on Google for example to see how many people are talking about it, or using a service like Technorati or something. Are people blogging about it? Is it positive? Are they having problems? The other thing is documentation. This is also pretty easy to tell. If you are starting out with a library, you’re probably going to start out by doing a quick test, running a simple application just to get a feel for it. When you’re doing that you’re immediately going to be in the documentation trying to figure out how things work. I think you’ll be able to determine pretty quickly if the documentation quality meets a standard that you, because if you aren’t, if the documentation just isn’t that good, you’ll immediately have problems and I guess you will have to resort to the mailing list or the forums or whatever. Secondary is, do they have good examples? Do they have books if you want to learn from a book? Do they have books that you can buy to learn from? So again there’s a whole lot of issues here but what a lot of it boils down to is looking at the libraries, looking at their style of code, does it seem alright with you? Then just doing a quick test with each of the libraries that you’ve picked out, building like a menu or just a basic form of interaction. How easy is it? How hard is it? Does it in fact mesh with you well? This is something you can do over the course of a single day and it definitely shouldn’t take you any longer th
    an that. If it’s taking longer than that then you probably want to try a different library. Ultimately you should be trying to use these libraries to make your development simpler and easier. If it doesn’t improve your productivity, if it doesn’t improve the quality of your code then you probably shouldn’t be using it to begin with.

    Paul:Tell us a little bit about the kind of plug-in architectures that exists around many JavaScript libraries. Certainly I know there’s a strong plug-in architecture with jQuery. Does the same kind of thing exist with other libraries?

    John:It depends. What jQuery has is a little bit unique in that we provide a number of plug-in points that plug-ins can snap into and extend how jQuery works. So they can add in new CSS selector behavior, or they can add in new events or all sorts of intricate additions. Other libraries have things that aren’t quite of the same vane, in that they’ll have modules or packages that you can use. Also another thing that varies is how do the various projects treat these plug-ins? At least with jQuery there’s a dedicated plug-in repository that’s used that plug-ins are listed in that you can browse through, you can see ratings, comments, discussions and things like that. Currently no other framework has something similar to that to the best of my knowledge. It’s much looser, just people uploading, putting things to their websites or Google code or some such. So again, at least to me, what makes plug-ins, jQuery-style plug-ins important is that they are, that there’s extension points and that they are supported by jQuery fully.

    Paul: The only thing that I think that I kind of struggle with a little bit about plug-ins, you know I love the idea that there are other people out there that can do the hard work for me in that they can develop something I was looking for, and I love the fact that I can go to jQuery, I can type in whatever I’m looking for and it will pull back stuff. I’m always a bit unsure mind about how reliable those plug-ins are, you know as you’ve been saying with the kind of, the core jQuery library that you’ve created I know there’s a big team of developers working on it, I know that it’s thoroughly tested, I know what browsers it’s tested against, all of that kind of stuff. Plug-ins are a bit more of an unknown entity. Is there any kind of advice that you can provide about judging whether a plug-in or module or whatever is reliable or not?

    John:I mean you sort of have to use the same standards that you would use in looking at a library. Looking at, what you mentioned, is it tested? Is there good documentation? Are there, how many developers are working on it? Like for example in the jQuery project we started a sort of, sub-project called jQuery Glide in which we’ve taken a whole bunch of plug-ins and actually blessed them and proved them, given them themes, excellent documentation, examples, all this stuff and made them sort of official. We’re doing this more and more, trying to bring in more plug-ins, improve their quality and make sure that they’re up to our standards. There’s still tons and tons of plug-ins that are just excellent, but the issue comes down to that you have to sort of train your eye to look at, and be able to spot when something has good quality. The thing that’s easiest for a plug-in author or a library author to do is to just set up a page that has their code on it and has a basic example. At the very least every single library is going to have that. If you dig in and see that it has documentation, that it has tests, you begin to realize that that plug-in is a much higher quality, at the very least. I think it’s really starting to dig in to these side issues, that you begin to get a better picture of how, of the true nature and of the true health of a particular library.

    Paul:Excellent! That’s really useful and I think it’s easy to just look at these libraries and indeed the plug-ins as well and ask, “Well do they have the basic functionality that I require?” But, like you say, looking at things like the community and documentation and things like that are equally important. It’s been very useful John. Thank you for taking the time to come on the show. No doubt we will get you back in the future to talk about some of the specific things going on with jQuery and maybe this book that you’re writing as well, sounds very good. Thanks for your time.

    John:Thanks for having me, Thank you.

    Thanks to Todd Dietrich for transcribing this interview.

    Back to top

    Listeners feedback:

    Quality or Quickly?

    What is more important, to reach market quickly or to launch with a quality product?

    I received this question from Pete in South Africa…

    I have been working on a small web application, which I hope to launch soon. My problem is that I am spending ages tweaking and improving it before launch. I fear that if I spend much longer on it somebody will beat me to market. What is more important, getting the product right or launching it quickly?

    It is a good question and one with no single answer. It is certainly something we have been struggling with as we prepare to launch GetSignOff.

    To read the rest of this blog click here.

    Back to top

    134. Chrome

    Posted in Classic shows on by Paul Boag

    In this weeks show we give you advice on choosing the right hosting company, Teifion and John send us a review of dConstruct and of course we discuss the release of Google Chrome, can it topple IE?

    Download this show.

    Launch our podcast player

    News and events

    Managing and choosing fonts

    With the new generation of browsers supporting embedded fonts in a consistent way, it is time for us as web designers to start taking typography serious.

    One small part of this is how we manage and choose fonts. I confess, I have put little thought into font management. The result is that my choice of font is often not as thought through as it should be. A massive drop-down list in Photoshop does not inspire considered typography.

    However, a couple of discovers this week have inspired me to put more thought into the subject.

    The first is a review of 25 font management tools. This include both free and paid for software. It also has options for both the Mac, PC and even Linux.

    You might ask why we need a font management tool at all. Trust me, if you start installing a lot of fonts on your system you will soon discover why. Large number of fonts become unmanageable and can cause serious performance problems. As a minimum you need an easy way to enable or disable fonts.

    The second discovery was an online/AIR font application that displays text of your choice in every font available on your system. This in itself makes font selection much easier. However, this application also enables you to narrow the field by removing unsuitable fonts. It is a great visual way of getting the right typographic look.

    jQuery supercharges menu rollovers

    Although I am a standards based designer through and through, I have always felt like the nerd in the class. After all it is the Flash kids that get all the girls and attract all the attention with their cool (if somewhat inaccessible) animations and effects.

    4 years ago Dave Shea attempted to smarten up our image a little with CSS Sprites. This was a technique for doing CSS based rollovers on menu items. It wasn’t as eye catching as Flash but it was a start and at least I didn’t feel dirty after I used it.

    Jump forward to the present and we find a world where the ‘cool divide’ has been reduced thanks to Javascript. Dave therefore felt the need to bring his CSS sprite technique up-to-date on A List Apart, using a sprinkling of Javascript.

    Using jQuery Dave takes the plain old CSS sprite menu and gives it an attractive new look. However, at the same time he maintains its accessibility thanks to progressive enhancement.

    It is a slightly long winded article (like I can talk!) in places nevertheless it is a nice illustration of what jQuery and CSS are capable of. It is also a technique we can all make use of right now, something A List Apart has been missing sometimes of late.

    Can Google Chrome Topple IE?

    Without a doubt the biggest story of the week is that Google has launched its own browser called Chrome. At the moment the browser is only available for windows although a mac and linux will follow shortly.

    More on my thoughts can be found here

    Back to top

    Feature: Choosing a Hosting Company

    Hosting companies are a dime a dozen. They all offer very similar packages and all seem competitive on price. How then do you choose between them. We discuss this in this weeks feature.

    Back to top

    Review: dConstruct

    Teifion: And the next part of the podcast is sponsored by Ticklefish Design and Searchlight Digital.

    John: Hi I’m Marcus Lillington.

    Teifion: No I want to be Marcus Lillington. Marcus is the cool one he doesn’t get my name too wrong.

    John: No no. You agreed that we would both be Marcus.

    Teifion: That’s a fair compromise. No one want’s to be Paul. Anyway right. On with the show. So Marcus what did you generally think of the conference?

    John: I thought it was really good actually. Yeah I enjoyed it all. I enjoyed the free coffee.

    Teifion: Which you didn’t tell me about till right at the end so I only got one cup.

    John: No that’s right.

    Teifion: I thought I was a bit unfair.

    John: I thought it was sort of obvious there was free coffee. But with regards to the speakers, yeah I enjoyed all of them. Some of the speakers were speaking about things I don’t really you know, I’m not involved with directly but they all put their points across really well. I enjoyed all of them. I think I can take something away from each speaker. What did you think?

    Teifion: I quite liked the fact that none of them talked for too long or too little. They were all quite engrossing and though again not directly related to what I do they were all very interesting and I did end up taking something away from it.

    John: Yeah and there was humour in there as well.

    Teifion: Oh there was Matt and Matt are hilarious.

    John: Yeah Matt and Matt get the award for comic.

    Teifion: With that subject what was your favorite talk during it?

    John: My favorite talk was Tantek on microformats.

    Teifion: Okay summarize roughly what he talked about. Except microformats that just kinda basic.

    John: Yeah it is really. You know the concept of how microformats are I don’t really know what I’m saying again.

    Teifion: Just keep going Paul does.

    John: Yeah just how you shouldn’t have to keep reinputting data into all these different sites, all these different social networks that we go on. They should all, you know there should be one sort of central hub which is your sort of central place where you put all your details in and all these other sites that you choose to join up to and put information on. They should all just link up. Microformats again is a new subject to me. I’ve only done a basic vCard and that’s about it. It’s definitely something I’m going to read into.

    Teifion: I’ll definitely agree with that summary.

    John: Although a little long winded.

    Teifion: No not long winded at all. Remember the people who listen to this are used to listening to Paul.

    John: Yeah that’s true.

    Teifion: Well I’d say that my favorite talk was Jeremy Keith on the system of the world it’s titled. I would have titled it something more like "Why the cloud can be smart and why it can be stupid. Why you think you can predict it and why you really can’t." It was a great intellectual talk and I’m pretty sure that most of it went over my head. Possibly into the head of who ever was sitting behind me. He basically said that you can’t predict what will be the next big thing like Facebook or Twitter but you can create good foundations or nurture something so that it’s more likely to be the next big thing.

    John: Yeah that’s a good summary there as well. I mean basically I thought it was just about a black swan.

    Teifion: That is true actually. It’s just all about the black swan. You can’t predict it. It’s got a big effect and after it you’ll all go back and say "Hey we knew this was coming.

    John: We knew this black swan was going to be born.

    Teifion: Yeah that’s how it works isn’t it. Tell you what, what do you think the best moment of the conference was to you?

    John: Ah. I mean there’s a lot of moments but the best moment has got to be Teifion, as Marcus calls you, when you went up to Ryan Carson to thank him for the free complimentary tickets to dConstruct.

    Teifion: I’d like to point out that yesterday as in the day before the conference I had a 5 hour train journey from South Wales to Brighton. I then went to bed really late and got up really early. I was really tired and confused.

    John: Still no excuse. You call yourself a student.

    Teifion: No I’m a graduate.

    John: Oh okay. There’s a slight difference. But luckily for Teifion I pulled him back at the last moment to save his ???? it wasn’t Carsonified that supplied the tickets it was Clearleft.

    Teifion: I knew it was Clearleft that supplied the tickets. I just got confused. Tall guys in hats are very confusing.

    John: What about you? What was your favorite moment?

    Teifion: I think it was when we actually went up to thank Jeremy for putting the whole event on and for possibly the free tickets. It wasn’t actually Jeremy that we needed to thank aparently. I like the way that you sort of thought how to do it. You went for the wussy catch his eye approach. I just walked up and said "hi thanks for the tickets. Have a business card." I didn’t actually give him a business card.

    John: No but that is a funny point. Tef did hand out quite a few business cards. Which is good I mean networking is really good. Apart from the lady who you tried to impose your business card on.

    Teifion: I don’t think she heard me.

    John: No she just blanked you.

    Teifion: It’s possible. It’s happened before. You remember why we went to see Jeremy don’t you. It’s because sadly Marcus your jokes are sadly not up to the calibre that we would like. Granted their not dire, I mean if Paul was in charge of it they would be dire or worse. But I think Marcus’ jokes could do with some improvements. So we went up to Jeremy to ask him for a joke. Do you want to tell the joke.

    John: Yeah I would love to tell a joke. Apart from the fact that I actually can’t remember it. But seeing as you already knew it and knew the punch line you can tell it.

    Teifion: Okay why did the chicken cross the mobile strip?

    John: I don’t know. Why did the chicken cross the mobile strip?

    Teifion: To get to the same side. If you don’t know what a mobile strip is Google it.

    John: Unfortunately I don’t.

    Teifion: That’s a shame. Well I suppose we’re hitting the 6 minute mark which if we were Paul we’d go "Well lets start on the news." or maybe waffle on a bit more. We’re actually going to have to conclude this partly because it’s not our own podcast. So I figured what we could do is we can end it with a question. What do you think of that idea?

    John: Good idea.

    Teifion: Well what I’m going to do now is I’m going to put you on the spot and I’m going to pause it for 30 seconds and you are going to come up with a question and then you’re going to ask it.

    John: Brilliant. Was that the pause?

    Teifion: Yes a good long 30 seconds.

    John: I thought you were just going to do a pretend pause and then we’d just go right into it.

    Teifion: No that would be something that Paul would do. Paul’s not cool.

    John: My question to both of you Paul and Marcus is, "Would you advise up and coming web designers or developers to email and get in contact with local agencies with regards to getting some kind of work experience with them? Even if it’s only for like a day or two." So that’s my question.

    Teifion: Fair enough. I suppose I could add a sort of additional question. It is "If you put so much effort into your work Paul you presume you put a lot of effort in to your family like. I know you put a lot of effort into youth work. Why is it so hard for you to put just a little tiny bit of effort into learning how to pronounce a name that so many people I know can so easily pronounce? It’s (he didn’t spell it so I don’t know). It’s really not that hard.

    John: Teifion

    Teifion: See if you knew me for longer you’d be able to pronounce it. Maybe Paul’s just not cool enough.

    John: Maybe you should all just call him Ty from now on.

    Teifion: That could work. Anyway that’s it.

    John: O I’ve got one more point. Stanton.

    Teifion: Where is Stanton?

    John: Stanton we agree well we met him. He said he wanted to help and come in and say a few words at the end of the podcast but we don’t know where he is. He was last seen

    Teifion: chatting up randoms.

    John: Yeah that sums it up.

    Teifion: I could guess at what he would say I could be completely wrong though.

    John: I think we should end it on that note.

    Teifion: Bye.

    John: Bye.

    Thanks goes to Curtis McHale for transcribing this review.

    Back to top

    Can Google Chrome topple IE?

    Posted in News on by Paul Boag

    Without a doubt the biggest story of the week is that Google has launched its own browser called Chrome. At the moment the browser is only available for windows although a mac and linux will follow shortly.

    The launch of Chrome has generated huge publicity and I am sure you are already aware of its emphasis on stability, speed and support for web applications. You probably know too that it is built on webkit so CSS support is good.

    The question is whether we will need to start testing our sites in Chrome? Well, take has been strong with figures rising up from 1% to over 6% shortly after launch. But is Chrome going to finally overcome the dominance of Internet Explorer or just cannibalise the market share of IE’s rivals? That is harder to judge.

    The browser that finally topples IE will not do so because of quality, but because of brand recognition. If IE was going to fall because of its poor feature set or dodgy rendering it would have done so already. The problem is that most people are quite happy to use IE. It is pre-installed and ready to go. Indeed many simply associate the web with that little blue E.

    Sure, other browsers have made remarkable inroads into IE’s market share. However, they have probably pushed as far as they can go. The rest of the market are those people that just don’t care. They know IE, they are familiar with IE. Why change?

    Extract from the Google Chrome comic

    However, if anybody is going to change that status quo it will be Google. Although many associate that IE icon with the internet, when they click on it they go to the Google homepage. Google has as dominate brand, maybe even more so than Microsoft. If anybody can pursued the hold outs to swap, it is Google.

    Google has a huge profile. Never have I seen a browser featured on BBC national news, but today they mentioned the launch of Chrome. They also have a lot of eye balls and with Chrome featured on their minimalist homepage you can expect downloads to go through the roof.

    Who knows if they will pull it off. What I do know is that this will certainly be damaging for other browsers especially Firefox which has been heavily backed by Google.

    Fixed Footers without JavaScript

    Posted in Development on by Paul Boag

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.

    This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

    I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

    The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

    Firstly, here’s a demonstration.

    The HTML

    <div id="container"> <div id="content"></div> <div id="footer"></div> </div>

    The CSS

    *, body {margin: 0; padding: 0;} #container {display: block; position: absolute; min-height: 100%;} #content {display: block; margin-bottom: 3em;} #footer {position: absolute; display: block; bottom: 0; height: 3em }

    IE6 Stylesheet

    body, #container {height: 100%;}

    this should be referenced using a conditional comment:

    <!--[if lt IE 7]> <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen"   /> <![endif]-->

    How it works

    As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

    • #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
    • #footer is positioned absolutely at the bottom of #container
    • #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

    Known Issues

    The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

    For example, if your mark-up was:

    <div id="extraContainer"> <div id="container"> <div id="content"></div> <div id="footer"></div> </div> </div>

    In your IE specific CSS you’d need to specify:

    body, #extraContainer, #container {height: 100%;}

    Conclusion

    This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

    131. Version Control

    Posted in Classic shows on by Paul Boag

    In this weeks show Ryan and Stanton return to talk about the importance of version control and answer your questions on project  management and invoicing applications, download sizes and page weight.

    Play

    Podcast: Download (17.8MB)

    Download this show.

    Launch our podcast player

    News and events

    Twitter Cuts UK SMS

    This week the team over at Twitter announced that they would no longer be delivering outbound SMS over there UK number. They go on to explain that the bill which up until now they’ve been footing is simply too great and that even with a limit of 250 messages per week they estimate a yearly cost of $1000 per user.

    Thanks to established relationships with SMS services in Canada, India and the United States the outbound SMS service will be continuing uninterrupted in those countries.

    Twitter has suggested a number of alternatives to the service, links to which can be found on their blog. It would also appear that a number of start-ups are rushing to fill the void as TechCrunch have also reported.

    A large portion of Twitters popularity is due to their SMS facilities and it is feared that “freezing” out the UK and other countries from this service will be detrimental to their future.

    It reminds me of when Pandora, the online radio station, closed its doors entirely to its UK audience due to licensing constraints and it begs to question do we poor souls in the UK miss out on all the good toys?

    facelift (FLIR) Image Replacement for Fonts

    Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that aren’t otherwise supported in web browsers. The generated image is automatically placed on your site and works in a similar way to sIFR, the big difference being the lack of Flash.

    This script uses PHP and javaScript and utilises actual .ttf font files to generate its replacement images, so you can simply specify which elements you want to replace, h1, h2 tags etc, download a font you want to use, point the script to it and your done.

    I’m looking forward to having a play with this script as it seems to be simple to use and the fact that you don’t have to mess around with Flash like you do with sIFR is a big bonus in my book.

    Take a look at the number of examples they have on their website and see for yourself.

    Gmail went down!

    So Gmail went down for a few hours this week and as Josh Catone said in his sitepoint article article:

    Judging by the reactions on Twitter and in the blogosphere, you’d have thought that the world ended.

    There’s nothing really more we can say about this that Josh hasn’t already mentioned, but suffice it to say, no web sites/app is going to have 100% up time and this echoes what Stanton and I were talking about the other week in regards to S3 going down. It’s important to always have a backup and not to put all your eggs in one basket because when the service you’re using goes down, and invariably it will, you need a plan B.

    Back to top

    And Now For Something Completely Random

    During the recording of this weeks podcast we were thrown completely when we spotted Paul Annett from Clear:Left dressed up as a Gorilla on Yahoo Live! and then proceeded to start dancing… always aiming to share the hysterics here’s proof. Random indeed.

    Paul Annett Dresses as a Gorilla

    Feature: To Version Control or Not?

    Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. In this week’s feature Stanton shares his experiences with you in a bid to convince you why you need it.

    Back to top

    Listeners feedback:

    Project Management and Invoicing Applications

    James writes: I would like some boagworld advice. I’m a web designer and SharePoint specialist at a large company in Cambridge, UK. Over the last 3 to 4 years i have been messing around with web design etc. I now am very busy outside of work and it is getting busier every month.

    I started of with a server under the bed at home with UPS hosting these sites. They ranged from personal sites, to company profile pages to shops. This server has now been replaced with a VPS hosted externally.

    My plan is to keep working full time and manage my time very carefully outside of work and keep these sites coming in and out etc and then one day take the big leap into the self-employed world.

    What could you recommend for me to manage my tasks, projects, time-management and invoicing etc?

    I love the podcast and would be quite happy to chat further with you. Look forward to hearing your experience comments.

    Well there is a multitude of online and desktop applications designed specifically for managing your business.

    Probably the most popular project management app I know of is 37 Signals’ BaseCamp and that’s certainly the first one that springs to mind when I’m asked this question. Depending on what package you have, BaseCamp allows you to create projects, set milestones, to-do lists, manage time spent on tasks among other things, however BaseCamp is tailored more towards collaborative projects for when you’re working with a team of people. It doesn’t provide facilities for invoicing clients and managing your accounts and so it might not be the perfect choice if you working alone.

    Another app I know of and which comes highly recommended is FreeAgent. FreeAgent like BaseCamp allows you to create and manage projects, clients and timescales, however in addition it provides you with the facility to generate invoices, manage your bank accounts as well as your expenses and incomes. It’s designed for sole traders, partnerships and limited companies and is wrapped up in a nice, user friendly interface.

    A final mention goes to a Microsoft app that I came across a couple of years ago now, and has only this year been release in the UK. It’s called Office Accouting Express 2008 and it’s actually free to download and use. As you would expect it integrates with other Office applications and provides you with all the facilities you would expect from an accounting package, invoicing, client management etc. So if you’re working on a PC it’s worth having a look.

    Luckily you can have a play with all these apps before you buy. BaseCamp has a free account which allows you to create 1 project so you can get in and see how it all works, FreeAgent has a series of demos you can use to see if the interface and facilities are to your liking and as I’ve said Office Accounting Express is free. So my advice would be check out them al
    l and see what works for you and no doubt there will be several suggestions in the show comments on other apps that I haven’t mentioned here.

    Download Sizes

    Bob writes: After reading a recent post from Smashing Magazine on textures I started to wonder… what is a good rule of thumb regarding document size per page on the web? Most of the example pages in the article ranked in at close to 900kb per page… am I behind the times?

    Very good question, and one I think we all worry about at points. There’s more than just the filesize to really worry about, there’s the general ‘page weight’ which is affected by many factors, such as:

    • The number of HTTP requests made – if you’re pulling in a lot of external javaScript or CSS files, each one has to be requested seperately. You can combine these into single files to reduce load times, but at the expense of readability, maintainability and organisation
    • The size of any javaScript files you’re pulling in – you can get minified versions of most libraries, for example, which strip out all the extra spaces and line breaks in the code, which aren’t needed in order for the code to execute
    • CSS expressions can be a useful tool, but are bloody slow, especially when used a lot
    • Image filesize can have a massive effect on load times, which is one of your main concerns as you mentioned textures. I’m assuming you’re already familiar with image optimisation, but also test to see if you can squeeze images into a GIF, or a PNG8 if possible, these formats will give you a nice small filesize if you only need a limited colour pallete.

    In this day and age it’s nice to think that we’re all cruising on nice fast broadband connections, but in reality we know that’s not the case and you really have to consider your audience, and the context in which they may visit your site (Paul’s talked about this quite recently). If you expect an older demographic to your site, or people in remote areas, then they might still be hitting you on a dial up connection. Some visitors may be using poor public wifi (I get suicidal on the train to and from London as the wifi is usually worse than dial-up), or mobile devices where the data charges can be ridiculously high.

    There are a couple of tools I use to get an idea of how my pages weigh in:

    There is a Firebug addon called YSlow which provides some nifty statistics on what’s happening under the hood of the pages you visit, and also grades the page performance and suggests methods to improve the loading time of your page.

    I tested 2 sites quickly with this extension to give an idea of what you can expect to see, Amazon and Boagworld.

    • Amazon.com weighs in at 501k with 85 HTTP requests and a performance rating of D
    • Boagworld.com is a bit lighter on it’s feet at 57.6k and 79 HTTP requests, but has a performance rating of F, due to (among other things) including 37 external javascript files compared to Amazon’s 8, and 33 CSS background images compared to 9 with Amazon.

    I also use a Firefox plugin called Firefox Throttle which lets you simulate a specific network speed (such as 56k) and get an idea of how long your site will take on certain connections.

    Unfortunately I don’t think there’s a good rule of thumb here. Personally, I don’t let the page weight issue affect or limit my design, but try and make savings where I can nearer the end of the project, by optimising images, switching to minified JS libraries and reducing the amount of HTTP requests where possible.

    Back to top

     

    To Version Control or Not?

    Posted in Development, Web strategy on by Paul Boag

    Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. Paul Stanton gives his thoughts and experiences on the subject.

    This post has stemmed from an e-mail by Simon Hamp whom has just started working for a PHP development team and has been given the task of assessing their current systems. Simon writes:

    I wanted a professional opinion on a proposal I have made to move from file-based version control (i.e. manual folder management) to full-blown source code management.
    Is it worth making the change from an existing system and move to something like Subversion for a team of our size, considering that this would change the processes for those who have been here the longest quite considerably?

    Version control is one of those things that you already know you should be using, and if you’re like me, have promised yourself for a while that you’ll get round to learning and integrating into your own workflow. Chances are that one day, disaster will strike and you’ll realise why it’s so important.

    I’m going to be honest with you here, I can’t profess to be an expert in version control. I’ve been playing around with it, and the team I work with are very close to making it a mandatory part of our design and development workflow, but I hope i can provide some form of assistance in your decision to adopt a version control system, and maybe convince myself in the process.

    That being said, I don’t think there even is a decision to be made. You – need – version control. There’s no real question about it. The biggest challenge we face is integrating this into our existing workflows.

    Let me take a step back, and explain what version control is for anyone unfamiliar with the concept.

    Version Control Systems (VCS) (also known as Revision Control, Source Control or Code Management) is a way of managing multiple versions of the same information, which is most likely – in this case – the source code of your website.

    In the simplest terms, VCS allows you to keep track of the development of your source code, keeping track of the changes you make as you go along with all the changes being stored in a repository. You may already use a crude method of version control yourself, naming files such as index1, index2 etc. VCS systems keep track of all these changes, and let you revert to any previous version if the need arises.

    The real benefit of VCS comes when you have more than one person working on the same file. Instead of you overwriting each other’s changes, or attempting to manually merge the changes from one developer with the changes of another, the VCS can take care of all this for you, creating branches for each developer to work on which allows multiple developers to work on the same file simultaneously, then merging the changes into a single version, highlighting any conflicts or problems that may arise.

    There’s plenty of more detailed descriptions of VCS systems online if you’d like to learn more (Wikipedia might be a good place to start), so I’ll save diving too deep into the rabbit hole for now, I’m sure that if you’d really like to learn more, Paul can work it into future shows. For now, I’ll return to our case in point; “Is it worth making the change from an existing system and move to something like Subversion for a team of our size”.

    I work in a team of 11, with 2 other designers and 3 other developers, and we ran into issues recently with a site that needed some last minute changes made. I was asked to do some markup modifications and CSS changes which required me to modify multiple files. This project wasn’t in a VCS system, so I was given a copy of the files on a flash drive. I made my changes, re-saved the files to the flash drive and handed back to the designer. In the mean-time, the designer had made other changes to the files, and needed to merge my changes with her own manually by copying and pasting from my copies of the files. To further complicate matters, the developer then needed to take these files and integrate the markup and CSS into their .NET templates.

    I don’t need to tell you that this was an absolute nightmare, at one point we were managing 5 local copies as well as 2 remote copies (one on the dev server, and one on the live server) To be fair I’m not sure if the team has ever hit a problem such as this before, with multiple people working simultaneously on a project and unfortunately we don’t have VCS as a mandatory part of our workflow as yet, but after this experience, I’m sure it won’t take long.

    If we did have VCS, I could have checked out the necessary files, made my changes, and checked them in, the other designer could have checked out the same files and made her changes simultaneously, and also checked them in when she’d finished. Then we could have simply merged these together into one, any conflicts would have been highlighted for us to easily rectify. The developer, when ready, could easily deploy these from the dev server to the live one with a couple of commands.

    There will be issues with integrating this into your own processes, especially with people who have their own tried and tested systems, but personally I think you really have to put your foot down here. VCS should be a mandatory part of your workflow, especially as your team grows and there are more people involved with projects.

    If possible, I’d recommend arranging training sessions on whichever VCS you choose to adopt, you should only need a day, or even a half day to go through the basics of using a VCS for your dev team, I’d even wager (or should that be “hope”) that those who have been professional developers for some time will already have experience of one form of VCS or another and shouldn’t be resistant to using one.

    My last point would be to explore the various VCS systems on offer. The main 3 that come to mind when writing this article are Subversion, GIT and Mercurial.

    Subversion (SVN) is the system that most listeners will have probably heard of. SVN is a centralised VCS system which centers around a single repository. Subversion is a well known, and generally well supported tool with a wide range of user interface tools available such as such as IDE extensions for most popular IDE’s and Windows Explorer shell extensions like TortoiseSVN. There’s also native Windows and Mac GUI tools available to make the normal command line interface a bit easier to digest.

    GIT and Mercurial are slightly different in that they’re Distributed Version Control Systems (or DVCS for short). While Subversion manages a single repository, a DVCS system like GIT has multiple repositories. The best way I can explain is that imagine if my team was working on a project, and we had a repository on our dev server, I can then clone that whole repository to my laptop, and take it away to work on at home, on the train, or at the top of a mountain if I so wished. With a centralised VCS like subversion, you really need access to that central repository to commit your changes, with a distributed system, al
    l your developers can mainta

    in their own local copies of the repository, commiting changes to the master repository when needed.

    GIT is actually the system I’m getting to grips with at the moment, the branching, tagging and merge tools are more stable than the ones within Subversion. Please note that I’m not trying to bait anyone here, and I don’t want to get into a flame war about which VCS is better than the other. GIT’s distributed nature makes more sense to me personally, and allows me to manage my branch without network access if needs be, and in the event that our development web server with the master repository blows up, each developer has a copy of the repo in some form, and there is a good chance that the whole codebase can be rebuilt easily.

    So I hope this persuades you into adopting some form of version control, but if you really ask yourself, you already know that you need to use it, and to return to Simon’s original question, I bet your developers already know they should be using it, they just need a little encouragement to integrate version control into their processes, the benefits far, far outweigh the disadvantages.

    By Paul Stanton

    130. Air

    Posted in Classic shows on by Paul Boag

    On this week’s show; Paul talks about better understanding disabled users. We have a tip from Jeremy about problem solving and Jonathan Snook introduces us to Adobe Air.

    Download this show.

    Launch our podcast player

    Housekeeping

    A few pieces of housekeeping I wanted to quickly mention at the start of this week’s show.

    • FOWA – The guys over at Carsonified have been kind enough to offer boagworld listeners a 15% discount off of the upcoming Future of Web Apps conference in London. The conference takes place between the 8-10 October and is an absolutely superb event. To claim your discount use the code FOWA-bw at checkout. There are only 50 discounted places, so be quick.
    • SXSW – Talking of conferences can I ask a favour of you all. Marcus is desperate to go to next years SXSW conference in Texas. However he is only allowed to go if he is speaking. As you may know speakers for SXSW are chosen using a voting system. So, in order for Marcus to attend SXSW he needs your votes. Give an old popstar a second chance. Go vote for him now!
    • Think Vitamin - Finally I just thought I would quickly mention an article I have recently written for the Think Vitamin website. It is entitled "the 5 hidden costs of running a CMS" and I thought you might be interested in check it out. It is an extract from chapter 8 of my book the Website Owners Manual, which as I have said many times before, you can download right now ;)

    News and events

    Designing for emotion and flow

    Not long ago I wrote an article for boagworld on the importance of context. In that article I highlighted elements such as time, mood and environment as key factors that contribute to a users context when accessing your site. This context directly impacts how the user interacts with your site. What I didn’t tackle in my article is exactly how context should affect the way you design.

    An article called "Design for Emotion and Flow" on the boxes and arrows website, takes my post a step further by going into a lot more detail about what affects users behaviour and how we should design in a way that accommodates their state of mind.

    Its quite an in-depth article but worth the read. It touches on user physiology as well as issues of environment and although it can be slightly theoretical at times, it focuses in on what you can practically do towards the end.

    Articles like this always leave me with mixed feelings. They can easily feel overly analytical to the point where you wonder if they are applicable in the real world. However, in my experience if you take the time to read and digest them, they start to influence the way you design on an almost subconscious level.

    7 essential guidelines to functional design

    By contrast our next article is much more down to earth. The "7 Essential guidelines to functional design" is another post by smashing magazine and focuses on some fundamentals of good design.

    However, don’t get the impression that this is just an article for designers. The principles it talks about also apply to developers and website owners. Basics such as the goal and audience for your site are things everybody should be considering.

    According to Smashing Magazine the 7 essential guidelines to functional design are:

    • Consider our product’s goal
    • Consider who will be using it
    • Consider what your audience intends to do with it
    • Is it clear how to use it?
    • How does your user know it’s working?
    • Is it engaging to your users?
    • How does it handle mistakes?

    Whether this is the definitive list, I am not so sure. However, it is a worthwhile read especially if you are just starting out.

    15 companies that really get corporate blogging

    While we are on the subject of lists our next post is "15 companies that really get corporate blogging". What can I say, I am a sucker for a list!

    This one is really for those of you who run a website and in particular run a corporate blog. As the name suggests it lists companies that do a good job at blogging. However, it is not the list that attracted me to this article, it is the reason why the companies got on the list.

    There is a lot of good advice to be gleaned from this post. Just a few snippets I picked up include:

    • Don’t just pimp your products, talk about other stuff too
    • Post regularly
    • Encourage conversation
    • Be candid and open
    • Offer advice and lessons you have learnt

    The list could go on. Corporate blogging is by and large a disaster with many companies just failing to ‘get it’. According to a recent report, 56% of corporate blogs just republish press releases and two thirds hardly ever receive comments. However, as is highlighted in this post there are a growing number of organisations that are doing things right and we should follow their example.

    Learning from signage

    If you have listened to this show for any length of time you will know I am a great fan of looking beyond the web for inspiration. I also believe there a lot to be learnt from other forms of design including signage.

    It would appear that Mark Boulton would agree with this sentiment judging by his recent post on airport signage. Mark, compares the signage in two airports and looks at how the lessons learnt apply to web design.

    Some of the gems he discovered include:

    • Signage should work without colour coding
    • Only designers care about fonts
    • Don’t rely too heavily on pictograms
    • Always put your ideas to the test

    This is a great article which should (if nothing else) encourage you to look at the world around you for inspiration.

    Back to top

    Interview: Johnathan Snook on Adobe Air

    Paul: Joining me today is Johnathan Snook who I recently saw at the @Media conference. It was great to see you there again Johnathon.

    Johnathan: A pleasure to see you there as well.

    Paul: You really got me with your presentation. It was an excellent presentation. Very, very enjoyable, and you touched on the subject of Adobe Air. It wasn’t the main thrust of the presentation, but it was the bit that really grabbed my attention so I thought "let’s get you on the show and have a bit of a chat about it" if that’s O.K. with you.

    Johnathan: Absolutely.

    Paul: Good. So, let’s start from the absolute basics so that we’re all on the same page. Could you just explain very briefly what Adobe Air is so that people that haven’t come across it before kind of know what it does.

    Johnathan: Certainly. Adobe Air is a development platform for making desktop applications to make desktop applications cross-platform. So, something that you build once and that would work on Windows, Mac OSX as well as Linux.

    Paul: O.K. And this is built using web technologies…

    Johnathan: Yeah, It’s really great that they’ve managed to leverage what they know things like Flash, Flex, and really the kicker is being able to develop desktop applications using HTML, CSS and JavaScript that, obviously, a lot of us web developers are going to be familiar with.

    Paul: Sure. So, I mean that’s I guess why we’ve included it on the show even though it’s a web design podcast, that kind of line between the web and desktop applications seems to be blurring and Air is a big part of that. What drove you to kind of investigate it and kind of look into Air as a product?

    Johnathan: For me, it was just a curiosity. The platform, what it could do, knowing that I could create a cross-platform desktop application was kind of enticing. When we build for the web we’re trying to do things as cross-platform as possible make sure that we target as many browsers as we can, and really be able to reach out to the people and do really cool things. So, for me it was like, O.K., well what can I do with this what are the possibilities. One of the first things that went off in my brain was building a Twitter application. At the time, when Twitter was up for more than 24 hours straight, it was kind of cool to be able to build a desktop application to kind of separate out from the web, because the web site was frustrating me to know end, and to be able to put in stuff that made the site more usable for me and in the end was a tool that I got to use every day and that I enjoyed to use.

    Paul: Cool. I’ve kind of got a basic understanding of it. I understand what it does and I understand the kind of technologies that exist under it, but can you kind of give me an idea of, you know, how it works as such. I know how to create an HTML page, CSS and Javascript and stuff like that. How do I get from there into turning it into a Air application?

    Johnathan: It’s surprisingly quite easy. What happens is, if you look at the Air runtime, is it essentially runs your Air application, so you don’t create a .exe file or a .dwg file you don’t create an executable in the traditional sense. What you end up doing is creating a .air file that you use to distribute. The Air runtime actually handles that. Building that .air file, there is an SDK available from Adobe that allows you to compile this Air file. So, those Air files are pretty straight forward, they’re really just like a ZIP file with some extra information in it. So, to create an actual Air application, you can do it just using a normal text editor, you can do with specific IDEs like Eclipse. If you’re into Flex development, they have Flex builder. If you’re into just doing HTML and CSS kind of thing, you might want to look into Aptana they have Air support built right in. If you’re a fan of Dreamweaver, there’s a Dreamweaver extension for automatically compiling your application, and being able to set properties on your application. So, things like how big should the window be when it opens up, can I resize it, what kind of stuff can I do with it. That obviously, in this GUI sense, to a certain degree can make things a lot easier. So, I think there are a lot of benefits to using an IDE with built in support, but you don’t have to. There is the capability of just using a normal text editor and then running the SDK command line sequences to actually generate the Air file. It is really straight forward.

    Paul: So, the one selling feature or one thing about Air that’s been promoted quite heavily is the fact that you can take online applications offline in a sense. The application is still usable even if you’re not connected to the Internet at a particular point in time. I think they showed off, right from the beginning, an eBay example of that where you could do all kinds of things offline, and then when you connected it was all uploaded. How does that kind of process work? There must be some kind of local database that’s running, one presumes.

    Johnathan: That’s correct. I think some people may be familiar with Google Gears in having the local storage using the SQLite database. Adobe Air actually does something very similar. They do have a local SQLite database that you’ve seen create local databases and store any information there. There’s actually different ways. You have access to the local file system, so you can certainly write new files. Say, if you wanted to create new text files, xml files, new binary formats. So, if you wanted to create an image editing software that stores files in a binary format, you could do that. So, there’s a lot of flexibility there because you do have some access to the local system. You have network connectivity, so you can do either regular AJAX calls or you can do socket connections. You can connect to web servers. You can connect to remote database servers. You’ve got a lot of flexibility and a lot of control because of that.

    Paul: You seem quite enthusiastic about the development environment. What has been your impression of it. Was it something that was a steep learning curve, but when you get there it’s really cool, or is it easy straight out of the box? What were your impressions?

    Johnathan: I think it’s going to depend on what it is you’re trying to do. I think that there are going to be some frustrations. There are going to be some things that you have to understand about the environment. To give you an example; the HTML/CSS stuff is pretty cool it basically runs on a WebKit engine, which is the same engine that powers Safari. That gives you a lot of control and stuff, but ultimately that WebKit engine is still running within a Flash runtime. So, there are some limitations to that because of the fact that Adobe just simply hasn’t built in certain support. Things like support for double byte character encoding, so Chinese and Japanese character sets can be more difficult. However, they are working on that. Version 1.1 is supposed to be coming out soon it will have support for that, but right now you’re limited because of that.

    Paul: What kind of people should be delving into this. Is this the kind of thing that only a hardcore developer like yourself should be touching or is it something that somebody like myself that would be a front-end interface designer should I even bother picking it up or am I better keeping away?

    Johnathan: It’s really easy to develop in. I think you can make really quick solutions really straight forward. To give you a comparison; there is a Mac software called Fluid for creating site applications, but that is separated from the browser. You can kind of plot the same kind of things with Adobe Air because you do have that WebKit engine. You can basically use it as a browser. So, to give you a quick example; Muxtape, which is an online mix-taping thing you upload MP3s, and then people can go to your page and listen to your mix tape… The problem is that if you accidentally close the browser, you lose that information. I think there are a lot of websites that have this stickiness factor where you want to decouple the application from the browser. So, I put together a really basic example in which you type in a URL and it loads up a mix tape. That’s a very straight forward interface, but to be able to do that in a desktop application that I can minimize to the dock or the system tray is something that is, I think, a lot more appealing than running this kind of stuff through the web browser. And, it was really easy to put together. I spent about an hour one evening to put that kind of thing … I mean it is a very basic prototype, but the fact is that it is very straight forward to put that together. So, I think if web developers have ideas, they can really take advantage of that and build pretty cool stuff.

    Paul: So, it’s not something we need to be intimidated of, then.

    Johnathan: No, absolutely not.

    Paul: The other thing that maybe is a bit of a concern to us very standards-based designers in comparison to the Flash community is that Adobe says we support CSS and HTML, as well as Flash, but obviously Flash is their product. You kind of get this feeling that they’re going to always support Flash more and that CSS and HTMl are a bit of an afterthought. Is that the case, or is that unfounded?

    Johnathan: To a certain degree, it is the case. It’s, I think, unfortunate. I think they are more familiar with Flash. They’re more familiar with that environment. So, as you try to build the equivalent of a browser within this Flash runtime it’s going to be extremely difficult and I think things are going to get missed. And, I saw that sort of along the Beta process. Things like no support for "undo." I mean, that’s a pretty basic thing, but the fact that that’s not built in there does hamper people trying to build HTML-based applications. It works great in Flash-based applications and then what you end up running into is, to give you another example with Snitter, my little desktop Twitter application because it’s built using HTML and CSS, it had certain limitations, but there’s other Twitter clients built with Adobe Air that were built using Flash that actually have different limitations. So, people would say, "Well this application can do it just fine. Why can’t yours?" You have to kind of explain to them that it’s because of the limitations of how the environment was developed. Despite the fact that they are both still Adobe Air applications, technically they’re done differently and there are maybe more limitations as a result of that.

    Paul: Is there an opportunity to mix Flash and XHTML and CSS and whatever else together, or do you have to make this decision up front?

    Johnathan: No, absolutely not. Certainly, within the Adobe Air environment, you have that flexibility to create these little hybrid applications. I think Snitter, for example, is a good example of it. There’s a lot of Flash components out there that can do certain things. For example, a bunch of folks made an iMap component, so you can actually connect to an iMap server. However, that component is Flash-based. Another component out there that I saw was a Jabber client. So, let’s say you wanted to do a GMail chat client or some other Jabber-connected application, you can import those Flash runtimes into your application and use them from Javascript. So, you do have that flexibility to use both technologies and take advantage of that. I’ve certainly done that with Snitter, and I’ve done that with other applications as well because we have that flexibility of the environment. I think there is that sort of understanding that you can do that, and actually look out for the solutions that not only are HTML and Javascript, but that are Flash-based as well and come up with new ways of thinking because I think, traditionally, as web developers, we tend to separate those two as much as we can.

    Paul: That’s quite interesting. You talked about this kind of hybrid approach of combining Flash and HTML at @Media combining them together and about how we had some fears as standards-based designers of even touching Flash in any kind of context. Is that a kind of approach that you would apply beyond Air to the web generally?

    Johnathan: Absolutely. I think MuxTape is a great example of that. To be able to play MP3s isn’t something that’s easily done using Javascript. However, you can take advantage of Flash and use its capabilities to play MP3s to create new interfaces that aren’t specifically 100% Flash-based; that we have something that’s still HTML and Javascript that interacts in ways that I think a lot of us are comfortable with, but still have access to a lot of features that Flash offers to us you know, the fact that we can create the bridge between the two; we can do that on the web just as well as we can do that within Adobe Air.

    Paul: O.K. That all sounds very interesting and it certainly has made me want to kind of pick up Air and have a play with it and kind of get my hands dirty. I guess, perhaps as the last question then, is what tips would you give to people like me that haven’t yet touched Air and are considering having a play. What are the big traps to avoid? What are the good things to start with. Where should I begin the journey, so to speak?

    Johnathan: I think probably one of the first things you should do is head over to the Adobe web site. They have a number of really good resources to start off with. Obviously, you’re going to need the SDK so you can actually build your applications, but they also have the dev center where they have a number of introductory articles to learn how to build applications and it doesn’t mean those applications have to be built using Adobe applications like Dreamweaver, you can certainly do them without. So, there’s a lot of really good tutorials on there. From there, they lead off to a number of resources outside of Adobe that would certainly help you get started.

    Paul: What about mistakes? What were the big mistakes you made up front that, with hindsight, you would avoid? Or, did you get it right the first time?

    Johnathan: I don’t make mistakes! Well, I think one of the cool things about the environment is certainly the flexibility to take advantage of a lot of advanced CSS. Because you are using the WebKit engine which, when it comes to CSS 3 support, is one of the most advanced, you know that you have support for things like rounded corners, border radius, that you have support for multiple backgrounds, image-based borders you can do some really cool stuff with that that is really fun to play around with. You can create transparent applications, so if you wanted something that was completely and uniquely shaped, you can do these really cool things. The downfall for that is that you can quickly start running into performance issues. If you start creating all of these alpha PNGs that are layered over the top of each other, they give you a lot of flexibility, but unfortunately are a performance drain on how much your system can actually handle. I think that was one of my initial mistakes going in and saying "Wow, I’ve got all of this stuff that I can use let me throw everything at it" and then realizing that, you know, maybe that wasn’t the best solution. I think we still have to be wise in considering how we structure our CSS, how do we structure the design in such a way that, while it’s still flexible, it still does things from a performance-minded aspect so we’re not doing things that are going to unnecessarily slow down or application. Those are things that we’ve got to think about.

    Paul: That’s some really good advice Johnathan. Thank you so much for coming on the show. That was a great introduction to Air. Hopefully it’s encouraged a lot of people listening to the show to go out there and give it a go. Thanks for coming on and talk to you again soon.

    Johnathan: Awesome. Thank you very much.

    Thanks to Aaron Cooper for transcribing this interview.

    Back to top

    Listeners feedback:

    Getting a feel for accessibility

    Our first contribution is from Kenneth and is about accessibility:

    I listen to your podcast all the time and am working hard to become a very good web designer. My question for you is about accessibility, I hear a lot of people talking about it but not a lot of web designers are working hard on it to create sites that disabled people can use. I want to be a person who builds accessible sites that really work. How would someone know if their site is really accessible? How can you feel what disabled people are feeling when they visit your site? Could you talk about the different tools that disabled people use to go online so that we can use those tools and try to understand how they feel.

    Okay. Let’s start by clearing up a minor point. Validation is not directly related to accessibility. Having a site that validates does not make it accessible. Equally, a site that does not validate is not necessarily inaccessible. Admittedly a site that validates is more likely to be accessible, but that is all. It is great you validate your code and you should continue to do so. However, it is okay if your site does not always validate. There are good reasons why Boagworld does not and I am sure the same is true for Clear:Left.

    Let’s turn our attention to the heart of the question; how can you better understand the experiences of disabled users? It is an admirable aim but one that ultimately is impossible to achieve. There are so many different types of disability that you cannot associate with them all. That said, I can make a few suggestions which might help.

    A good place to start is by trying out a screen reader. Increasingly screen readers are bundled with operating systems. Recent versions of Microsoft Windows come with a basic Narrator, while the Mac OS includes a more feature-rich screen reader called VoiceOver. However, the most widely used screen readers are the separate commercial products like JAWS for windows. This is probably a good place to start as JAWS offers a free trial version for you to experiment with.

    However, be warned. When you first use a screen reader it is an intimidating experience. They take a lot of getting used to and can leave you with the impression that a blind person will never be able to use the internet. An alternative would be to watch a demonstration of a screen reader in action. Ian Lloyd did an excellent demonstration for Boagworld a while ago.

    Of course not all visually impaired users are blind. Some use screen magnifiers which enlarge screen content. Again, most operating systems have this functionality built in so you can easily try this for yourself. However, there are also a number of commercial products you can try out too.

    The other form of visual impairment worth investigating is colour blindness. Although not as serious, it is far more common and affects a large number of users. There are a couple of tools which will give you an idea of what a colour blind person is seeing. The first is Colorblind Web Page Filter which allows you to enter a url and see what that page would look like to a colour blind user. The second is Sim Daltonism, a colour blindness simulator for the Mac OS. Both will help you better understand what the web is like for colour blind users.

    The final little tip I want to share with you is kind of stupid but does sort of work. I do a lot of design for the elderly and they often suffer from a mixture of visual problems and motor issues (like arthritis). In order to better understand their experience I have bought a pair to ski gloves and some reading glasses (I don’t need reading glasses). Every now and again, I surf the site I am designing wearing both the glasses and gloves. The glasses make the screen hard to read while the gloves hamper my use of the mouse and the keyboard. There is nothing more frustrating than trying to select something from a drop down menu wearing ski gloves!

    Turning problems upside down

    Our second listener contribution for today is not a question but a tip. It comes from Jeremy and he writes:

    I can’t remember the name of the book off the top of my head (Getting Things Done?) that you’ve been recommending, but you mentioning it reminded me of a problem solving method that I learned a few years back that I thought you might enjoy. It’s called turning the problem upside down. It sounds stupid, but honestly it works pretty well.

    The principle behind it is if you can’t figure out a solution to a problem or are having trouble coming up with different ideas, you turn the problem upside down, or invert it, and then come up with solutions for the backwards problem. For some reason it’s much easier to think of the backwards solutions. Then you flip them back to normal and there are your solutions. Sounds confusing, so here’s an example:

    Problem: You want to increase traffic to your website

    Turn the problem upside down: You want to decrease traffic to your website

    Some ‘off the top of my head’ Solutions:

    • Make the site unfriendly
    • Randomly shut it off
    • Never update anything
    • Be rude
    • Keep key content hidden or difficult to find

    Now let’s flip the solutions back again and see if they solve the original problem:

    • Make the site more warm/friendly
    • Make sure it stays up reliably
    • Be good about frequently updating content
    • Be aware how of my copy and if I’m talking down to my visitors
    • Make sure the good content is easy to find and prominent

    What a great little tip! Excellent when you are suffering from creative block. I love it when you guys send in suggestions rather than questions. I know from the forum that the boagworld audience is hugely experienced and its great when you share that experience. Keep them coming!

    129. Conferences

    Posted in Classic shows on by Paul Boag

    This week’s show sees the return of Ryan and Stanton, holding the fort while Paul and Marcus sun themselves on holiday. .

    We’ll be talking about taking your first steps into the world of conferences and answering your questions about font smoothing and browser emulators

    Download this show.

    Launch our podcast player

    News and events

    Release of Firefox 3.1 Alpha

    Last Wednesday saw a new developer release from the Firefox team. Firefox 3.1 Alpha, or “Shiretoko” is now available for download. Shiretoko is built on a pre-release version of the Gecko 1.9.1 platform and introduces several new features for you to play with.

    • Web standards improvements in the Gecko layout engine
      • They don’t actually say what improvements, so I guess we’ll have to trust them with this one but from what i can gather, they’ve added a lot more CSS3 selectors like :nth-child, the CSS3 “word-wrap” property, CSS3 columns, text-shadow, box-shadow, border-image and more.
    • Text APIfor the <canvas> element.
      • This is a quite detailed API for drawing vector text within the canvas element, and is sure to set the hearts ot typophiles beating just a little bit faster.
    • Support for using border images.
      • The design community has been screaming for this for as long as I can remember, the ability to specify images as borders. The whole rounded-corner craze might be slightly out-of-style now, but I’m sure we’ll see some innovation with this feature very soon.
    • Support for JavaScript query selectors.
      • Now I’m not completely down with the javaScript kids, so I apologise if i don’t get this quite right. But the query selectors seem to be a way to target specific selectors instead of having to filter a result set provided by the getElementsByTagName() call, you can now do the filtering before you execute the query.
    • Several improvements to the Smart Location Bar.
      • When you start typing a URL, Firefox starts giving you options to choose from, you can now filter those results while you’re typing.
    • A new tab switching behaviour.
      • Pressing Ctrl+Tab now gives you a filmstrip style overlay which lets you quickly navigate to your open tabs, and mimics the similar feature in most operating systems nowadays.

    The alpha is available from the Mozilla Developer Center.

    A List Aparts’ 2008 Survey

    It’s that time of year again, the A List Apart team have unleashed their 2008 survey “for the people who make websites”. The survey gathers a massive amount of information, with around 33,000 people taking part last year and covers a wide range of questions covering all aspects of our beloved industry.

    The survey covers everything from Age, Gender and Geography to Education, Employment, Vacation (holidays to the rest of us) and those oh-so-important salary details, how many hours worked and your methods of staying upto date with what’s happening in the industry. The data gathered is compiled into a comprehensive, yet easy to read report, and they also provide the raw (anonymous) data so you can do your own number crunching if you so wish.

    You can also have a look at the 2007 survey results if you wish, and Paul and Marcus will no doubt be covering the results of this years survey when they’re published. So this is a call to arms really, help improve this survey by taking part at Alistapart.com. We took part, so should you!

    The Future of Web Font Embedding

    The last news item is a blog post by Richard Rutter on the future of web font embedding. With both Safari and Firefox supporting web fonts in their 3.1 releases, and development releases of Opera, it could be time to start playing with web fonts.

    Richard starts by defining web fonts as using the @font-face rule to point to regular TrueType or OpenType font files on a web server, this is to clear up any confusion with Internet Explorer’s proprietary web font support with uses EOT font file, which is also a way to wrap the fonts in DRM, which i think might severely hamper any efforts to bring web fonts into the mainstream.

    The font foundries and type designers seem to view web fonts as the death of their industry, insisting that their revenue streams will be destroyed by piracy and free font embedding, rather than seeing this as an opportunity to really boost their industry.

    There’s nothing to say that the @font-face rule has to point to a locally hosted font file, The opportunity exists for the font providers to host the fonts themselves, and charge for their useage. This saves us, as designers, from having to install fonts on the machines we design on, and will undoubtedly allow us to choose from a much larger selection of fonts which can be switched quickly and easily.

    Back to top

    Feature: A Year on the Conference Circuit

    This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences.

    Back to top

    Listeners feedback:

    Font Smoothing

    Steve Writes: I have been listening to your podcast. I really like it.

    I jusr want to ask a question. On mac, the fonts seem to be all thicker than windows. What setting are u using? I’ve been using best for lcd. Today I changed to automatic, and the fonts were much thinner. It looks more alike with windows fonts.

    Do you think this is a big problem for mac users? Since the fonts will look different. Which setting do you think is the best for web designer on macs?

    The difference of Mac fonts compared to their Windows counterparts originates from Apple’s legacy in desktop publishing and graphic design, the fonts are rendered in a way which would give a closer approximation to how they would look when printed.

    Mac’s use a specific font wrapper called dfont, this contains extra information to preserve certain features like font outlines and hinting which can then be rendered more accurately on-screen meaning that in general, fonts look better on a Mac, whichever smoothing method you choose.

    If you’re a designer, I’d heavily recommend testing your design in as many different browsers as possible, but also on different operating systems as well. I work primarily on Windows Vista (don’t shoot me) and have a dualscreen setup, my second screen can be flipped over to my Mac where I can test in Safari, Firefox and Opera on Mac, I also run a Ubuntu system to test in. Rather than running a standalone IE6 build on vista, I run a full XP virtual machine with IE6 running natively as I just don’t trust the standalone builds.

    One of the main things you’ll have to accept is that your design might not look identical on any combination of browser or operating system, and because you’re probably designing websites to be viewed by other people, I’d recommend keeping your font smoothing to the default setting of “automatic” which is most likely going to be the case for your target audience.

    Browser Emulators

    Andy Asks: Hey guys. Been listening (on and off) for a while now and love the show.

    I was wondering if there is such a thing as a browser emulator, software that allows you to see your site as it would appear on IE, Firefox, Safari, Opera, etc. If there is one, is it total crap and not really work.

    The answer to your question is yes, there are several websites that can provide you with this type of service.

    One of the more popular sites is Litmus which is an online emulator that validates your HTML and CSS as well as presenting you with a screenshot of your website loaded in up to 23 different browsers across various operating systems. It can also provide you with a report of any compatibility issues it has come across. However there is a fee to get any real use out of this service.

    What Litmus does it actually does very well; however there are a couple of major draw backs I’ve found:

    • You can’t have an interactive experience – Not all issues can be seen from a screenshot and more often than not you need to just take your mouse and navigate around the site to find problems.
    • You can’t test javaScript – You can’t see javaScript animations from a screenshot.

    As Paul said in the previous question, there’s no substitution for the real thing, which is having multiple setups with multiple browsers installed. However that’s not always a viable option especially for freelancers working from home who don’t have the budget (and space…) to have several machines and licenses for operating systems needed for testing, in which case sites like Litmus are invaluable.

    My advice is if you can test on the real thing, do, if you can’t then take a look at Litmus.

    Back to top

    An interview with Freelancer Magazine

    Posted in News on by Paul Boag

    I have just finished an interview for Alex Stubbs over at freelancermagazine.com. Being a clever cookie he massaged by ego and convinced me to take part even though I am on a family holiday in Scotland.

    I hadn’t come across Freelancer Magazine before, but it certainly looks like a superb site. If you are a web design freelancer or are considering making the swap then definitely check it out. It has great features, useful resources and of course star studded interviews!

    But before you disappear over to their site take a look at the interview.

    Thank you, Paul, for taking the time to speak with us.

    Absolutely!

    So how are you enjoying your vacation in Scotland?

    Scotland is one of the most majestic places in the world. At least if it isn’t raining. I have found it incredibly inspiring being out of the office and away from the web. I have achieved so much more here because I am free from distractions.

    Getting to the meat of our discussion is your weekly podcast on Web Design, which is to date the longest running and most popular web design podcast.

    I believe you started this in 2005 and it has been gaining more and more recognition since. How do you feel this medium has served you and your web presence over the years?

    I was very fortunate to stumble into podcasting. I started out blogging but found that hard work. I love writing but find it much harder to express my enthusiasm and excitement for a subject. Podcasting was a natural fit for my personality.

    I doubt you would not be interviewing me if it wasn’t for the show. It has done a huge amount for my personal profile and that of my web design company Headscape. It is also what has enabled me to write the Website Owners Manual too. I doubt any of that would have happened if I had just stuck to blogging. There are simply too many blogs around. You need a way to stand out from the crowd and in my case that was through podcasting.

    Any future plans for video podcasting?

    I have thought long and hard about video podcasting and yet I do not have an answer for you. On one hand video podcasting is hugely popular and an enormous growth area. It would also enable me to show code and designs. This is something that constantly frustrates me about audio podcasts.

    However, on the other hand I am aware that many people listen to my show while walking the dog or commuting to work. You cannot watch a video podcast in such circumstances. Video demands your attention in a way audio does not.

    Probably at the end of the day it will come down to return on investment. Doing a full blown video podcast is a lot of work. Unless we can make it pay for itself I doubt it will happen. For now people will have to be satisfied with the audio show and the live ‘behind the scenes’ video stream.

    You also have a new project in the works which has gone live recently on boagworld.com: “The Website Owners Manual.“ Which from what I’ve read seams to be an evolving manual for anyone interested in running a successful website (from start to finish)….

    I am really excited about the Website Owners Manual for a couple of reasons. First, there are so few books aimed at website owners or managers. They are all aimed at designers and developers. However, the client is key to the success of a project and there are certain things they need to know. Second, I am excited by the way this book is being produced. Instead of simply being published, this book is evolving through social participation. You can get access to chapters right now and have the opportunity to comment on and contribute to those chapters. I collect your feedback and adjust what I am writing accordingly. At the end of the process you get the final product. Its publishing 2.0… or something like that .

    Sounds very progressive! Here at FM the bulk of readers seem to be beginning freelancers who themselves will need to know a bit of knowledge you’ve outlined in this manual… what points do you think this book would be most important to our readers?

    I think the main thing will be how to better communicate with clients. The problem with most people who choose to start freelancing is that they under estimate the challenges of dealing with clients. You might be the best designer or developer in the world, but if you cannot deal with clients effectively you will fail. The website owner manual shows you what clients need to know and demonstrates ways of presenting that information to them.

    So you’re the Creative Director at Headscape, you run a weekly podcast, you speak at numerous web design and marketing conferences, and still find the time to write a book. I think even David Allen himself would be proud… whats your productivity secret? Whats your daily life like?

    I am a huge fan of David Allen and follow the Getting Things Done methodology closely. However being organized is only half the battle. The other half is recognizing what you are good at and sticking to that. I know I am an ideas person. I am great at starting stuff and terrible at finishing it. I therefore surround myself with people who are good at following through.

    At Headscape I have three fellow directors who are expert at managing me to be at my most effective. They bring me in for short bursts of activity when a load of ideas are required and then quietly push me to the sidelines when the REAL work begins.

    With the podcast, I rely heavily on the community to make it happen. There are people who transcribe the interviews, moderate the forums and even produce the show. There is Paul Stanton who helps me source news stories. Ryan Taylor produces the show by organizing guests, writing show notes and much more. Finally there is Anna Debenham who is our technician. She edits interviews, manages the site and handles the RSS feed.

    These people all give up there time because they love the show. That makes me feel very honoured. I would be lost without them and feel guilty that they don’t get more out of it.

    You started out as a Web Designer and evolved into other areas since, I’m guessing mostly due to your success with your podcast. How was your early experience when starting out as a Web Designer?

    I started out designing for the web back in 1994. I was working for IBM producing CD-ROMs for the first generation of multimedia PCs. While doing this IBM decided to start taking the web seriously and so I got involved very early on.

    I was just a junior designer which was why I was given the web stuff. It just wasn’t important back then. My career ended up growing in line with the growth of the web. As the web became higher profile so did my job until eventually I ended up working as a creative director at a dot com company in the late nineties.

    Basically, I just lucked out. A lot of success is luck. The idea that successful people are in someway more talented or better is just not true. It is about being in the right place at the right time. That and having a big mouth and being willing to shout about how good you are!

    What advice do you have for those looking into starting out as a Web Designer themselves?

    Wow that is a hard one. Its very different starting out today compared to my experience. That said, here is my gut reaction.

    First, know the basics. Focus on HTML, CSS and Javascript before anything else. Don’t get distracted by the latest fad or the more exciting trend. These are the fundamental tools you will always need.

    Next, find talented people you admire and get alongside them. Don’t be shy in approaching them. In my experience they love the attention!Follow their work, ask questions and look at who they follow and admire.

    Finally, get involved in the web design community. Go to meetups, conferences and other events. You will learn so much from your peers. Far more t
    han from a book
    or university course.

    128. Details

    Posted in Classic shows on by Paul Boag

    On this weeks show I’m accompanied by our Producer Ryan and Researcher Stanton. We Interview Dan Rubin on the Details of Design, and answer your questions on managing a bigger team and terms and conditions.

    Play

    Podcast: Download (23.0MB)

    Download this show.

    Launch our podcast player

    News and events

    Silverback Launches

    This week has seen the release of Silverback, the highly anticipated app from the guys at Clear:Left. After months of speculations about what Silverback actually was, the “spontaneous, unobtrusive, usability testing software for web designers” is finally available for download.

    We’re sure a majority of you know all about Silverback, but for those of you who don’t, Silverback, which is available exclusively for the Mac, is Clear:Left’s answer to convenient usability testing on the go. Utilising the iSight and screen capture facilities of the Mac, user’s experiences can be recorded and reviewed at a later date, taking away the costly and often difficult to setup up approach of using specialist equipment like multiple camcorders which can lead to hours of time spent trawling through video footage.

    PatternTap

    Whether you’re a designer or developer, there are many occasions where you go on the hunt for inspiration in interface design. Normal CSS Gallery sites give you great examples of full site design, but usually don’t focus on the small details of interface design. The only site i’ve ever been aware of is Christian Watsons “Elements of Design“, which is a great resource showing examples of elements like comment forms, calendars & date pickers, footers, image captions and so on.

    There’s a new site I’ve come across this week called PatternTap.com which also wants to collect these design patterns and focus on specific elements of design and to help you to reference, collect and organise them for your own needs.

    PatternTap is shaping up to be an absolute goldmine of inspiration, and looks like it will build into a large resource of design element exmples. There’s currently 46 collections, everything from 404 pages, audio players, pagination and search boxes. It let’s you create your own “lightbox” style user sets, so you can keep your favourite examples organised for future reference.

    I’ll definitely be adding this to my toolbox of design inspiration links, and recommend you give it a look too.

    Google App Engine Update

    This week also sees the release of a small update to the Google Apps Engine. The Google Apps Engine allows developers to build applications on Googles own infrastructure. I have to admit that the Google Apps Engine is not something I’ve developed with personally however that doesn’t stop us talking about it so let’s run through the list:

    • Firstly you can now have up to 10 apps on your account as opposed to the previous limit of three 3, the Engine also limits developers to 1000 files per application, so the increase in the number of apps you can now have is a welcome addition.
    • Time windows for Dashboard graphs: Zoom in on the data in your dashboard to get a more accurate picture of whats going on. You can zoom in to see graphs for the last 24, 12, and 6 hour periods.
    • Log files can now be downloaded in plain text.
    • And finally you can send email as the logged in user: If you’re using the users API, you can now send email from the email address of the currently-logged-in user were as before it was only possible from the administrators account.

    S3

    So some of you may be aware that Amazon’s S3 service suffered from some 6 hours of downtime recently, this echoes the issues of service availability that happened back in February.

    For those of you who don’t know, the S3, or “Simple Storage Service” is a scalable and inexpensive data storage infrastructure, which allows you to store and retrieve any amount of data.

    So this is a fantastic idea – in theory, it means that if you’re developing a large website or web app and need lots of storage, you don’t have to pay for huge webhosting plans with lots of physical diskspace, you store your assets “in the cloud” as it were, and you’re charged based on how much storage space you, and how much bandwidth you consume.

    Lots of large sites rely on the S3 service for their storage needs, Twitter, BaseCamp and SlideShare to name but 3 and the recent downtime has raised the age old issue, “are we putting all our eggs in one basket?” Jonathan Boutelle put it best in a recent blog post, stating “When S3 goes down, the internet goes down”. Aral Balkan also wrote recently urging people to have contingency plans in case events like this happen again, stating that the Open Source Google App Engine SDK could be the answer.

    Back to top

    Interview: Dan Rubin The Details Of Design

    Paul:Joining me today is Dan Rubin who I recently saw at the @media conference. Good to see you or speak to you again Dan should I say?

    Dan Rubin:Good to speak to you Paul.

    Paul:It was good to meet up with you at @media. It feels like a long time since we met up and it was great to hear you speaking there. That was a first for me.

    Dan Rubin:Thanks. It was a privilege to be able to help out Patrick it being very last-minute.

    Paul:Oh was it?

    Dan Rubin:He sent me an email about two weeks prior saying someone had dropped out and of course I wasn’t going to say no.

    Paul: laughs

    Dan Rubin:It’s been over 10 years since my last trip to the UK, so it was a great opportunity.

    Paul:Cool. Well I have to say considering you only had two weeks to put together the presentation, it was truly phenomenal. It was an excellent presentation and I really enjoyed it. You were talking about ‘design is in the detail’ I guess was the kind of subject you were tackling?

    Dan Rubin: I’ve been talking a lot lately about the level of detail, the attention to detail and the design and I’ve done a couple of presentations with Brian Veloso over the last year on that same kind of topic. This was an extension of that injecting some of my own little personal preferences into the talk and got to cover things like typography and some of the simple practical things that you can improve very easily that result in a big improvement and typography, and little tricks in using grids, not on how to make them but how to actually implement them and how they can help workflow and bring things together and make layouts tighter and better without
    that much effort and the same thing with digital transformations in photography and a lot of pixel detail that a lot of people don’t notice and its all about the subtle level of design.

    Paul:I got this vague feeling that as you were talking you were a little bit appologetic for some of these manushi that kind of individually you sit there and go ‘how is anyone going to notice that?’, but accumulatively they have this effect on the design don’t they?

    Dan Rubin:Well that’s the thing. It comes down more to feeling than seeing but its about as a designer what you feel with your eyes more than anything else and how that translates to what users or viewers or readers also feel but since they don’t know it is there, they are likely to never actually see it, but as a designer you’ll know it is there, you can see it, and the trick is to get it to the point of you can still see it but it is not really visible it is just felt.

    Paul:A subconscious expression?

    Dan Rubin:Yes.

    Paul:You covered loads of tips in your presentation and there was some excellent stuff in there but if you had to pick out one that has the biggest impact on a design, which of the many things you talked about would that be?

    Dan Rubin:I think what it would be is to really underscore trusting your eyes and it seems a really simple concept and whenever I put that up on the screen you get giggles from the audience. The truth is many of us don’t actually take the time as designers to just step away and look at what we’re working on. It doesn’t matter whether it is for screen or print. The medium is a material at this point and it is just having faith in what you see and what you feel. That’s what being a visual creative is all about. It is trusting what you see. It is the same as being a good musician comes down to trusting what you hear and sometimes we forget that, and we start getting into designing based on the rules or how we think we are supposed to do things or designing on technical limitations alone. When we do that we stop using our eyes.

    Paul:It’s interesting in the presentation you talk quite a lot about some of the details and the mechanics of design. You were talking about font sizes going incrementally up, your heading and your sub headings and there being a mathematical relationship in their sizes. You talked about being consistent in your margins and padding and how all those things inter-relate. Are we saying that design is something that can be learnt and it is a mathematical thing and it’s a set of rules that you just adhere to? Or is there some sort of underlying artistic thing, some people just know how to do it and it’s not something that can be learnt. What’s your opinion on it because I get mixed feelings from you? On one hand you talk about these rules and on the other hand you talk about stepping back and looking at your design and it feels more kind of arty-farty if that makes sense!

    Dan Rubin:What a load of questions and rightfully so! It’s something I’ve written about before years ago and had a bit of back and forth on the topic with Paul Scrivvens of 9 Rules, with him arguing that you don’t need any natural artistic ability because he didn’t think he had any, yet he was clearly doing things that looked good. I was arguing the opposite but when it comes down to it it’s really not something that you can say definitively either way. Just as there are people who naturally seem to be good musicians or good athletes or good at math and programming, there are people who seem to naturally be good at design and any kind of creative endeavours. It is really difficult to tell whether that seeming innate ability has come from something that happened in very early childhood development or if they were born with it. I do think that however difficult it is to put a finger on it, once you get old enough, especially to the point w here probably most of your listeners are doing what your doing for a living already or you are thinking of changing from one thing to another, you’re past that point of subconscious development where you need to put conscious effort into something and you can. I think you can be trained to do most of the things designers do. You can even train yourself to see the way that creatives see. The older you get the harder it becomes to incorporate into the way you view the world. That is a big part of it. That comes down to sometimes the different personalities. How hard is it to put a finger on what makes you ‘you’. I would say as a teacher, and I spend a lot of time teaching high school students over here about music as well, since that’s my other passion, and it’s specifically not just playing music but it’s specifically singing which is one of those things that you can either carry a tune or you can’t. I’ve also seen kids who can’t carry a tune when they start singing learn how they train themselves. They learn the proper muscle memory, and it’s amazing to see what people can actually accomplish when they put their mind to it. If you are listening out there and you want to become a better designer or maybe you’re not a designer and you’re a programmer or a web standards junkie, and I can say that because I am one too, and there isn’t any reason that you can’t become a better designer, or become a designer from scratch if you realy really want to.

    Paul:I think that’s really important to say because I think so many people are intimidated from getting involved in design because there’s almost a bit of snobbery. If you’re not artistic, you’re not artistic there’s nothing you can do about that. I personnaly don’t believe that that’s true. Like you say I think there are some people that are naturally inclined that way but I think a lot of the principles that you were talking about in your presentation pretty much anybody can pick up on and do, which is what encouraged me so much hearing you talk.

    Dan Rubin:That is one of the reasons why one of the reasons I say one of the most important thing is to trust your eyes and that’s instinctual. These rules, as a good teacher you have to teach these rules. When you start learning any discipline the first things that you are taught are the basics.The basics are things that many people, once they learn enough, don’t conciously think about, but what you find if you deconstruct their work is that they are doing them, they have incorporated into their flow into their process so it’s second nature to them. What we think of as instinct is really just experience.

    Paul:Yeah. One of the things you did mention in the presentation that grabbed my attention is you talked a lot about texture and adding more texture to your design and about how that creates a real feel. There seems to be a slight skism, I don’t know if that is the right word, but like 2 different camps in design at the moment. People like yourself, Elliot Jay Stock is another example that does very rich, very textured design. It’s absolutely gorgeous. At the other end of the extreme you’ve got people like 37signals doing this minimalistic functional design. How do you feel those two sides fit togeth
    er? Is there a role for one or the other or have they both got their place

    Dan Rubin:I really think that both have their place and more than that it’s popular to create divisions. Not just these days, if you look at any industry that spends a lot of its time looking at itself, like we do, you start to find reasons to create little clicks within it or factions or what have you. If you just ignore those splits that happen because we spend way too much time looking at what we do and try to deconstruct it and answer that question of ‘why’. What you find is that it’s all the same thing. When I talk about texture it is important to understand that it doesn’t just mean rough or ??bulap or brick. Texture can also mean smooth and polished and speaking directly about 37signals for instance. I’ve used their apps and I’ve loved them since the first time they came out. If you look at the first versions of Base Camp and Backpack, before their incremental re-design they’ve actually added the little drop shadow over time. If y ou look at it as a designer you see the flaws in the way they’ve done it because it doesn’t look real and it just ends at some edges, it has hard edges, but that’s not the point. The point is they added it because it created a separation, they added it because they felt it needed it. The rest of the interface doesn’t need any other texture because it isn’t supposed to have a feel to it. It’s actually supposed to totally get out of the way and there are different approaches to minimalism. You can use minimalism in subtle detail where you add in things like I was showing in my presentation, or you can use minimalism where you keep taking away and 37signals apps feel right, they always have felt right to me so as far as I’m concerned that means they’ve hit the nail on the head. It shows when you see people trying to recreate the application interface and theat style that 37signals uses and they get stuck in this pattern of adding things, like they feel ‘well, that’s 37siganls l ook so I think we have to add things to make it better, to make it better, and they never work as well because it’s not just about that. So the answer is, and I try to underscore this when I talk to people about this or present about it or even write about it, as much as these things can be presented as rules and definitive this is the way to do something. the fact is you have to do what works best for you and your particular project or circumstance or situation, and you also have to be open to the fact that what works for you right now might change. It might be different next year, next month or next week, and being able to adapt to your situation as a designer specially is really important, because you have to adapt if you’re doing client work, you have to adapt from project to project, because your style might work for one client but you might need to tweek your style to do what’s best for another client. If your working on your own applications, what works for your users now might not work for your users once they become users that have used your app for a year and they’re experts now.

    Paul:You talk about tweaking your style. How easy is that, do you think, to do in reality? I mean I’ve got a very strong style in my design, and I really struggle and I look at someone like Cameron Moll’s style and I just love it. I love the light-handed feel, he’s very delicate, beautiful design, and I wish I was more like that, but there is no way I can make myself become like that, or can I? Is there a way of changing your style?

    Dan Rubin:I think we’re all naturally mimics. I’m not going to dig into my opinions on human adapability too much. I spend a lot of time thinking about that as far as evaluating how people use things, whether it’s interfaces or products and it’s interesting to start to see those patterns but you can see it on a global scale too. Historically human beings are species very, very adaptable and that happens on macro and micro levels. If you want to adapt your style you can. You look for the inflences you want to model yourself after. This is just how people learn to be designers when they’re starting out, or learn to be artists. When I took my first watercolour and oil painting classes when I was 11 or 12, the way we learnt was to recreate examples that were painted by masters. So learn how to use the brush strokes they use, to learn how to mix colours the way that they use them, to learn how to use the tools the way that they use them becau se you only discover your preferences and your style by mimicing, copying others. You find out what works and you decide what works for you and what doesn’t. So changing how you design and how you see is not necessarily easy, because at a certain point you’re reprogramming muscle memory and from my experience with singing I know how difficult that is to do. Once muscle memory has been built up to the point where you don’t think about it and you just react, it’s very difficult to break that down and re-build it. Difficult does not mean impossible.

    Paul:That’s really interesting that you say that because I’ve always very much struggled to design in any other way than I already do, but I obviously need to push myself in this area. Talking of 37signals, I’m sure you have been following their recent post and various reactions to it about skipping Photoshop, and how they move straight into building with HTML and CSS and I just wondered what your opinion was on that.

    Dan Rubin:I know I’d get roped into this discussion somehow. There has already been some great responses from people like Jeff Croft and Mark Boulten to the 37signals post on that, and even interestingly enough a follow-up post sourced by 37signals announcing that they were looking for an additional designer for their team that can push them into different directions that they havent been going naturally. That comes back to the whole adaptability and willing us to change and being open to it. In the argument itself I can’t say I always start in Photoshop or Fireworks or some sort of visual tool. I think Jeff said 37signals starts with a visual tool, it’s pencil and paper. I think even if your tool is a marker on a whiteboard to a certain extent everybody tends to start there, even if you don’t start there you start with a picture in your mind. So there’s some level in the process where a visualisation is occuring, if that’s fair to say. When it comes down to it why does the tool that you’re using to visualise really matter? It starts in your head if you’re a primarily visual person you can either realise that vision by programming it and seeing it in the browser or using Photoshop as a tool. All of these are just tools when it comes down to it, they’re not the end result. They’re just part of the process. I’ve done both. I’ve built straight from XHTML and CSS many times and I do tend to find that most visual designers that have weighed in on this conversation also find that in my opinion the result ends up being more simplistic. that’s not necessarily to say bad. It’s just different and you’ll find that the tools that you use as a visual creative influsence the end result because that comes down to constraints. 37signals of course is huge on constraints and you do save time when you’re doing straight HTML and CSS, you skip a lot of the temptation to play around like I know I do with layers and layer setting s and percentages of opacity. I spend a lot of time playing when I’m in Photoshop, I don’t think that’s bad. That’s part of the creative process when using that tool. When I used to paint which I havent done in way too long. I would play with my
    palatte, when I was doing oils my palatte and my palatte knife was tool before I got to the canvas, and I would play with mixing my colours ‘and that’s not quite right’ and ‘wait and go over here’ and sometimes you get it onto the canvas and it doesn’t look the way you want it to and have to wait for it to dry and then you paint over it because that’s what you do with that tool. When you’re doing watercolours you don’t have that forgiveness of the tool, you have extra constraints, so you don’t experiment as much putting it on the paper, putting the paint to paper because you know once it’s dried and there you can’t go back. you can’t paint over it. So you adjust your style depending on the tools and the workflow and it’s all good, it ‘s just all different and you have to I think do yourself a favour and experiment to find which works best for you and don’t be afraid if you’re working on a project and you think ‘this doesn’t feel like it needs a lot of subtle gradients and lines and shadows and Photoshop work. I might just be able to build this without using Photoshop at all’. So do it if it feels like that will work best go that route. If you feel the opposite go the other route. If you feel like it should involve a lot more natural media pull out your watercolour pad and paint something and scan it in and incorporate that

    Paul:It really down to the right tool for the job thought process.

    Dan Rubin:Exactly. The thing that 37signals does really well is stick to their guns. They state their opinion so firmly that people can easily interpret it as law and I think that’s very important. In any industry it’s very important to have people who do that, who can stick to what they believe so strongly and apply it so universally that it creates this set of rules, but it doesn’t mean that they have to be followed or cant be partially followed or bent or broken and you find just as much as 37signals is enfatic about skipping Photoshop. There are other people who would never in a million years go straight to HTML and CSS, doesn’t mean that either camp is right.

    Paul:OK. One last question just to wrap this up. We’re running out of time but there’s something I wanted to ask you which is: We’ve been already talking about that there are people that may be want to learn to be better designers, to find their style and to move into this area, perhaps they’ve been a developer background and they’ve been previously put off exploring design because they have been made to feel inadequate. What kind of resources would you encourage people to look for or look at in order to get going I guess?

    Dan Rubin:Whether you’re starting from scratch or just trying to improve what you already have it’s important to touch on a couple of specific areas, and those are typography, layout and working with colour. This applies just to design because it’s worked whether you’re designing on the web or designing in print or branding or whatever you’re doing. Typography is kind of my first love with design and if you want to learn about typography you have to go out and buy ‘The Elements of Typographic Style’ by Robert Bringhurst. It’s the bible for typographers. It’s really easy to read too because he’s a well respected Canadian poet as well. He just happens to be an excellent typographer and book designer, so if you are in a rush, you cant get to the book store or Amazon right away Mark Boulton’s series ‘Five Simple Steps To Better Typography’ is a great place to start as well and he references a ton of other good resources. Start there if you a re going to start online but no matter what buy ‘The Elements of Typographic Style’. When it comes to layout there are a lot of things that you can learn about layout but you’ve got to learn about grids, even if you never use them. Do yourself a favour of learning and I’ll reference Mark again, actually I’ll reference Mark in all three of these. He’s got great starter tutorials about this stuff so ‘Five Simple Steps To Designing Grid Systems’ is really a great place to start. Cameron Moll has written about Griding The 960 and read up over on Khoi Vinh’s site about grids. ‘Grids Are Good’ is a great demonstration as well, and if you want to get a physical book to hold ‘Grid Systems In Graphic Design’ is a great, great phyisical book and I think it’s important to as web designers to also reference ‘Print’, because Print is where all these design rules come from and typography rules and colour rules, so learn from these different implem entations and you’ll figure out things that you can do that you didn’t think about, because you haven’t seen them on the web. So ‘Grid Systems In Graphic Design’ is by Josef Müller Brockmann I believe would be the pronounciation, look that up. Colour, and this is something that’s very preferential maybe but read up again Mark Boulton’s ‘Five Simple Steps To Designing With Colour’. He’s great at teaching, he’s great at communicating all these things. Also play around with some of the online tools like Adobe Kuler, is fun. Look at what other people are putting together, look at combinations, again feel is important. Whatever feels right for what you’re trying to do. Another cool tool is Colorjack. You got a couple of ways of mixing colours and it’s really, really cool to look at. Finally on the topic of colour whenever using colours in an interface please be aware of the different types of colourbl indness that exist, and there are lots of tools online. Photoshop CS4 will have some tools built in as well but there are plug-ins that you can get right now for all sorts of tools and online tools as well that allow you to see what you’re designing, or even just a colour palatte. See them through the eyes of someone that has these various colourblindness afflictions and make sure that whatever you do doesn’t render something unuseable to what ends up being a large percentage of the viewing public when it comes down to it.

    Paul:WOW !! That’s a good set of resources !! My word.

    Dan Rubin:You didn’t think I’d be that prepared did you?

    Paul:That’s a superb list. I certainly didn’t know about all those posts from Mark Boulton. there was some great stuff in there – Thank you very much Dan. Just to say that Dan’s talk at @media will be no doubt going live at some point and you’ll be able to download it and listen to it. Definitely do that, it was superb. So check that out. You will be able to go the shownotes for this episode for all those links that will be useful as well. No doubt you won’t be able to remember them all. Dan thanks for coming on the show, it’s very much appreciated and we will get you back on in the future.

    Dan Rubin:Thanks very much for having me Paul. It was a pleasure.

    Thanks to Sarah Galley for transcribing this interview.

    Linkage

    You can find Dan Rubins site, Superfluous Banter here.

    Typography
    Layout
    Colour

    Back to top

    Listeners feedback:

    Managing a Bigger Team

    Jon asks: We are a company of 4 people – myself (owner, design lead and general business development/project management person), one designer, and 2 developers.

    We are hopefully about to merge with a slightly larger company in a neighbouring town who have slightly more staff than we do (7 in all), and who have more of a project management structure – 2 project managers, using the services of 1 designer, 3 developers, and 1 designer/developer. I would end up as owner/MD of the enlarged company.

    My question is really about project management? What do you think is the best organizational structure for a company of 11 people? I was feeling pushed on the project management side before this merger came along, and the merger will bring 2 project managers with it. How does Headscape do it for example – I think you have project managers there – do the designers and developers report to project managers, or do the project managers pick from a pool of design and development resource as required? What are your thoughts generally on the whole project management side of things.

    A-ha… this is part two to a question I answered a few weeks back relating to pricing work after two companies merge. I wanted more detail at the time and now I have it!

    Comparing to Headscape, we have 4 designers, 4 developers, 3 project managers, 2 business development/analysts and 1 lazy good-for-nothing called Paul … seriously though, Paul effectively markets Headscape and I have to say he’s rather good at it (ungrits teeth…)

    Following the merger Jon will have a team of 11. As he is new MD, I think it is imperative that he much reduces the design and PM aspects of his role and concentrates on bringing in business as there are quite a few more mouths to feed.

    That leaves roughly 3 designers, 5 developers and 2 PMs. Depending on the work you’re doing I think that is ok especially considering Jon can bolster both the design and PM groups if needed.

    Regarding the allocation of work, project managers should rule the roost. Full stop.

    It is their job to manage resources. Delivering projects effectively and on time means that they must know that they are in charge regarding who does what and when they need to do it by. A certain amount of fitting the right person to the job should be done but generally, the rule should be that the next piece of work goes to the next available person. This would be particularly useful advice in a merged company where it would much easier to keep going back to ‘your’ guys because you trust them.

    One thing that has worked really well for us is to set invoicing targets for the project managers. We don’t operate performance related targets but it still really helps to focus minds on hitting milestones at the end of months.

    Terms and Conditions

    Adam writes: I am developing my own web application. In summary, it’s a site with user submission of content in a social networking format with video uploads. Anyone can register an account.

    I of course have to try and write Terms of Service for this and I am getting stuck. I am wondering what Headscape uses, especially for Getsignoff, and whether you found a pre-written terms of service, or had a specialist write one.

    What’s your solution to the problem, and what should / should not be included.

    I have to confess to conferring with Headscape’s fount of all legalese knowledge on this – our MD Chris Scott. I tried to get him on the show but he’s still a little jittery after the last time all those years ago… anyway, Chris put together the TOS for Getsignoff and these are his thoughts on it:

    For Getsignoff I looked at the TOS of other online services like Harvest, Basecamp, Youtube and Flickr. I’m not a legal person, but this gave me enough material to be able to identify the key issues that I thought we needed to cover in our TOS.

    I assembled this into a brief for our legal adviser that was part overview of what we wanted to achieve and part draft TOS using adapted clauses from other TOSs.

    Our legal adviser pretty much re-wrote what I had given him but this was from a position where he had a good understanding of how we wanted Getsignoff to work.

    The bottom line with this sort of thing is that you really need to get a professional legal person to assist.

    Back to top

     

    127. Context

    Posted in Classic shows on by Paul Boag

    In this week’s show we discuss taking context into consideration when designing websites and we answer your questions about video for an elderly audience and the most influential books in the industry. 

    Play

    Podcast: Download (21.8MB)

    Download this show.

    Launch our podcast player

    News and events

    Working from home

    The first post this week appears on A List Apart and applies to a growing number of people in the web design business. That is because it is tackling the subject of home working.

    According to the home business report (PDF) published in October 2007, home based business account for 28% of all employment and have a combined UK turnover in excess of £364 billion.

    No doubt that percentage is even higher among web designers. Therefore it comes as no surprise that this subject is being increasingly written about in web design circles.

    This particular post is written from the perspective of a home working mother. However, her advice applies to anybody consider working from home. This advice includes:

    • How to draw the line between work and home
    • How to isolate yourself from the rest of the family while working
    • How to explain to your client the screaming child in the background of a conference call
    • How to win clients that are understanding of your situation

    If you are already a home worker, I am not sure this article tells you anything you wont have already learnt the hard way. However, if you are considering making the switch for whatever reason this is definitely a worthwhile read.

    British Standard for accessibility

    Some time ago the British Standards Institute and the Disability Right Commission teamed up to release the first formal guide for business on website accessibility entitled PAS 78.

    PAS 78 was intended to be a web accessibility guide, aimed at website owners rather than web designers . Personally I found the result somewhat disappointing. Although the advice was solid the language was hard going and it referred too often to the WAI guidelines. Although these guidelines are superb they are too technical for most website owners.

    However, despite my personal opinion the document has proved very popular and is now being converted into a full British Standard. A British Standard is a common standard used across a variety of products produced in the UK. Although anybody can claim to meet these standards without external review, it is possible to be officially certified. Once certified you can display a BSI Kite Mark. This is a symbol of quality universally recognised in the UK.

    Personally, I think this is a much better route for web accessibility to take. The alternative is legislation and that carries with it numerous problems. The team working on the standard is excellent and I look forward to seeing the result.

    Growing your business through twitter

    The next post solves an embarrassing problem I have. When sitting in the pubs with my mates, they occasionally catch me twittering. It is particularly embarrassing because I cannot really explain why I do it. Fortunately now I can thanks to a post from Tiffini Jones at Blue Flavor.

    Actually the truth be told, Tiffini’s post refers heavily to another by Elliot J Stocks a few months earlier. He suggests that twitter is:

    • An ice-breaker
    • A purveyor of "ambient intimacy"
    • A broadcasting / marketing tool
    • A fount of knowledge
    • A social network

    Both posts communicate well the power of social networks if used wisely. This has certainly been my experienced and without tools like Twitter this site and podcast would have been nowhere near as successful.

    I know a lot of people look down their nose at twitter. They claim it is a time waster, unprofessional and dull. However, I think they are missing the potential. I believe that networking tools like Twitter will in time diminish the role of search engines. Increasingly people will turn to online contacts for recommendations about products, services and information, rather than relying on the algorithms of Google.

    Smart CSS aint always sexy

    My final article today, demonstrates a sea change in the web standards community. It is a controversial article on the Digital Web Magazine entitled Smart CSS aint always sexy CSS.

    The article challenges some of the basic arguments of standards zealots. For example is it so bad to name a class ‘red’? Do we need to pursue semantics at all cost, even when it compromises performance or maintainability?

    This seems to be representative of a growing group of designers calling for a more pragmatic approach to web standards. Increasingly I am seeing little examples of rebellion against the more extreme supporters of standards. Whether it is the posts of Jeff Croft or the twitterings of Andy Clarke, it would appear there is the beginning of a more grown up approach.

    Does this mean we can throw away good practice? Not at all. It simply means we are mature enough in our knowledge to bend the rule sometimes. Before you can paint like Jackson Pollock, you first need to know how to paint traditionally.

    The morale of the story is that if you are new to standards then you should stick to the rules. However, if you are more experienced, there is nothing wrong with making compromises from time to time.

    Back to top

    Feature: Content is dead, long live context

    No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context in this weeks feature.

    Back to top

    Listeners feedback:

    Video and an elderly audience

    Steven writes: I am currently working on a website that is going to be targeted toward an older demographic. There seems to be a large disagreement on whether video should be included on the site. The site is quite in depth and video explanation could be crucial. The main argument seems to be that people might not have the flash player and in turn not be able to view the video. On the other hand the Adobe site says that market penetration on flash player is over 99%!? Is flash video a usability issue?

    One of the largest clients Headscape works with is trying to reach an elderly audience and so I have put some thought into this issue already. Unfortunately as with all of life, it is not a straight yes or no answer.

    I see no reason why you cannot use video on your site. Although I do not believe Adobe when they claim flash has 99% penetration, I do believe the vast majority of your audience will have it installed. In my experience those who do not have flash are those behind a corporate firewall.

    Although you can expect the vast majority to have flash I don’t believe you can design solely for it. The elderly develop visual, physical and cognitive c
    onditions that can make it hard to interact with flash in some circumstances. Although a well designed application can minimise these problems, it will still affect a significant number of users.

    I am afraid that although you can use flash, you will have to also provide an alternative. This could either be in the form of a transcript or captions (depending on the nature of the video), but additional work is required.

    Most influential books

    Teifion asks: What are the two most influential books you have read. Not just for web design but work and life in general.

    I think this is possibly the hardest question I have ever had to answer. Choosing just two books has been horribly difficult. In an attempt to cheat slightly I have changed the rules to reflect BBC Radio 4s Desert Island Discs. This means I get the Bible and the complete works of Shakespeare for free! My choices are therefore…

    • Getting things done by David Allen – I know I have spoken endlessly about this book before but that is because it has had such a profound impact on me. It is an easy book to dismiss with statements like "I don’t need to read it because I am already organised" or "it just tells you to write lists". In fact it is about a lot more than that. Getting things done has made me radically rethink my life and what I spend my time doing. It has made me question my priorities and change what I spend my life doing. Yes, I do write a lot of lists now and yes I am more organised but that is not what I got from this book. It taught me to take control of my life and decide what I want to achieve.
    • Designing with Web Standards by Jeffrey Zeldman – I bought this book entirely by accident and yet it set my entire career in a new direction. Before reading this book I was feeling uninspired and stagnant in my career. I was bored with web design and felt that I had gone as far as I could. Reading this completely re-inspired me and introduced me to the web standards community. Without this book I doubt I would still be doing web design and certainly wouldn’t be doing this podcast or speaking around the world. Thanks Jeffrey!

    125. Copy

    Posted in Classic shows on by Paul Boag

    In this weeks show we discuss how to give personality to your site copy and we talk with Elliot Jay Stocks about going freelance.

    Play

    Podcast: Download (30.4MB)

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    News and Events

    The clever chaps at Carsonified

    If you happen to follow any of the guys at Carsonified on twitter, you cannot help but know they are working on a not-so-secret project called Matt.

    It is an interesting idea that they have done once before. They stop all normal work for a week and blitz a small self contained project using an Agile style approach.

    The final result is not what counts. It is the exercise itself that I find interesting. By doing this periodically they…

    • Create a lot of buzz which reflects well on their company
    • Build a great sense of camaraderie
    • Get to try out new technologies and techniques
    • Break the routine of everyday work
    • Push people’s comfort zones and help develop new skills

    It’s a great plan and one more of us should adopt. It is certainly something I would like to do in Headscape. Of course it is more tricky when you have clients with deadlines however the principle still applies. You may find it hard to do this for a week, but maybe a single day is possible.

    Adobe make flash searchable

    The big news of the week is an announcement by Adobe that they have been working with both Google and Yahoo! to improve the indexing of flash. This is no real surprises as the SEO of flash has been a major headache for the technology. The surprising bit is that they have succeeded, at least in the case of Google.

    Apparently Adobe have created a special flash player for the search engines that acts as a virtual user. This user trawls through each swf converting the content into something search engines can understand.

    Apparently Google is in the process of rolling out the technology. Unfortunately Yahoo! apparently have "some work to do." Nevertheless this is a promising step forward.

    Of course until Adobe make it easy for the average blogger or website owner to deep link within a flash file, the 73 million flash sites are not likely to be highly ranked.

    Colour blindness on the web

    My final story for the day is a post on colour blindness by Richard Rutter. To call this news is a huge stretch as the article was published in 2005. However, I have only just found it so it is news to me!

    I have to say I love this post. At the very beginning Rich tells us he is colour blind and so I braced myself for feelings of guilt and inadequacy as he tells me my sites are inaccessible. Instead I got this…

    The thing is, colour blindness on the Web isnÕt a big deal. You do have to bear it mind (as I will show later on), but there is no need to let it dominate any design decision.

    What a breath of fresh air. He then goes on to give some very simple advice that anybody can follow…

    • Do not rely on colour alone to convey information (such as on Jeff Veen’s blog)
    • Do not write instructions such as "click the green button"

    He goes on to dispel some misconceptions and provides good examples of where things can become a problem.

    If you worry about the large number of colour blind users out there (and you should do), then give this post a read.

    Back to top

    Feature: Copy with Personality

    Too much of the copy I read on websites is bland and uninspiring. Its time to add some personality. We look at this in this weeks feature.

    Back to top

    Interview: Elliot Jay Stocks on Going Freelance

    Paul Boag: So joining me today is Elliot Jay Stocks previously from Cansonified now a freelance web designer, in the depths of Norway I hear earlier.

    Elliot Jay Stocks: Yes. That’s all the hype depending on how you look at it.

    Paul: Well it’s really good to have you on the show.

    Elliot: Thank you for having me.

    Paul: Normally when we get people on the show it’s to talk about some specific area of expertise or something like that. Although I know you have many, many areas of expertise I wanted to get you on the show just because of the really interesting thing that you’ve chosen to do. The fact that you’ve left a fairly well known company that had a really good reputation. That you’ve decided to go freelance. And you’ve decided, at least for a short length of time to work from Norway, as a bit of an adventure. Is that the right way to put it?

    Elliot: Yeah I guess so. I don’t like to do anything by halves. I like to do everything at once. So we gave up our flat my girlfriend went off travelling to the far east. I moved to Norway and at the same time decided to start up my own business. So quite a few life changing things at once.

    Paul: Cool. I mean that’s really exciting and I guess that’s the power of freelancing, that you’ve got the freedom to work from wherever you want.

    Elliot: Yeah and the power of the web in general. You know whenever anybody says "How can you do that?" I say I’ve got my laptop and as long as I’ve got an internet connection then it’s all good. Although having said that my internet connection here is really dodgy.

    Paul: Which is why I’m calling you on an ordinary phone line.

    Elliot: Right. Where I’m staying unfortunately there is something wrong with the router where it doesn’t allow ftp or any way to send email out. So there’s no upstream traffic. Which isn’t that great when you’re a web designer. So my new office, as it were, is one of the local coffee shops.

    Paul: In order to get ’round the problem. So we’ve got loads of people listening to this show that either are web designer’s in an agency of some description or in house designers somewhere or alternatively people maybe not working in web design at all at the moment but want to. So we get lots of questions about freelancing and I thought okay let’s get somebody on the show that’s literally just gone through this process. And kind of ask you a few questions about you’re experiences a
    nd how its gone. I guess the biggest one and the one that we probably should start with is overcoming that kind of fear factor of giving up a regular income. How did you kind of convince yourself that this was a good idea?

    Elliot: I’d been thinking about going freelance for a while. Not to swat at Carsonified, but sort of the entire time I’ve been working at a web designer. I started off doing freelance things in University. So like doing site for things like friends bands and things like that. I mean I carried on doing that as soon as I started working in the industry and have carried on the last 4 years or so doing bits and bobs, evenings and weekends. Although I’ve only just started doing it fulltime I’ve got quite a bit of experience doing it on a part-time basis which obviously is a little less scary, when you’re making. I think the other thing as well at Carsonified most days of the week I actually worked from home, in London, so that was a really good testing ground to see if I had the self discipline to work by myself all day and stay motivated and stuff like that. So because of that it was slightly less scary making the actual jump.

    Paul: So would you recommend that to somebody who is considering going freelance? To kind of build up some work on the side and also if possible to negotiate some home working to see how you get on with it?

    Elliot: Yeah definitely. It’s something that’s not suited to everybody. Obviously there’s the appeal, everybody thinks WOW I’d love to work from home, loads of freedom fantastic. But, people I have spoken to have said I find it very very hard to get motivated when I’m at home. It’s easy to get distracted. The other thing as well is it can often be quite lonely. Jonathan Snook recently wrote a post about this on his site. He was disussing these ways of battling freelance loneliness. You know going to the local coffee shop for instance. Which is another thing to bear in mind when you’re doing it. There’s the option of working entirely by yourself. Working in the public, like the coffee shop. Working in a shared working environment. I’m still undecided really. I get on fine working by myself, but when I get back to the UK we’re not sure exactly where we’re gonna go. Depending on where we do go I may look into some kind of co-working space or whatever. There’s a possibility that we might go Oxford way, if so I may shack up with the old Rissington chaps, which would be lovely.

    Paul: That would be superb.

    Elliot: Yeah.

    Paul: Well obviously no it wouldn’t because they’re nothing but rude and obnoxious to me so I’m in no way supporting that decision.

    Elliot: And they’re a rival podcast.

    Paul: Well it’s not so much the rival podcast it’s the fact that they’re just so jealous and envious of my huge success (Paul laugh maniacally).

    Elliot: Well I hear you’re the one who gets noticed on the tube anyway.

    Paul: Well yes this is true. Okay moving back to the interview and on with the questions. Cashflow is obviously something that always scares people. Not just when making the leap into freelance. How do you actually fund it starting off? You know in those first few weeks. How did you go about that? What was your solution to the problem?

    Elliot: I’m not sure that my solution is the best one. People always say to make sure you have some money in the bank. You know enough to see you over for 2 or 3 months so that if it’s very slow starting off, if you’re not getting a lot of work in or if you are getting work in but clients are slow paying you’ve got a sort of fall back plan. I made sure I had a bit of money in the bank so that if it all went horrible wrong I’d still be able to survive. Luckily at the same time because we moved out of our flat and I am now living in Norway temporarily. Although Norway is horrendously expensive to anyone but Norwegians it’s actually cheaper working out here living here at the moment because of the reduced rent compared to what I was paying in London. So that was one factor that made it a little bit easier. The other thing is that I alread had a lot of work already booked in before going freelance. I think more than anything that’s the important thing when people make that jump, is having the work there. So rather than jumping and saying okay I work for myself now I better go get some work. To already have as much lined up as possible. Fortunately I am in a position where I had loads of stuff booked up a couple of months in advance. That was a good safety net. Obviously clients can be slow to pay so I always ask for 25% deposit before I start. That’s 25% based on the estimated amount of the project. But it’s a nice little safety net to have in there. It means you have a little bit of cash and if they decide that they want to be horrible at the end and not pay you’ve got a little bit of something to fall back on.

    Paul: Sure. I mean it’s interesting that you said that you were fortunate enough to get some work lined up before you began. I mean the obvious question is how did you achieve that. You must have been marketing or been selling yourself in some way in order to attract that work.

    Elliot: Selling myself. (laughs at Paul’s implied dirty joke)

    Paul: Selling yourself in the nicest way.

    Elliot: Yeah to some degree. I’ve been very very fortunate and I haven’t had to look for any work yet. So far people have got in contact with me so I haven’t had to go out there and kind of beg for clients or anything. Obviously Carsonified was quite high profile stuff. Prior to that when I worked in the music industry luckily I got work with some very high profile artists and bands so because of that and because I had those things in my portfolio that was part of the marketing. People see these kind of bigger bands in your portfolio. It definitly makes it easier because regardless of the work I think it kind of impresses people if they see a name that they recognize. In terms of marketing I guess this time last year, or I guess just over a year ago, the recent version of my site and things kind of took off from there really. I’ve put that on a load of CSS galleries which obviously helps because they get so much traffic. I think still sites like CSS Beauty and Web Designer Wall they’re still some of my biggest refers even now. So I think getting you’re site on there, getting people to look at it there that often has a snowball effect of having the other galleries picking it up and other sites and
    things like that. So that obviously helps. In terms of the work for the next few months, I’m actually launching a new version of my site which will probably launch in a month or two’s time. And I’m gonna do the same things again. Put it on lots of gallery sites. Tell people about it. I think having a new site with an emphasis more on the work more than just being a blog that will hopefully help as well in the continuing marketing. Luckily enough, doing things like this even lets people hear about you some more and I guess the thing with marketing it’s just to get your name out there in which ever way you can. To get people hearing about your stuff.

    Paul: So would you recommend, if someone’s talking about going freelance, say a new graduate that has just come out of university. Would you actually encourage them to try working for an agency where they can perhaps build up a portfolio of bigger clients before they go freelance? Or is there really no reason why they shouldn’t go freelance straight away.

    Elliot: No. I would definitely encourage working for an agency or as an in house designer for some kind of company before hand. When I left university my flat mate and I were condsidering starting up a business and I was thinking about this this morning actually. If we’d have done that and we could have done it I guess and maybe done okay out of it but the first thing is. I don’t think I would have then got access to the kind of high profile clients that I have got through my previous work experience so in that sense I probably would have still be struggling now to market myself and convince people I can work with big brands. The main thing that I, you know the wealth of experience that working in an agency will give you is definitely something not to be under estimated. Dealing with clients. Dealing with rediculous deadlines. Obviously these are things that your pick up being freelance as well but being inside an agency and working with other people and getting a feel for the industry that you are in, the working environment. The requirements. Things like that. All of that stuff. I am very grateful that I decided not to start my own business that early on and actually went to a real job as it were. So I would definitely recommend that people do it, that graduates do that. As well I thinks it’s just you learn a lot about who you are as a designer and where your strengths are. I mean when I was at Young life I was completely Flash. 100%. I barely new HTML at all when I started there because I was so interested in Flash. Obviously now that has completely changed. Now its much more, well completely standards based. That’s sort of where I specialize in now. If I hadn’t gone through that process I may not have realized that.

    Paul: Okay so we’ve done the kind of exciting stuff of kind of talking about setting up, or deciding to take the leap and go freelance. We talked where the work comes from. What about all the boring stuff? What was your experience of the admin of going freelance? Setting up all the kind of legal requirements. What did you do there? You kind of muddle your way through that yourself? Did you get any help? How did you approach it? What were the big problems?

    Elliot: A bit of muddling through. A bit of asking around. There’s still some things that I have yet to do. For instance I haven’t yet got a business bank account. Which I’m waiting till I get back to the UK. Mainly because I was setting this up at the time of moving, leaving the country. It was very very complicated. As I’m not getting paid immediately for some of the projects I am doing its fine to wait till July and set it all up then. You know what a nightmare UK banks can be anyway. So still waiting about that. One of the first things I did was get an accountant. I was quite nervous about this because one of the things that really dawned on me was how do you…First of all how do you find an accountant and then once you’ve found one how do you say "Ah they’re good.": You know, if you’re choosing a designer you can look at there work and it’s very easy to see what their like. What their styles like. What they’ve done. This kind of thing. With an accountant I think it’s really hard. You can only seem to go mainly on recommendations from friends and colleagues. Luckily I’ve had some dealings before with Nick who is Carsonified’s accountant and really nice guy and I figured well I’ll get a consult with him and if he fancies doing accounting for myself. I had a quick meeting with him. He was very friendly. I got to ask him all sorts of mundane tax questions which he answered for me. That was one of the first things I got sorted. So that was a big weight off my mind. To have someone who could look after all that stuff. Everybody has always said to me, in fact I think you may have said to me yourself, a good accountant will always pay for themselves and then some. In the time they save you. In the expertise. When the taxes come and all this kind of thing. So everybody recommended to me that I get an accountant from the first thigns and I guess that I would even in these early days say the same thing to anyone else thinking about that. In terms of paper work and stuff like that, one of the things I really really underestimated, although luckily I found out the truth in the first week, is how long it would take to manage my calendar. I just thought yeah I’ll book things and it will be fine. What I didn’t realize was that when projects need to shift round or you had to allocate couple of extra days for this. This had to move. The scheduling was actually, not a nightmare, but something you really have to make time for. The tricky thing is at the end of that you have nothing to show. There’s no realy paperwork to go with it. It’s an output as such. It’s easy to leave it off for, to neglect it. But obviously it’s something that needs to happen. In terms of paper work I made sure I designed myself a nice little invoice template so at least doing paper work isn’t as mundane as it has to be. Caus I got some nice little pretty pictures on my invoices. Doing that kind of stuff and obviously kind of chasing people to pay the money. Although actually so far everyone’s been very good. I haven’t got anything to complain about.

    Paul: It’s interesting isn’t it. That when you kind of sit down and think about going freelance and whatever else you do the calculations if I charged this per hour and you know I work 40 hours per week WOW I’m gonna be so rich. But very quickly you realize that well actually half of my time is probably taken up with non-paid work like managing your calendar, project management, invoicing. Dealing with the accountant and all of the that kind of stuff. It’s easy to forget that side of things. What about the business plan? Did you put any kind of business plan together or did you just go oh sod it I’m just going to do it?

    Elliot: I said oh sod it I’m gonna do it. For the kind of stuff that I’m doing I didn’t see the point in doing a business plan. Because I know exactly what I’m doing which is providing a design service to clients on a project by project basis. I don’t have any plans to grow the company as it were. This may change over time of course but at the moment I have not interest in turning it into an agency and employing other people. Obviously there are some financial benefits to doing that. A lot of people will tell you it’s the best thing to do and you gradually get less involved with the day to day stuff and are just running the company but to be honest at least w
    here I am now I wouldn’t be happy doing that. Because I actually love doing the day to day, the hands on design work and if I wasn’t doing that I wouldn’t be happy and that’s the reason I’m doing this anyway. So at the moment there’s no, it’s not like I’m a start up and I have a product and I need to predict sales and growth in that way. I think just being a designer we’ve got it a bit easier. So maybe I’m going about it the wrong way. Maybe I’m being unprofessional but this if fine for me.

    Paul: No I have to say I would agree. You know it’s not like you’ve got big costs going out. You don’t have offices that have to be paid for on a monthly basis. You don’t have staff that you have to worry about. And pensions for those staff. You know there’s no major complexity to it that kind of demands a business plan. I mean ultimately you just need to know that you are earning enough each month to pay your accountant and feed yourself.

    Elliot: That’s right yeah exactly. I think as long as you can go into freelance work and aim to earn at least as much as you were earning in your day job then I don’t think you’re going to run into too much trouble. As you say it’s probably safe to assume that half of your week you’re not actually going to be getting paid for because technically you wont be doing paid work like you say you’ll be doing the invoicing, chasing up things like this. So if you say you’re only working 2.5 days a week I think it’s a fairly safe bet to go on. If you can say that in those 2.5 days you’re going to earn at least as much as you were earning in a week when you were in fulltime employment then you’re not going to go too far wrong. Obviously a lot of what we aim to do and what is happening with me luckily at the moment is earning more than what I was earning in fulltime employment. So in that respect it’s yeah it’s good and I don’t think there too much to worry about there. As I said before luckily we as web designers have very very few overheads. Like you say if you’re renting an office that’s one thing and obviously there’s the accountant but actually accountants are very very reasonably priced anyway and I’m paying it all in a lump sum just to get it out there and get it done. Luckily there isn’t too much that we have to spend much money on.

    Paul: Okay last question and to wrap up with. How far in, sorry when did you set up again? I’m trying to think how long you’ve been doing this now?

    Elliot: Doing it fulltime has been since around the 20th of April.

    Paul: So it’s still very early days. You’re just over a month in. So so far pros and cons of being you’re own boss? What things have you liked? What things have you not liked?

    Elliot: The main pro and so far they’re living up to what I expected the pros and cons to be. Some of the main pros are the freedom of being you’re own boss. Obviously to an extent you’re clients are your bosses but just having the freedom to decide when you think this deadline should be. Doing the work when you like to where you would like to is a really great thing. When somebody comes to you to estimate a project being able to be generous enough with the hours to know that you can really spend a decent amount of time on the project. Not to a degree where you’re kind of taking the mickey as it were. But knowing that you can really give some really good time to a project instead of it being rushed. Also picking and choosing the clients. If you have got a fairly steady amount of work coming in and you can afford to say no to some things then that’s great cause it means that you can just work on a project that you personally find interesting. As I said before the financial benefits are working out well so far. That is a game when anyone goes freelance as well as freedom there is the monetary benefite as well. I can’t express enough this sense of freedom. Just having a chat with you this morning and then toodling off into town later this morning to go and do some work from a coffee shop and I’ll probably work a bit later this evening because we’ve had this chat this morning but you know having the freedom to do that and not having to worry about needing to stick to normal working hours and things like that. Not that employers aren’t flexible to these things but knowing that you’re the only person you have to please that does make a massive difference.

    Paul: So what about cons? Those were all pros.

    Elliot: They are aren’t they.

    Paul: You’re still in the honeymoon period aren’t you?

    Elliot: Yeah I agree. Give me a year and I’ll be all disheveled and angry. The only con I’ll say is that it can be a bit lonely sometimes. I mean I guess it’s hard to judge cause I’m in a foreign country where I only know a few people anyway. There way a while where I was working from my room here when the connection was a bit more reliable and that was great but I found I’m actually much happier being around more people now. Seeing more people during the day. I think I’m fairly well self disciplined like I said before cause I’ve had the experience of working from home before for quite a while but even so I found that I sometimes get a little bit distracted when I’m at home. You know go for a little wander. When you’re sitting down maybe in a coffee shop in public it’s more like this working environment, you can focus a bit more. I think even if you work from home most of the time maybe spend one day a week heading out and working in a public space just to see how it compares. I definitely find my concentration is a little bit better when I’m in somewhere like that.

    Paul: That’s really interesting because that’s something I’ve never tried doing. You know I work from home the vast majority of my week and I’ve never kind of gone and sat in a coffee shop. Mainly because I don’t drink coffee but also because, I don’t know its just never occured to me. I will go and try it today. There we go. We’ve got a little coffee shop around the corner I really like so I will go and sit in there and do some work for a while.

    Elliot: Of course as soon as you get there there will be really loud music and you won’t be able to concentrate.

    Paul: Probably. So Elliot you’ve definitely taught me something. I like that idea. What has that never occurred to me? Never even thought about doing that.

    Elliot: Of course I have only been doing it for a month so I could be completely and absolutely wrong.

    Paul: Yeah it could be a nightmare couldn’t it. But that’s why I wanted to get you on really. I wanted to get you on at the early outset of you doing this just to kind of give that unique perspective of somebody who’s just gone through the process. The stuff that you’ve covered has been great. I really apre
    ciate the time that you’ve taken to come on. We’ll get you back on again in the future when you’re a year down the line and see how you feel then.

    Elliot: Yes that would be a good test.

    Paul: It would be.

    Elliot: Something to aim towards perhaps?

    Paul: Yeah. So you’ve got to stay as a freelancer for at least a year otherwise it would be very inconvenient. Alright good to have you on the show Elliot and we will talk to you again soon.

    Thanks to Curtis McHale for transcribing this interview.

    Back to top

    Listeners feedback:

    Wayne Henderson from Southern California has sent in an audio file for this week’s show consisting of two separate but equally good questions.

    Hello Paul, Hello Marcus this is Wayne from Wayne Henderson voiceovers and as you can tell from my voice I’m obviously from Bristol, no wait actually Southern California and I have two question I would love to hear your comments and thoughts on. One, with the iPhone really taking off, gaining in popularity and other smart phones basically copying the iPhone, do you think it’s still even necessary to have the .mobi and designing for .mobi and my other question that I’d love to hear your thoughts on is kind of on the fringe of web design, I was wondering with WordPress being so popular, how do you feel about someone maybe being a WordPress design and installation expert? Taking the themes, customising them tweaking some things, changing some code and then kind of really helping other people to implement WordPress into their websites? Let me know what you think about that? Thanks guys.

    Let me address each in turn.

    The .mobi domain name

    There are two issues here which I would like to cover separately. First, let me look at this issue of whether we need to be designing for mobile devices at all. My answer is a categoric yes. No matter how great mobile browsers become, it is always going to be a different experience to surfing the web on a computer. Let me give you just three differences…

  • Size – Mobile devices have smaller screens than a PC. No matter how clever the mobile browser is a considerable amount of zooming and panning will be required to view a conventional website.
  • Controls – Not all mobile devices come with a QWERTY keyboard and none come with a traditional mouse. This can create problems on some sites, especially those with mouse over effects.
  • Context – Probably the biggest reason for creating a mobile version of a site is context. Mobile devices are not used sitting at a desk. They are normally used on the go. This affects the type of information being requested as well as the level of concentration being given to the task. When it comes to the mobile web context is king.

    • It is also worth mentioning that we are a long way from everybody having a smart phone. The majority of phones still provide a terrible web experience.

    It is harder to give a definitive answer about the .mobi domain. Unless your website is primarily mobile focused I think it is probably unnecessary. Most sites seem to use a sub domain rather than a seperate extension. For example twitter uses:

    http://m.twitter.com rather than http://twitter.mobi.

    I have even found myself guessing this format. I certainly never think of typing .mobi. Also on a purely financial note, you have to pay for .mobi while a sub domain is free.

    That said, I don’t have anything against .mobi. It is certainly a valid choice.

    Becoming a WordPress specialist

    Wayne’s second question was about becoming a WordPress specialist. It is good idea for a couple of reasons.

    First, as he point out, WordPress is hugely popular and there is certainly a market out there. It is also a well established product that has been around for a while and isn’t about to disappear. Having a clearly defined market is always a good strategy.

    Second, I am a great believer in specialising. With so many web designers out there you need to do something in order to stand out from the crowd. Specialising in WordPress is a good step in the right direction.

    However, I would argue that you could specialise further. You may choose to specialise in setting up WordPress for a particular sector or by using it in a particular way.

    Although this approach feels counter intuitive as you are narrowing the number of people who can hire you, it actually makes good business sense. By specialising you become the best in your limited field and so people are more likely to select you over your competitors.

    Back to top

    Lessons from the O2 failure

    Posted in User experience on by Paul Boag

    I don’t want to start ranting about the debacle that was upgrading via the O2 website, from my iphone to the iphone 3G. However, there are a couple of things we can learn about good site design from their mistakes.

    Like most of the British population (or so it seemed) I tried to upgrade my first generation iphone for the new iphone 3G. Following the instructions I received from 02 I went to their website and then spent the next 2 hours battling to place my order. This horrendous experience raises some interesting points.

    • Load test - If you are expecting shit loads of people to hit your site at the same time then run some loading testing against it!
    • Don’t cause a panic – Announcing there is limited stock and that you are going to sell on a first-come-first-served basis is going to cause a rush.
    • Provide alternatives – Don’t force users into only purchasing through a website. Allow them to purchase via phone or store too.
    • Keep it simple – The whole process could have been streamlined. Adding a text message as a method of authentication was unnecessarily complicated and caused problems.
    • Avoid AJAX – On a site that is going to be hit by heavy traffic, avoid using unnecessary AJAX. It was impossible to jump to the appropriate place in the process. Instead I was forced me to start from scratch each time the page hung.
    • Use cookies – By using cookies they could have saved me considerable time entering my information again and again.
    • Clear messaging – Despite completing the process I am unsure of whether I have an iphone coming or not. The site needed to make it clear whether an order had been successfully placed.
    • Error handling – When things went wrong with the site it didn’t respond elegantly. Some carefully written messages could have cleared up a lot of confusion.
    • Better labels – One label asked me if I wanted a bolt on package. It didn’t explain what that package was or what answer was required. It just gave me a blank text box. What was I supposed to type into it? Should I leave it blank? Why was it a text box and not a dropdown menu? Was this the reason my submission was failing?
    • Email confirmation – It would have been nice to receive an email confirming or rejecting my order.
    • Waiting list – For those who failed to place an order before the product ‘sold out’ there should be an alternative. Never turn a customer away. Either offer the chance to pre-order with an estimated delivery date or at give the change to register to be informed when new stock arrives.

    Update: Alex made some excellent additional points in the comments and I wanted to mention them here too. He added to my already extensive list:

    • Get a CDN or virtual servers – If you’re expecting a lot of traffic in a short time, look to share the load. Think about placing your critical functions (such as an online shop) onto a platform that allows you to deploy additional servers on demand (often called Virtual Private Servers) – such as Amazon S3 or similar. If you can’t change onto something like that – you can still help your server by moving images, CSS and javascript onto another server, or even a CDN. A Content Delivery Network (CDN) is a network of servers that contain copy of your key files to help spread the load.
    • Have a backup plan (or have two!) -
      If you have something really high-profile, have a backup plan, or two! In this case, O2 DID have a back-up plan… they had a ‘failover’ site… which was a simple one-page form to take down customers details. The only problem was it didn’t work when it needed too… it failed too!
    • Brief your call centre -
      Knowing that some customers were likely to experience trouble accessing the site (or even just getting confused placing an order), you should make sure that you brief your call centre staff – put on extra staff and make sure that they can take orders too, and know what to do.
      When I called O2′s customer services, they couldn’t offer any help as ‘upgrades were online only’. Additionally they couldn’t check if my 3 times I put my credit card details in were registered (they weren’t as it happens).
      If all goes wrong… the call centre is your last line of defense, and O2 dropped the ball here too.

    Update 2: Well, the iPhone 3G has now launched in the UK and O2s website continues to fail users. This time Apple was forced to turn away customers from their stores because they were unable to register them with the O2 site. The reason why: The O2 website would only work in Internet Explorer. This provides us with yet another lesson to learn…

    • Build for your audience – Consider who your target audience is and what requirements they have. In particular consider their accessibility need to make sure you never turn away people wanting to give you money.

    All in all it was badly handled and I am pissed off. Can you tell!

    124. HTML 5

    Posted in Classic shows on by Paul Boag

    In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video (Part 1)

    Watch the behind the scenes video (Part 2)

    News and events

    Removing Microformats

    The story that has generated the most email this week is the BBC announcement that they will be dropping the hCalendar Microformat. This decisions comes because of long standing accessibility concerns over the machine readable content within that particular Microformat. The problem is that code meant to be used programatically is potentially read out to screen reader users and displayed as meaningless tooltips to sighted users.

    The decision of the BBC to adopt Microformats was a huge boost to the movement. Equally the rejection the hCalendar is a blow. However, it is important not to get this out of proportion. Remember, they are only rejecting a single Microformat not the whole approach.

    The other thing to consider is that the BBC is a public service organisation with an incredibly high obligation to ensure maximum accessibility. In many ways they are in a unique position. Although it maybe appropriate for your organisation to pull hCalendars too, it should not be based on the decision of the BBC.

    My advice is as follows. If you already have hCalendar information on your site I would probably leave it (dependant on your exact circumstances). The Microformat community is working on a solution and I would implement that rather than removing hCalendar entirely. If however, you are not yet using hCalendar then I suggest you hold off until an updated specification is released.

    Becoming employable

    In the past we have spoken about becoming a professional web designer. I know that many people who listen to this show or read the blog are students. You are concerned that the skills you are being taught are out of date and will not improve your employment prospects. How then do you become a more employable web designer? What skills do you actually require?

    Andy Rutledge tackles this subject in his post "the employable web designer". Without a doubt it is the best post I have read on the subject of web design career development. I highly recommend you read it.

    The thing that impresses me is that it looks beyond the obvious design and technical skills required to be a web designer. It also tackles the business and communication skills too. He really drives home quite how wide an understand a good web designer has to have.

    My only criticism is that it could feel demoralising. You may read the list and think it is an unachievable aim. However, I don’t think that is the case. What Andy outlines is the optimal requirement of a web designer, rather than what is needed to get your first step on the ladder. I certainly did not have all of the attributes listed when I started.

    All we need now is a second post telling us how to gain the skills he lists.

    Better CSS font stacks

    David (a boagworld listener) sent in the next story. It covers a subject that I am currently still grappling with. It is a post about CSS font stacks.

    If you code in CSS you already know about font stacks. It is where you specify the fonts you wish to use. You can say for instance; use Helvetica and if that isn’t available use Arial. If that fails use a generic san-serif font.

    For many of us that is as far as our thinking goes. The majority of us use very basic font stacks that are uninspiring to the point of being insipid.

    I love this post because it lays out a very clear methodology for improving your font stacks. It also goes on to provide an impressive selection of font stacks organised into heading and body fonts, allowing you to instantly improve your site

    If your site is looking tired and boring, but you don’t have the time to redesign, consider adding a new font stack. Such a simple change could make a real difference.

    Do flexible layouts still matter?

    Our last story of the day is a post from Smashing Magazine entitled Flexible Layouts: Challenge For The Future. To be honest I was ensure whether to include this post or not. On one hand it covers an issue many people have been asking me about. On the other, its arguments seem stretched and the whole thing ends with an advert for a CSS framework.

    The article tackles zooming and fluid design. The new generation of web browsers – Firefox 3, Opera 9.5 and Internet Explorer 7 – provide full screen zooming. This gives users has the ability to enlarge the whole interface, not just text. Some are arguing that this is the end of fluid layout because zooming tackles many of the accessibility concerns associated with fixed width sites. However, this article strongly disagrees.

    The author argues that flexible designs are better for mobile devices, that pixels are becoming less important and that the user shouldn’t be required to customise a site to their needs (it should be done automatically). Although his arguments are weak at times and he uses some fairly dodgy comparisons I do generally agree with him. I see no reason to think fluid design will go away anytime soon.

    That said, I am in no doubt that page zoom does reduce the number of occasions fluid sites are necessary. Ultimately there is no right or wrong answer. It is entirely based on the situation. For example Boagworld, Headscape and The Website Owners Manual all use fixed designs. However, many of my client websites do not. That decision is based on numerous factors such as device, user base and business priorities.

    Back to top

    Feature: Creating a Better Survey

    The web allows us to interact with our customers more than any other medium. One of the tools in our arsenal is the online survey. However, these are often badly implemented. In this weeks feature we find out how we make your surveys more effective?

    Back to top

    Interview: Lachlan Hunt on HTML 5

    Paul: Joining me today is Lachlan Hunt; It’s good to have you on the show

    Lachlan: Thank You Very much

    Paul: It’s great to have you here I really appreciate you taking the time to join us, now the reason that we asked Lachlan on the show is because he posted a brilliant article on the A List Apart site about the subject of HTML 5 and I have been keen to look at this subject for a while partly because of my own ignorance to be honest, um, so lets kinda kick off by if you could perhaps tell us a little bit about where HTML 5 is at the moment I know that kinda getting a language to a release like this finalized is a massive process so can you tell us where we are at in that process.

    Lachlan: OK, it’s, um, a really an ongoing process with browsers implementing different parts of it progressively so it’s not, you know, going to be all implemented at once and ready to go in one, er the next few browser implementations. We have some features implemented already and shipping in browsers other features which are being worked on at the moment and other are planned for, but still a few years of yet. But it is gradually getting there. We are trying to focus on what authors really need, instead of trying to do it all at once

    Paul:Ahh, okay so that a slightly different approach that we have seen in the past, the idea of an incremental roll out. So how does that work from the W3C’s point of view are they doing modular releases is that how it works

    Lachlan: Um, at the moment no, but the way the spec is structured each part of the spec, what I am trying to indicate is the stability of each section of the spec as we go along. SO thing like the Canvas API which has been in browsers for a few years now, it should be getting to IE very soon. That section is pretty stable, Other things for example "data grid" or a lot of the web forms are not widely implemented.

    Paul: OK so that quite an interesting approach to the problem I guess from what you were saying earlier to me there is a community base element people can get involved and contribute. How is that all working then?

    Lachlan: Well we’ve got a REALLY REALLY open mailing list on whatwg.org anyone can subscribe at the moment there wa about 800 subscribers on that list anyone is free to subscribe and post feedback about the spec if they want to, but that’s not for everyone obviously because it’s quite a high volume mailing list and not everyone can keep up with that. We have also got an open blog on http://blog.whatwg.org/ where absolute anyone who wants to can write an article submit it and have it published. Anything to do with what the WHATWG are about, HTML5 and anything related to it at all. It’s also a good way to let the community know what’s going on by publishing articles also to find out what people think because they keep posting comments on there as well. We have also got an open forum which is at http://forums.whatwg.org/ again anyone can subscribe to that, am sue you know how a forum works

    Paul: So there are lots of different ways to be involved, I have to confess things like that can feel quite intimidating to get involved in. You’re kinda worried about putting your foot in it, and saying something really dumb, is there kind of Opportunities to lurk and are people fairly friendly over there? I guess you are going to say yes aren’t you

    Lachlan: Yeah everyone is friendly over there,they are nice sort of area to go to aim at web developers and people who aren’t quite as technical with the spec areas and stuff. You can ask any question you want and just learn whatever you want as well. Their is also the w3c side of it as well. Which is strictly related but is more focused on the actual technical side and issues so yeah. The What WG and the W3C are both publishing exactly the same spec and they both work on it together and feedback can be sent to either place, it will all be taken into account

    Paul: Oooh, that’s useful. So looking at kinda the state of affairs at the moment with HTML 5, reading through your article there was some things in there that really sounded quite exciting, there was this thing about structure and some kind of additional elements that could be used, which provide a little bit more structure, headers and footers and things like that can you tell us a little about that, and maybe explain a bit of what those do.

    Lachlan: Well at the beginning of the work back in 2004 / 2005 we basically took a look at what a lot of site where doing and we noticed that they were all using a similar structure. All the blog’s were using headers and footer and generally things like column layouts to show articles and stuff like that. So we wanted some semantic elements to come and cover each of those features that people actually used, solving the real problems that they were actually focusing on. instead of having to do "Div" elements for everything, which is what people do we give them an actual element and that also has a side effect of increasing accessibility because an element with specific semantics can be hooked into the accessibility API’s and help someone with assistive technology navigate the document a bit easier.

    Paul: Okay, because I mean reaction just glancing at it quickly and not thinking about it was what’s wrong with the div with an ID Equals footer, or an ID equal header or whatever but like you say, as you think about it more it become obvious that if those are considered distant elements, one person might call it a footer another might call it "the bottom" or whatever else if they have consistent semantic names then you know you can have screen readers and stuff jumping to the footer or avoiding / not reading the footer depending on what is set in their preferences, is that what you are thinking?

    Lachlan: Yeah that sort of it, it’s also helping the authoring side too, as there are lots of Div elements in source code which makes it easier to read if you have got elements with different names

    Paul: yeah very much so, I spend half my life trying to which closing Div relates to which elements, that very exciting. Obviously the other big area you talk about in your A List Apart article is the audio visual elements and there is a lot that’s happening in there. It’s always had the vague feeling that HTML has never had any kind of, erm, erm, the audio visual elements have always been and after thought, what happing in HTML 5 in regards to that?

    Lachlan: Well we have added the video and audio elements to the spec to try and allow video to be added directly to HTML, at the moment we have sites like youtube revel and all the other video site out there using flash to embed video and using the flash to give customized controls and stuff to the user, it’s really awkward, depending on proprietor technology, so we want to open that up a bit give a very very easy to use Javascript API to hook into and promote custom controls and all sorts of cool stuff with videos and of course audio as well. We have got experimental implementations of that in opera and in webkit. I have heard mozilla is considering implementing it as as it is now I am not sure of the status of their implementation. However the one big problem with video and audio at the moment is with Codecs, there are a whole load of software patent issues going around and we are not quite sure what codec we are going to standardize upon or if we are going o be able to get common codec support among the browsers, That’s an open issue but I am no lawyer to I cannot really go into that, so the ultimate aim is that you will be able to embed your movie file, your avid file or whatever directly into the HTML without the need to kinda pump it through something like flash

    Paul: cool

    Lachlan: that make it a whole lot easier to the authors hopefully

    Paul: Yeah, you kind of, to some extent got to ask the question why do we need that when we have got a solution like flash

    Lachlan: Well because Flash is a proprietary technology it’s managed only buy Adobe , they control it, they control the changes and what does and what does not go into future versions of it, however the thing with HTML is that it is an open standard platform which can be implemented by anyone and maintain interoperability between those venders.

    Paul: It’s intrusting isn’t it that adobe has just announced they are opening up the flash format, do you wonder if that’s a reaction to some of the stuff you have been doing to kind of force their hand if they want to stay ahead o the game and dominant they need to be open

    Lachlan: Yeah I don’t know how that going to work though, it depends, if they open the format up and actually make it an open development process where anyone can contribute to the future version and features which go into it or whether they just write the specs and tell other people to implement based on what they write, so I don’t know much about that. It will be interesting to see how it goes.

    Paul: Very interesting, Now the next thing you cover in the A List Apart article is something which you titled "Document Representation" now I have to confess this confused me, so do you want to explain a little about what you meant by document representation. What you were getting at there.

    Lachlan: Yeah, well in the past we have had HTM, and XHTML with two separate specs, HTML 4.1 which a lot of people use and XHTML 1.0 which a whole lot of other people use one of them is based on XML and is really really strict syntax that requires well formedness and is supposed to when you serve it correctly, if you make a well formedness error the browser is suppose to stop processing and throw and error message saying "Sorry I cannot handle this" where as HTML is more sorta loose and convenient in its error handling, it’s the traditional inspired by SGML, although really only syntactically similar these day but the error handling is a bit more lenient and you can get away with making a lot more errors. So instead of having two distinct language which you can use we have combined them into a single language which share the same elements and attributes and everything and as much a possible and when the browser reads those file it produces and internal representation called the DOM, a lot of javascript user will be familiar with the DOM as they work with that with their scripts to modify the document through the DOM. That’s an internal representation which is mapped, the DOM which is sort of mapped to by the syntax’s, the HTML and the XHTML syntax’s so it give the authors a choice of which syntax they want to use

    Paul: So why do we need that choice what is the key difference, I mean you talk about HTML being more lenient are there other reason for choosing one over the other.

    Lachlan: erm, well I don’t really know. However a lot of authors do prefer the strict syntax of XHTML like to make sure they quote the attributes and encode all their ampersands properly. They like to know they have done everything perfectly as with HTML a lot of people do make mistakes inadvertently and don’t want end users to see big error messages, so it’s a bit more user friendly if some little small error slips though their CMS and causes problems.

    Paul: So it’s basically come down to personal preference then

    Lachlan: yeah

    Paul: Okay, that’s fair enough, so both, we are going to see equal support for both of them in browser manufacturers are we

    Lachlan: Well that’s the hope we have said that we have got good support in most browsers, it’s just IE which is lagging behind

    Paul: (Sarcasm) Oh that’s a suprise (Laughs) Okay are there ant other things in HTML 5 that might be of interest to those listening to the show which we should be paying attention to?

    Lachlan: erm, well, as I said before we got canvas implemented in most browsers

    Paul: So tell us, what’s canvas

    Lachlan: It’s a 2D drawing API that you can use javascript to draw dynamic image with. People have used it to implement things like graphs that are built using tables of data which are on the page. People have also gone and done 3D games with it which is really cool

    Paul: Wow, that incredible. I mean that sounds very similar to SVG is it a different thing.

    Lachlan: It is different SVG is entirely done with XML, you modify that with script via the DOM by changing elements and attributes and stuff or with CSS. Canvas is an immediate mode graphics API where it is more like a bitmap sort of thing where as SVG is vector graphics, and canvas is bit map. They can both do images, the same sort of images, if you like but we have both vector images and bitmap images, so they both can serve different purposes.

    Paul: Right, I see. Okay that’s good, so okay the big question, kind of the final question everyone is going to have is when can they start doing some of the cool stuff. Now you said right at the beginning this is going to be modular support based thing so we are going to be able to see some of these elements before others. You know some parts before other, so what can we do now, what are we going to be able to do soon give us an idea of where things are at.

    Lachlan: erm, okay let’s see I think what’s being implemented at the moment. Cross document messaging is being implemented at the moment, that’s an API that lets you send message between documents with javascript without worrying about cross domain security issues,

    Paul: Oooo…. that’s good.

    Lachlan: Yeah it’s a really, really handy API that been implemented in opera for a while and I heard mozilla is implementing it soonish and should be in firefox 3 thought I am not entirely sure about that. That should be very very soon, erm, what else have we got, we got…. hmmm, this is tough

    Paul: Sorry put you on the spot there (laughs) is that last one supported in webkit?

    Lachlan: erm, I am not sure I would have to double cheek that

    Paul: Okay that’s fair enough

    Lachlan: yeah,

    Paul: Okay so any other elements? Things like the structural changes are any of those being supported yet?

    Lachlan: Not quite yet, erm as far as I know support for those requires changed to the phaser, and to implment the new pharsing algorithm in HTML 5, as far as I know browsers are not yet focusing on doing that because..

    Paul: Okay that’s a shame, because that one I liked the sound of, what about the audio and the visual stuff?

    Lachlan: We have experimental implementations in opera which supports OGG video, though it’s not really in a public build version yet, there is a experimental version which was released last year sometime. And webkit also has support in their nightly builds, which supports mpeg 4 unfortunate they don’t support the same codec but you can experiment with them.

    Paul: (laughs) That would be far to easy

    Lachlan: yes I know

    Paul: So it’s all progressing slowly but, erm you know obviously the one name which has been very absent in the list you keep mentioning is Internet Explorer, so I expect we can probably see some slower movement there. We are talking you know in the years before this all becomes mainstream and we can actually start using it. Is that a fair comment to make?

    Lachlan: Yes it will be several years before the entire spec is finished, we are hoping that it can get finished sooner rather than later but realistically it’s going to be quite a while yet, But it is important to know people will be able to use theses features before the spec is finished; so it depends on when browsers start supporting features authors can go ahead and use it.

    Paul: That’s great and real exciting that you can start to do that sort of stuff. you know that we don’t need to wait for it all to be set in stone before moving forward. And it’s always exciting as well to see the future, know what coming up and be aware of everything. so is there somewhere people can go a websites address and keep an eye on what is currently supported by browsers.

    Lachlan: Not at the moment but that’s something worth looking into, I think there is a wiki on the Working Group site, it does have some implementations listed but I am not sure how up to date. But it’s something I think we should look into

    Paul: Yeah it would be great to have some kind of single page which says what features are supported by each browser that you could check back every few months see what’s going, there you go there is my contribution to the working group (laughs). Alright it was really good to speak to you and thank you so much for your time, What we will do is to get you back in further down the line and have a check to see where we have currently got to in the development of HTML 5, Thank you so much for your time.

    Thanks to Jamie Knight for transcribing this interview.

    Back to top

    Listeners feedback:

    Staying healthy on the web

    Evan writes: My question to you is not entirely related to design, development or management but rather about health in the web industry. This is very important but we often seem to forget about it. We spend hours upon hours at our desks but are unaware of the damage this could be having on our health. Eyeballs almost touching the screen, typing without a break, sitting incorrectly – just a few examples. So, what do you do to maintain good health while working?

    I am possibly the worst person in the world to answer this question. I consistently abuse my body while at work. In fact a physiotherapist friend said I had the worse posture in front of a computer she had ever encountered.

    However, there is possibly something to learn from my terrible example. Let’s look at what I do and compare that to best practice.

    • I sit with my leg tucked up under me – Posture while working is important. Both feet should be flat on the floor, rest your wrists on the desktop in front of your keyboard and make sure your monitor is at eye level (in other words avoid laptop screens).
    • I stoically refuse to use anything other than my preferred mouse and keyboard – Using the same keyboard and mouse in the same position day after day can cause damage. Try using a variety of different hardware and positions. Push your mouse and keyboard nearer or further from you to change the position of your arms.
    • I believe that an individual pixel should fill my field of view - Leaning too close to your monitor is a particular weakness of designers who want to position that pixel ‘just so’. This not only damages your eyes but also your back. When you learn forward your neck and back support the weight of your head. When sat upright, the head is supported by a straight spine and therefore your chair bears the weight.

    On the upside I do take regular breaks. I would like to claim this is because of my health. However, I think it has more to do with my short attention span. I get easily distracted and wander off to do something more interesting.

    From Photoshop to HTML

    I see a lot of PSD 2 HTML services on the internet but never tried any out. It seems to be an great option for an designer for making an quick website, to edit later myself.

    What is the opinion of you guys? Love to hear you discuss this topic in one the next podcasts.

    An long time listener from Holland.

    I have to confess to being a snob over these services. Until recently I have always doubted the quality of the code but after seeing some recent examples I have begun to change my mind.

    We are even considering giving them a try at Headscape, just to see what happens. Certainly from an economic point of view they make sense especially if you have more work than you can handle. That said, I do have three concerns.

    First, results may vary. Without a personal recommendation it could be hard to find a provider who can produce the quality you require. Anybody can convert a photoshop document into HTML. However, it is much harder to do so using techniques like microformats, semantic markup and accessibility. Also, just because the quality was good once, does not mean it will be so again. As the good providers get busy it can lead to a decline in quality.

    Second, people code in different ways. Unless careful attention is given to commenting, it is hard to pick up somebody elses markup. This is fine for relatively static sites where only small changes are required. However for projects where change happens regularly as the site evolves, it is more important that the markup is tailored to your style of coding.

    My final concern is that this could lead to designers not learning HTML. As I have said before on the show, I believe all designers should be able to code themselves. You need to understand how the web works and markup is apart of that. Also, if you cannot code how can you judge the quality of the markup you receive?

    Back to top

    123. Plight

    Posted in Classic shows on by Paul Boag

    In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

    Play

    Podcast: Download (30.4MB)

    Download this show.

    Launch our podcast player

    A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

    If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

    News and events

    SPAM meltdown

    It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

    Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

    You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

    The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

    The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

    Form Analytics

    While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

    If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

    In addition to video recording, the new form analytics service also provides three invaluable reports…

    • The time report – This shows how long users spent completing each field.
    • The blank report – This provides information on fields that have been left blank on submission.
    • The refill report – Which highlight fields that have been completed incorrectly.

    If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

    Art direction hits the blog

    This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

    Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

    The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

    Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

    My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

    However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

    Prototyping

    My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

    When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

    The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

    The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

    With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

    Back to top

    Feature: The plight of the in-house designer

    The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier? We discuss this in this weeks feature.

    Back to top

    Reviews: Textmate and Top 5 Tips for Web Designers

    We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

    dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

    Textmate by Teifion Jordan

    Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

    First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

    But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

    It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

    I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

    Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

    I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

    Thank you very much for listening, I hope this was at least semi-informative

    Top 5 Tips for Web Designers by John McFarlane

    Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

    In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

    In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

    In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

    In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

    And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

    That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

    Back to top

    Listeners feedback:

    Newspaper columns on the web

    Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

    It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

    I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

    The usability concern

    As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

    On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

    It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

    The technical concern

    There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

    One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

    The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

    Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

    Estimating dev/creative work

    Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

    Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

    The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

    • ‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
    • ‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
    • ‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

    You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

    Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

    First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

    If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

    Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

    Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

    The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

    As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

    Back to top