Ashley Middleton, JJC Web Design Contest 2007—Submission 1
An Introduction to Kelso Custom Covers
I always enjoy a challenge—and boy, was this site a challenge! Though I have been working with CSS for a few years now, this was my first stab at absolute positioning and using a grid throughout the design, which helped me place elements down to the pixel.
The Process
Since this was such a learning experience for me, I took screen captures of my process, and I'd like to share them. Eventually, I will write a full case study on my portfolio website.
(1) No CSS. I typically start out with only the information needed; the content should drive the look of the site, as the Web is about communication, and clarity is especially needed in an e-commerce site such as KCC.
(2) With Grid, Some CSS. I created my grid in Photoshop and placed it as a background for div#wrap. This guided the placement of my elements down to the pixel.
(3) Navigation. The black boxes you see here are CSS, not images; they represent where I wanted my navigation to go.
(4) Home page elements. The boxed elements and updates can be seen in this screen capture. This was the first frustration of the work—attempting to get those boxes to line up. Eventually, I figured out how to use the top property to my advantage.
(5) Home page elements, aligned. This is the result.
(6) Footer, original. This is the original footer concept. You'll notice in the Firefox version that I changed the order of these elements (to Contact Rosemarie, Where’s Kelso? and Specials, respectively) to better align with the rest of the page.
(7) Item page. Color reigns! This shows the beginnings of my item pages, along with the header, navigation, and shopping basket.
(8) Embroidery page. Though the embroidery boxes (larger here than the final boxes) do not align with the grid perfectly, their evenness and repetition mimicks the organized feel of the overall design.
(9) Embroidery code. A full screen shot of some of the Embroidery page’s code, in process. It took quite a bit of time!
Those blasted bugs
I’ve had two main bugs plague me to this day:
- The navigation images are not fully surrounded by the link (you’ll notice when you hover over them, the link only appears towards the top). I have tried everything I know and learned new tricks to figure this one out, even using z-index to pull the navigation above everything else on the page. (Z-index was a saving grace on this project, as absolute positioning likes to hide elements in back of one-another.)
- My main issue/pain in the butt is the footer. I made a nice, big footer that would include Rosemarie’s contact information, the special of the month, and upcoming events where KCC items would be sold. However, when viewed in IE6, my footer became a jumping bean—once you moused over a link inside the footer, the entire thing would jump towards the top. Thus, I created a very simple footer with no links (where there should be links, but alas alack) until I can figure out what the heck is going on. Any help would be mightily appreciated.
Slán!
My name is Ashley Middleton, and I attended JJC from Fall 2002 to Spring 2006. I currently attend the University of Illinois at Chicago, where I am happily studying in the School of Art and Design; I’m also still taking online courses through JJC. I plan on getting my Master’s Degree in Human-Computer Interaction at DePaul University. I plan on working in the technology field as well as teaching.
Thank you for this opportunity; I had a lot of fun! My full portfolio can be found at 1SkinnyGirl.com.