belindasmilne

Posts Tagged ‘web design’

The Interactive Web.

In Web Design on October 12, 2010 at 8:36 pm

Great Art comes to life on the Web.

As we are all aware, the Internet is all about copying. Images, text and video weave their way all over the Web, without ever leaving home. While this can create problems for some, especially producers of cultural products like music, games and video, it can also open up new opportunities for discovery and exploration through Interactive tools and technologies.

While media producers continue to look for ways to protect their business, it is worth noting the many benefits of the Web. Firstly, the Web allows content producers to reach vast global audiences. These audiences are now able to respond in any number of interesting and unique ways, through YouTube and other forms of Social Media. Instead of looking at mashups and Youtube Videos as a attack on producers, perhaps it needs to seen as a sign of the viewer’s willingness to promote your content by sharing their viewing experiences with others.

Powerful interactive and broadband technologies allow content producers to bring new and innovative experiences to the Web; experiences that would never be possible offline. Galleries and Libraries are already realising the benefits of the Web and are copying and uploading rare and valuable cultural items like paintings and books and making them available on the Web. This enables them to offer better protection for rare and valuable artifacts by reduce handling without limiting access.

Recently, the famous Uffizi Gallery in Italy has brought 6 masterpieces from their own collection and made them available in Ultra-high definition free of charge until the 29 January, 2011. Visitors to the Haltadefinizioni site are able to interact with these masterpieces, to a degree that would simply be impossible in real life.

As designers we can learn from their navigation. Although the main website is written in Italian, the site is made accessible by using familiar technologies and symbols, which make it easy to follow, regardless of the user’s language. Using a series of buttons, online Viewers are able to zoom in and study the finest details of Sandro Botticelli’s Birth Of Venus, right on their own desktop. Users can zoom in and study each brush stroke and examine small details, without any risk to the original painting.

In life, such a close examination would never be possible. First you need to fly to Italy, then pay to enter the Gallery only to stand behind a barrier and look at painting from a distance. By making these paintings available online Uffizi is able to reach a vast new audience of art lovers and generate public and media interest.

Effective using Interactive technologies allows users to interact with online content and each other in ways producers haven’t yet thought of. Our job as designers is to find innovative ways to encourage people to explore.

To Flash or Not To Flash

In Web Design on October 4, 2010 at 12:01 pm

The Flash Dilemma.

With the growth of dynamic websites and social media, Adobe Flash has proven, at least for some, a godsend. Flash has allowed developers to create wonderful (and not so wonderful) animated content. However as the war between Apple and Flash continues some are now looking to HTML5 as the new direction on video and audio embedding on the web. Steve Jobs at Apple has perhaps controversially, put all his eggs in the HTML5 basket. To date Flash is still not supported in either the iPad or iPhone devices. From a users perspective, this certainly makes sense. 3G and now 4G can be very expensive and anything that reduces data-loads can only be a good thing.

So what this mean for web and video developers. Will developers still be using Flash to deliver dynamic and video content to the web? the answer is: probably. Flash is currently the best supported video format on the web. So, does that mean Apple will finally come to the party? Probably not. Steve Jobs is no longer the only voice in the wilderness. With Microsoft’s IE9 now promising both CSS3 and HTML5 support and both Youtube and Vimeo now offering support for the new html5 video there is no rush for Apple to change its mind.

Apple’s track record can’t be easily dismissed. It was partly Apple and the sheer buying power of the iPod that drove music companies to finally abandon their draconian Digital Rights Management (DRM) for digital music, enabling iTunes users to convert their iTunes Store music to MP3, so it could be used in a wide range of non-Apple MP3 players. Previously this could only be achieved by burning a playlist to CD and then ripping it back into iTunes, to remove the DRM and then converting it. A small change that was not overlooked, particularly by MS Windows users, who could now convert files and load them into Windows Media Player. The player of choice for many MP3 users.

Of course, Flash is not just used for video. It’s also used for slideshows and other dynamic web content. The main problem is not just the lack of support on iPad and iPhone devices, who are still a relatively small sector of the overall market. There are also many ordinary browser users who are choosing to disable flash for whatever reason. This can be done by downloading a plugin such as Click-to-Flash or Firefox’s Flashblock addon which hides Flash under an added level of interaction.

Click-to-Flash and Flashblock mean users must click inside each and every Flash box in order to display the content and they must click again to get the video to play. While this may seem annoying to some, it does offer a greater degree of control to users. It also means users can be spared irritating Flash-based adverts and expanding banners that seem to want to take over our browsers. Remember that search engines don’t really like Flash either. This leads us to those agonising flash-sites, those which are coded entirely or primarily in Flash. Well, sorry to say, Flashblock makes short work of those. Instead of all your stunning, spinning graphics all you get is this:

Flash-based Website with a Flash blocker

Great, isn’t it? an empty box. Not only is there no content, there’s no reason for me to want to click on it to find out what it is. I’ve got better things to do than guess what your website is. It’s like calling an unknown number on your mobile, you think it’s someone important only to discover it’s one of those holiday contests.

pizza hut website

Worse are those sites, which hide their navigation an/or content under a great big Flash box or even a series of Flash boxes. This is a big no-no folks. No one wants to play hunt the content all over your website, not even for pizza.

The key here is having a fallback, either as text or a still image. Giving users an indication what is hiding under the box is the key to successfully using Flash. Here is an excellent example of making Flash work by offering a fallback image underneath the Flash box. These designers have ensured their client’s site degrades gracefully. In fact, I would argue the fallback actually looks better than the flash version. Compare for yourself.

Rivervale Hotel WebsiteRivervale Hotel site

While HTML5 may well offer a simpler means of delivering video, it isn’t going to solve the question of codecs anytime soon. One thing is clear, whatever happens to HTML5, Flash will continue to offer a convenient fall-back position for video developers. Instead of offering the same video in three different codecs, it would seem reasonable to offer Flash first with an H.264 fallback for systems such as iPhone that are unable to support Flash.

Whether browsers will fall in behind OGG Theora, an open source codec, supported by Opera and Mozilla or the proprietary H.264 codec, supported by Apple and Google (the owners of YouTube), remains to be seen. Given OGG Theora is free and H.264 costs in at some $5 million dollars a year, the choice should be obvious; however the web doesn’t always play by the same economic play book as everyone else.

So what is the simple message. By all means, keep using Flash but keep it for video and web apps only. Avoid using Flash for navigation or anywhere important. Keep in mind, more and more people will see nothing but a big empty box, where your navigation or your content is supposed to be. Not a good look.

Web Design is not an oxymoron

In Uncategorized, Web Design on September 17, 2010 at 5:09 pm

Design has always been a vital part of the web. Even with all the knowledge of code in the world, a basic lack of design and layout skill can result in websites which are confusing, ugly, dysfunctional and boring.

There is much more to web design than code and markup. As we stare down the barrel at an uncertain future, web design continues to throw up new challenges. As the browser wars continue and the battle for Flash heats up, HTML5 and CSS3 are being heralded as next phase in web development, web designers are losing sight of the fact that creating websites and is not just about the science, it’s also an art.

Often when people talk about web design, they are really talking about web development. As a result, the design aspect gets pushed aside and tucked away as a subheading under usability. There are hundreds of books and articles on the web written about every aspect of web development, from plain old HTML to server side scripting, Java, PHP and Flash and the rest and much has been said about the code, markup and web development; however very little is said about the design process and even less is said about web design from the designer’s point of view.

Much of this is our own fault. We have long held on to the notion that design should be treated with respect and mystery. So much of what we do is based on our own design sense and subjective aesthetics that it becomes difficult to justify our design decisions to others. As many print-based designers now turn to the web, we are faced with a whole new way of approaching design.

Without a sound knowledge of the technical side of web design, it is impossible to communicate our ideas to others effectively. Learning web markup can be a time-consuming and difficult process but designers shouldn’t be deterred by an often impenetrable wall of geek-speak. After all, Web markup was created with designers in mind.

As designers, we need to discuss and find ways to adapt our unique understanding of layout and design to the web. The same way print designers don’t need to know how to fix a Heidelburg Printing Press to know how printing works, so designers just need to build on existing design skills and knowledge of webcraft in order to create truly beautiful, memorable web designs.

The Spaghetti Monster that ate your website.

In Uncategorized, Web Design on September 14, 2010 at 9:16 pm

Beware of the Spaghetti Website.

This diagram is the result of a bunch of DoD graduates set loose with a PowerPoint presentation. If you’re already redesigning it your head, welcome to the club, you’re a designer.

There are no shortage of ‘spaghetti monsters’ on the web. It’s a common problem when inexperienced clients and designers get bogged down in the details and ‘design-by-committee’ takes over. Your site might start off fairly simple but then the brief takes over and suddenly you’ve got fourteen people looking over your shoulder and an anxious client who thinks he’s bleeding money and before you know it, the Spaghetti Monster has eaten your website and your left with a feature bloated, ugly, indecipherable mess, which is impossible to navigate and could end up a major headache for you, the client and the poor slob that has to use it.

It’s all too easy for a website project to turn sour and sink under its own weight. The trick is knowing how to keep it all together. As designers, our job is to organise information, not just make it look good. It’s got to be easy to find and easy to understand. Web gurus call it ‘usability’ and it’s big bikkies in webland and very costly if you get it wrong.

Here are a few simple rules to help you avoid the Spaghetti Monster:

1. K.I.S.S.
It’s Keep It Simple Stupid and it’s a basic first-rule no good designer is ever without.

2. Aim to design a website your mother can use.
As the saying goes, if you have to explain a joke, it’s not funny. The same goes for websites. If a site needs a flowchart and an Engineering Degree to decipher, chances are, your mother isn’t going to stick around for rule three and neither will anyone else.

3. What’s it for?
Don’t lose sight of the goal of the website. Decide what the site needs to do and stick to it. If it’s a shopping cart, let it be a shopping cart and if it is, don’t forget to put the prices in. It’s really annoying having the look for them.

4. Just because you can, doesn’t mean you should.
The toys are fun to play with but ask yourself if it adds anything to the usability of the site. If it doesn’t help, it certainly shouldn’t hinder.

How to create brilliant design with only ten reliable fonts.

In Uncategorized, Web Design on September 10, 2010 at 12:32 pm

Sitting at my desk, I wonder if the world is ready for yet another web design blog. After all, there are hundreds of them out there. As someone just starting out in web design, I wondered if was qualified to be offering web advice to beginners like me.

That’s the point; the web changes so fast, no one can ever be considered qualified. I’ve read articles, pondered Alistapart and Smashing Magazine and I’ve beaten my head against the impenetrable wall that is the W3school and I’ve come to realise, like the Web itself, Web design is a moveable feast.

As a print designer it’s easy to get complacent and bored doing the same thing over and over. Graphic Design has always been a rapidly shifting art form and I was as glad as anyone to see the back of bromides, chromelin proofs and films. In the last ten years the Internet has completely changed the way we look at design.

On the Web nothing stays the same. Essentially the Web is the client from hell. It’s full of confusing, frustrating limitations, endless jargon and mountains of dry, impenetrable code. Worse, it’s got a short attention span, no idea about design and a style manual that makes the Oxford Dictionary look like a travel brochure and to top it off he’s only got ten fonts.

That’s right, ten core websafe fonts including Comic Sans.

So, why am I doing this? Basically, I love design. All design. I love all its many shapes and forms and variations and I love a challenge. I’m the person who stops to admire a shop sign and clips pages out of magazines, and turns the world over searching for the right typeface. I get annoyed when people use the terms like typeface and font interchangeably and want Comic Sans burned at the stake!

As a designer, I think I’ve learned more about design in the last few months, studying web design, than in the last 10 years. So here to design, to the journey and to those ten reliable fonts…

…Or, perhaps that should be nine.