There is one design style that can withstand the fluctuating trends that come and go in the design world, and that is to have a clean, simple, minimalist site.
Think of sites like Apple, Amazon, and The New York Times. One thing you will notice that they all have in common is perfectly executed use of white space. However, there are some very subtle guidelines to follow or tips that you should consider when designing your own clean website.
This tutorial will take you through the development process and point out things to consider along the way to keep your site looking like a modern, polished, professional website, and not something that was made back in the 90’s.
The single most important aspect of a website is its navigation. If a viewer is not able to easily navigate through your site and find the information they’re looking for quickly and easily, they’re going to leave. When you’re striving for minimalism, your navigation is an excellent source to add some character to your site. The first part of our tutorial will focus on developing an accordion-style navigation system that is powered entirely by CSS3.
Let’s begin with the simple part, setting up the HTML for our navigation. Typically I like to create the navigation in its own HTML file and then pull it in to each page with a simple PHP include. Doing it this way allows you to easily add or subtract links from your navigation menu throughout your entire site by only having to modify one file, rather than every page. Let’s go ahead and make an unordered list of what we want our main navigation links to be. We’re also going to wrap those in a paragraph tag so that we’re able to handle those links differently than our sub-navigation links. You’ll also notice that I’ve left the “Home” link out of the list and assigned the class “first” to it, that’s because there will be no sub-links under home. The same goes for “Contact” but there will be nothing underneath that link so it’s OK to leave it in the list.
<div class="slider">
<p class="first"><a href="index.php">Home</a></p>
<ul>
<li><a href="about.php">About</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>Now let’s go ahead and add in our sub-navigation links, and we’ll wrap those in a div tag so that we can add different behaviors to them.
<div class="slider">
<p class="first"><a href="index.php">Home</a></p>
<ul>
<li><a href="about.php">About</a>
<div>
<a href="philosophy.php">Philosophy</a>
<a href="vision.php">Vision</a>
<a href="history.php">History</a>
</div>
</li>
<li><a href="services.php">Services</a>
<div>
<a href="branding.php">Branding</a>
<a href="marketing.php">Marketing</a>
<a href="identity.php">Identity</a>
</div>
</li>
<li><a href="portfolio.php">Portfolio</a>
<div>
<a href="print.php">Print</a>
<a href="web.php">Web Design</a>
<a href="video.php">Video</a>
</div>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>Now that our list is set and our links are created, go ahead and save it as “navigation.html”. Once you’ve got that saved we can open a CSS document and start adding the behaviors to our navigation. You’ll notice that I wrapped the whole navigation system in a div with the class “slider”. The first thing I address in my CSS document is the unordered list, and I strip it of all margins and list-style. My code looks as follows.
.slider ul {
margin: 0;
padding: 0;
list-style:none;
}From there I set some basic style attributes for the links. You’ll notice that I chose a slightly muted gray color for my links. The reason I did this over black is because I find that black text on a white background is too hard of a contrast and can put a strain on the viewer’s eyes. By slightly muting it to a darker gray color, it makes the page softer and easier to view. We can also apply these changes to the “first” class so that our home link stays consistent with the rest of the links.
.slider ul a {
text-decoration:none;
color:#737373;
}
.slider ul a:hover {
color:#C24E07;
}
.first {
margin:10px 0 0 10px;
}
.first a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#737373;
}
.first a:hover {
color:#C24E07;
}Now that the links have some basic style it’s time to develop the catalyst of our sliding effect as well as shape our list. To achieve a smooth sliding effect we’re going to have to apply the transition effect in CSS to our list. It should be noted that at this point IE does not support the transition effect, so the following code will only work on Firefox, Chrome, Safari and Opera. In IE and older versions of browsers that didn’t yet support the effect, the navigation will still work, but it will jump to position and lack the smooth sliding motion.
.slider ul li {
overflow: hidden;
width:80px;
height: 30px;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}Height specifies that we want our smooth-sliding transition to move vertically, while the duration of the effect is set to .3 seconds and we want it to accelerate in to the effect before slowing down as it reaches the desired height.
Once the transition effect is set, we need to style our main links and sub-links. I styled mine as follows.
.slider ul li p {
display:block;
margin: 0;
padding:10px;
width:80px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
}
.slider ul li div {
display:none;
overflow: auto;
margin:0 0 0 20px;
}All we have left to do at this point is add a hover effect to our unordered list and our div tag and we’re set. First up we’ll look at our sub-navigation and define its size, so that when we hover over the parent link the sub-links will be displayed.
.slider ul li:hover {
width: 80px;
height:80px;
}Lastly we’ll tell it to display our sub-links and define their font size to make them a little smaller than the parent links.
.slider:hover ul li:hover div {
display:block;
font-size:12px;
}Now that our navigation is set we will be able to move on to our page layout and continue creating a clean, polished website using HTML5 and CSS3. Be sure to check back next week for part two of “Designing a Clean Website”, when we will begin developing the homepage and utilizing the PHP include as well as some new elements in CSS3 like rounded corners, gradients, and drop shadowing.
