Plip's Weblog

Phil Winstanley - British .NET chap based in Lancashire. Enjoys tea and tech. Working for Microsoft.

Imagine Cup - Web Development

I'm going to be judging the Imagine Cup this year in the Web Development arena. The job seems daunting as we're expecting over 3000 teams to enter the Web Development competition alone.

The theme this year is all around Education and by that, it's a really broad definition of Education, it's not necessarily academic education so applications could be anything from Video Learning through to web based Recipe Books.

So what's important when you're thinking about building a web site? Reach, Accessibility, Innovation, Usability and Maintainability are the five main factors I'd be looking to make the best web sites.

Reach

When you're working with web applications 'reach' is a very important aspect of the development. Reach is all about how many people can see and use your application. With Web applications it's very much a matter of can people use the same application on lots of different browsers. Internet Explorer, Firefox and Safari are the big three at the moment, with Opera being next on the list in terms of popularity.

As well as the number of browsers, Reach also covers some other areas, such as geographic. Geographical Reach is about making applications available to people who are in different places, Web applications are very good at this because they run on browsers and work over the web, so all a user needs is a browser and an Internet connection.

Cultural Reach is all about making sure the users of different backgrounds and skill levels can access and use the site. I'll cover Cultural Reach a little further on in this post when I discuss usability.

Expressing dates and times is another huge issue when we're talking about Reach. People around the planet are in all sorts of timezones and webservers are rarely running in the timezone that the user is in. Ensuring you clearly communicate times to users is a very important aspect of applications where there is any kind of concept of "live" data. For example, when looking at the datetimes of a list of blog posts which are values like "10 Jan 2007 10:00" it's impossible for users to know what time zone that relates to, but placing in text which tells the user the blog was posted to "Three Hours, Twenty minutes ago" is very clear regardless of timezone.

There's another big thing with Dates that's important to understand and that's international date formats. In the UK for example we use the dd/mm/yyyy date format, whereas in America the standard is mm/dd/yyyy, this can be very confusing if you look at a date such as 07/10/2006 as it's impossible to know which date format the date is following, so it's always important to be clear about the date format, the safest way is to use the dd MMM yyyy format which is 01 Jan 2007, simple but very effective.

However it's important to understand Reach is a tradeoff. If you want sites to look good and be very innovative then you may have to sacrifice some Reach to let you use certain technologies like Flash or JavaScript, whilst reducing your reach can offer massive usability improvements. There's no steadfast rule on how to determine Reach. It's all down to the audience you want to use your site.

Mike Taulty created a fantastic diagram (below) which shows how the Microsoft current technology offerings all fit together in relation to their "Reach".

 

Microsoft Technology Stack 

 

Accessibility

A massively important area in education is the need to deliver material and services to all. People with disabilities can have a really rough ride on the internet. Accessibility is very important and it's something which has already been massively documented by the W3C in their Web Accessibility Initiative web site.

"Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging."

When building a web site it should be made accessible. It doesn't matter what it is, it should be accessible to all, there are no excuses, and it's even become a legal obligation in many places.

There are a few guidelines to follow which will ensure accessibility, this isn't an exhaustive list and should be combined with the advice in the usability section. 

  • Provide equivalent alternatives to auditory and visual content.
  • Don't rely on color alone.
  • Use markup and style sheets and do so properly.
  • Clarify natural language usage.
  • Create tables that transform gracefully.
  • Ensure that pages featuring new technologies transform gracefully.
  • Ensure user control of time-sensitive content changes.
  • Ensure direct accessibility of embedded user interfaces.
  • Design for device-independence.
  • Use interim solutions.
  • Use W3C technologies and guidelines.
  • Provide context and orientation information.
  • Provide clear navigation mechanisms.
  • Ensure that documents are clear and simple.

When you follow the guidelines you'll find that your applications are easier to use by everyone, not just those who have disabilities or learning difficulties.

 

Again there is an Accessibility tradeoff, sometimes you need to sacrifice accessibility to provide a richer interface or deliver content in the format you require. This isn't always a bad thing, but you should think in depth about this topic, again, no rules, just use common sense.

Innovation

On the web it's very important to make sure your site is innovative without being too wacky. Flickr is innovative in how it handles images. Google was innovative with GMail and it's search based navigation. Microsoft is innovative with their 3D mapping on Live.com. Innovation is about making people go "ohhhh" and "ahhhh".

I think the best definition of what innovation is comes from the British Government's Department of Trade and Industry. They say: - 

"[innovation is] the successful exploitation of new ideas"

So how do you innovate? Well it's a simple matter of coming up with a great idea and implementing it well. That's what will differentiate applications between.

Your web site should be very much like Marmite, people should love it (or hate it). If it falls inbetween those two it's in the Zone of Expendibility. Getting noticed is all about innovation so think long and hard about that when designing your applications.

Usability

How easy is something to use? Does something irritate you, make you irate when you use it? Usability is all about making sure people find your software a breeze to use.

So how do you know if something is usable? Well, take a look through This Is Broken, which i a site that covers all the stupid decisions people make and how it impacts users. There's a video of Seth ranting at what's broken in the world which is fantastic.

The United States department of Health and Human Services publishes a Usability book online which covers many great topics in and around Usability.

To me, usability is about one thing and one thing alone, me (not me but you), it's a very personal thing, which makes it very hard to understand usability because what you have in your head is what you see as right, and so it can be dangerous if you're looking at your applications and developments with rose tinted glasses.

What actually makes something usable isn't a set of rules I can outline, all I would say is: keep asking yourself Could this be easier?, Could this be more obvious?.

Maintainability

The web moves quickly, so it's vitally important that your applications are easy to change and update. The art of maintainability come from experience in having to maintain both your own and others applications.

One area that most people ignore is the naming of items within their applications, this can be anything from variables through to naming of tables and columns in databases.

Dim i As Integer

What is i? Is it the number of sheep on a farm, or the count of iterations a loop has been through? NumberOfSheep would be a better name, it tells you everything you would ever need to know and means when reading the code people can instantaneously work out what the variable is and what it's for.

There are lot's of different types of coding conventions, the one you choose is down to you, just ensure you're consistent in what you're doing.

How about databases? Well they have their own rules and advice on what makes them maintainable, I wrote about this in Professional ADO.NET 2 (Chapter two). Again, there is not a "right way" just better ways and worse ways, it's all about personal preference, just be consistent.

Encapsulating commonly used functionality is a great way of quickly achieving maintainability.

Breaking up your applications into defined tiers is a great way of improving their maintainability. Why though? Well, the more decoupled each of the parts of your application are, the easier it is to swap out those parts thus improving the maintainability of your applications.

The common three-tier architecture has a Presentation, Logic and Data tier; each controlling their own areas, this is a good  model to follow and you will reap the benefits from going down this route.

One last point on maintainability; if you have an unmaintainable application then it's important for you to look into refactoring, that will enable you to take your spaghetti code and make it beautiful.

Posted: Dec 12 2006, 04:07 PM by Plip | with 13 comment(s)
Filed under:

Comments

chethan said:

Hello! I want to know one thing regarding this issue, can i use Adobe Flash for the front end of my website and use ASP.Net scripts for backend working?

# February 2, 2007 6:31 AM

Plip said:

These concepts should apply throughout all three rounds.

# February 20, 2007 11:15 AM

Plip said:

You can use flash, yes.

# February 20, 2007 11:16 AM

coolnalu said:

Hmmmm....glad that I still check back, and just in time. :-D

Thanks plip

Regards,

Terry Xu

# February 21, 2007 9:23 AM

Oliver Nadj said:

hi,

i have a question.

can i use AJAX XSLT and PHP?

# February 21, 2007 2:04 PM

Plip said:

Hi Oliver,

You may use AJAX and XSLT, however you may not use PHP.

ASP.NET 2.0 is the only server side platform we're supporting.

Thanks,

Phil

# February 21, 2007 2:09 PM

saurabh gupta said:

My team " coolidea" has been selected in the web development category at Rank 39. As a part of my project our team needs a streaming server to stream live videos. Please make it available. my email is saurabh2525_gupta@yahoo.com

# April 17, 2007 3:27 PM

ipad app developer said:

Variety is the spice of life.

-----------------------------------

# December 17, 2010 7:38 PM

ipad application said:

-----------------------------------------------------------

I prefer to consider breaks throughout the my working day and seem by means of some blogs to see what individuals are stating. This webpage appeared in my searches and i couldn't aid but clicking on it. I am happy I did simply because it was a really enjoyable learn.

# January 9, 2011 9:54 AM

Alcazzarre said:

Maybe Alcazzarre could help you to solve your problems? You'r welcome pal.

# March 16, 2011 3:40 PM

football said:

Hello Everyone! I like watching BBC Football online.

# June 7, 2011 3:06 PM

fzqnd said:

avrxpkxjoab lc nzsp

# June 20, 2011 10:55 PM

Jennell Gallegoz said:

I don't even fully grasp how I stopped up ideal here, nevertheless I thought this put up was good. I don't recognize who you might be but absolutely you are going to a well-known blogger inside the event you are not already. Cheers!

# July 7, 2011 8:45 PM