Web Design Blog | ModernBlue.com

I recently made the switch to Braintree from Paypal to process my credit card payments, and I couldn’t be happier.

I was very impressed with the ease of integration. In about 1 hour, I set up a simple PHP script that allows my clients to pay invoices online. Paypal for the same thing took about 3 hours… to read through their complex documentation, decide which API method I wanted to use, and even a call into Customer Support for a common error you will find across Paypal’s customer support forums. Braintree gave me a PHP class that was ready to go. I only had to define my merchant info and get the values from my form and it was working great.

A really nice feature of their solutions is how they simplify PCI Compliance and eliminate my need to locally handle or store my customers credit card data – without using a hosted page. I was also able to achieve compliance much faster and with less cost.

In stark contrast to other providers I spoke with, Braintree’s approach is honest and straightforward. They don’t hide fees behind teaser rates and everyone I’ve worked with there, from sales to support, has been extremely responsive and knowledgeable.

I am a developer that always likes to keep things simple. Through working closely with Braintree and using their product first hand, I have realized they are the same. I am thus sticking with Braintree for all of my credit card processing needs, and recommend them to all of my clients. It’s nice to find other companies as passionate about their industry as I am about mine.

The demand for websites has never been higher. It seems like the internet boom of the late ninety’s is back, but more stable. People are lining up to have websites built by the masses, and thus design firms are increasingly finding ways to produce websites cheaper and faster. The true purpose of web design is being lost to myths and misrepresented claims. The weight web design once had is being lost to other terms such as SEO. Although there are more, I want to discuss a few myths that cause these problems, and my own experienced-based rebuttals.

Myth 1: As long as I have a lot of traffic, my design doesn’t matter

With the magic word “SEO” becoming the new internet gold rush, companies and individuals are increasingly believing that design doesn’t matter. As long as the herds of consumers are coming to their site, there is no need to worry about design research, color schemes, navigational structure, or usability. Before I am misunderstood, I am not bagging on SEO’s at all. My brother is a well-respected owner of 97thfloor, an SEO firm. Even he has told me that some of his clients would be better off having their website rebuilt or redesigned, to increase website conversion, before starting such a large marketing campaign. Every company, whether a mom and pop shop or Wal-Mart can benefit on a design that is created around conversion and the user experience. With that said, it is often that companies come to me and say “We have put a lot of money toward advertising, we rank high on Google, but we are not seeing the sales or conversion we had hoped for.” My reply, “Your design and user interface scream lack of money, lack of research, lack of care.” Web design isn’t a slipshod process. It isn’t just a matter of “getting something up”. It is much more than that.

Myth 2: Since web design involves programming, any firm can do the work I need.

A smart business would never allow a cousin, friend, acquaintance etc… to make important business decisions with lack of experience. However, people allow these same people to create their companies websites all the time to save a buck or two. How often have I had to redesign a site, a matter of weeks after their first round, because their first designer didn’t create what was needed. In these cases, they loose time (which is money) having to start from scratch and redevelop something new. This time by someone who knows what they are doing. With how important the internet is these days, companies have to pick design firms that are experienced in designs that create customers out of site visitors.

Myth 3: If I tell a web company my budget for design, they will up their price to match it.

This one happens frequently. I ask every potential client that comes to me, “What budget have you set aside for this project?” As I wrote in a previous article, if they don’t have a budget this is usually a red flag for me. This means that 1. They really haven’t sat down and thought how much energy, time and resources they want to put into their project, and 2. The company may hiding it to try and narrow down design firms based on how cheap they are, not by how well they can take their budget and turn it into something fantastic. I like companies to have a budget for two main reasons: 1. It tells me they are organized and serious about their project, which gets me more excited to be a part of it, and 2. I can give them options of what is possible to deliver within that budget. It may make more sense to break a project into phases and work on them as sequentially. So companies, please let us know you are serious by figuring out your budget before you expect design firms to seriously look at your project.

Basically, we design firms need to find new ways to show our clients that we are different then the run-of-the-mill firm, or their neice. We need to show them that our design will increase profits, help to magnify their brand, and improve their business as a whole. If we can somehow put the value back in web design, businesses will be happier having received a design that accentuates their goals… and true designers will be happy taking on projects of value, while being compensated for their time.

Nice looking forms always bring attention. It’s one of those extra miles a web designer doesn’t have to take. But whenever I see nice looking forms on websites I think, “This guy pays attention to details.”

Since the big push for “Web 2.0″ and “Valid” websites, there as been an increase in mirrored text effects, gradients, bevels, colors etc… however, on many of these websites the forms get passed up. Why? You will have to check with the web designer I guess.

Anyways, I took it upon myself this morning to develop a valid, beautiful, css form in under 10 minutes. I took me 12 minutes actually. In fact, it is taking me longer to write this article and link to the form then actually making the form. Anyways, take a look at these forms I whipped up: Form1 | Form2 Â Here is a preview one Form 2:

Form 1 could be used to collect more information then a normal contact form. For example you could ask for their personal details, then shipping info etc… Form 2 is a basic contact form that most sites need.

Feel free to take the code and customize it to fit your needs. Also, you will notice that the forms are pointing to “process.php”. Well, if you want to know what to put in that file to make it work, download it here.

So, hopefully this will help us all to create nice forms. All you need to do is follow my lead. Change the repeating background image in the css properties for <fieldset>, make some color adjustments to other properties, add some extra fields etc…

Happy Forming!

It can be very frustrating when you have a form on your site which has a good and useful purpose, but almost becomes obsolete because of relentless spamming. I had this problem a few months ago with my old site, and was thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective. I decided to turn toward my friend CSS to help me out.

The idea here is setting up a form with a text field and via CSS making it invisible. Then, if a post is sent to a php script handling the request and that text box has information in it, that means a human didn’t fill it out, and the script is simply aborted.

Here is a simple example. You can view the actual page here.

THE FORM:

Here is the xhtml I am using for the form code:


<form action="process.php" method="post"> <fieldset>
<label>Name: </label>
<input name="name" type="text" />
<label>Email: </label>
<input name="email" type="text" />
<label>Comment: </label>
<input name="comments" type="text" /> <input class="special" name="info" type="text" /> <input type="submit" value="Send" /> </fieldset>
</form>


First, this is not a tutorial on making forms look nice, so don’t give me crap. Everything should be straightforward, however, you will notice after the comment text box, there is another text box with the name “info” and the class “special”. This is the spam fighter. I didn’t want to mess up the orientation of the form, so I didn’t put a break between the comments box and the spam box. I just put it at the end of the line. Real people won’t see it looking at the page, because I turned off the visibility in CSS:

THE STYLES:

[quickcode:noclick]
body {
line-height:35px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:14px;
}
.special {
display:none;
}
[/quickcode]

Really, the only class you need to look into is called “special”. Basically, I made it really small, again to avoid any design conflicts, and then I assigned the visibility property with the value “hidden”. This way, browsers don’t make it visible, and thus people can’t fill it in. However, when a spam scraper comes through the site, it’s going to read it and think it should be filled in — only to their surprise.

THE SCRIPT:

The php to handle this is very straightforward. Basically, you just look to see if that field has been filled in before it was posted, and if it was, you simply break the script so no email is sent, and tell the spammer to get lost. If it’s not filled in, then business as usual. To see this in action, fill out the top form and press “submit”. Then, fill out the bottom form including the spam box and press submit. Process.php returns different results based on what is typed in.

More Thoughts:

After doing this, my spam levels from form submission went down to zero. You could always add a function to search for html in the post as an extra caution as well. It just made me realize once more how important CSS is to making things work right. So in this case, CSS is my weapon of choice. I recently implemented this on my Orlando Florida Used Cars and Utah used cars website. It’s also working great for Doug Bennett Magic and Consumer Credit Repair Agency.

Another interesting article:
For those of you tired of gamma not showing correctly for images in PNG format, this awesome fix is for you.

One of the frustrations of using the image compression (.png format), is the problems it can have with IE 6, 7. For those of use that like to use transparencies in png images for example, know that we have to find a png IE 6 transparency fix, if we want them to work in IE 6. Fortunately, Microsoft was somewhat on the ball with the release of IE 7, because it now supports png transparencies. However, in creating some web pages where I was using a png next to a jpg with what I thought to have the same background color, IE 7 for some reason made the png darker. Although it was ok in Firefox, this is frustrating for cross-browser debugging. This discrepancy is due to a way IE 7 reads the png file information.

When you compress an image in Photshop as a png format, the gamma information related to it is saved within the file information. When taking advantage of transparencies within the png format, this data has to be removed in order to work correctly in IE 7. So how do you do this? TweakPNG.

First, download the program. It’s standalone, so you won’t need to install anything. Open the program and drag your problematic png into the window of it. You will then be shown some options that will look like this:

If you look on the left in the “Chunk” column, you will see a “gAMA” property. All you have to do is click on it, and press Delete. While you are in there, you might as well save a little bit of space by deleting the “tEXt” field as well, which only contains data of where the png was created, in this case Adobe Image Ready. Then click on “File -> Save” in the menu at the top, and re-upload your png, test it in IE7, and you should be good to go.

Although this can be a hassle, you should realize you don’t have to do this to every png you create. The problems occur when a png and jpeg or gif that need to match colors are close together. For many sites I do, I never use it because I am able to use images all on png format. But, it does come in handy when something needs to be done.

For more information about the png format, and how it is recommended by Wc3, click here.