Web Design News 25/05/10

This week: Things I discovered at Future of web design, google open source web fonts, using flash to fill in the gaps and choosing the right image.

Future of web design

I don’t normally write about the conferences I attend. However, I did want to share a little bit about this years FOWD.

The Carsonified conferences are normally good but this year was exceptional. The speakers were brilliant, the venue was stunning and they even fed us at lunch!

However, that is not why I want to write about it here. My reason for mentioning it is because we was told about four websites that maybe of interest to you.

  • Think Vitamin Membership – Announced at FOWD and launching next month, Think Vitamin membership is a direct competitor to Lynda.com. At less than $1 a day membership you get access to a growing library of web tutorials, 4 online conferences a year, live Q&A sessions with leading figures in the web community and discounted ticket prices to Carsonified events.
  • Text Captcha – One of the speakers at FOWD was Robin Christopherson who among other things talked about the accessibility problems of Captcha. As an alternative he suggested Text Captcha which requires the user to complete a simple logic question before submitting information to your site. What is so nice about Text Captcha is that it has an API you can use to integrate thousands of possible questions into your site.
  • Fire Query – Another great tool came from Remy Sharp. It is an addon to Firebug called Fire Query. Fire Query is a tool designed to help develop in jQuery. It has some great features and if you work with jQuery it is definitely worth checking out.
  • CSS generator – The final tool was recommended by Dan Cederholm and is invaluable if you want to start using some of the more advanced CSS properties. Essentially it provides a GUI that generates code for CSS gradients, shadows and transforms.

http://westciv.com/tools/gradients/

Google open source web fonts

Without a doubt the biggest story of the week is the fact Google has teamed up with Typekit to launch the Google Font API.

The arrival of Google in an already crowded marketplace including the likes of Typekit, Fontdeck and Fonts.com is another boost for web fonts.

What makes Google’s approach unique is that they are focusing on open source fonts. This means the service is entirely free and does not have to rely on Javascript. You just link to the font and away you go as you can see from the example below…

Embedding fonts is easy!

Although their font directory currently only consists of 18 fonts I am sure this will grow quickly. Also with Google’s reputation for speed and robustness some of the concerns over relying on a third party service are reduced.

Web fonts are still far from perfect with issues over download size and anti-aliasing. However, the more companies we see enter this space the faster we will see the service mature. Its good to see Google adding their weight to web typography.

Choosing imagery

Choosing the right imagery for a website can be a significant challenge for web designers. It is even harder for website owners who do not have design training. However, both groups select imagery for websites on a regular basis and their decisions have a significant affect on how users perceive the site.

Image of a website missing a key image

Fortunately the Web Designer Depot is here to help with a post entitled “Avoid Perfect Photo Syndrome.”

The aim of the post is to help us overcome the problem of finding that perfect image. According to the post this problem is two fold…

a lack of ideas and a glut of art

First it helps you overcome a lack of ideas by focusing you on what it is you wish to communicate. It then refines this through experimentation and work association. Finally it encourages us to be original by doing something unexpected and think beyond our first impressions.

When dealing with the glut of imagery available online it focuses on narrowing the field by looking at shape, colour, tone and focus.

For website owners this post is a great introduction to the design principles behind image selection. For web designers it is more of an encouragement to experiment and try rather than endless searching for the perfect image. The post ends with these wise words…

Choosing images doesn’t always have to be hard. Trouble usually comes when you hunt for that one “perfect” image.

Lacking images is akin to having writer’s block. Sometimes the cure is to stop worrying and start experimenting.

Flash, filling in the gaps

I want to finish today by mentioning a great post by Jonathan Snook about the changing role of Flash.

This post is focused purely at the web design community so if you are a website owner you can probably skip this one.

However, if you are a designer or developer I would certainly recommend it. It is possible the most balanced, down to earth and pragmatic assessment of the role of Flash I have read.

It begins with a history lesson, explaining why Flash was needed in the first place. Jonathan explains that Flash exists to fill the gaps that HTML, CSS and Javascript could not…

Between then and now they’ve managed to offer useful features such as cross-domain requests, local storage, binary sockets, multi-file uploads, and shared objects. On the animation front, there are 3D effects, inverse kinetics, and pixel bending. On the streaming side, there is support for multiple codecs, full-screen playback, and dynamic streaming. Flash also allows for screen, audio, and webcam capturing, as well as peer-to-peer connections.

He then points out that developments in the W3C technologies and improved browser support has started to make some of these jobs redundant. However as he points out…

HTML5 just doesn’t have the same breadth of features as Flash. That’s not to say browsers won’t get there someday. It’s just not there, yet.

The thrust of his argument is really summed up in the last two paragraphs…

As web developers, we should choose the best tools and technology for the job. To do otherwise—out of ignorance or some duty to “web standards”—is a disservice to the clients and customers we serve.

Right now, HTML5 is slowly becoming a viable alternative to Flash for a greater variety of situations. However, Flash will continue to fill in the gaps for years to come because it continues to solve problems that web developers have and that can’t be solved with any other client-side technology.

Its hard to argue with that. I am however glad that I need to turn to Flash less and less.

Web Design News 20/04/10

This week: The dying art of design, the disappearance of flash, tasks not goals, twitters developer tools and google rank by speed.

The dying art of design

There is a great but challenging article on smashing magazine this week for all you designers.

Entitled “The Dying Art of Design” it challenges us as designers to stop focusing on tool and techniques but instead focus on creativity and originality.

The author writes…

The diet of a typical designer is low in in-depth content and high in inspirational lists, tutorials and freebies. A review of blogs and our poll of design professionals shows a clear trend in the informational diet of creatives. They consume a lot but bypass a deeper understanding of design. In-depth articles and case studies are the least-read articles. Over 75% of the articles that designers read are either design tutorials or inspirational lists.

This has certainly been my experience on Boagworld too. My most popular posts have been those light on content and heavy on inspiration.

He concludes my writing:

While modern design tools and resources certainly make our many tasks easier, they don’t always improve our work. Tools and shortcuts are temporary. Great design is timeless. The best tool available is sitting in our heads; we just need to upgrade it once in a while.

Chili-cheese fries on a white plate isolated on a white background.

Chris Bence, Shutterstock

Twitter introduces tools for developers

At this weeks official Twitter conference (Chirp), Twitter announced a new raft of development tools that can be found at dev.twitter.com.

These tools make it easier than ever to integrate twitter into your application or website. In fact it opens up the ability to integrate in ways never before possible.

For the majority of us the most exciting part in @Anywhere that allows you to integrate Twitter seamlessly into your site with just a few lines of Javascript.

http://dev.twitter.com/anywhere

New features include…

If you make heavy use of Twitter to support your website then this definitely worth checking out.

The gradual disappearance of flash

I have developed a reputation for being anti-flash. However, when you read the beginning of “The Gradual Disappearance of Flash” you will consider me a friend of flash developers everywhere!

The author begins:

Given the widespread adoption and advancements of modern browsers and JavaScript libraries, using Flash makes little sense.

He then goes on to deconstruct just flash is no-longer necessary including…

  • The improvements in standards
  • The iPhone and iPad lack of support
  • The proprietary nature of flash
  • Progressive enhancement
  • Support for video in HTML
  • And more

Fortunately before he is burned alive by the Flash community he does begin to tone things down focusing on the strengths of flash. However, you can tell his heart is not in it.

Presidential debate with speech bubbles saying flash and web standards

Despite the bias of the article I do feel he has a point. There are fewer and fewer reasons to use flash and no excuse for building entire flash websites.

He could be right, perhaps we are seeing the beginning of the end for Flash.

Old school marketing techniques don’t work online

Talking of uncontrolled rants Gerry McGovern is on good form this week. In his post “Web customers care about tasks, not goals” he shares his experiences of trying to hire a cleaner online…

I was at a house cleaner website and this lady was smiling out at me with her hands behind her head. Hello. I need a cleaner. She’s not going to do much cleaning for me if she has her hands behind her head. And she’s saying to me: “Book a cleaner and get time for you.”

That was a big breakthrough for me. For years we’ve had a cleaner and I never really understood why. But this website educated me. It’s all about time. And then this hands-behind-her-head-big-grinning-lady asks me: “Are you looking for a cleaner?” Well, duh. Actually, no. I’m looking for a set of golf clubs, but for some wholly unfathomable reason I typed the following text into Google: “house cleaner”.

Bok a cleaner and make time for you

bikeriderlondon, Shutterstock

His point here is that marketeers are applying principles of offline marketing to the web. For example conventional wisdom says that you need to sell the benefits (e.g. book a cleaner and get time for you) to the consumer. However, that doesn’t take into account that web users have already recognised and acted on their need by searching. What we need to do is facilitate the fulfilment of that need, rather than create the need in the first place.

Gerry sums this up at the end when he writes…

The cleaning websites I went to told me truly useless things I already knew but didn’t tell me the things I really wanted to know: hourly rates, whether they worked in my area, whether they cleaned on weekends.

I think a lot of us still need to learn these lessons.

Google ranking now affected by site speed

We have known it was coming for a while but finally it has happened: Google now partially ranks your website on speed.

However, no need to panic yet. According to Sitepoint

[Google says] “while site speed is a new signal, it doesn’t carry as much weight as the relevance of a page” and at the moment, “fewer than 1% of search queries are affected by the site speed signal”.

Of course as they go on to point out 1% of all Google searches would still be a huge number of sites.

Speedometer

kropic1, Shutterstock

Sitepoint goes on to share a number of ways you can improve the speed of your site many of which I mention in my own post ‘5 ways to give your site a speed boost in less than 30 minutes‘.

Looks like performance is going to be the next big thing.

199. Time to generalise

This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.

Play

Download this show.

Launch our podcast player

Having trouble listening to 199?

Housekeeping

Next week is our 200th show! Hard to believe isn’t it.

To celebrate this momentous achievement we are going to do a 12 hour live podcast marathon.

The show starts at 10AM on Friday the 12th February and finishes at 10PM that evening (times are UK based). We have too many guests to mention, but lets just say you will not be disappointed!

To listen to the live show go to boagworld.com/live/.

Obviously we will not be recording the whole show but hopefully will release edited highlights over the coming weeks.

Back to top

News

SVG is back?

There are a lot of articles this week about SVG. A List apart describes SVG as…

Scalable Vector Graphics (SVG) consist of circles, rectangles, and paths created in XML and combined into drawings on web pages. You can apply solid colors, gradients, and a sophisticated number of filters to SVG—although not all browsers implement all filter types. You can incorporate text, as well as images, and you can copy and clone your SVG as much as you want. Mostly, we use SVG for graphics programs, charts, illustrations, or animations.

In principle SVG has always sounded like an exciting tool. However it became a casualty of the browser wars, where support was patchy at best.

It also was somewhat surpassed by Adobe Flash, that became the standard for vector based graphics.

However, browser support has significantly improved and so we are seeing more interest in the technology again. This week alone there are articles on both A List Apart and Sitepoint.

Although it is interesting to read what SVG can do, I have to confess I do not understand the continued interest in this technology. I admit I am no expert on the subject, but it strikes me be that SVG is somewhat pointless for three reasons…

  • It’s still not supported natively in Internet Explorer. Although there are ways of overcoming this, it is a significant barrier to adoption.
  • The near universal adoption of flash makes this a far more obvious choice. Also, now that Adobe have opened up the platform many of the old arguments against flash are less relevant.
  • All modern browsers now support page zoom and so there is less need for a technology whose primary benefit is its ability to scale.

Perhaps I am missing the point and if so please correct me in the comments. However, the only ray of hope I see for SVG is Apples stubborn refusal to add flash support to devices like the iPod Touch, iPhone and iPad.

The best products sell themselves

When I saw the title of Andy Budd’s latest post ‘The Best Products Sell Themselves‘ I was ready to disagree with him.

I thought Andy was going to claim that if you have a great product you do not have to promote it. I thought he was going to argue that in the age of social networking, word of mouth recommendation was enough.

Instead I read a passionate article about providing a delightful experience that inspired and challenged me…

To sell products in a networked world, you need to differentiate yourself by more than just brand attributes and a check-list of features. You need to create remarkable products that rise above the competition and get noticed. Products that your users will rate, recommend and tweet about. In fact, what you need to create isn’t a product at all, but an experience.

He goes on to write…

Mediocrity just doesn’t cut it anymore. Instead, we need to create products that sell themselves. Does this mean that marketing no longer has a place in the networked society? Far from it. Marketers often understand customer needs and pain points better than anybody. In fact, this can sometimes be the cause of frustration in itself. I know plenty of people (myself included) who’ve been wooed by the notion of integrated phone, TV and Internet services only to find yourself dealing with completely separate business units and billing systems. The marketers were ahead of the curve. It’s the product that was lagging behind.

The idea of delighting your users by going above and beyond expectations is something that has been very much on my mind at the moment. It is something I am keen to introduce more into the work we produce at Headscape. Andy’s article could therefore not have been more timely.

I am reading a book at the moment called Made to Stick. In this book it gives the example of a departmental store that prides itself on delighting its customers. They give two examples in the book. The first was a member of staff who ironed the shirt for a customer going to a business meeting. The second was of clerk who gift wrapped items bought from a competitors store.

This is the kind of exceptional service website owners should be incorporating into their websites, and web designers should be providing their clients.

The principle of proximity in web design

I seem to be featuring a lot of posts on the basics of design recently. I think this is for several reasons…

  • Everybody involved in the web has to do some elements of design.
  • There are a lot of people listening to the show who are just starting out.
  • The website owners listening need to understand design principles if they are to work with a designer.

This week’s contribution to the cause is ‘The Principles of Proximity in Web Design.’ It is essentially a post on layout. It takes principles that have existed for a long time in print and applies them to the web.

It is a solid introduction to layout and tackles issues such as:

  • Whitespace
  • Visually grouping elements
  • Creating visual hierarchy
  • Improving scanability
  • The use of grids
  • Leading the user

The article concludes by summing up the benefits of understanding these principles…

Proper visual hierarchy by way of proximity helps users delve deeper into your website without worrying about where they’ve been or where they’re going.

They’ll always feel comfortable, and they’ll get to the most important sections of your website quickly and efficiently.

A worthwhile read for anybody new to design and a useful reminder to those of us who are old hands.

Google is changing and it will affect your website

Have to noticed that Google has been changing a lot recently? Probably not. You may have noticed the fade effect on the homepage. However, there are many more subtle and yet significant changes going on.

In an article for boagworld Becky Jones outlines some of these changes and how they may affect your website.

Changes include the introduction of…

  • Real time results
  • Breadcrumbs
  • Personalised search (even when not logged in)
  • Regions
  • Search features in the search bar
  • Anchor links in search results

What is significant about the list above is that they each have an influence on your rankings.

These changes really are turning the world of SEO upside down and having an influence on how websites are built.

However, what interests me the most is the new prominence of real time results. With posts from Twitter being placed at the top of listings, this makes social media a crucial component of search engine optimisation.

If you care about your website’s ranking (which we all do) then this is a must read.

Back to top

Feature: Website owners need more than web designers

Why is it many website owners are changing their web designer even when he or she has built them a great looking, usable website? What more are they looking for?

Read ‘Website owners need more than web designers’

Back to top

Colin James Firth: Content is King

If ‘content is king’ then the designer is like the King’s tailor – there to make the King look fabulous without taking any of the limelight for themselves.

Read ‘Content is king’

Back to top