Website Assignment | Romance Films

This assignment was a doozy of a challenge to tackle, if I’m being honest. I’m fairly comfortable with the basics of CSS, and the article on floating content seemed self-explanatory. But when I attempted to put the principles outlined in the article and in class into practice, I ran into some pretty significant stumbling blocks. However, in the end, I was able to reconcile most of the problems I had, and I’m happy with my overall finished product, which can be seen here.


My original mockup for the website assignment.

My original design for the website was a clean, simple layout with three-color layout: dark gray, white, and a dusty red (to represent the romance in the films). It featured a horizontal main navigational bar at the top in red, and a secondary vertical navigation bar to the right in white. The main text was in Palantino Linotype, and the header was in Rockwell, with the navigation links in Carrois Gothic. This mockup can be seen on the left. 

Despite how easy it is to throw together a functional design in photoshop, it can be considerably harder to reproduce the same product using CSS, which is the problem I ran into. I had a clear vision, but I didn’t quite translate as easily as I thought it would to the raw coding.

After a few accidentally mistyped lines of code, I got the the floating layout to work pretty well fairly quickly. Where I ran into serious trouble was when I tried to implement the ordered lists of links into navigation bars. I finally got them to work (sort of) but I’m still not sure how — I relied on multiple different guides, especially this one on Biostall.comso I am sure I have some redundant code. In the end, I was able to rearrange the ordered list to display without bullets and with spaces in between the items for readability. I considered this a major victory!

What I had the biggest problem with, however, was the margins on these navigation bars. Though I was able to remove the bullets, I was not able to remove the indentation on the unordered lists. This meant that I had to resort to changing the margins of the list items to make them display correctly. But I started changing margin information in multiple areas of the code, making it extremely difficult to measure and keep track of. This was a major failing of my work — even though I got the website to look like I wanted, it was at the cost of streamlined design, and done in a way that would make it very difficult to edit later. I need to be more consistent with my margin editing, and preferably find a way to make things align in a more intuitive way.


A screenshot of my final website. It resembles my mockup in part, but has some differences in the width of content and the font faces used.

Finally, I also ran into some problems with showing visitors what page they were on through greyed-out navigation. Dr. Delwiche emailed us and said the easiest way to do this was through removing the hyperlinks on each page, which is what I ended up doing. I couldn’t find an easier solution for this on the internet, but I would be interested in seeing a simpler way of accomplishing what seems like a fairly easy change to make.

Overall, despite the problems I ran into and the challenges I will face as I continue to grow as a designer, I was pleased with my result. I think it is appropriate for the subject matter, has an appealing color palette, and is readable to the average viewer. I’d love to streamline and improve the CSS and add some more tweaks to make the site pop even more, but for this assignment, I am happy with my work.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s