Podcast 52: Javascript Libraries

This week on boagworld.com we talk to Dustin Diaz about Javascript libraries, discuss other web design podcasts, launch our web design forum and help you get started with Microformats.

Play

Download this show.

To subscribe directly within itunes click here

In the news

Microformats

If you are interested in getting started with then check out the excellent ebook on Microformats by
Brian Suda
. He has also been kind enough to share a Microformats cheat sheet for free.

Microsoft and the BBC

This week saw an announcement by Microsoft and the BBC that they are exploring ways of developing [the BBCs] digital services. As you can see the announcement is somewhat lacking in details. However, this is potentially a huge development and could lead to some interesting online services.

Searching rich media

This year’s demo conference saw pluggd announce an amazing new feature that allows you to search inside of podcasts. This is symptomatic of a growing movement to ensure that rich media content is searchable. Other players in this space include Veotag and Podzinger.

Questions and comments

This week’s show included two excellent audio questions from listeners.

The first was about the open source forum software I mentioned a few weeks back called Vanilla. This led to a discussion about running online communities, the integration of Vanilla and my hopes for the new boagworld forum.

The second question was about what other podcasts I would recommend. Below are the list of the one’s I mentioned on the show. However, you can find a more comprehensive list of web design podcasts by going here.

Main feature

The main feature today is an interview with
Dustin Diaz
about Javascript libraries. Javascript is becoming increasingly important as web designers produce ever more powerful web applications. But, how do Javascript libraries fit in? Do they enable rapid development or are they simply a crutch for those that can’t be bothered to learn the language?

Review

There are so many great website applications around these days, many of which allow you to add their functionality to your own site through web services and APIs. The problem is that it is hard to discover what exactly is available. This week on boagworld we review three sites that help you do exactly that:

atMedia: Real world application

Yesterday I posted my thoughts on each session as I went along. Today I have decided not to post on each individual session but rather sum up the overall lessons to be learnt from this year’s show.

I have really enjoyed this year’s conference and have unsurprisingly learnt loads and met some great people. The trick is to now take what I have learnt and apply it to the real world.

This blog and podcast has always been aimed at two specific audiences:

  • Those that run and manage websites but aren’t web developers
  • Those that are web developers, but don’t have time to keep up with all the latest trends in this constantly evolving industry

A lot of what is written about web design is full of techno-babble and therefore incomprehensible to anybody who isn’t an ubergeek. The same is often true for web design conferences and atMedia was no exception. Discussions about WCAG 2.0, microformats and the DOM can often seem to have little relevance in the real world simply because they are not clearly explained in real world scenarios.

Bearing all of that in mind I have attempted to summarise the key issues raised from atMedia in such a way that they are relevant to the daily experience of the boagworld audience.

atMedia for website owners…

Pragmatic Accessibility

Probably the most depressing session at the conference was the one that discussed accessibility. I won’t bore you with the details, but sufficed to say the new accessibility guidelines that are currently being developed have some serious issues.

Many website owners have traditionally simply asked their web design agency to "make their site compliant with the accessibility guidelines". All they cared about was ticking the accessibility box so they didn’t get sued.

The lesson from atMedia is that you need to change that thinking. Accessibility needs to be more about finding the right solution for your users, rather than conforming to a generic checklist.

Are you more likely to be sued if you take this approach? No, not if you respond in a timely manner to any accessibility problems that your users identify.

Sites that work together

In the two atMedia conferences I have attended there has been more and more discussion about sharing information across multiple sites and in a variety of different ways. Whether it is turning contacts into downloadable business cards that can be taken into outlook or allowing events you show on your site to be published on other sites. Whatever the situation there are more ways than ever to share information. Not only is this an excellent way of getting your message in front of a larger audience it is also a great way of creating closer integration between websites.

Although this is still an evolving area I would encourage you to start thinking about what information on your site might be worth sharing and possibility some of the ways you would like to share it.

Also it is worth noting that there are a lot of other sites out there that allow you to integrate their content into your site. For example it is now easy to take Google maps and plug them right into your pages. In the closing panel of the conference the idea of sharing content between sites came out as the big area of growth over the next year, so it is definitely worth your attention.

Internet Explorer 7

Probably the most pressing issue for web site owners is the release of IE 7 within the next two or three months. It is vitally important that your site is checked in this new browser as changes to the way it works could mean that your site appears broken. Fortunately this is relatively easy to check by downloading the beta version of IE 7 and simply visiting your site. If you do spot problems, now is the time to contact your web design agency. But don’t worry, the fixes shouldn’t be that difficult or expensive.

More than just web pages

Without a doubt, the biggest shift in thinking between last year’s conference and this one, is in the area of web applications. What that means is that your website can now be more than just a collection of pages, but rather has the potential to behave more like a piece of software on your desktop. How does that apply to your site? Well, that depends. Let’s say that you have an events section. Instead of allowing users to click through a series of pages showing lists of events and then detailed information on an individual event, you can now show it as a calendar very similar to the one found in outlook. The key is that it is no longer necessary to wait while a new page loads but rather that information can appear instantly in the same way it would in a piece of software on your desktop.

Now it is worth saying that it is early days for this kind of technology and you might want to wait for the cost of development to come down. However, it is worth having a long hard look at your site and thinking about where it might be appropriate to add richer interactivity.

This isn’t the most straightforward of concepts to grasp so if you are left wondering what I am talking about then don’t panic. We will cover this subject in more depth later. However to get you started check out Google maps and then compare it with a site like Mapquest. Notice how on Mapquest everytime you zoom in or out the page reloads, while in Google maps it all happens without the refresh.

Don’t underestimate branding

Although this isn’t a new concept, it was really driven home in one of the sessions: you get what you pay for. It came up in a discussion about design and that great web design takes time. Often web design companies will cut corners on design in order to stay within a clients budget. This is unfortunate as research highlighted at the conference demonstrated that users make their mind up about a site based largely on how it looks. Once those first impressions have been formed it is very hard to overcome them no matter how good your content is.

The lesson to be learned here is that when you are looking at a web design companies proposal take particular note of how much time is dedicated to establishing the look and feel of your site.

Your site on a mobile phone

Without a doubt delivering the web through mobile devices like mobile phones is going to be a big growth area over the coming year. Already there are three times more mobile phones than personal computers, the vast majority of which can access the web. The question is; do you need to worry about this yet as a website owner? Well to some extent that depends. The key thing that came out of this conference is that mobile users want very different content from a user sitting at a PC. The chances are a user isn’t going to want to know about your company history while shopping in the high street. However they might be interested in comparing prices if you run an ecommerce site.

Even if you have content which might be useful to mobile users the current barrier to entry is very high. With so many mobile phones out there and so many different browsing experiences, creating a good mobile website is very difficult.

My advice is simple… wait. Wait for the industry to mature and standards to emerge. Although the mobile web is an exciting area it is early days and now is not the time for the majority of organisations to enter the market.

atMedia for busy web developers…

New accessibility guidelines: Don’t worry YET

So you have just begun to get your head around the WCAG 1.0 guidelines when you hear that the second version is about to be released. Don’t panic, you don’t have to worry about them just yet.

To be honest, it became quickly apparent from the session on these guidelines, that they are in a mess and not yet in a fit state to release. Even the accessibilit
y experts are havin
g trouble understanding them so I really wouldn’t waste your time at this stage.

The emphasis should be on creating the most accessible site you can irrespective of any particular set of "rules". That isn’t an excuse to slack off, but it should be seen as an opportunity to be pragmatic about the approach you take to accessibility.

Time to learn Javascript

If I had one message from last year’s conference it was "now is the time to learn standards". This year the message is "get your hands dirty with Javascript". Javascript is, without a doubt, having a real renaissance and it is a skill you should definitely develop whether you consider yourself a developer or a designer. More and more of your clients are going to be asking for some of the cool functionality that is found on the so called "web 2.0" sites and as these are mainly driven with Javascript you will need to brush up your skills. But beware, make sure the techniques you learn are up to date and that you get your head around concepts like unobtrusive Javascript, graceful degradation and progressive enhancement.

Preparing for Internet Explorer 7

As I am sure you are already aware IE 7 is going to be launched in the next couple of months. What you might not know is the new browser is going to be pushed out through windows update so you can expect this to become the dominant browser very quickly. Obviously this is an excellent opportunity to get some extra work from your clients (unless of course you are an in house designer in which case it is just extra hassle – sorry!).

In order to make the process of testing and fixing sites as painless as possible Microsoft have produce a set of tools for preparing for IE 7. Among them is an expression finder, useful for finding all of those annoying IE specific CSS hacks which may no longer work in IE 7.

Open data

From Google Maps to Microformats, there are more and more ways to share data across multiple sites. This kind of data sharing was seen as the biggest growth area for the coming year, so it is something that is worth learning more about. I couldn’t possibly begin to cover the many opportunities in this post but it is definitely an area to start researching.

One of the simplest places to start is with the subject of Microformats. Microformats are simply a consistent way tagging content across multiple sites. Because data is marked up in a consistent manner it can be identified by other systems and used.

The simplest example is the hCard which allows you to markup your contact information on your website in such a way as to make it readable by other sites and applications.

I know it may all sound very confusing but it’s actually very simple and very powerful. Definitely worth checking out.

Pricing design

One of the sessions at the event focused on what makes design great. It was presented by some of the best designers around and yet their answer was incredibly simple. Great design takes time. You need time to consider and tweak a design. The creative process just can’t be rushed. If you are anything like me, the look and feel of sites that you work on don’t get the priority they deserve. With so many time consuming tasks within an average project, design is often the first to suffer when the budgets are tight or the deadline is looming.

Although it is not easy, the moral of the story is that if we want to make our designs truly exceptional, we need to build more time for design into our projects. If you work out how to do that without sending the budget through the roof then let me know!

Designing for mobiles

Although designing for mobile devices is a huge growth area and you may well find clients interested in mobile sites, proceed with extreme caution. The session here at atMedia confirmed my worst fears about developing for mobile devices. There are approximately 40 different mobile browsers and over 160 different devices. Support for XHTML and CSS is minimal and designing for the mobile web is a very different beast to designing for the PC.

And so it ends

So that’s about it. A great conference. Thanks to all that were involved in presenting and putting on the event. It was incredibly enjoyable and had a great friendly atmosphere. If you missed out on atMedia then don’t panic. The podcasts will be out soon and you can still come to d.construct in September (for a fraction of the price!).

atMedia: Designing the Next Generation of Web Apps

I can’t say I was very excited about this session. However Jeffrey Veen is an excellent speaker. He is engaging, really knows his stuff and has a unique perspective that I warmed too.

My problem is that I am a little sick of web 2.0. It’s not that I mind the buzzword or even dislike the concepts behind it. It just isn’t very relevant to the majority of my clients. Most of the organisations I work with are still largely conveying text based information. They haven’t yet reached the point of seriously considering web applications and no amount of pressure on my side is going to change that. As a result I really didn’t expect to be very inspired by this session.

As it turned out, this was probably my most enjoyable session so far. Jeffrey Veen is an excellent speaker and presented a really unique view of how the web is changing. I am not even going to try and explain what he covered. You will just have to wait for the podcast to come out (which apparently will be happening) or download the slides. However what I will say is that he did a section on how front end interface design is changing and showed some real practical examples that really inspired me.

Although he didn’t tell me anything I wasn’t already aware of, he has made me realise that I haven’t yet made the mental shift necessary to really "get" web applications. Until I do, I cannot expect my clients to grasp the concept either.

Let me give you an example of what I mean. He showed a slide that contained some data on rainfall levels in different major American cities at different points of the year. He showed, how as a designer, we would format that data to make it more readable and easier to digest. However, he then took it further by turning that information into a mini application that allowed the user to see those cities plotted on a map and use a slider to see the map at specific times of the year. I would never have considered that approach and although I wasn’t convinced that this was the best way to display the data, it did make me realise that there are a lot more options available than I have been currently considering.

In short Jeffrey’s session has made me reconsider my perspective of web design. Good stuff.

Web Design Podcast (14) – Real World Web 2.0

In this episode of the boagworld podcast, Marcus Lillington and I try to take the characteristics of Web 2.0 and apply them to real world websites.

Play

Download this show.

Over the past few weeks, I have written a lot about Web 2.0 on boagworld.com. However, most of what I have written consists of questions rather than answers. In this episode of the boagworld podcast, Marcus Lillington and I try to take the characteristics of Web 2.0 and apply them to real world websites.

One of my greatest concerns with Web 2.0 is that it seems to have been adopted by only a handful of largely technical consumer websites. Few of these sites seem to have a traditional business plan and so bare little resemblance to the average organisation’s website. In this podcast, we look at what Web 2.0 actually is and how those underlying characteristics apply to the mainstream websites we all work with on a daily basis.

A lot of this podcast is based on Andy Budd’s presentation at the d.construct Web 2.0 conference here in the UK. Andy did an excellent job at defining Web 2.0 and explaining why perhaps the buzzword does have its place. What we do in this podcast is look at what can be learnt from this new generation of websites and moved across into the mainstream.

More on Web 2.0

Listen to the Podcast of Andy Budd’s presentation

Where’s the money?

d.construct and Web 2.0

Web applications

Boagworld.com news

Boagworld.com is proud to be included on the 9Rules Network

Check out the Boagworld.com “web design” search mentioned in the podcast

Check out Google’s new website statistics service – Google Analytics

The missing pillar of web design

After listening to the various podcasts coming out the Web Essentials conference this year it has made me think a lot about the nature of web design and the current state of the industry. Although there are some very exciting developments, I am concerned that we may be in danger of loosing some perspective.

Six Pillars of web design

For fear of stretching an analogy, I believe that there are six pillars of web design. Each pillar represents a fundamental part of any website development project and a successful site has an equal balance between all pillars.

These pillars are:

Usability

Usability is a well-recognised sphere of web development with many champions such as Steve Krug and Jacob Nielsen. Sites with bad usability suffer from poor rates of repeat traffic and failure by users to complete calls to action.

Accessibility

For the sake of this article, web accessibility refers to making your site accessible to the widest possible audience whether they are disabled, using old technology or alternative devices. This is a particularly popular area at the moment within the web design community, with a lot of effort being put into developing techniques to improve site accessibility.

Aesthetics

Aesthetics refers to the branded look and feel for a site. Covering colour schemes, styling and interface, aesthetics has a huge impact on how a users perceives a site. For a long time this was my far the most dominant pillar of web design but now it is seen by many as secondary.

Development

This pillar of web design is experiencing phenomenal growth, with ever more powerful "web applications" emerging. It covers web standards and AJAX as well as more traditional server side scripting.

Content

In many ways, this pillar is ignored by many web designers being considered "the clients problem". The reality is that content can make or break a website. Well-written, easy to read content combined with useful applications can go a long way to supporting an otherwise weak site.

Objectives

This is the missing pillar of web design. Often overlooked in the web design process and yet fundamental to any sites success. Why does the site exist? What is it trying to achieve? What returns on investment are required? These are all essential questions that are easy to ignore. Fundermentally this is the "business model" behind the site.

Since initially writing this article Alist Apart have published an excellent article on site objectives and strategies. It is definately worth a read.

Maintaining the balance

Problems arise when these pillars are not in balance. If one pillar is removed, or even if one pillar becomes greater than another does, then the whole structure becomes unstable.

Like in every other area of life, web design goes through "trends". From brochureware to flash, from web standards to AJAX, we are all prone to jumping on the bandwagon. Of course, in once sense this is a good thing. When we see other people’s groundbreaking work, it inspires us to innovate ourselves. We are seeing this with AJAX and Web 2.0. There is a lot of innovation happening around the "development pillar" and that is good to see. It should be applauded. However, we must be careful to ensure that this pillar does not become unbalanced with the others. I am seeing many web 2.0 applications that function wonderfully, degrade nicely, look stunning, but are at the end of the day are pointless, lacking a clear objective!

The sixth pillar

I hear a lot of grumbling in the web design community about clients. Our clients aren’t interested in accessibility or AJAX or web standards. Many see their clients as being ignorant and a barrier to progress. Although I am sure there is the odd ignorant client out there, I think the main problem is that they focus most heavily on the one pillar of web design we largely ignore… objectives.

They are concerned with the sites return on investment, whether that is in sales, leads, or brand awareness. They don’t care about accessibility unless it will help them achieve their objectives. They are not interested in the underlying technology if it won’t solve their business problems.

The holistic approach

So who is right? Are our client’s right to obsess about objectives and goals, or are we right focusing on accessibility and applications? The reality is that we should be taking a holistic approach to web design where we all at least keep an eye on the other pillars. Even if you specialise in accessibility you should not be blind to technology and equally if you specialise in technology it should not be at the expense of all else.

By maintaining an overview of all the pillars of web design, we are sure to keep them in balance and prevent too much bias towards any one area.

Molly Holzschlag : Web Essentials 05

I have just finished listening to Molly Holzschlag’s keynote speech at the Web Essentials conference in Sydney. As usual, Molly had some fascinating insights into the changing world of web development, but something about her presentation just did not sit right with me.

Specialists working together

Molly primarily focused on the increasing number of fields within web design. As web development becomes more complex, so the need for specialists in different fields becomes more important. From usability and accessibility consultants to designers and developers, the range of specialists continues to grow. Molly went on to say that these specialists are increasingly working together to develop more complex web applications.

So what’s my problem!

So why did this not sit right with me? I certainly agreed with everything Molly said and she is definitely more knowledgeable than I am about the latest developments in web design. I think what I felt uncomfortable with was that Molly spoke as if this collaboration of web design specialists was the norm within the industry. In my experience, the web development world Molly was describing only exists within the high end of web design. I got the impression Molly believed that the majority of web designers specialised in different fields and worked in teams to develop sites. Although she did acknowledge this was not the case throughout the industry, I think she had a slightly unrealistic view about what was the norm.

There are still many all rounders

I work with fairly big clients including government bodies and various higher educational institutions. However, even within organisations of this size their web teams are limited. In most cases, they consisted of web editors and web developers/designers. Largely speaking individuals in web teams still have to be general "all rounders" and do not get the luxury of specialising in specific fields such as accessibility or usability. The majority of people still need to be "jacks of all trades" to some extent.

Now obviously the clients I work with are not comparable with those who engage Molly. However, I did get the feeling that Molly was describing a web design world that is still beyond the majority of my clients and certainly beyond the reach of the majority.

The need for trailblazers

Of course, it is important to remember that Molly and her peers are trailblazers in the industry, which are vital to our continued growth. However, I do have some concern that the gap between these trailblazers and those who follow might become too big for us to bridge. It is important that there are individuals who can bridge that gap and bring these working practices at the forefront of web design to the rest of the industry.

No real conclusion

I am not sure what my point is here and I have no nice conclusion to wrap up with. This is certainly not meant as a criticism of Molly or her peers. I guess it is merely me expressing a concern that for most of us, the world Molly describes is not yet here.

If you have had time to listen to Molly’s keynote I would be interested to hear your thoughts on it. Does your organisation have specialists or are your web developers "jacks of all trades"?

Web Applications

Have you seen some of the fascinating new tools coming out of Google recently? Applications such as Google Maps and Google Suggest are the highest profile examples of a growing trend towards application design on the web.

When the majority of people think of an application they are thinking of something like Microsoft Word or Adobe Photoshop which you purchase on CD and install on your desktop PC. Although a very exciting medium the web has never been able to compete with the level of complex functionality and power you can get from the average desktop applications. However things are beginning to change.

The problem with the web

At the most fundamental level the way the web works is very simple. Using your web browser (the client) you request information from a web server (the server) over the internet and this server then passes that information back to you. However this client/server process has one fundamental flaw. While your PC is talking to the web server, what are you doing… that’s right, waiting. Admittedly with the explosion of broadband you aren’t waiting as long but it is still slow enough to compare unfavourable to a software application.

Let the application work as an intermediate

But as I have already said things are changing. This is largely due to the maturing of a number of existing web technologies that are beginning to work together in a more sensible manner. So now instead of this constant client/server back and forth every time you want a new piece of information, the client downloads an application from the server at the outset and that application delivers the information to your browser. The advantage of this is that the application can download additional data irrespective of what you are doing in the browser window. This means it can predict what you might want to do next and make sure the information is available to display immediately.

What are the benefits?

To some extent the benefits are obvious by looking at sites such as Google. Take for example Google Suggest. It would not be hard to imagine instances where that kind of auto complete functionality would be invaluable. Have you ever used a form that completes your address using just your postcode and house number? The problem is that it needs to refresh the page to find your address which is not only slow but has other associated problems. Imagine being able to complete that address using just the postcode without needing to reload the page? Or imagine being able to drag things into your shopping basket without waiting for the web server to add the item. What about having a content management system for your site that didn’t involve constantly connecting to the server each time you save a page.

Conclusions

The best thing about all of this is that it can be built now using existing technology. There is nothing new here and it doesn’t require any special plug ins such as flash or realplayer. It is just a different way of building web sites.

If you want more on the technology behind this new approach then you might be interested in reading the following article:

Ajax: A New Approach to Web Applications