The Swell Shell: My First One-Pager
November 9, 2013 Case Studies, CSS, Development, jQuery, WordPress Social Share
A good friend of mine asked if I wanted to work with him on an upcoming project. I agreed and that project became Noetyx, but before we started work on that site, we worked together on The Swell Shell.
The Swell Shell is a coastal home accents company. With a store on Etsy, they sell jewelry and different pieces using shells and other items from the seaside. Living in Florida, the shore is not very far away. The owner of The Swell Sheel had a large amount of shells but needed a website to showcase her work. In her own words:
The Swell Shell is a coastal home accents company serving clients worldwide. Our products include (and are not limited to) bottles, frames, toothpick holders, pillows, candle holders, vases, signs and various other products. All have been designed and developed from natural Florida shells that are hand picked.
To prepare for Noetyx, which the two of us had planned to be a horizontal one-pager, we decided to build a simple vertical one-pager for The Swell Shell. After receiving the PSD, I started work on the website slice.
After reading a bit online about one-pagers, I found out that it wasn’t too complicated and just needed to use anchor links (a href=”#home”) with a jQuery animation. I used Ariel Flesler’s scrollTo script for the scrolling down functionality.
$('.nav a, .footer .left-side a, a.cta, .nav a.logo').click(function()
{
$.scrollTo(this.hash, 900, {offset: -220});
retun false;
});
The header area with the menu and logo takes up the top quarter of the screen so I added an offset of 220 pixels. Speaking of the header area, I wanted this area to stick to the top when the user started scrolling. This was done by adding a class with a fixed position, which I called “f-nav” for fixed navigation.
.f-nav {left: 0; position: fixed; top: 0; width: 100%;}
The jQuery code for adding or removing the class is contained within the scroll function. Each time the user scrolls, the script checks to see if the website is under a certain number of pixels from the top or over. On Swell Shell, that certain number is 45 pixels since the header area doesn’t touch the top initially.
$(window).scroll(function()
{
if($(this).scrollTop() > 45)
{
$('.nav-container').addClass("f-nav");
}
else
{
$('.nav-container').removeClass("f-nav");
}
});
Another area that needed attention was the introduction content. I used sandbags, or spacers, to add a bit of extra space to the left. This was done using a span with a .space-XX class. Five of the six lines had a sandbag which gave the staircase effect.
.home-box .space-10 {padding-right: 15px;}
.home-box .space-20 {padding-right: 25px;}
.home-box .space-30 {padding-right: 35px;}
.home-box .space-40 {padding-right: 45px;}
.home-box .space-50 {padding-right: 55px;}
The Swell Shell uses Etsy which is an online store that sells products from a homemade community. The last hurdle was pulling in products for the website via an RSS feed from Etsy. The RSS feed featured a product title, price, description, Etsy link and photo. I then added each product to a list item and printed them out.
The Swell Shell was launched in July 2012. The full design can be viewed below.
You may visit The Swell Shell by clicking here.