Fix the Web with CSS!

The Perfumed Court is an online retail store which sells perfume decants. All changes are below as well as in the relevant sections for convenience.

Fix 1: Efficiency, Simplicity

A navigation bar should be free from distractions. In this website, the bar contains two different types of hyperlinks: 1) sections of the website, 2) highlighted perfume categories. The second group is in conflict with the first, and is out of place. Moreover, it is replicated in a very close element under the "BROWSE BY CATEGORY" list. This introduces an efficiency issue, as it prevents an experienced user to directly reach the content they want to see. Their ability to navigate the website is hindered by the hyperlinks to the categories.

I fix this issue by removing the second type of hyperlinks from the navigation bar. I also hide the "Follow us" section from the body as it is also included in the footer and it does not contribute to the functionality of the website. I believe this is a simplicity improvement.


			.headernavmenu a.actuator {
				display: none;
			}

			#homepagecolumn3 > div:nth-child(1) {
				display: none;
			}

Fix 2: Safety

The site menu on the left includes a "Log Out" link. This should not be included when the user is not logged in, but fixing that is beyond the scope of this exercise. We will focus on a different issue with this link, which is that it is blended in the site menu and is very vulnerable to execution errors. A logged in user can slip and click the link, logging themselves out without even noticing.

I fix this issue by adding contrast to the "Log Out" link.


			a[title="Log Out of Web Site"] {
				color: red;
				font-weight: bold;
			}

Fix 3: Alignment

The website has some alignment issues, such as the search element floating left instead of right in the top right box, or the "Top Sellers This Week" text being aligned left, which conflicts with the perfumes aligned center. I fix these issues.


			#homepagecolumn3 .productgrid h4 {
				text-align: center;
			}

			#header .headersearch {
				float: right;
			}

Fix 4: Proximity

Currently, the "Featured products" section and the "Top Sellers This Week" section look too close together and there is not enough distance between the two sections. This introduces a proximity issue between the two and can lead to the user confusing the contents of the two. I fix this by adding a border between the two and adding some padding.


			#homepagecolumn3 {
				border-left: 2px solid;
				padding-left: 8px;
			}

Fix 5: Contrast

Even after Fix 4, there is not enough contrast between top sellers and featured products. I fix this by adding borders (gold color with repetition in mind) around top sellers to make them even more distinct.


			#homepagecolumn3 .record {
				border: 2px solid;
				border-color: gold;
				padding: 4px;
			}

Fix 6: Safety

In comparison to the names of the perfumes, the search bar is very small. As a user types a perfume name to search, the beginning of the name will likely disappear to the left. This introduces a security and efficiency issue as the system is not tolerant to execution errors such as typos. I fix this by making the search bar longer.


			#header .headersearch .searchboxform .decoratedblock .blockcontent .forminput {
				width: 200px;
			}