More than one way to skin a cat or webpage

If you haven't heard of the saying "More than one way to skin a cat", it pretty much means that there are more than one way to do something, or that there are several possible ways of achieving something. This saying cannot be more true in terms of web designs. Web designing methods are constantly changing as new languages and technologies come out. The once popular table layouts are quickly being replaced by the use of CSS.

Even within CSS, there are multiple ways of creating the same layout and style. This is mainly due to new implementations within the language. Majority of current CSS layout on the web are column-like created by using the "float" property in CSS2. With the development of CSS3, it introduces a new box model called "flexible box model". This new box model is optimized for fluid design. The children within the box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children allowing for easy expansion.

The latest "skin"(theme) I made for my current CSS project is a UNLV (University of Las Vegas) theme. The layout that I followed was the one on their main page: www.unlv.edu. For this theme, instead of using the usual float property to create the layout, I used the flexible box model from CSS3. Because CSS3 is still in the development phase, this feature is still experimental and requires browser specific tags. Even with these tags, its still sometimes glitchy and requires you to refresh your browser a few times until you see the changes. And this feature is not supported at all with Internet Explorer, so if I can't get it to work atleast 100% on the other main browsers (Firefox, Safari, Chrome), I will probably change the layout back to using the stable float property.

Below is a screenshot of my UNLV theme for the Dorm Energy Competition.


If you want to find out more about the flexible box mode, check out these sites:

future of CSS: the flexible box model

flexible box model specifications on w3.org

CSS+List=Easy Navigation

Have you ever gone to a website to find a specific information that you know is on that site, but was unsuccessful or took a very long time to find it due to poor site navigation? It's quite the shame when a website has a lot of useful information on it but has poor usability due to its navigation. Have designers forgotten that a successful website requires a good navigation menu?

Navigation menus are not that hard to make as one may think. One good and easy approach that I've found is to use a list. Yes, all you need to use is a plain old unordered list and a bit of CSS to make a simple yet effective navigation menu. You can even make advance menus such as multi-layer and drop-down menus using nested lists.

Using the simple HTML unordered list below:

<ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">Resources</a> 
    <ul> 
      <li><a href="#">Dorm Energy</a></li> 
      <li><a href="#">Energy Hub</a></li> 
      <li><a href="#">Have Fun</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Energy Data</a> 
    <ul> 
      <li><a href="#">Real-Time</a></li> 
      <li><a href="#">Hour</a></li> 
      <li><a href="#">Day</a></li> 
      <li><a href="#">Week</a></li> 
      <li><a href="#">Month</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Billboard</a></li> 
  <li><a href="#">About</a></li> 
</ul>

you can create a horizontal or vertical navigation menu with some simple tweaks on the CSS scripts. This is called the "Suckerfish Drop-downs".





Rather than me explaining how this works, you can check out the original post on creating a Suckerfish Dropdowns. This post takes you step-by-step explaining what each step does. Any beginners can easily follow these steps to create their very own navigation menu.

So there you have it folks. There is absolutely no excuse for having poor navigation on any website.

CSS: Reaching a milestone of web design

For the last month, I've been working on a CSS project to create different themes for the Dorm Energy Competition webpage. CSS was fairly new to me and as I began to learn more about the language, I realize that this simple language is packed with powerful styling capabilities. As a person who learns best from hands-on experience, I jumped right into it to create my first theme, the "Dark" theme. I tried to apply what I've learned from the tutorials to create a theme that pleasing and reflects my creativity. Below is the outcome of my first attempt.


I was quite please with it until after I reviewed the design of a similar website for Saunders Hall Energy Competition. After seeing some of the design pitfalls on that website, I realized that my theme also contains similar pitfalls. I have always been a person that focus on function over form, but have I lost myself in this overwhelming power called CSS?

Luckily it was just a momentary lapse of judgement, so I quickly fixed the over sized menu images and background image to give more screen real estate for the content. Here final result of the dark theme. (There was an empty space so my creative side told me to add the door background image for more effect.)


Feeling that the Dark theme is presentable as is, I wanted to move on to my next theme. I decided to do a "Windmill" theme similar to the one for our T-shirt/button design, but for this design I wanted to incorporate a minimalist design. Something that looks clean and simple yet follows the theme. Here is the result of the Windmill design:


I am quite please with this theme and thought it looked a lot better than the Dark theme. It is clean and simple and everything played well together for the theme. I got pretty lucky finding images on the web to fit into the theme with very little editing of it. All editing was done using Paintbrush, a Mac version of MS Paint.

I realized that image editing plays a major role in CSS designs. In order to use CSS to its fullest, you will need to have right images or image editing skills to create such images. Many images on the web have copyright watermarks on them, making them unusable. Half of the time I spent was looking for and editing images.

For now I feel like I have reached a milestone as a web designer, graduating from a complete newbie to maybe an amateur/average designer. Thank you for following me on this first half of my journey and look forward to the second half.

Background: Personalization and more...

Like most people, we like to personalize our own belongings to make it feel like "us". Something that will make it unique and distinguish it from the rest. What is the first thing you do to personalize your computer? Well, the first thing that most people and I tend to do is change the default wallpaper or background to personal picture or a picture that reflex us.

With personal home pages and social networking sites becoming so popular, everyone is jumping on the bandwagon. So is just changing the background on your page good enough to make it feel like you? Well, the answer is yes and no. If you just changing the background to a different image, it doesn't really speak much about you. But don't worry, with a bit of CSS, you can create multiple effects just by using the background.

One bad thing about web designing in the past was that everything we create has a boxy look, so web designers has gone to great lengths to create rounded-conrners. With CSS, rounded corners can be create by using rounded-corner images for the top heading and footer background. This method does the job but it was a painful because you will have to create the rounded-corner images to match the content and add nonsemantic markup to your code.



Another effect you can do using the background is to add the drop shadow effect. This method will need you to create a "drop shadow" image similar to the one below and using it as a background with its position set to "bottom right". Quite troublesome but it does the job.


Well, thanks to CSS3 you don't have to go through all that trouble just to create rounded-corners and drop shadows. The new "border-radius" property allows you to create rounded-corners just by setting the radius of the borders. But because it's still a new feature you will need to add add prefixes for browser-specific.
This can be done by adding " -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; " to the CSS. And for the "drop shadow" effect, you can use the "box-shadow" property.
This can be done by adding " box-shadow: 3px 3px 6px #666;" to the CSS.

The last effect I want to go over is the Opacity property which can give your design an extra dimension. This can be done by adding "opacity: 0.8;" to the CSS where "0.8 = 80% opacity.

Below are some screenshot from my current project using these effect. It's still unfinished and I'll be making many changing to it to make it more "pleasing to the eyes".



In this screenshot, you can see that I used a dark image for background and a lightbulb as the background for each menu selection to go with the "dark" theme.

Here is another screenshot of the bottom of the page:


In this screenshot, you can see the use of the rounded corners and the drop shadow effect at the bottom of the content box. The background of content box also has an opacity effect on it so the background image of the webpage will not get covered when you resize the browser window.

It's currently not that great of a design so as i learn more about CSS and continue to work on this, I will show you the new changes.


Reference: "CSS Mastery Advanced Web Standards Solutions Second Edition"