Xune

Open Source Web Design

Erika — Thu, 14 Aug 2008 17:43:02 +0000

One of my favorite web sites in the web design community is Open Source Web Design (OSWD), which offers a place for web designers and developers to submit their designs for users to download for free. It is a great resource for getting design ideas and a way to learn HTML and CSS by thumbing through submitted code.

Some of my favorite layouts I have found so far are shown below:

Welcome to a new and improved Xune.net!

Erika — Sun, 10 Aug 2008 23:08:45 +0000

Welcome to an intuitive portfolio, more functional design, easier to navigate layout, and improved resources page. The site combines both my portfolio and blog all in one Wordpress installation with added security. After my first attempt at creating an original theme for Wordpress, I had a lot of security issues with people trying to hack my site, and after repeated installs of security plugins, I was still having trouble keeping people out.

So, I started from scratch by creating a totally new theme with added security. I created a theme that reflects my personal style with a portfolio that is easy to navigate and straightforward.

In order to rid myself of the flaws in my Wordpress install, I followed BlogSecurity.net’s security whitepaper on securing a Wordpress install. It is a step-by-step guide starting from the minute you load Wordpress onto your server all the way to installing the right plugins and setting your .htaccess files.

Enjoy my new site!

MSNBC.com Header

Erika — Thu, 26 Jun 2008 21:34:39 +0000

I love the way the MSNBC web site uses a very colorful header with text and navigation overlay. I might play around with my own header (which is also very colorful) to make it a little more compact and neat looking.

30+ Firefox Add-ons for Web Developers

Erika — Tue, 17 Jun 2008 23:39:37 +0000

Mashable.com has a nice list of over 30 nice add-ons for web developers who use Firefox. Check them out by clicking here.

Rounded Corners in CSS 3!!

Erika — Tue, 10 Jun 2008 22:46:21 +0000

Wow. I jumped up and down when I found out that CSS 3 is offering a “border-radius” property. No more having to use images or wacky CSS code. Check out the good news here.

Minimalist Blogging: Tumblr

Erika — Wed, 04 Jun 2008 09:19:20 +0000

I stumbled upon a blogging management website called Tumblr. The front page seems very Googlish and simple, so I thought I’d give it a try, and signed up. The “dashboard” is very easy to navigate with things like account information and posting capabilities in very easy-to-find locations. Tumblr also has a “Goodies” page with a widget that you can download to seamlessly add textual information to your “tumblelog.” Overall, it’s a lot like Blogger, but with a different design.

NextGEN Gallery for Wordpress

Erika — Mon, 02 Jun 2008 19:04:05 +0000

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

Erika — Sun, 01 Jun 2008 05:58:18 +0000

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

Erika — Sun, 01 Jun 2008 00:38:09 +0000

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

Erika — Wed, 21 May 2008 03:09:09 +0000

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.