I finished my first week at J&J 2009-06-08

NextGEN Gallery for Wordpress

In my ongoing quest for new photo galleries, I found the NextGEN Gallery featured on the Wordpress news feed on my Dashboard for my website. The gallery doesn’t seem to have any linkages to Flickr or other photo management web sites, but looks like it works in the same way as my current gallery: FAlbum (which integrates Flickr).

This is an example of the gallery in use at AYChan.com:

The gallery website also has more examples of use. The NextGEN Gallery is pretty spiffy and worth a look.

Resume Logo

I wanted to create an eye-catchy logo for my resume. I don’t like the idea of “branding” or “marketing” myself, but I feel like a nice, clean logo on the top of my resume would make me more memorable.

I came up with this plant-based logo featuring photos of lemon balm and wood grain.

CSS and Eric Meyer

In my quest to fine tune my CSS skills, Silvia Muller my ITI & Learning professor, lent me a book entitled CSS Web Site Design by Eric Meyer. I believe I have a good grasp of CSS already, but I know there are tiny facts I don’t know. The first major fact I encountered involves using style sheets. Meyer states there is “one difference between linking and importing [which] is that you can link only from an XHTML document, whereas any style sheet can have one or more @import directives” (Page 57). This is important to note, because there are several ways in which a website can be structured. The first way to structure a site is to have all pages use one single style sheet. A second way is to have one base style sheet have other secondary sheets (for specific types of pages, i.e. products, support, etc.) link to it, which is called using “sectional styles.” A third way called “modularizing styles” is to have separate style sheets for various parts of the site, such as the footer, header, content, etc, with an overall main style sheet for elements that each part of the site has in common.

Another thing I didn’t know about is the use of “ems” as a measurement and its differences between “pixels” (Page 120). Meyer suggests using ems over pixels because they scale to the parent font size and that 1em is equal to the font size of the element.

A third thing I didn’t know is a type of short hand that can be used for the font property. Just as the background property can also contain information about background-repetition, such as: background: url(’images/dog.gif’) no-repeat, the font property can also be used with short hand. In the following example, the font weight, font face, font size, line height, and font family are all combined into one statement:

#content p {
font: bold italic smaller/1.5 Arial, sans-serif;
}

This example is taken from Meyer’s book on Page 225.

Meyer also has a section on choosing font families based on browser capabilities and what to watch out for (Starting on page 196).

Another thing that interests me is his mention of using padding to position elements side by side (also called “fixing column drop”). That instead of trying to position two divs next to each other using float left, one can float the left div left and the right div right. By expanding the left div’s padding outward to the right, and assigning a negative margin to the right div, you can trick the CSS algorithm’s to place the two divs side-by-side. And when the browser’s width is decreased, the two divs will continue to remain next to each other. To read a detailed explanation of this process, see page 137.

The above information are the most notable I have read so far. I’m currently up to chapter 7, so I still have some more reading to do.

Design Journal

I started this journal at the request of a professor. It is a good way to jot down ideas and thoughts to monitor my progression as a web designer. I’ll write about interesting designs I find on the web, in print, and in various media and outline what I am currently working on.

The current design I am working on is the site you are viewing. I have been spending time modifying the Sharpfolio Wordpress theme by Webrevolutionary. I really like the way the theme is set up, with post information on the side versus on top. Everything lays nicely for an online gallery. I still have a little more work to do with the layout. I might move the navigation inward a bit to line up with the graphic header. Approved comments are also not showing up which needs to be fixed.