Apr 232012
 

I am a developer with questionable credentials in aesthetics with one saving grace – I recognize when I see a good one in design. In developing web sites, I have explored a few options for web design and benefited from some of them. A few of my readers have asked me questions about these options and I decided to write a note as a response. I am also structuring the note as a lesson plan so that any newbie can benefit from it. (If I had time, I could have created a course at Udemy).

Objectives

I am assuming that these are the objectives that you have.

  • You want to create good looking websites.
  • You do not have access to designers from beginning. You may be able to rope in UX designers later in the game, but to start with you still want a good looking site.
  • You prefer tried and well understood interfaces instead of creating a unique look and feel.
  • You don’t mind learning a bit of new technologies to go with code-Fu.
Prerequisites
  • You should be able to develop websites – you should know basics of HTTP, HTML and so on.
  • You should know a programming language to program the web (I assume you are a J2EE developer or PHP/python/ruby developer).
Motivation

Let us say that you are a developer out of college. You went through your courses and graduated with a good bit of CS knowledge. You are working for a large company. You are developing a web application that is heavy on the backend with lot of potential to save the company some money through process optimization. This application is for internal employees.

After the first prototype, you are asked to show the prototype to the big boss. You sweat it out and create an end-to-end scenario and show it him. Unfortunately, the first thing that catches his attention is the color scheme or the misplaced logos. Then, the complex flows and intricate forms. From your point of view, you keep thinking “why is he focused on these? Doesn’t he know that we will get a UI designer and fix it before the release?”

At the same time, a college intern working for the summer creates a wordpress site. Naturally, it didn’t have the end-to-end scenario that you have in mind, but it has lot of other niceties that the big boss cares about: colors, nice flow, ability to create a social group, interactions and so on. The big boss asks you why you can’t put together a professional demo as good as the one by the intern? Can’t a team beat a single intern?

You look around and you realize that the web has amazing number of websites that are well-designed (at any rate, better than yours). Seemingly, they are done on shoe-string budgets, without using costly skills. Your manager looks at this market and sees that typically this process uses the following kind of people:

  • UX designers: These people design the pages in traditional media like PSD (Photoshop files).
  • HTML designers: They convert PSD to well-designed HTML

From there onwards, the developers can use the HTML templates and code to their specs. Turns out that both these two skills are commodity skills (You can get a a 10 page – consider each page to be a template – site done under $2000).

But then, the manager recognizes these issues:

  • He needs these skills through out the project. Outsourcing doesn’t work as well.
  • There is a considerable amount of interaction. Unless somebody in the core team doesn’t understand these skills, they end up paying for the mismatched execution.

So, realizing that he needs some of these skills in-house, the manager asked you to look into it. Your next task is to understand enough to create a good looking site and involve the designers when you need them, and get the most out of them. You also decided to use couple of junior developers in this process as well.

Where do you start?

Skills you need to learn

To develop good websites you need to know the basics of:

  • HTML5: This skill helps you to design clean HTML sites.
  • CSS: This skill lets you design good looking websites.
  • JavaScript (JS): This skill lets you program the web to be interactive.

Of course, knowing these will not help you to make good looking websites. You want to understand the reusable patterns, standard usages, and the conventions. Thankfully, several frameworks help you to learn those:

  • JQuery: It lets you control the webpage look, content from JS easily.
  • Sass + Compass + ZURB Foundation: The first two technologies help you to tame CSS – not that they are important, but if you want to use some advanced frameworks you might need them. ZURB helps you to create a good looking web page templates from some simple specs from you. Very popular with Rails crowd.
  • Less + JQuery + Twitter Bootstrap: Less is an alternative to Sass which lets you generate CSS from simple macros. Twitter Bootstrap is amazing template for developing websites.

At the end of all this, you will easily put together pages like:

image

and

image

without having to worry about a lot of details.

Learning the pre-requisites

Currently, the best source to learn (by practice) is code academy. If you don’t skip your lessons and practice all the projects, you will not only learn, but also retain the knowledge about JS, CSS, and HTML. Once you go past, here are some specific resources for each of the topics:

HTML5
  •  Paul Irish’s amazing HTML5 Boiler plate. Not that you want to start your web pages from there, but you will understand the anatomy of a HTML5 page.
  • http://www.htmlfivewow.com – be sure to use it from a modern browser like Chrome or FireFox 11 or IE 10.

Pointers about learning HTML5: Don’t spend too much time on it. You will learn as you practice, once you get the hang of basics.

Exercises

For practice, do the following:

  • Create a slide deck using the template provided in HTML5wow.
  • Take your company webpage and redo it in HTML5. You don’t have to adjust CSS or anything yet. Just, restructure it to use HTML5 boilerplate.
JavaScript

If you practiced using code academy, that is teaches you enough about the language basics: primitives, loops, functions, prototypes, objects and so on. Here are some additional resources:

Exercises

For practice, do the following:

  • Solve 8-queens problem in JS. Print the results to HTML screen. For additional marks, learn how to display it properly on a chess board.
  • Solve the same problem, using underscore.js as the utility library.

Learning the frameworks

JQuery:

The power of JS is that it can be used to manipulate DOM (a structured representation of HTML) in the browser. JQuery makes this manipulation simple and succinct. Here are the resources to learn JQuery:

Still, the best way to learn JQuery is to develop a site with it, which is what you will do next.

Exercises:
  • Take your corporate website (or any generic site, that is not interactive). Redo it in JQuery in the following way:
    • Assume that the users are logging in (so, you have their username).
    • Get their twitter feed via Ajax and display it in a different tab.
    • Implement the navigation, screen design and such in JQuery (and JQuery UI).
  • Do the 8-queens problem. This time, as the search is happening, animate the board slowly to show the inner workings trial and backtrack model.

Twitter Bootstrap

You can learn twitter bootstrap by playing with it. Still, the following are good resources:

If you went through the earlier lessons, you do not need to know much about bootstrap. In fact, you don’t even need to learn JQuery to start with bootstrap. So, if you want to start with bootstrap, you can do it along with JS learning.

Exercises:
  • Take your corporate website. Redo it with bootstrap.
  • Take plus.google.com – do it with bootstrap and see how it looks.
  • http://ajkochanowicz.github.com/Kickstrap/ – try this with the corporate site. In particular, use the icon fonts.

Note: Any webpage you developed using this framework renders well on mobile devices. It follows the principles of “responsive UI”.

Final test

If you made it so far, you know:

  • basics of HTML5 and CSS
  • Good knowledge of JS and JQuery.
  • Good website starter toolkit (including less, coffeescript(!) and so on).

To test yourself, consider developing one full website using the following technologies:

  • Use bootstrap for the page layout and the page design.
  • Use JQuery for the DOM manipulation
  • Use underscore.js for JS utility library
  • Use Require.js to manage the JS inclusion.
  • If you are serious about it, you can try to use backbone.js as the MVC framework on the browser.
  • You probably will need some sever side services to implement any decent website.

For problems, you can pick any of these:

  • A reporting system where people enter reports on their activities. Different people get different views. Different reports are generated for mailing periodically.
  • A chess game web site where two people play against each other. Make any assumptions that you need to, to make the system simple.
 Posted by at 4:34 pm

  2 Responses to “HTML5 design knowledge for application developers”

  1. Almost tempted to try this.
    What do you think of the packaged web content management solutions? Like Interwoven, etc.?

    • Amar: It is not too late to learn all this stuff. Udemy offers lot of courses in these subjects. The outline I showed is good enough for technical people like you. As per the interwoven etc., they are packaged applications and as such address only a specific need. What we need for most cases though is the ability to integrate some services (like content management in Interwoven) with general purpose platform.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>