projects

#projectcapture #capturingeloise

#projectcapture is about capturing the personalities of my children in pictures. Though we have four children at this point, I’m always amazed at how each child’s personality is different. Eloise seems to be more determined than our other children. She’s advanced in everything she does. She’s attached to mommy and daddy (mostly mommy) and has such a sweet face that charms all who look at her.

CapturingEloise-2

capturingeloise - 5

capturingeloise - 6

And here are a few more:

#projectcapture #capturinglucas

#projectcapture is about capturing the personalities of my children in pictures. #capturinglucas took the most thought. Lucas expresses himself more in his mind than in his actions. Lucas is extremely thoughtful of his siblings – especially his baby sister. He gives incredible thought to everything he says. He is my analyzer. You can almost see the wheels churning in his head. Give him a maze puzzle and he’s in heaven.

CapturingLucas

CapturingLucas-9

CapturingLucas-5

And here are a few more:

Sound of Life Sliders

Using eye-catching and informative graphics with excellent content is key to any good web page design – especially for a nonprofit relying on donations.

This was exactly the goal of my latest project that I had the privilege of being a part of. The project was initiated by the Sound of Life to aid their Fall “Life-a-thon”. During these 3 days, listeners to the radio station and viewers of the website were encouraged to become monthly supporters or give a one-time gift.

Graphic Designer, Jeralyn Tiernan, created an excellent design concept for me to work with.

My goal in the project was to convert her design into a functioning webpage that could be updated as the donations came in. The sliders needed to “slide” automatically and the dollar amounts and percentages needed to also be constantly updated.

[expand title=”Click here to see the more technical elements (HTML, CSS, PHP and WordPress integration.)”]

Below is the HTML and PHP. I put this in a separate php file and included it on the page that I wanted it to show on.

      <div class="lifeathon-container">
        <div class="lifeathon-header">
        </div>

          <div class="lifeathon-contact-bar">
            <ul>
              <li class="left">To Give By Phone 800-724-8518</li>

              <li class="right">2013 Fall <strong>LIFE</strong>A<strong>THON</strong></li>
            </ul>
            <div class="clear"></div>
          </div>

        <div class="lifeathon-content-container">
          <div class="lifeathon-content">
            <div class="clickorcall"><a href="https://interland3.donorperfect.net/weblink/weblink.aspx?name=soundoflife&id=1"><img  src="lifeathon-clicktogive.png"></a></div>
            


            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  New Partners for Life — <font color="#b51c21"></font>
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
            	<strong>Our Goal:</strong><br>
				100 NEW PFL's<br>at 30+ a month. <div class="goal-amount">$</div>
            </div><br>
            

            <div class="clear"></div>

			<div class="clickorcall"><img src="lifeathon-orcall.png"></div>

            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  Single Gifts Needed
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
              <strong>Our Goal:</strong><br>
              <div class="goal-amount">$</div>
            </div>
            <div class="clear"></div>
          </div>

          <div class="lifeathon-grand-total">
            Grand Total Received/Pledged: $
          </div>

          <div class="lifeathon-footer">
            <img class="needamiracle" src="lifeathon-needamiracle.png">
            <p class="footertext">A BIG thank you to all of our partners. Our mission is “to connect people with the positive message of Jesus Christ”. You’re helping to bring <strong><em>Real Life</em></strong> and <strong><em>Real Change</em></strong> by giving to the Sound of Life! <strong><em>We can’t do it without you!</em></strong></p>
			<img class="realliferealchange" src="lifeathon-realliferealchange.png">
          </div>
        </div>
      </div>
  <div class="clear"></div>

And here is the CSS for the design.

/* Fundraising Thermometer */
/* http://www.suenovotny.com/blog/2011/03/dynamic-thermometer-with-css-and-php.php for source code */

.thermometer {
	background-color: #fff;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 34px;
  }
.mercury {
	position: relative;
	background-color: #075295; 
	height:100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px; 
    max-width: 100%; 
  }


/* End Fundraising Thermometer */

/* Lifeathon Landing Page */

span.collapseomatic {
	font-size: 1.5em;
	color: black;
	position: relative;
	top: 2px;
	font-family: "Rokkitt";
	}

.lifeathon-container {
	padding-right: 15px;
	}

.lifeathon-header {
	padding-right: 0px;
	background: url("lifeathon-header.jpg") no-repeat;
	height: 175px;
	display: block;
	overflow: hidden;
	}

.lifeathon-contact-bar {
	background-color: #035295;
	color: #fff;
	text-transform: uppercase;
	padding: 5px 14px 4px 14px;
	height: 25px;
	font-size: 1.2em;
	font-weight: 100;
	letter-spacing: 0.3em;
	}

.lifeathon-contact-bar ul {
	list-style: none;
	margin-top: 2px;
	}

.lifeathon-contact-bar li {
	margin-left: 0px;
	}

.lifeathon-contact-bar li.left {
	float: left;
	}

.lifeathon-contact-bar li.right {
	float: right;
	}


.lifeathon-content-container {
	min-height: 450px;
	background: #ddeeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ddeeff 0%, #8da8bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddeeff), color-stop(100%,#8da8bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ddeeff 0%,#8da8bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddeeff', endColorstr='#8da8bf',GradientType=0 ); /* IE6-9 */
	}


.lifeathon-content {
	padding: 10px;
	}

.clickorcall {
	float: left;
	padding: 20px 0px 20px 30px;
	width: 175px;
	}

ul.lifeathon-thermometers {
	list-style: none;
	float: left;
	margin-right: 30px;
	margin-top: 36px;
	}

ul.lifeathon-thermometers li {
	width: 450px;
	}

ul.lifeathon-thermometers li.text {
	background-color: #fff;
	margin-bottom: 5px;
	font-size: 1.5em;
	font-weight: 700;
	padding: 5px 0 5px 0;
	}

ul.lifeathon-thermometers li.text .words {
	padding: 2px 0px 0px 8px;
	color: black;
	}

ul.lifeathon-thermometers li.sofar {
	text-align: right;
	color: #b51c21;
	font-size: 1.2em;
	font-weight: 700;
	}

.lifeathon-our-goal {
	color: #b51c21;
	font-size: 1.2em;
	padding: 30px 20px 0 0;
	}

.lifeathon-our-goal .goal-amount {
	color: #0e3a5d;
	font-size: 1.3em;
	font-weight: 700;
	}

.lifeathon-grand-total {
	background-color: #b51c21;
	color: #fff;
	text-align: center;
	font-style: italic;
	font-size: 1.5em;
	font-weight: 100;
	padding: 15px 0px 15px 0px;
	margin: 0 0 10px 0;
	}

.lifeathon-footer {
	height: 100px;
	}

.lifeathon-footer img.needamiracle {
	padding: 5px 0 0 20px;
	float: left;
	width: 160px;
	}

.lifeathon-footer p.footertext {
	float: left;
	width: 505px;
	padding: 5px 20px 0 20px;
	text-align: justify;
	font-size: 1.2em;
	color: #0e3a5d;
	}

.lifeathon-footer img.realliferealchange {
	padding: 17px 0 0 0;
	width: 165px;
	}	

/* End Lifeathon Landing Page */

Something that I did not show here is the integration with the WordPress backend. I was able to integrate it so that an administrator can login to the WordPress backend and update the slider numbers. Below is the actual PHP showing the defined parameters according to my edits to the theme options page.


And here’s a screenshot of the theme options page with my additions. I simply added a tab to the existing Inkthemes Theme Options page.

Lifeathon Theme Options

[/expand]

Sound of Life Sliders

Mulch Calculator using jQuery

Mulch CalculatorI’ve been toying around with learning jQuery, lately. I went out and bought a book and started going through the exercises. jQuery is really a sub library of JavaScript and it’s a really popular way to add cool enhancements to a website.

According to Wikipedia:

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
http://en.wikipedia.org/wiki/JQuery

As with any language on the web (and spoken languages, too), you can do some cool stuff even without being completely fluent in it. Thought I haven’t been using jQuery very long, I’ve already completed two projects with it.

My latest project was to build a mulch calculator that would help the user to know how many yards of mulch they will need to fill a certain spot. The user needs to know 3 things:

  1. Length in Feet
  2. Width in Feet
  3. Thickness in Inches

Here’s the formula for calculating what you need:
(Length * Width * (Thickness / 12)) / 27

You’ll notice that there is a semi-complex order of operations going on here

  • First we have to convert the inches to be on the same playing field as the feet by dividing by 12.
  • Then we have multiply length, width and our converted thickness together.
  • And lastly, all of that is divided by 27.

After much trial error, here is the JSFiddle.

The actual calculator can be found here: www.adamslandscapingandsupply.com/calculators

Adams – Social Media

Adams Fairacre Farms’ use of social media was minimal when I arrived on board. I was and am tasked with engaging with Adams customers on various social media platforms. My exciting photography and engaging designs, combined with interesting text, elicits engagement.

Facebook:

  • 10% average monthly growth rate each month since taking over
  • 2-4 engaging posts a week
  • Respond to positive and negative feedback
  • Answer customer questions
  • Link to relevant, engaging articles
  • Post photos from Adams events
  • Run promotional drawings and campaigns using self-created Facebook Apps. Use cross-platforming on other social networks to engage maximum of customer base.
  • facebook.com/adamsfairacrefarms

Twitter:

  • 15% average monthly growth rate of followers since taking over
  • Live tweeting during Adams special events
  • Share and Retweet beneficial information to our followers
  • Answer customer questions
  • Run promotional drawings and campaigns using Retweeting and Mentioning. Use cross-platforming on other social networks to engage maximum of customer base.
  • @AdamsFarms

Instagram:

  • Recently created
  • Engaging photos of Adams Events
  • Used in combination with Facebook and Twitter
  • @adamsfairacrefarms

Adams Fairacre Farms – Store

I successfully moved the Adams online store, which sells fruit & gift baskets as well as gift cards, from an inferior platform to the super integrated and feature-rich Ecwid shopping cart. In addition to the integration, I also photographed all the product images.

In consideration for this store, not only did it need a significant aesthetic improvement, but we also needed a solution that would be scalable to include more departments as managers become ready.

Platform: Ecwid & WordPress
Website Address: www.adamsfarms.com/store

Features:

  • Complete integration with existing site
  • Completely customized CSS to match existing website
  • Custom delivery zones
  • Admin & Customer receipts for fulfillment of purchase
  • Complete integration with existing payment gateway
  • Scalable
  • Low Cost
  • Allows customers to share purchases on Facebook, Twitter & Pinterest
  • Mobile Store
  • Facebook Store

adamsfarms.com

Though I did not do the original design, I am responsible and entrusted with the development of new features and improvements of the site. Brand consistency is of top priority and the development of this site.

Platform: WordPress
Website Address: www.adamsfarms.com

Original Content:

  • Adams Blogs: 1, 2, 3, 4

Development:

  • WordPress
  • CSS
  • Blog, News, and Events Content
  • Photography
  • Social Media

Photography:

Personally Developed/Designed:

Designing for Myself

A friend of mine recently started his own business. He was in the midst of designing his business cards, so I quickly mocked some design options up for him. (Not sure if he wanted my help or not…but he got it…☺ ) I had such a good time making up the designs that it inspired me to come up with some business card designs for my freelance work.

I already have a logo that I made some time back, so it was really just a matter of using that design to make some business cards. I’m pretty happy with the result.

An interesting dilemma came up as I was designing them. Should I focus more on design, or on usefulness? I suppose at some level, this dilemma comes up for all designers. Everyone wants to create a sense of awe when someone looks at your design. In fact, deep down, you’re hoping that someone will give you a job just by looking at your business cards, or single piece of work. But if a user can’t figure out how to contact you later, they might just give up.

The problem I encountered was deciding what information to put on the card. Will someone be upset with me if I don’t put my phone number on there? It’s not that I mind giving out my phone number – but it just wasn’t fitting in the design. What if the font size on a non-crucial element is too small? Will people be turned off and chuck the card in the bin?

In the end, the design trumped. I realize that most designs for clients require a bit more pragmatism when it comes to information, but if I can’t push the envelope for my website and marketing materials, then I don’t think I could be very happy with myself. And since I’m the client in this case…I aim to please.

The focus is on the most important aspect of the card – my website address. When someone references my business card, I want him or her to go to my site. That’s where they can get more information. I think about the way that I use business cards. I take a quick look, put it in my pocket, stick it in a drawer, and eventually throw it away. If I do see it again, I use it to look up information about the contact…on the web. Rarely, if ever, do I keep a card to reference someone’s phone number.

Anyway, feel free to give me your thoughts.