Ever questing for a better way to study Spanish, Seth Glickman created a javascript flashcard system with some input by me. I thought the final product was very functional, but its raw HTML tables left something to be desired. Utilizing the latest techniques for rounded borders, I created a stylesheet to make it more aesthetic.
The rounded corners method I used relies on wrapping a few divs around a few images to create the four visual elements needed for the corners. Since I knew from the onset that this application was going to be used in small circulation among students in my Spanish class, I decided to use .png’s for the corners in order to provide an anti-aliased blending of color against any background, reducing the CSS overhead. The incompatibilities between .png’s, the technique I used, and Internet Explorer would be fixed by the fact that the application would almost never be used in Internet Explorer. The target audience simply did not need browser compatibility.
The end effect is easy on the eyes, which is important in a flashcard application where you will be reading lots of text over and over. Visual clues guide the user: delete is red, and the rows are clearly seperate, making it easy to tell which bubbles go with which other bubbles. Overall, the user experience is very simple.
Check it out in action: Flashcards
back...