Katie Kurkoski

www.linkedin.com/in/katiekurkoski
Seattle, Washington

 

CascadiaFest
Twitter
Stack Overflow

 

Pew Pew Laser Blog
Github
Codepen

CSS

All work hosted here dates from 2010 or earlier. Please check out these sites for more recent work samples:


Index | HTML & XHTML | CSS | JavaScript | jQuery | PHP | Web Design | Graphic Design | Other

I focus on using XHTML and CSS to create robust and flexible web sites that are easy to maintain. Here are the reasons why:

Expandable Box: circa 2008
The Expanable Box

The Expandable Box demonstrates how a flexible and appealing box can be created using 3 images totaling only 10.4K in file size. The box will shrink or stretch to contain small or large amounts of content. All content is actual text overlaid on the images, which enhances the elements accessibility, search engine visibility, and device rendering flexibility.

Amsterdam Design: circa 2008
Amsterdam Design

Amsterdam Design is a speculation web page design that uses only CSS for layout. Just a few notes about the design:

  • The design is completely liquid - shrinking or expanding to fill any available screen width. I've used ems (a unit which is relative to current character size) to specify most of the values in this design; pixels were used when appropriate due to an image or standard ad width.
  • A 'master' style is used as a base for all the H3 elements, which is then overriden by the unique style declarations for each div. This means that a new section could easily be added; or existing sections could have their appearance changed.
  • The form is both styled and accessible, which I achieved by adding and styling semantically appropriate labels.
  • Initially I used a simple method to replace the browsers bullets with an image, however this method offers little fine control over the appearance of the list. I have selected a more complex method that enables tight spacing between between the image and text, and control over the vertical position of the bullet. The simpler 'accessible' style still exists in the style sheet.
  • I've added a handheld stylesheet, which hides optional boxes, re-styles the boxes and list for better small-screen performance.
  • I am aware that the images have an ugly background when viewed in IE6 or lower. This is because they are .PNGs with alpha transparencies. In a production environment, I would use conditional comments to replaced them with .GIFs with a solid BG color. However, I feel that this is not necessary in a speculation site.
  • I encountered some IE rendering bugs related to hasLayout, which I've corrected them by using line-height instead of min-height to force a height on the H3 elements. This solution has the added advantage of a nice vertical centering effect on the H3s.
Resume v2.0: circa 2006

The design of this very resume web site is completely CSS based. Feel free to view the source code or check out the CSS. There's a lot going on in the CSS file, and so little in the source HTML.

  • In the main navigation bar, the highlighting of the current and active section is controlled by CSS.
  • The elastic width of the site prevents horizontal scrollbars when viewed through a very narrow browser window, without allowing the text line lengths to grow too long to be easily readable.
  • The navigation breadcrumbs element in the upper right corner of the page has a .png with alpha transparencies as it's background image. This type of file can cause trouble in certain browsers. While I researched several JavaScript & server scripting solutions to correct this issue, I found that using conditional comments to replace the .png with a .gif was the simplest and most flexible solution.
  • The style declarations for the :hover link pseudo class are also applied to :focus and :active. This ensures that those visitors who are navigating without a mouse will see the same effects as those with a mouse.
  • This site's main stylesheet uses image URLs relative to the domain so that a single stylesheet with no directory changes will work for all the pages in the site.
  • This site delivers a different stylesheet to older and newer browsers, depending on their display capabilities. The few IE bug fixes that are necessary are handled via conditional style sheets rather than relying on CSS hacks.
  • I've deliberately used a very large single stylesheet, rather than multiple stylesheets split up by function. A visitor's page loading can be slowed down when a browser must make multiple server calls to retrieve multiple distinct files.
ReFIT Site Redesign: circa 2007

In early 2007, I completed a site redesign to match the rebranding of The Remodeler's Foundation to ReFIT. I created a completely CSS based (table free) design that would enhance the site's usability by making it more accessible to the very people it was trying to reach.

  • On main header, I've used image replacement to provide a graphical header to most browsers while still showing a semantically useful header to screen readers and search engines.
  • The new design uses completely flexible width, expanding to fill large browser windows.
  • The navigation effects are completely text-based, which allows it to be understood at any text size, and even by screen readers.
  • The new color scheme and main logo were designed by an outside graphics designer. I melded those new design elements with the those of the old site to create this new one.
Table Styling Test: circa 2006

The following is an example of some advanced table styling; particularly column groups & a caption. The idea is to show a thicker border for the paired Percent and Rank columns the following table. Column group support varied by browser, so I put together this demonstration of possible effects to see which worked.

July 2006
  Cash Variance Refunds
Name PercentRank Percent Rank
Gateway 0 1 .428 2
Canyon Rd 0 1 .236 1
Clackamas .894 3 1.05 4
Tanasbourne .629 4 .52 3

Most of the table is styled using an additional stylesheet. However, the following styles are specified using a colgroup inside the structure of the table itself:

  • Dashed gray border around the "Name" column.
  • Thick left side border on both "Percent" columns.
  • Light yellow background color for the middle column.
  • Forced 100 pixel width for the last column.