Go Mocking Bird

The first web app is a wireframing tool from Go Mocking Bird (http://www.gomockingbird.com). It’s a tool that allows you to quickly produce informative and uselful UI wireframes of your site design for your clients.

Go Mocking Bird Wireframe

Go Mocking Bird comes with a tool box on the left which allows you to drag and drop elements on to the canvas of the page you are editing. A folder structure in the top left allows you to construct the sitemap of your site and have each page defined with it’s own mock up. This is great, as up until now, each different page would have required its own photoshop file or worksheet in a project folder. Now all the wireframes related to a project can be saved into that project.

The components that you can drag onto the canvas are all completely customisable, allowing you to move, align, resize and re-tag them at will. The current default tools are all that you could need for creating your basic layout, but there is an option to import your own components if needs be. This tool has already reduced the amount of time I have had to spend on wireframes, reducing a task which would have taken up to a full day for a project, down to a couple of hours. These are the kinds of time savings I like! Go Mocking Bird gives you the option to save the project online and to print the designs out as PDF/PNG. It does make hefty use of  the HTML5 canvas tag, so it will only work in Safari/Firefox/Opera. It doesn’t like IE at all…

Lovely Charts

The second web app is a flow chart tool called Lovely Charts (http://www.lovelycharts.com). This is a flow chart tool that allows you to quickly and intuitively create flow charts and processes for all and any process or applications you may require.

Lovely Charts Flow chart

 There’s a very informative video for this tool which gives an overview of its features, but once you get stuck in, you can start making very complex charts very quickly. The toolbox on the left of this app gives you options to create different types of charts, from flow charts like the one shown above, to extensive sitemaps. Again, custom controls allow you to create your own elements should you require.

This is really one of the best tools I have come across in a long time, which does what I need quite as succinctly and as well as I could require. Lovely Charts also gives you the option to save the project online and to print the designs out as JPG/PNG with quality and resizing controls.

Conclusion

Sure, Microsoft Visio, Adobe Illustrator and a host of others probably all do what these web apps have done for years, but there’s two major differences. The first is these are free. Totally free. Completely free. No cost, what-so-ever. The second is that, if say I decide to go an meet a client to work on a Wireframe or Process with them, then using proprietary software, if I don’t have a laptop with me with those installed, then I can’t guarantee I can do that. Everyone has a web browser and most people have web access, so why not shed the need to pay hefty license fees and the need to carry software around with me (seriously, how much do you use Visio that you need to buy a license for it?). I find these now an invaluable addition to my toolkit and like I say, have already found them to be worthwhile investments with regard to my time. The learning curve on both is both shallow and short. They’re very easy to pick up and start using straight away. Both require sign up, but again, the sign up forms are short and to the point. You really do feel like you are creating an account so that you can use the tools, not so that the respective company’s can contact you at a later point in the future.

I can’t really recommend either highly enough. I hope you’ll find the same.

Check out this post from Web Designer Depot highlighting the good and bad practices of using drop shadow.

While choosing a project for my degree, I toyed with the idea of creating a plugin for Firefox which would allow developers to include their own fonts in stylesheets and webpages by using an attribute I called “lfont” (live-font). Once I started to examine the implications of copyright and licensing with regard to the fonts, as well as the requirements for the different operating systems to implement, I quickly moved on to something else. Thankfully, someone else took up the mantle long before me and this is on the cusp of becoming a new standard.

The “@font-face” attribute was created by (prepare to be shocked) Microsoft for Internet Explorer 5.5.

That’s right, 5.5!!!

Webkit (the backbone of Safari and Chrome) has supported it for years as has Firefox. Opera is reportedly working on integrating it into it’s next release supports it since version 10 and Chrome (though built on Webkit) has resisted the integration of “@font-face” until lately (as of 18th Nov 2009, it is in dev builds and due later in the year). “@font-face” effectively lets us, the developers, use any font we like (within reason, more on this later) on any webpage and have it display properly for the user, regardless of the fonts they have installed on their machines. This applies cross-browser, cross-platform and cross-time!

So why the sudden furore? It actually hasn’t been that sudden and only recently became a furore. With the advent of HTML5 and CSS3, a big push has come from the development community to provide a standard which allows for the use of unique fonts. While there have been Flash based solutions available for a few years (sIFR, Curon, etc), these do exactly what they say on the tin, which is require the user to have Flash installed. Try telling that to someone on a mobile device. They are also cumbersome and difficult to implement. Of course, this can be done, but without the ease and universality of “@font-face”. One of the most endearing points of “@font-face” is that, though not exactly implemented in a standardised manner at the start, it is now pretty much across the board on all browsers and will be in the future, especially once CSS3 is ratified.

Implementation

It’s important to mention a little about the implementation of “@font-face”. The following code shows an example of how to declare a font in your run-of-the-mill css file:

@font-face {
  font-family: ‘Graublau Web’;
  src: url(‘GraublauWeb.eot’);
  src: local(‘Graublau Web Regular’), local(‘Graublau Web’), url(‘GraublauWeb.otf’) format(‘opentype’);
}

(special thanks to Paul Irish for this one)

The above code allows the developer to use the ‘Graublau Web’ font within their web templates and not have to worry about whether the user has this font installed or not. Paul has two excellent articles on the matter:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://paulirish.com/2009/fighting-the-font-face-fout/

Both of which relate to the more specific implementation of “@font-face” and optimising it for different browsers (there are, of course, a number of tweaks that need to be made to accommodate each browser’s nuances).

None of this goes to explain though, why this “@font-face” solution has not garnered more notice until now. The reason for this is actually nothing to do with its implementation, but all to do with its support; namely, the fonts. A typeface, when it is designed, remains a product of the company that designed it and that company holds the license. Usually these fonts are licensed to providers or designers who purchase them for use in their print media. Obviously, websites are not print media, so the use of the font is not limited to one intance but multiple instances (one for every visitor to every page of every website in the world EVER!). The problem with creating a standard like “@font-face” before is that to work, the browser downloads the font from the server and runs it on the client machine. The key word in this statement is “Download” and the one which has caused all the licensing problems until now. As a result, “@font-face” can only support free and open-type fonts (Microsoft’s “.eot”, Open-type “.otf” and True-type “.ttf”). Chrome battled hard to have “.svg” formed as a new standard but fought against a growing tide and has now turned face to support the above formats. The beauty of the browser support is that, if an older version of the browser doesn’t support “@font-face”, the font will revert to whatever substitute you have suggested… but you’d need to go to IE5 for that to matter!

What has finally added to this new momentum is the provision of free and open font faces in libraries across the web. And not just one or two libraries. The number grows daily and already the number of actual fonts available online is in its thousands. While you may not find the exact font you are looking for by name, you can be sure there is a new free font out there which is very, very close and will certainly work in place of the one you chose.

This is a very exciting prospect for future web site designs. We will be able to use any font we want in any size and variation and will ultimately lead to more interesting and more stylish designs. I look forward to the implementation of it and seeing it grow and spread across the web over the coming years.

Further reading:

The @font-face website: http://www.font-face.com
Web Fonts wiki: http://webfonts.info
Mozilla Implementation Tutorial: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Paul Irish (very authoritive knowledge on web typography. Name’s misleading – he’s not actually Irish!): http://paulirish.com
Open Font Library (for finding fonts): http://openfontlibrary.org/wiki/Web_font_linking_with_@font-face
W3C CSS3 Font support draft (long, but if you have the time, interesting: http://www.w3.org/TR/css3-fonts/#the-font-face-rule

I’d advise to search the online font libraries (like All Fonts, Font Fonts, Dafont, etc) for free fonts that can be used as web fonts. When you explore, you’ll be amazed what’s available to you.

The following article conducted by Forrester Research on behalf of Akamai provides excellent insight into what customers think and for example 47% of consumers expect a web page to load in 2 seconds or less and 40% would abandon if it takes more than 3 seconds.

Anyway we would recommend you read the article on the Get Elastic site – Every Second Counts: How Website Performance Impacts Shopper Behavior

We’ll let Matt Cutts, from Google fill you in.

Now, come to the rescue, is the multiplatform Dropbox (http://www.getdropbox.com/). This is a small application that you install on all your computers (even on your iPhone… if you have an iPhone… it is accessible through other mobile devices providing you have web access on them) which creates a centralised cloud based folder. Adding a file into the Dropbox folder on your work desktop makes that file immediately available to you on any of your other computers. There is no syncing required as a change made to a local file is registered by the folder and automatically synchronised with each of your other machines. My personal computer is a Mac and using this system I can drop a word document/photoshop file/php snippet of code into my Dropbox folder, come into work and open the Dropbox folder on my PC desktop and the files are there for me to access. Simple. No having to get the latest version or making sure they are sync’ed. They’re just there. There is also a “Public” sub folder and by dropping a file in here, I can get a web URL for the file, in case I need to email it or IM it to someone who doesn’t have a Dropbox account. This is a much more convenient way of transfering larger files to clients than email.

Of course there is a sign up process, but this is one of the most painless I have come across in a long time as the signup is part of the installation process. Your account is free up to 2GB of storage and there are pay monthly options to avail of more space (2GB is fine for what I typically need). There’s a really good tour on the site too so you can have a quick look and see if this will do it for you.

I have to say from a personal perspective, this is one of the most useful applications to come out in years. I can’t recommend it highly enough!

Check it out at: http://www.getdropbox.com

In a nutshell, AJAX is a relatively young technology the allows portions of the page to be updated without refreshing the whole page making the browsing experience faster and more enjoyable. The technology that makes this possible has been around for long time (raise your hand if you never heard of JavaSrcipt before…), but the technique is quite recent (4~5 years). AJAX is cross platform and it has been quickly supported by the major development environments and browsers, therefore the development community adopted it pretty soon and we have been experiencing the result on a daily base since its adoption: google chat, gmail, web msn and other services implemented it.

The root of the problem: when it comes to interactive content, advanced features such as site searches (google suggest and asp.net popup results are among my favorites), booking engines and other interactive tools, a minimal part of the content is displayed to the user, but the rest of it is hidden and, most important, a user cannot save a direct link to the final result. The web crawlers used by search engines mimic the user interaction with the website prior to saving the result of their queries to a database.

What happens then with AJAX websites? search engines only parse part of the content and cannot provide a direct link to the source to be returned for later use. As stated on the Google blog:

“search engines traditionally are not able to access any of the content on them. The last time we checked, almost 70% of the websites we know about use JavaScript in some form or another. Of course, most of that JavaScript is not AJAX, but the better that search engines could crawl and index AJAX, the more that developers could add richer features to their websites and still show up in search engines.”

Here comes the cavalry: Google, in the name of the Web and clearly forseeing profit for boths parties (search engine industry and users), offered their support to the development community by writing a proposal with recommendations for a new standard that would make AJAX controls easy to crawl and would add support to permanent links within AJAX powered pages.The following are few key elements in it (from Google blog):

• Minimal changes are required as the website grows
• Users and search engines see the same content (no cloaking)
• Search engines can send users directly to the AJAX URL (not to a static copy)
• Site owners have a way of verifying that their AJAX website is rendered correctly and thus that the crawler has access to all the content

This idea sounds like a win-win-win-win to me! I could make even cooler websites (enjoying even more what I already enjoy working on) and, at the same time, my boss wouldn’t be worried about the learning curve for this technology (reduced expenses for better results), the clients would be happy about their ranking results (more profit) and, most important, the users would have an easier access to the information on the site (improved usability).

Hopefully (and almost probably) this proposal will be seriously considered by the involved parties and all going well we’ll see this standard implemented in few months… I’ll keep an eye on this proposal and I’ll write something about it as soon as there will be news, so keep an eye on our blog if you are interested to know how it evolves!

That is of course, on everything except Internet Explorer 6.

Now, there will be those who will argue that this statement is not exactly true. HTML 5 and CSS3 are being structured to degrade gracefully to older browsers and Internet Explorer 6 (IE6) will, for the most part, do its bit to show new technologies in the way that they are intended and if it can’t, it will deal with them. But it will deal with them because we, the developers, are expected to provide for the fact that it has to deal with them. If you ask any web developer (designers not so much. Designs can be implemented. Making them do what the designer expects is where the problems occur and this is down to the development) worth their salt what the biggest hurdle in current web development is, they will say IE6. There are online campaigns to eliminate it. There are hacks you can add to your web page to encourage users of IE6 to upgrade. And, with great glee, we awaited Microsofts expected “ceasation of service” to IE6 which was expected next year, 2010.

Then this morning they announced that they would continue to support IE6 until 2014.

There are a number of things that bother me about this. Personally, I find IE6 cumbersome, boring and unfair. I find it unfair because, why can’t I do the things I want to do!? Why do I have to support this “piece of junk” (solely my opinion) browser? It’s been around since 2001, it’s outdated and it doesn’t support much of the new technologies that are available properly (even AJAX has to compensate depending on the mode of the browser and javascript libraries like jQuery and Mootools would be lighter if they didn’t have to accommodate IE6). It won’t be able to handle HTML5 and CSS3 and as newer techniques and technologies emerge, IE6 will continue to lag further and further behind. I also don’t understand how, with all the updates that Microsoft makes, there is not yet an IE6 update (that does not involve upgrading the browser) which will help IE6 accommodate the more recent changes and, with a little foresight, enable it to cater for HTML5 and CSS3. Surely there is something that can be done…?

And on another point why are there so many IE6 users!? Well, as any business who hasn’t upgraded from Windows XP to Vista will tell you, in large corporations (the likes of 500 – 1000 employees plus) it is not always as easy to roll out a browser update, just to enhance the web user experience. Many large corporations actually find the lack of support for web technologies in IE6 of benefit as it means lower maintenance requirements (a quick Google search fails to reveal exactly how many security updates there have been for IE7 since release, but safe to say it’s alot!) and also decreases the amount of time employees will waste browsing the web while in the office. They adopt an “IE6 standard” and IT support refuses to upgrade beyond this stance.

So what, as a web developer (and more importantly, as a web design agency) do we do? Well, for the moment it’s put up or shut up. The reality is that the statistics do not lie (W3 Schools and  MarketShare) and regardless of personal opinion or mob mentality, IE6 is here to stay, at least until 2014. It would be remiss and arrogant of us (or any developer/designer) to dismiss IE6 as “past it’s sell by date.” Even taking W3 Schools lower estimate of users of 14.4% in July 2009, with an estimated 1.6 billion internet users worldwide, that’s… (carry the 2… denomenator… Start > Run > Calc!) 230 million users. Try alienating that many customers and surviving to tell the tale. I admire the staunch advocacy of the IE6 resistant groups out there, but the reality is that for the next 5 years at least, we will need to consider and cater to our IE6 users. It’s a painful admission, but one we should embrace as a test of our abilities. Our skills as developers and designers should be such that our sites should work uniformly across all browsers and we should inherently be aware of the issues and resolutions to these problems we will encounter with IE6. We will continue to garner respect, not for our exclusion of IE6 but for our open-armed embracement of it.

What doesn’t kill you, makes you stronger.

With this in mind it is important that when designing a website that the website is designed to be visually appealing without compromising on the overall user experience.

Patrick Lynch has written an interesting post on the ‘A list Apart’ blog which goes into this in more detail. http://www.alistapart.com/articles/visual-decision-making/

The web is more than just a space for information – in any project there is always an opprtunity to create meaningful graphic expression without compromising on usability.

I performed a search for my local cinema last night (Vue), just like every search engine Bing returned the results in the standard format. I was please to see that Bing hasn’t introduced the “sitelinks” that appear under the results for a Google search, instead Bing provides contextual information and links in a popup when you hover over a result. In my case the contextual result provided me with a brief summary of the top films and links to each movie separately.

Where Bing really shines is with its image search, when you perform a search you have a number of options to pick from to narrow your search down whether it’s the size or colour of the image to its layout and style which is very intuitive for the user.

I am also not a fan of the new “related searches” bar, it’s a personal dislike but I feel that if I perform a specific search then the algorithm should just return the results then always assuming I am looking for something different.

On a personal and an accessibility note, Bing should re-evaluate its colour scheme the number of results returned and the advanced options link are very little colour contrast and is very hard to read for people with deuteranopia (red/green colour blindness).

Either way Bing is the new search engine to watch and has some surprising features that can give Google a fight. Decide for yourself at bing.com

http://www.useit.com/alertbox/ia-mistakes.html

Please Note: We do NOT require the assistance of recruitment agencies.

If you think you ‘fit the bill’ please email Jobs at Arekibo with a brief CV and examples of your work.

The findings of this study suggest that the most important factor in web design is how easy it is to use the site. Web Designers should consider the demographics of their user base. Females prefer easy navigation and accessibility, while males prefer faster download speeds. Personalisation was found to be the least important factor in evaluating website usability.

I thought the findings were quiet interesting and could be used when planning campaigns or when redesigning a site for a particular audience.