Project Report, Week 7 – HTML

Well, I’ve begun getting the site together. You can check out the work at http://www.cypheye.com/twc421. Right now, it works best in IE7+ and I’m working on getting it working right in Firefox.

Unfortunately, IE and Firefox have some subtle differences that present themselves when creating precision HTML/CSS that require goofy hacks to make it work in both. In this case, I’m adding “padding” to the element. This sets the content a certain pixel depth from the edge of that element. IE does this by adding that padded edge to the inside of the element. Firefox expands the element by the pixels defined to create that padding. If you’re familiar with Photoshop, you can think of it like adding a stroke to the element. IE places the stroke on the inside, which Firefox places it on the outside. It is just slightly difficult to make it all behave properly.

The hack you can use is kind of clever. IE has a habit of silently throwing away CSS values it doesn’t recognize. CSS principles stipulate that the last element gets used in a list of two or more keys that are the same. Example:

BODY {
color: #FFF;
color: #000;
}

In IE, the text color will be set to black (#000) even though white (#FFF) was set first, the last one listed takes precedence. But in Firefox, you can add a flag (!important) to the end of an element to ensure it is used no matter when it’s listed:

BODY {
color: #FFF!important;
color: #000;
}

Here, even though black is listed second, the white text color takes precedence (in Firefox only). If you visited a site with this code, in IE, the text would appear black, but in Firefox, it would be white. This works really nicely when I need the width set to one amount in IE and another in Firefox.

This week, I’ll need to nail down all the places this is affected. I’ll also want to take a look at the site in Safari or Google Chrome to make sure it’s working there as well. In addition to getting the site looking right on all reasonable platforms, I need to work on getting some good text into the “software” page.

Project Report, Week 6 – Prototype

After gathering my work from last week, I needed to come up with a decent way to represent all the work I’ve done. I knew I wanted to highlight my artistic web design skills, but I also didn’t want it to be so “loud” that it detracted from my work. First, I thought I would develop a “business” style site. Unfortunately, to me, “business” style is usually quite bland. It might have a flashy logo, but it’s otherwise set in a simple layout.

Next, I thought I’d take more of a designer approach. I started with a cross-hatched background with a slight gradient. On that, I added my name with some “low” lights as well as the expanded, faded, larger name behind. The organic “pin-striping” was the last touch that added a nice flare to the title.

On my first pass at the body, I had the entire content confined in a box with a large page title at the top and the portfolio entries below. After looking at that for a bit though, I wasn’t quite pleased. I got rid of the bounding box and expanded the title. You don’t see page titles large than the site titles real often and there is probably a good reason for it. However, I made “WEB DESIGN” a little faded to cut back a little on its “grabbyness”. With these changes, the larger page title and the now-free portfolio entries really enhanced the flow of the site.

My next step is to actually turn it into an HTML/CSS website. I expect this to take a few hours and the code/CSS complexity should be minimal. I frequently struggle in getting a really slick looking design, so I like it when that’s nailed down and I can get into the code.

Project Report, Week 5 – Gathering My Work

This was an interesting week. I got to juggle some school with a business trip. Luckily, there was lots of time to sit around in an airport to get some homework done.

So, for this weeks work, I needed to gather up my work that is worth showing off. Finding websites and art to show off isn’t hard for me. The hard part was that last part from two sentences ago, “worth showing off”. I’ve had years of messing around with websites and playing in Photoshop, but rarely did it result in something worth displaying to a prospective client.

I began by selecting the websites I’m proud to say I designed them. Next, I searched for some school assignments that I really enjoyed, as those are the ones I spent the most time on and can give glowing descriptions of. Finally, I am still searching through Photoshop work. Of which, there are many sites that I thought about making, did make and now they’re no longer hosted, or were just too difficult to create (at my then level of code mastery).

I’m always tinkering around and I also have a few classes that may produce some noteworthy work this semester. This portfolio will need to be an ever changing portal of my work so I can continue to draw in clients. Tastes in websites change and as they do, I’ll need to update, not just the design of the portfolio site, but of the items I display as well.

Project Report, Week 4

This week I created my portfolio proposal. It contained a lot of information on how I’ll be developing the web page housing the portfolio. One thing it lacked, though, was any hint on how the site might actually be laid out. I figured what the proposal needed to contain was the content that will in the portfolio itself.

Next week, I’ll be focusing my efforts on creating an initial mockup of the website. This will be created in Photoshop and I may even be so bold as to create an initial HTML representation of the site.

I am still a little hazy on how exactly the portfolio will look and what it will display. I have a lot of professional and school work, but not a lot of it is worth displaying. I suppose I will focus on those projects (both educational and profession) that I have really put a lot of time into and have turned out fantastic.