Work

“God himself will milk the cows through him whose vocation that is.” – Martin Luther

Ecwid Billing Check Button Default to Off for WordPress Tutorial

How can I change to default behavior of the “My billing address is the same as shipping” check box to off?

I’ve been using Ecwid as a my shopping cart for several websites and clients. It’s such a great shipping cart that’s fully integrated with basically the whole internet. I love the flexibility of it. There are a few issues that I’ve had a problem with, however. They haven’t been major problems, but annoying just the same. One of those problems has been that the billing box is checked automatically by default.

For people who might want to sell gift items for delivery, it is important to accurately collect both the shipping and billing information. The problem is that the “My billing address is the same as shipping” checkbox is checked automatically and the vast majority of people checking out, for whatever reason, do not uncheck the box to allow for a different billing address. Perhaps they’re just not seeing it, or perhaps it’s just a bad design/workflow. Needless to say, when a user fails to uncheck this box, it can cause extra time confirming with the buyer the correct information rather than just fulfilling the order. So, what I needed to do was make it so that the shipping information was not automatically passed through to the billing address unless the user checked the box. I needed the billing information to be blank, as illustrated below.

Ecwid Default Off

Ecwid Billing Button Default Off

 

Ecwid Default On

Checking the box will auto fill the content from the shipping address.

 

So, here’s the raw code for how to turn this button off by default. You’re going to want to put this code just after the Ecwid implementation code on your site. (If you have jQuery already enqueued on your site, you won’t need the 1st line.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>if (typeof(Ecwid) == 'object') {
  Ecwid.OnPageLoaded.add(function(page) {
    if ('CHECKOUT_PAYMENT_DETAILS' == page.type) {
$('input[type=checkbox]').prop('checked', false);
$("input[type=text]").prop('disabled', false);
$("input[type=tel]").prop('disabled', false);
$("select[name='country-list']").prop("disabled", false);
$("select[name='state-list']").prop("disabled", false);
$("select[name='state-suggest']").prop("disabled", false);
$('input[type=text]').val('');
$('input[type=tel]').val('');
$("select[name='country-list']").val('');
$("select[name='state-list']").val('');
$("select[name='state-suggest']").val('');
        }
  });
}
</script>

Unfortunately, this code will not work for you if you’re using WordPress. So I’ve packed up a file with a full explanation of how to implement this code on your WordPress site. Just click the “Download the Code!” button and you’ll receive an instant download. Please consider paying for the product if you think it will help your store. Many thanks and much appreciated!

Included in this file:

  • WordPress friendly code
  • Full explanation of where to implement this code
  • Screenshots of the code implementation
  • *Bonus: My explanation on how to clean up Ecwid code impentations

Download the Code!

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

Need some help

As I mentioned in my previous post, I’ve started a business. Jalopyhead Enterprises was born on June 11, 2013! Yay! I’m quite excited about it and excited about what’s to come!

To make a long story short, Jalopyhead Enterprises will function as the parent company of a couple or more companies. Therefore, though official paperwork will go through the parent company, the name(s) actually before the public will be different.

My first venture will be in Web Consulting. And here’s where I need your help. What name should I operate under?

Let me give a few details. Here’s what I hope to do:

  • Build Websites
  • Consult / Setup
  • Social Media
  • Online Advertising
  • Online Branding

Here are some other considerations:

  • I want to use “jalopyhead.com”. It’s my brand. Not negotiable.
  • “Jalopyhead” doesn’t mean anything.
  • I need a tagline that is descriptive.

With all of that, here are some possibilities. Let me know if you like any of them:

  • jalopyhead.com – “Make your presence known”
  • jalopyhead.com – “Be Seen Online”
  • jalopyhead.com – “Online Branding Solutions”
  • jalopyhead.com – “Improving your Online Visibility”
  • jalopyhead.com – “Let the World See You”
  • jalopyhead.com – “Web Design, Social Media & Online Marketing”

Thanks in advance. Looking forward to hearing from you.

Oh, and if you’re interested in any my services, be sure to give me a holler.

Starting a Business

Not long after arriving back to the States about 2 years ago (Wow, that was quick), I quickly got a freelance job from my first official client. (Read about it here.) It was great. I was excited to be going into business for myself. Since then, I’ve had several more clients. They’ve been relatively small sites, done for friends and family, but they’ve definitely helped me hone in my my skills.

But my dream for a long time has been to start my own business. It hasn’t necessarily been in web consulting, but I’ve wanted to start my own business. It’s such a huge undertaking. Even as I write these words, I’m overwhelmed with feelings doubt and excitement and fear and happiness all within milliseconds of each other.

So, after my most recent adventure applying for job fell through, I decided that I was just gonna go for it. I went down to the County Clerk’s office and registered my business name. It’s official, Jalopyhead Enterprises no longer exists in my head. It’s now a reality.

I’ve got some things in the works to help me launch it, including some airtime on a local radio station as well as getting a new logo and website that are already in the works.

Exciting times!

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:

Responsive Web Design 3

This is my third installment of learning Responsive Web Design. If you’re not sure what Responsive Web Design is, be sure to see the first two posts: Responsive Web Design & Responsive Web Design 2.

For my third project of Responsive Web Design, I decided to tackle my portfolio site, jalopyhead.com. This project took a bit longer to complete for a couple of reasons: 1.) It’s a “full-fledged” website with several different templates and 2.) I didn’t write the theme, so half of my time was spent figuring out how each element of the site functioned and what the corresponding CSS did.

For the sake of simplicity, I only set one media query. I set it at 400px. Most mobile phones fall under 400px in the portrait view.

Almost all my edits were in the css file. However, there was one change that I needed to make in the template files. In the template files, the sidebar, which contains the menu, was underneath the “content” element. For the full-size view, this was fine. However, since the mobile view stacks the elements on top of each other, I had to move the sidebar above the “content”. The full size view was unaffected by the change, but the mobile view places the sidebar above the content, which solved the problem.

All in all it is pretty simple as long as you can identify the elements and find the corresponding css.

Check it out. Resize your window and see the magic! If you view it on a mobile device, you’ll obviously see the optimized view.

Tools: Firebug (in firefox), BBEdit, Filezilla
Tested on: Droid Razr, iPod Touch

(FYI, this doesn’t work in IE. This isn’t really a concern, though, since mobile devices do not use IE.)

Designing for Myself

Cross posted from jalopyhead.com/jalopyblog

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.

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.

Responsive WebDesign 2

For my next application of responsive design, I wanted to take an existing site design that is using WordPress as the CMS and convert it to be responsive.

I designed a site a couple of months ago to market an MLM business. For the full rundown on that site, please see my blog post, Confession.

Since I designed the site from scratch, it was pretty easy to convert it.

So, what’s happening? As you resize the window on the desktop, a couple of things automatically resize and/or move so that it will look more natural in that size.

  • Movement (triggered by resizing window to 960px or smaller)
    • Left sidebar, “Testimony”, moves above the content section
    • Right Sidebar, “Form, moves below the content section
  • Resizing (triggered by resizing window to 600px or smaller)
    • The video element resizes from 519px wide to 280px wide
    • Copyright element’s padding resizes from 176px to 10px

Screenshots:

For the full css coding, take a look at the style.css attachment below.

Along the way, I also learned something in css that has been bothering me for a while now. I’ve recently become a fan of the “float” attribute. It allows block elements to align left or right of each other without having to use tables or other, more absolute, positioning methods. But my problem was when I wanted to float an element but then stop floating so that the next element would line up underneath the above floating items. After some research, I found this tag to be the problem solver: “clear: both;“. Simply place that tag and attribute in the element that should line up underneath the floating element(s) and it does the trick.

Attachment: style.css

|

Responsive Web Design 2

For my next application of responsive design, I wanted to take an existing site design that is using WordPress as the CMS and convert it to be responsive.

I designed a site a couple of months ago to market an MLM business. For the full rundown on that site, please see my blog post, Confession.

Since I designed the site from scratch, it was pretty easy to convert it.

So, what’s happening? As you resize the window on the desktop, a couple of things automatically resize and/or move so that it will look more natural in that size.

  • Movement (triggered by resizing window to 960px or smaller)
    • Left sidebar, “Testimony”, moves above the content section
    • Right Sidebar, “Form, moves below the content section
  • Resizing (triggered by resizing window to 600px or smaller)
    • The video element resizes from 519px wide to 280px wide
    • Copyright element’s padding resizes from 176px to 10px

Screenshots:

For the full css coding, take a look at the style.css attachment below.

Along the way, I also learned something in css that has been bothering me for a while now. I’ve recently become a fan of the “float” attribute. It allows block elements to align left or right of each other without having to use tables or other, more absolute, positioning methods. But my problem was when I wanted to float an element but then stop floating so that the next element would line up underneath the above floating items. After some research, I found this tag to be the problem solver: “clear: both;“. Simply place that tag and attribute in the element that should line up underneath the floating element(s) and it does the trick.

Attachment: style.css

|

Responsive Web Design

If you’re in the web-designing world at all, you’ll know that “Responsive Design” is all the rage right now, as well it should be. You can have a site that is optimized for a desktop browser, a tablet device, as well as a mobile phone – all without replicating work and using only one css file.

As I found out in my initial attempt at creating a mobile site, the work got super redundant and out of control.

Today my goal was to make a responsive design. And I achieved the goal with the help of this online tutorial: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Basically, the trick is to use CSS3 Media Queries. It’s basically telling a device what it should do based on the size of the window.

I won’t go into any further detail because the above-mentioned tutorial is pretty good at that. But I will share my demo work. It’s not meant to be intricate, just a framework to build off of.

Did you spot the changes?

Screenshots:

Desktop View

Mobile Phone View

Responsive Web Design

If you’re in the web-designing world at all, you’ll know that “Responsive Design” is all the rage right now, as well it should be. You can have a site that is optimized for a desktop browser, a tablet device, as well as a mobile phone – all without replicating work and using only one css file.

As I found out in my initial attempt at creating a mobile site, the work got super redundant and out of control.

Today my goal was to make a responsive design. And I achieved the goal with the help of this online tutorial: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Basically, the trick is to use CSS3 Media Queries. It’s basically telling a device what it should do based on the size of the window.

I won’t go into any further detail because the above-mentioned tutorial is pretty good at that. But I will share my demo work. It’s not meant to be intricate, just a framework to build off of.

Did you spot the changes?

Screenshots:

Desktop View

Mobile Phone View

I’m a Geek

Well, I’m officially a geek. I attended my first ever web developer’s conference…and I liked it. WordCamp NYC is a conference that is held for people using the popular and open source website CMS platform WordPress. The conference topics ranged from “A Beginner’s Guide to WordPress” to “Object Oriented Programming for Plugin Development”. I fell somewhere in between the two in terms of level of expertise. Having taught myself everything I know about web development, it’s sometimes hard to know where I fit in to the web development community. I’ve determined that I know enough about this world to know how to break stuff at a high level.

Some of you are saying, “Dude, we’ve know about your geekdom for a long time.” My wife has been telling me that I’m a geek for years. I think the turning point for her was when I installed Ubuntu (Linux) on our Desktop computer and then made it look like OSX (Mac’s Operating System). What can I say? Windows XP just wasn’t doing it for me anymore.

I’ve rejected her claims, though, because I associate “geek” with the 2nd definition – “peculiar” or “dislikable”. After all, I’m a cool cat. I play basketball. I rarely play computer games…and when I do, it’s a sports game. I don’t know anything about Star Trek and I’ve only seen the Star Wars movies once. And I’ve NEVER dressed up as a Space Cowboy. (I admit that my enjoyment of Firefly is certainly a hit against my record, though.)

So, with that qualified, I officially accept that I’m a geek.

But if you ever call me one, I’ll probably punch you in the face… J-Dogg don’t put up wit dat.

geek
noun. slang.

  1. a computer expert or enthusiast (a term of pride as self reference, but often considered offensive when used by outsiders.)
  2. a  peculiar or otherwise dislikable person, especially one who is perceived to be overly intellectual.
  3. a carnival performer who performs sensationally morbid or disgusting acts, as biting off the head of a live chicken.

Source: Dictionary.com

I’m a Geek

Well, I’m officially a geek. I attended my first ever web developer’s conference…and I liked it. WordCamp NYC is a conference that is held for people using the popular and open source website CMS platform WordPress. The conference topics ranged from “A Beginner’s Guide to WordPress” to “Object Oriented Programming for Plugin Development”. I enjoyed being a part of the more advanced level seminars.

Some of you are saying, “Dude, we’ve know about your geekdom for a long time.” My wife has been telling me that I’m a geek for years. I think the turning point for her was when I installed Ubuntu (Linux) on our Desktop computer and then made it look like OSX (Mac’s Operating System). What can I say? Windows XP just wasn’t doing it for me anymore.

I’ve rejected her claims, though, because I associate “geek” with the 2nd definition – “peculiar” or “dislikable”. After all, I’m a cool cat. I play basketball. I rarely play computer games…and when I do, it’s a sports game. I don’t know anything about Star Trek and I’ve only seen the Star Wars movies once. And I’ve NEVER dressed up as a Space Cowboy. (I admit that my enjoyment of Firefly is certainly a hit against my record, though.)

So, with that qualified, I officially accept that I’m a geek.

But if you ever call me one, I’ll probably punch you in the face… J-Dogg don’t put up wit dat.

geek
noun. slang.

  1. a computer expert or enthusiast (a term of pride as self reference, but often considered offensive when used by outsiders.)
  2. a  peculiar or otherwise dislikable person, especially one who is perceived to be overly intellectual.
  3. a carnival performer who performs sensationally morbid or disgusting acts, as biting off the head of a live chicken.

Source: Dictionary.com

Browser and OS Detector using PHP and Javascript

I recently ran into a customer who was having trouble accessing one the websites that I run. After checking the site and not being able to replicate any of the issues that she mentioned, I asked her to give me some details about her os and browser. Her reply was, “Windows and Internet Explorer”. That’s not really helpful is it? Which Windows are we talking about? Which version on IE?

So, I could email her back and ask her for specifics. But if she’s an average user, she’s probably doesn’t want to spend the time to figure out how to do that. After all, she’s already frustrated that she can’t access the site properly. So, I decided I would look for a php/javascript script that she could access from her computer. I needed her to be able to easily run it and then copy and paste the results to me in an email.

I came across a script that would work for me. However, the developers of the site are obviously just that…developers. They don’t mess around with design or give very nice directions on how to use this script, which is fine, but not for the average developer Joe. Maybe it’s an indictment on my abilities, but I struggled with it…alot. So, I thought I would help out by making it a bit more plug and play.

Output of Script

Output of Script

All credit is due to the developers who made the script. I have done nothing to alter the function of the code. I did, however, add some html for the sake of formatting and running the script in a “strict” environment. Credit is given within the script document.

Step 1: Download Zip File
Step 2: Unzip and upload contents of zip to a folder on your server (I named my folder “support”)
Step 3: Navigate to “your_computer_info.php” file (e.g. http://your-domain.com/support/your_computer_info.php)

That’s it. You should now see the specs of your OS and Browser. Your customer can copy and paste this in an email to you so you know how to troubleshoot your website.

See the demo here.

Original Script Source: techpatterns.com

Browser and OS Detector using PHP and Javascript

I recently ran into a customer who was having trouble accessing one the websites that I run. After checking the site and not being able to replicate any of the issues that she mentioned, I asked her to give me some details about her os and browser. Her reply was, “Windows and Internet Explorer”. That’s not really helpful is it? Which Windows are we talking about? Which version on IE?

So, I could email her back and ask her for specifics. But if she’s an average user, she’s probably doesn’t want to spend the time to figure out how to do that. After all, she’s already frustrated that she can’t access the site properly. So, I decided I would look for a php/javascript script that she could access from her computer. I needed her to be able to easily run it and then copy and paste the results to me in an email.

I came across a script that would work for me. However, the developers of the site are obviously just that…developers. They don’t mess around with design or give very nice directions on how to use this script, which is fine, but not for the average developer Joe. Maybe it’s an indictment on my abilities, but I struggled with it…alot. So, I thought I would help out by making it a bit more plug and play.

Output of Script

Output of Script

All credit is due to the developers who made the script. I have done nothing to alter the function of the code. I did, however, add some html for the sake of formatting and running the script in a “strict” environment. Credit is given within the script document.

Step 1: Download Zip File
Step 2: Unzip and upload contents of zip to a folder on your server (I named my folder “support”)
Step 3: Navigate to “your_computer_info.php” file (e.g. http://your-domain.com/support/your_computer_info.php)

That’s it. You should now see the specs of your OS and Browser. Your customer can copy and paste this in an email to you so you know how to troubleshoot your website.

See the demo here.

Original Script Source: techpatterns.com

Freelance Project

I have recently finished my first freelance project since being back in the States. Working with Diana Greene was a lot of fun as we created her site to make it want she wanted. My good friends in China hooked me up with my first contact.

  • Fully Featured Online Web Store
  • Picture Slider
  • Google Analytics
  • Blog-by-email Capability
  • User must enter email to receive free download

To see it on my portfolio site, take a look here – www.jalopyhead.com
To see the site live, click here – www.dianagreeneministries.com

Parallels and Win7

So, today I downloaded Parallels and Windows 7 on my Mac. The reason I decided to pull the trigger and and get Windows installed on my mac is because I recenlty made a website that featured HTML5 video. www.adamsfarms.com/pat

HTML5 is a very cool addition to browsers. HTML5-enabled browsers are able to play videos in formats other than flash. Browser wars will determine which format will win out (hopefully, they will all be able to support multiple formats).

So when someone visits the aforementioned site, the code tells it to play a video in mp4 unless you’re using Firefox. If that is the case, it will play it in ogg. If you’re using IE 6 through 8, though, it will fall back to Flash.

Not having access to a PC I had to go and annoy several PC users in the office so I could see it in IE. The only browser I wasn’t able to test in, though, was IE9, which is only available on Win7. But since IE9 supports HTML5 video, I thought it would be fine.

It wasn’t.

I sent out the company-wide email in faith that it would work. The next day, when I was finally able to see it on IE9, it didn’t work. Thankfully, most people don’t use IE9 yet. (About 90% of the IE users who viewed the site, according to my statcounter, are using something other than IE9.)

So, now that I have Win7, I’ve downloaded IE9 and can now test it. Purchasing Win7 is a pretty hefty price to pay just to get 1 browser to work right. But since IE is still the market share leader (though, the trend continues down), as a web developer, you’ve got to do it.

If you’re still using IE, maybe you switch. 🙂 It’s not that I don’t like Microsoft…I actually do. Win7 is a great operating system and I’m looking forward to Win8. It’s simply because IE bucks against the standards compliant building that makes web development easier.

Diana Greene Ministries.com

This website was special to make because it was my first Freelance website.

Platform: WordPress
Theme: Organic NonProfit
Features:

  • Fully Featured Online Web Store
  • Picture Slider
  • Google Analytics
  • Blog-by-email Capability
  • User must enter email to receive free download

Notes:
I worked very closely with the owner of this site to come up with a beautiful site.. Making this site was a lot of fun as we came up with the best ways to accomplish the owner’s needs.

Site: Diana Greene Ministries (Live Site)

HavingaBabyinChina.com

This was the site that started my WordPress journey.

Platform: WordPress
Theme: Atahualpa (Highly Customized)
Features:

  • Sidebar feed linked to company’s Facebook page
  • Fully featured forum
  • User-friendly category viewing for large lists
  • Google Analytics
  • Mass Mailing Capabilities
  • Neat & Clean

Notes:
This site began as a simple way to get important information out to foreigners looking to have a baby in China. As interest grew, the website because a fully featured and aesthetically pleasing place to get information and connect with others who have similar experiences with having a baby in China.

Site: HavingaBabyinChina.com (Live Site)

The Lighthouse

This website was built for a school to be the central hub of communication in the form of a weekly newsletter.

Platform: WordPress
Theme: News Magazine Theme 640
Features:

  • Accessible to approved members only to protect children’s images online
  • Tri-lingual (English, Korean, and Chinese). Defaults to users’ computer settings
  • Fully featured Photo Gallery
  • Articles displayed in Newsletter fashion by category
  • Upcoming events displayed in sidebar
  • Google Analytics integrated
  • Multi-administrator
  • Integrated mass mailing to website members
  • Changeable advertisements

Notes:
There were many challenges to building this site. This was the first effort to get the school’s newsletter online. Because the school administrators wanted the site to be updated regularly with pictures of school activities involving children, it was a requirement to have it open to only stakeholders of the school. Additionally, in order to streamline the communication, the site was required to have mass emailing capabilities built within. The last requirement was that the site be able to neatly support three languages. All of these features are built in.

Site: The Lighthouse Newsletter (Live Staging Site)

MUNISC

Platform: WordPress
Theme: Twenty-ten (Created “child theme” for permanent modification)
Features:

  • Simple & Clean
  • Running picture gallery in sidebar

Notes:
I was requested to make this website to tackle the information flow for the MUNISC organization. Because there is a large amount of information, the site is made to be simple and accessible depending on the need of the user. It also has a photo gallery to feature the conferences that the organization holds. After meeting the needs of the organization, I was able to hand this off a content manager to update the information.

Site: MUNISC (Live Staging Site)

QDBasketball.com

This site was made for a school running a Youth basketball League.

Platform: WordPress
Theme: Orange Demples (Created “child theme” for permanent modification)
Features:

  • Simple & Clean
  • Integrated with online application and feedback forms
  • Innovative use of WordPress blog system

Notes:
I was the Web Master and content manager for this site as well as the marketing manager for the project. I also created a ZenPhoto website that is connected to this site to share week-to-week pictures of the basketball league. (Click here to learn more about the ZenPhoto site.) The two sites were well received.

Site: QDBasketball.com (Live Staging Site)

QDBasketball Photo Gallery

QDBasketball-Zenphoto

This is a fully featured Photo Gallery companion site to a site that I made for a youth basketball league. (Click here to learn more about the companion site.)

Platform: ZenPhoto
Theme: Stop Design (Created “child theme” for permanent modification)
Features:

  • Scalable as league continues annually
  • Fast photo load times
  • Full size picture downloads
  • Ability to have guest users upload their own photos
  • Individual albums able to be password protected

Notes
Because of the features required and the large amount of photos to be uploaded to the server, I opted to run the photo gallery on it’s own platform. ZenPhoto is a great open-source platform for dealing with a large amount of large sized photos. When uploading to the site, photos will automatically be resized for faster load times. The parents of the children in the basketball league loved being able to see their own children each week online.

Site: QDBasketball.com – ZenPhoto