Welcome to the dark side: IE6

http://www.wisdump.com/design/should-designers-stop-supporting-ie6/
Many designers have to make the ultimate decision of whether to support IE6. Randa Clay gives her opinion in

Obviously, there are some conditions under which you could easily drop the hacks:

• the site’s target audience/customer is tech savvy.
• your stats tell you that only a small percentage of your audience is still on IE6. Who cares if close to 40% of people are still in the browser dark ages. The only stat that matters is what browser your visitors are using.
• leaving out the hack isn’t going to disrupt the user experience that much anyway.

As I read the article it brought up some questions in my mind. Do we really want to spend half of the time trying to make your website work for IE6? How many of your users actually use IE6? Is stopping support of IE6 a way to punish those who refuse to upgrade?

Randa Clay concludes that "...it’s just part of the job. We’re not designing web sites for US, we’re designing sites for THEM."

Luckily for the scope of the Dorm Energy Competition project we do not have to support IE6.

Now for the "cool stuff" links:

15 Google Chrome Extensions for People Who Build Websites


Some of my favorites are:

• Chris Pederick’s Web Developer toolbar (which is also available for Firefox)
• Webpage Screenshot
• Resolution Test
  

Art Colleges FTW

I have been looking at different college/university websites to get ideas for a college themed page. The idea is that the themes wont solely be for the University of Hawaii but that other colleges will be able to take the template it make it their "own". Most big named colleges such as Stanford and UCLA have very simple layouts so I went to smaller art college websites and was impressed. They are after all an art school and it definitely shows in the creativity of some of the sites.













UCLA: Although I find it impressive that they are the "national champs", the confetti background seems a little much













Stanford: Very clean (+), plain (+/-)

























Corcoran: A good example of a clean simple site that is not considered boring. Good use of color (+)

Git-ting on my nerves

The "quickstart" portion of the Git SVN guide

I have used Subversion for most of my projects. However, for this project we are using Git. It took me a bit to understand the concept of Git. I did find a site that has a Git SVN crash course, kind of a "converters" guide to using Git. For commonly used SVN commands the Git equivalent is also given.

I encountered some problems using Git. When I used SVN, I would just do an update and it would get the newest changes. However, when I used Git, if I moved a file to say my desktop and did a pull the file would not get updated. After many trials to fix the problem, George advised me that using the clone command would be the easiest fix.

Git SVN crash course: http://git.or.cz/course/svn.html

Guide to Git: http://linux.yyz.us/git-howto.html

CSS: Google-ness

When I think of Google's "style" I think of clean, simple, very minimalist. I think of their colors: white and blue, and their containers with rounded corners.












My version of "Google-ness" applied to the Dorm Energy website.











Before

Header Text Image Replacement

The font used in image1 as the header seemed very bland. I changed the text to an image using the technique told by Chris Coyier. It leaves the text there but out of sight and displays the image. This allows search engine readability while being aesthetically pleasing.

.headerReplacement {
text-indent: -9999px
width: 600px;
height: 100px;
background: url(pathtoyourimage) #cccccc no-repeat; }


http://css-tricks.com/header-text-image-replacement/












after (with some other changes)

Gradients

I wasted a lot of time messing around with the colors. No matter what color I chose (I like green) it did not look appealing. I realized that all the sites I thought had beautiful colors used gradients. I did not want to manually create an image with a gradient and use it as a background like most tutorials advised me. I found this website that does it for you. It has made my life so much easier ;) .

http://tools.westciv.com/gradients/index-moz.html

CSS: What's your position?

The position property in CSS affects the way elements are positioned on the page.
position: value;

Values:

• Static: default positioning for all elements
  
• Relative: offsets relative to the default positioning
  
• Absolute: positions element based on nearest parent element or the corner of the window
  
• Fixed: same as absolute except parent element is always the window

http://www.barelyfitz.com/screencast/html-training/css/positioning/ has a simple yet helpful tutorial about positioning. It has great examples for each position.

References:
http://www.cssbasics.com/css-positioning/
http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS: Testing the waters

With a whole new project comes a lot of resources to keep track of. I created a wiki that holds links to websites that I liked, disliked, or just found interesting. I also added a list of links to resources that the CSS group can refer to while working on this project. This wiki will organize the many different links to websites and our thoughts about them.

Some things that I liked about these sites I found were the layout, text, and color. I generally think that simple sites that are easy to use and easy on the eyes are what attracts me the most. I like plain, but not too plain. There needs to be something that catches my eye and draws in my attention. I like colors that match the feel of the page and what the site is trying to convey.


Wiki: link

Remix: Hello, CSS!

Some inspiration: style that is clean, simple, and beautiful to look at


CSS
With the end of mockups and saying goodbye to the Design Group, I have decided to try out something new. I am now a part of the CSS group. While I don't know CSS and have a very basic knowledge of HTML, it is really something that I want to learn. I borrowed a couple of books from the library and I am going through the tutorials on W3Schools.com. I love how W3Schools allows you to "try it out" every step of the way. I usually can read something say from a book and think to myself "oh I got that" or "seems easy enough" but when it comes time to actually use what I read it is a whole other story. I think I just need to sail away from the safe harbor and just jump right in.

Pinax
I am in the process of getting George Lee's Kukui-Cup project running on my computer. The CSS group is working mainly with his project. I initially had problems with permission issues but after emailing George he added me as a collaborator to the project and I was able to download the project. The CSS group is meeting with him tomorrow where I hope to ask him more questions about getting the project running as well as the CSS structures in his system.

Milestone 2: The end...of mockups

Milestone 2 is here and the end of making mockups is near. This past week the Design group has been refining our old mockups from previous weeks to ensure that they are all cohesive. I changed the goals section to fit the requirements and I took out the user mockups for the period before the competition because even though it said in the Wiki that there might be curious students, our group felt that this was a bad idea to include these mockups. We also took out the billboard tab because it will not be in the actual website. The billboard mockups are in a separate window now and are not embedded in the Kukui Cup website.

Although it seems as if refining mockups would be easy, it became very time consuming because of the number of pages the user mockups have. One small change requires changing all 19 mockups. I then had to go back and make sure the mockups for each time period matched so that the look of the website didn't change every week.

Wiki: link

Mockups and Prizes

Continuing with our mockups we are now in the middle of the competition phase. I created the mockups for the user pages again and it is pretty similar to the previous mockups. The only big change included is the content such as different events going on during the competition and the amount of Kukui Nuts the user "Maile" has acquired. I also added more information to the profile pane because it was a little plain.

In addition to these mockups I came up with a list of prizes for the competition with the proposed budget of $2000. At first I thought that this was a lot of money and we could afford to give out many prizes because of it. However, after looking up prices and calculated the costs in a spreadsheet it actually took me a while before I could create a list of prizes that fit into this budget. What made it difficult was that if we gave individual prizes, that is about 22-24 people per floor which would come out to 44-48 people in total because of two dorm towers and that is for only one round. I tried to come up with group prizes such as an ice cream party that not only provided an incentive, food, but also a kind of social aspect with a group celebration. After all, those who win that prize would have had to pull in a team effort to win. I also created a prize for active participation, meaning that anyone who has the minimum number of Kukui Nuts (determined by an admin) has a chance to win the prize. That person is chosen at random at the end of the competition and the purpose of this prize is to give everyone who participates an equal chance of winning something. So even if you don't have many Kukui Nuts or your floor is not "gung-ho" about the competition, you still have an incentive to participate.

• Lowest EC Score for Dorm (final round): 32" energy star HDTV for the lounge
• Lowest EC Score for Floor (final round): $10 iTunes gift card per person
• Highest KN score, Individual (1st-3rd rounds): $5 Jamba Juice gift certificate, one winner per floor for the each of the 3 rounds.
  
• Highest KN score, Individual (final round): 4th generation iPod Nano for one winner per dorm
  
• Highest KN score, Floor (final round): ice cream sundae party for the winning floor
• Highest KN score, Dorm(final round): pizza party for the winning dorm
  
• Active participation through min KN score, Individual(final round): 3rd generation iPod touch

Wiki: link

Mockups and more mockups

This week we moved on to the next time period of the Kukui Cup competition. It is supposed to be the first day of the competition and I created the mockups for the user pages. Because of the amount of content and links on these pages I created a total of 19 mockups. It is getting a little easier to create these mockups because of all of the practice. I can easily get into the mindset of what time period in the competition it is and think of the things a user would see.

Last week I created mockups for the user before the competition. Originally I had discussed with other team members that the user should not be able to log into the competition before it starts because the pages would not be complete with information and thus be an inaccurate representation of what it actually would look like during the competition. However, it was stated in the wiki that this page would be for "curious" students so I created them anyways.

The group will be discussing these logistics of the website in the coming week and start working on the next mockups.

Here is a link to this weeks mockups: link

Step by step

After the initial milestone we realized that we had to break down the mockups into different time periods within the competition and focus on one every week. This allowed us to focus with one frame of mind and put more thought and detail into the mockups. This week we completed mockups for the period one month before the competition.

I was in charge of the user page and I was so focused on making mockups that I completely forgot that it was supposed to be before the competition and the user shouldn't be able to log in. At least I have a head start on the "during the competition" phase. I made a list of example events, activities, and commitments to put in the mockups as well as to give the Kukui Cup administrators content they could use. I got a lot of ideas from other dorm competitions as well as local energy related groups websites such as Kanu Hawaii. I also updated the home page mockup to provide mockups for every link on the page.

This coming week we are moving to another time period and a new set of mockups. I hope we can also review last weeks mockups and make sure that it is cohesive.

The first milestone is here!

Kukui Cup Competition

Getting to this first milestone in the Kukui Cup Competition Design project has been a new experience for me. Usually projects are handed to me with exact specifications for what needs to be done. The professor calls the shots and all you have to do is what the instructions say. However, in this project it was very broad and open ended. Instead of coding, we were the ones designing the the competition and website. At first I thought it would be really easy since I would essentially be the one giving the instructions to the Tech Team on what to create and there were little restrictions on my design. Now that the first milestone is over I realized how hard it is to be on the other side of the project.

In the beginning there was a lot of confusion as to who was doing what. There were no clear tasks assigned and I was unsure of what my role was. At first I thought we were given free reign of the design of the competition but was soon at an impass when we were given a very detailed explanation of the requirements of the competition by our professor. Normally what the professor says are instructions set in stone and you have to follow them. This made it difficult because they were just suggestions and were supposed to guide us when we instead took them as requirements.

Contributions

I worked on the focus group where I talked with members of my group to come up with questions we need to ask in our meeting with the RAs. There were many things we did not know about the dorms, the students that lived in them, and the RAs duties in the dorms. Since I got a lot of input from my teammates I was able to create a wiki page with my finding fairly quickly. I then helped my teammates with their tasks which in a sense helped my focus group task because it ensured that we had something appropriate to show the RAs in the meeting. I noticed Wing was having some trouble coming up with graphs so I told him I would create some graphs as well to add to his collection of graphs he already made. Towards the end of the project we decided to split the website up into sections and everyone took part in a section except for Wing who was in charge of making graphs for the website. After everyone completed their part Scott, John, and I put the pages together. Scott and I then created a user story to simulate how a user would go use the site.


The Next Episode
For the next milestone I would like to see the design of the website finalized to show the RAs at the focus group. The input given by the RAs should be taken into account and a new mockup made using the information obtained. I would also like for a more concrete list of activities and commitments made.

Kukui Cup Competition: A milestone is near

Contribution
Over the past week the Design Group has broken off into two groups to work on mockups for the competition website. I worked with Scott and John and we came up with a two site design where there is a public section that is a general energy information site and a competition site for students involved in the competition. I really enjoyed working in these smaller groups because it was more flexible and easier to propose new ideas. The hour meeting we had passed by in a flash. Here are our mockups.

The first milestone of our Kukui Cup Competition Design is in one week and our team is coming to grips with what we will have at this deadline. Since the project is so broad with many different aspects of the competition to work on, each member of our group was assigned to a task.

I am in charge of the Focus Group. We need to meet with the Resident Advisers to get their opinion about the competition and get a better perspective on the students, the dorms, and the dorm meetings. I created a wiki page listing the aspects we need to cover in the meeting, the questions to ask, and different ways of presenting the information and questions.

Milestone
I will be meeting with Shannah who has experience holding focus groups to get a better understanding of how they are run. By the first milestone I will hope to have a concrete list of topics, questions, and ways of presenting all of this at the meeting with the RAs. I will also be presenting our final mockups that Anthony and Scott creates (whichever design we choose), energy literacy information that John creates, and the charts/graphs that will display the energy information which Wing will create. I will also be helping my teammates in any way they help (most likely John and Scott since we already broke up into that team) since this a team effort.

Kukui Cup Competition: Brainstorm

After researching about other dorm energy competitions, the Kukui Cup Competition Design group held our first team meeting where we discussed the content of the design and engaged in some brainstorming. I realized that there is a lot more work involved in this project than I had originally thought and there are many things we still need to get straightened out. We talked mostly about the content of the system but we did not get to the use cases yet. We also talked about the prizes that would be given out as incentive during the competition but without knowing how our budget is going to look, we could not make concrete decisions.

A couple days ago I emailed Balsamiq about our competition project and they were kind enough to let me use a license for this project for free! I love supporting companies that I feel have good products as well as good ethics. If I ever have to use products in the future I will be sure to purchase it from Balsamiq because I like their philanthropic spirit, as one commentator put it. Here is their company blog about donating their software: link. Hopefully by next week I can already have initial mockups using the Balsamiq software.

Kukui Cup: Competition Design

It is a new semester and I am now in Software Engineering II. We are working on a new project called the Kukui Cup where students from different dorms at the University of Hawaii at Manoa will compete in an energy competition. My group consists of myself, Scott Wong, Anthony Xu, John Mack, Wing Ma, and Shanah Trevennah. We are responsible from the design of the competition and will be using Balsamiq to create a mock up of the website.

Here is a list of tasks that I think need to be done for the design of the competition:
1) Research:

• Research other dorm energy competitions to see what worked and what did not work
• Research behavioral change methods to see how effectively apply behavioral changes in peoples lives

2a) Content:

• Come up with ways of increasing energy awareness and increasing the knowledge of the participants on energy usage (how to deliver the information)
  
• Think of ways to use personal commitments as a means of reducing energy consumption
• Use social norms to encourage participation in the competition through social network sites such as Facebook or Twitter
  

2b) Competition:

• Create a list of rules that participants must follow during the competition
• Create a point based system on how the competition can be won
• Come up with a list of possible prizes as a reward for the winners of the competition
  

3) Website (layout/structure):

• Use Balsamiq to create a mock up of the website to include the content we have chosen

We will be meeting soon to assign the tasks and come up with a game plan.
Link: UH dorm energy competition project site