CSS: The Good And The Bad

If you didn't know by now, Cascading Style Sheet (CSS) is a very powerful tool for web design. So with any great power, comes great responsibilities. Sadly misuse and improper use of such power happens very often with beginners. So after going over some of the online tutorials and reading some of the tips and tricks of CSS, I want to share some of my findings with you, which will hopefully reduce some of the bad habits and instill some good ones.

Separate CSS from Code
First off, CSS can be use in three ways: Inline, embedded, and external. External CSS is the preferred choice because all pages in your website with similar elements can have the same style from one single CSS file. Embedded CSS is place in the head tag of the HTML file, and applies styling only to that page. Inline CSS is just like HTML styling where it's place inline with the element code. This method should be avoided because it only applies style to that one element. Inline CSS are typically used for testing.

Minimal Work
Writing less code reduces the amount of work and makes it easier to maintain. HTML should be marked up using the most appropriate tags for the content, reducing the use of "id" and "class". This in turn will minimize the amount of CSS need.

One way of minimizing CSS is to let the hierarchy do some of the work for you. Applying style to top level such as the body tag will let all content on that page inherit the styling. Another way is to group selectors that use the same style by putting them on one line using the same rule. Lastly, learning some CSS shorthand will reduce the amount of time and code needed.

Blast from the Past
Tables are the thing of the past and should not be use for design purpose. Rather than using tables, you should use div instead. If you are converting from table to div, you should know that div tag is a block-level element that defines a section, thus it should be use correctly and not overused.
Declaring font size by using pixels is still commonly used but should also be avoided because with the varieties of screen size and resolution being used today, having a fixed font size will different effects on different resolutions. Instead, try declaring font size using the em unit such as 1em or 1.5em. This practice allows easy changing of your entire site's font size by simply changing the BODY tag’s (or any other container tag’s) font-size property.

Validate your work
Last but not least, make sure you always validate your pages using both the HTML validator and the CSS validator. Using these validators will ensure you that you are following the standards.



Well, after browsing the web to find some good examples of CSS that I could use for my current project, Here are some sites that I think we all could get some ideas from:

www.ndesign-studio.com adds personality and flare while keeping it simple.


www.carbonica.org nicely incorporate images relating to the theme into the menu and links. Also divides the page into columns which I find to increase usability.


www.yellowstonepark.com contains drop-down sub menu when you hover over each main menu choice, which I feel that it makes navigating to a specific page much quicker and easier.


foxie.ru was list as a good design but after looking at the source code, I found that the site was done completely using tables, which in turns makes it a bad design. The artistic value is there but they completely threw usability and maintainability out the window.



Following these guidelines will not make you the best web designer, but will guide you down the right path....

Reference:
8 Common CSS Mistakes
How to Develop with CSS
15+ CSS Tips and Tricks
Table vs. Div

CSS: Magic of web design

Have you ever wonder how some webpages look so nice while others just look like plain text? If you said it was because it was done professionally using expensive web design software, well you're partially correct. Any novice web designer (like me) can make webpages that are presentable without the need of any special software. All we need to learn in conjunction with HTML is another markup language called CSS (Cascading Style Sheets). Currently, CSS is the most used method for styling websites and for good reasons. CSS is fairly easy to learn, works great with most browsers (minus earlier versions of Internet Explorer, but who really uses IE by choice?), and contains numerous styling functionalities. And the best part it, It doesn't cost you a penny. Here is a before and after picture of a website with and without CSS.
Without CSS:

With CSS:


There are numerous tips and tutorials online where you can learn CSS without the need of a textbook. A great beginner's tutorial for CSS can by found on w3schools.com. And if you never made a webpage before, you might want to check out their HTML tutorial before hand.

The next project that I'll be on will be involving CSS. Kelli and I will be working on George's Pinax website for UH Dorm Energy. For this project we will be creating different layouts and themes for the website to eventually find the best design for it. But like every design, we will of course keep functionality and usability in mind. As I learn more about CSS, I hope to be able to create websites that will look as stunning as the examples on CSS Zen Garden.

We're both fairly new to CSS so we'll be going through some of the online tutorials and probably look at other website designs that we think we could incorporate into the UH Dorm Energy website.

For more tips and tricks on CSS, take a look at Philip Johnson's CSS bookmarks.

HEEP: Milestone 2

MileStone 2 is knocking at our doors and we are able to answer with 3 working gadgets. After showing our prototypes to profession Johnson, some small changes were made. All that is left is to "gadgetized" or package it into iGoogle gadgets. Luckily there is a developer tool in the Google Gadget API called Google Gadget Editor that allows user to quickly edit and host gadgets. We just had to paste our code into the "content" section and it'll package it into a gadget. So without further a due, here are our 3 deliverable gadgets.

Don't Waste Money
This Gadget displays the HEEP Rebate + Money Saved. It gives the consumer a birds eye view of how much they will earn by choosing an EnergyStar model. The savings is automatically displayed as the yearly and upfront rebate savings. This application provides users a means to view the estimated savings they will receive as a result of purchasing one of the listed top energy star related appliances. The application calculates the difference in yearly electrical consumption of the selected energy star model and an average value for similar non-energy star models. The consumption of the energy star models are determined by the manufacturer’s specifications. The amount of savings is calculated using the current kilowatt cost.




Negawatt
This Gadget displays displays the estimated amount of negawatts generated by HEEP rebates for the current year. A negawatt (negative watt ) is assumed to be one watt of power saved. Each appliance's generation and percentage is displayed in the pie chart, which allows users to see the estimated amount of negawatts generated by each of the rebate appliance categories. The amount of energy savings is also displayed as a monetary value. This estimated value is calculated using the current kilowatt cost and the estimated total amount of negawatts generated.




HCEI Goals
This Gadget displays our progress towards achieving the Hawaii Clean Energy Initiative goals of reducing energy generation by 30% and having 40% of energy generation from renewable sources by the year 2030. The visualization shows the comparison of our total energy generation and energy generation by renewable sources to projected linear data towards achieving the HCEI goals by the year 2030. The dark-colored lines are actual data and the corresponding light-colored lines are the projected data. The overlapping of these lines shows the start of the Hawaii Clean Energy Initiative and shows how our current energy generation is compared to the projected goals.



These gadgets can be found simply by searching for it on iGoogle or you can click on the direct links to each gadgets below:
Don't Waste Money
Negawatt
HCEI Goals

Our next step is to schedule a meeting with the HEEP folks to present these gadgets to them. We did not create 2 of the gadgets that they have specific because we are still unclear on how to present such data. Hopefully they will like what we have so far and we'll see if they still would want us to make the 2 gadgets that they specified. Wish us luck in our presentation.

HEEP: Mock-Ups to Prototypes

For the last 2 weeks now, our group have been redesigning and making new mock ups of our applications for the HEEP website. After making numerous changes, we have some good news for everyone. We are now done with the mock-ups and are moving on to making prototypes. Here are some of the prototypes that we have been working on this week:

Appliance Savings Application: Instead of making it for one type of appliance, we've decided to show a table of different types of appliances and allow the user to choose a model of the appliance with a drop-down menu. By doing it this way, we can display all the appliance in one single application. We also added in the rebate amount into the savings category to make it more enticing for the users.


Rebate Negawatt Generation: This application looks almost exactly like its mock-up. It contains a pie chart that displays the Negawatt generation from each type of appliance rebate from HEEP. One functionality that we're still working on is the tooltip pop-up that displays information about "Negawatt".


Progress Towards HCEI Goals:This visualization displays Hawaii's progress towards achieving the goals set in the HCEI. It will display current data along with projected data that acts as objectives/markers for each year's progress. we have not found out how to separate the actual data from the projected data at this time. An option that we hope to use is the "fill" option in Google visualization to have a fill for actual data and no fill for projected data. We were unsuccessful in finding any information in the Visualization API or Google search. We are hoping that someone will reply to the post we've made on the discussion group.


There is still a lot of work ahead of us in order to make these and the other prototypes deliverable for milestone 2. I will definitely keep you updated with our progress.