The friendliest website I have ever worked on

http://hellolindsayjoy.com/ is by far the most interactive, inviting, and easy to use site I have worked on to date. What makes this one stand out? The function of the site is to get people talking with each other. The subjects discussed tend to fall into the categories of family, travel, business, and style with a tone of empowerment and entrepreneurship.

There are 2 parts of this site that stick out to me as a web designer for how fun they were to work on. In specific, they are the logo/ site identity and the user interaction (both the poster and the commenters)

Coming up with a look and feel

I was caught off guard when I started talking to Lindsay about her site for the simple fact she was well prepared and knew what she wanted! I’m so used to people approaching me with an idea along the lines of “My site looks like dried up cat vomit– help!”. Lindsay did her homework and gave me the words “joy, motivation, adventure, inspire, and funny” to work around along with great examples of the visual style she wanted, the general content flow of the site, and she even knew which themes would make a good starting point to boot!

The first part of the job was to come up with a logo we could base the rest of the site around. I have to admit, I was a little nervous about my first set of logo designs as most of my professional work is used for law firms and construction companies which is a totally different look and feel, however she found one in the first batch that fit her!

I honestly can’t figure out how to describe the attitude of the logo. The way I came up with it is similar to how musicians can hear a bunch of music from a genre and then start making music along the same lines without necessarily being able to explain how it worked. Lindsay gave me enough “music” I was able to start making it myself.

After the logo was picked, the rest of the styling naturally fell into place.

Interaction

Not only was this site a different flavor in terms of look and feel but also in how the owner is going to use it. I generally build sites to be friendly to other developers who might need to go in and make changes to the template source and the general page content does not change much from year to year. In this case I designed this site to be as friendly as possible when it comes to making and tagging posts, adding new menu items, or making minor changes to the layout.

The key thing I did differently was I took an existing, well defined theme (Perle) and did as much design work as I could through the built in customizer “appearance > customize” instead of my usual method which is to take a blank framework theme (usually FoundationPress) and build up the site’s structure from scratch.

The ease of use carries over into the posts themselves which are based around a big picture with text over it and then the content beneath. All the user has to do is select a featured image for their post and title it and the theme takes care of the rest (with the help of RevSlider).

In a nutshell, the site is set up so all you have to do is worry about content and conversation with the visitors.

Speaking of visitors, I had never worked on a site designed to have an active comments section so learning about moderator practices has been an adventure. All I have seen outside of well thought out and friendly posts is spam which does not make it through the post approval process. As of when I am writing this, I’m weighing the pros and cons of adding Captcha to the comments section to cut down the spam that is making it to the approve/ disapprove stage. I’m hesitant because Captcha feels like something which makes the user spend unnecessary effort to interact with the site which is bad UX. Option 2 is to try a honeypot (a neat little hidden robot trap) and see if I can keep spammers away by that means.

I suppose this article is quite wordy for something which can be summed up as “Made a cool looking and friendly website for a really nice person” but I’m just wordy like that.

G & P Windows feels clean, functional, and to the point

The photos of their work should do most of the talking while the rest of the page words to fill the reader in on the specifics of how the product works and establish a sense of trust.

From a design perspective, the project was quite straight forward: send over some inital mockups to get us talking, adjust the mockups till everybody is happy then move it all into code.

On the coding side, the project was just a treat– the big sets of images played very will with Foundation and its lovely flex display properties. The SASS is really succinct, coming in at just over 400 lines which can be easily shark down to around 300 if I didn’t enjoy my line breaks so much! You can check that out below.

If you want to see the page in action, just head on over to: https://designerofstuff.com/example-window-landing-page/

  
  
  /*================================================================

Content stylesheet

================================================================*/


/*================================================================

Content Universal Styling

================================================================*/

.box {
  height: 310px;
  width: 210px;
  background-image: url('../images/flip1.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
  border:5px solid #fff;
  margin:0 auto;
}

.overlay {
  background-image:url('../images/flip2.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  height:300px;
  position: absolute;
  width: 100%;
  left: -270px;
  margin-left: 520px;
  bottom: 0;
  transition: left 400ms linear, margin-left 400ms ease-out;
}

.toggleClass{
  left: 0;
  margin-left: 0;
  transition: left 400ms ease-out;
}

.span-darkgray{
  background-color:$gray;
  color:#fff;
}

.span-lightgray{
  background-color:$lightgray;
}


body{
  font-family: 'Abel', sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Anton', sans-serif;
}

.logo-wrap:before{
  content: " ";
  position: absolute;
  z-index: -20;
  top: 0;
  width: 9999rem;
  right: 74%;
  background: #fff;
  height: 100%;
}

.logo-wrap{

}

.header{
  position:relative;
  z-index:100;

  .bbb{
    width:70%;
    margin:0 auto;
    display:block;
  }

  h2{
    font-size:2.0rem;
    color:#fff;
    text-align:right;

    a{
      color:#fff;
      font-size:1.9rem;
      letter-spacing:0rem;
    }
  }
}

.r1-logo{
  position: relative;
  left: 0;
  -moz-animation-name: dropHeader;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 0.3s;
  -webkit-animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 0.3s;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
}

h1{
  font-size:2.5rem;
  text-align:center;
  margin-bottom:0;
}

.span-hero{
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

.hero{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,1a2330+100&0.83+0,0+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0.83) 0%, rgba(26,35,48,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0.83) 0%,rgba(26,35,48,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0.83) 0%,rgba(26,35,48,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4000000', endColorstr='#001a2330',GradientType=1 ); /* IE6-9 */
  color:#fff;


  ul{
    font-size:1.8rem;
    line-height:130%;

    li{
      margin-bottom:10px;
    }
  }
}

.picbar{
  position:relative;

  .pic-qs{
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    width:100%;
    bottom:0;
  }
}

.trust{
  p{
    font-size:2rem;
    text-align:center;
  }

  .trust-list{
    @include justify;
    list-style-type:none;
    
    .tall{
      max-width:120px;
    }

    .wide{
      max-width:200px;
    }
  }
}

.video{
  text-align:center;
  padding: 1rem 0;
}

.gallery{
  padding:1rem 0;
}

.testimonial{

  font-size:1.2rem;

  .test-wrap{
    background-color:$lightgray;
    padding:2rem 1rem;
    border-radius:8px;
    height:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    list-style: none;
    position:relative;
  }

  .test-wrap:after{
content:"";
    position:absolute;
    top:100%;
    left:25px;
    border-width:30px 30px 0 0;
    border-style:solid;
    border-color:$lightgray transparent;
    /* css3 extras */
    -webkit-transform:skewX(-15deg);
       -moz-transform:skewX(-15deg);
        -ms-transform:skewX(-15deg);
         -o-transform:skewX(-15deg);
            transform:skewX(-15deg);
  }
}

/*================================================================

Content Desktop Styling

================================================================*/

@media (min-width:1024px){
  .hero{
    padding-top:3rem;
    padding-bottom:7rem;
  }

  .offset{
    position:relative;
    top:-6rem;
  }

  .gal-pics{

    img{
      width:24.7%;
      margin:0;
      padding:0;
    }
  }

} 


/*================================================================

Content Tablet Styling

================================================================*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

  body{
  
  .picbar{

    .pic-qs{

      h3{
        font-size:1rem;
        padding:.5rem 0;
      }
    }
  }




  .tall{
    width:66%;
    margin:0 auto;
    display:block;
    padding-bottom:1rem;
  }


}

  }

/*================================================================

Content Mobile Styling

================================================================*/

@media (max-width:1023px){

.logo-wrap:before{
  content: " ";
  position: absolute;
  z-index: -20;
  top: 0;
  width: 9999rem;
  right: 60%;
  background: #fff;
  height: 100%;
}

.mobile-call{
padding:.5rem 0;
background-color:$lightgray;

  h2{
    margin-bottom:0;
    letter-spacing:.00rem;

    a{
      color:#000;
    }
  }
}

.headline{
  background-color:#fff;

  h1{
    font-size:1.5rem;
    text-align:left;
  }
}

.span-hero{
  background-image:url('../images/hero-bg-mobile.jpg');
  background-repeat:no-repeat;
  padding-top:15rem;

  .hero{
    background-color:rgba(0,0,0,.5);
    padding:.5rem .25rem;
  }

  .mob-qs{
    padding-left:1rem;

    h2{
      font-size:2rem;
      text-shadow:2px 2px 5px rgba(0,0,0,0.7);
    }

    ul{
      letter-spacing:.05rem;
      line-height:110%;
      font-size:1.2rem;

      li{
        margin-bottom:0px;
      }
    }
  }
} 

.picbar{

  .columns{
    padding:0;
  }

  img{
    width:100%;
  }

  .pic-qs{

    h3{
    font-size:.8rem;
    margin-bottom:0;
  }

  .row{
    margin-right:0;
    margin-left:0;
  }
  }
}

.trust-imgs{

  ul{


    li{
      width:47%;
    }
  }
}

.video{
  .vid1{
    margin-bottom:1rem;
  }
} 

.gal-pics{

    img{
      width:100%;
      margin:0;
      padding:0;
      
    }
  }
}

.testimonial{
  padding-top:1rem;

  .large-4{
margin-bottom:3rem;
  }
}

A remote Canadian hunting lodge up in Ontario

Womanlakelodgecanada.com has been through 3 face lifts since I took over work on the site way back when.

This round’s goal was to more actively use all the awesome pictures and video footage the hunters and fishermen get when they travel up there.

The place this really shines is in the top area of the home page (better known as the hero region or jumbotron to web nerds). We have 4 slides using images and text I selected with the idea of showing off the wonderful memories made heere and the beastly fish dredged up from the depths of the surrounding lakes.

The biggest technical challenge was getting the video footage used on the first slide to not grind the site to a hault while it loads in which was accomplished by fine-tuning the resolution with a tool called FFmpeg which lets you adjust every little detail of the video format… but it’s used via command line so the usability leaves something to be desired…