Posted by Anthony in Web Design tagged email, google, user experience

As a web guy, I like good user experiences.  I try not to make users think.  And I try to make the user experience as intuitive as I possibly can.

Today, I was once again flabbergasted by a great little feature I accidentally discovered using Google’s Gmail.  It reminded me that as good as a user experience gets, there’s always room for improvement.

(It also made me think of the quote from TRON, which is applicable to web design and user experiences as well: “On the other side of the screen, it all looks so easy.”)

So what was this great little feature of Gmail?  I was typing a message and had every intention of attaching a PDF file.  Problem is, I totally forgot to attach the PDF file.  Luckily, Google was smart enough to know that I wanted to attach the file, and prompted me, asking if I wanted to attach anything.

“How’d they do that?” you ask?  Well, in my message, I had included the words “Attached is…”, referencing the PDF file I was going to attach and wanted the recipient to look for.  Apparently, Google thought that, like me, people would forget to attach files more than just once.  So they put in logic to search each message for certain keywords (“attached is”, in my case), and if the email has no attachments, they’ll give you a popup message that tells you they found those keywords in your message, and ask if you really want to send the email as-is, or if you want to attach a file.

Chalk one up for Google in teaching us all another lesson on a subtle but well thought-out user experience.

Until next time, happy coding!

No Comments »

Posted by Anthony in Tutorials tagged css, html, javascript, jQuery, stylesheet

One nice feature that many websites have is a progress bar.  They come in many shapes and sizes, whether they are showing a user what step they’re on in a process, what percent of the way through a process the user is, etc.  And today, with the use of trusted CSS and JavaScript (in the form of the jQuery library), a progress bar has never been easier to create with a minimal amount of images needed.  (Truthfully, you don’t need any images, but in the example below the tutorial, I’ve used a few to add some nice styling to the example.)

With that said, on with the code!

Step 1: Set Up HTML Code

The first thing you want to do is to create two div tags in your file, each with unique IDs.  One will be the “container” for the progress bar, and the other will be located inside of it, and will be the one getting sized to show the progress.  Here’s how I have set it up:

<div id="progress-bar">
   <div id="status"></div>
</div>

Step 2: Add Some Style

Now that the basic HTML is set up (and seriously, how easy was that HTML setup?), we’ll add some CSS magic to make it look better.  Here’s how I have styled our example:

#progress-bar {border:1px solid #bebebe; background:#ffffff; width:300px; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#0066cc; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}

The important thing to note here is that the #status ID has a percentage-based width.  Since it is contained within the fixed width #progress-bar div, it’ll automatically calculate how wide it has to be.  Oh the magic of CSS!

Another thing to note here is the use of the multiple “radius” attributes for different browsers.  It’s a bit out of the scope of this post, but to make a long story short, if your browser supports one of these attributes, you’ll get a nice rounded look.  If not, it’ll just be a normal rectangle.  Your call on whether you like the rounded corners or not.

If you decide to use the “radius” attributes for styling, be warned that if the percent width on your status bar is at or lower than the radius amount, it may throw off the look of the edges, as the browser will try to “make up” the shape with corners as best it can with the radius values included. This isn’t a factor when the corners are squared off, but it’s a good thing to know up front, just in case you need small percentages used.

Also, feel free to style these with background images, with taller heights, different colors, etc.  As you’ll see in the included sample below, I’ve gone ahead and added in some background images to spice up the design a bit.

3. Jazz It Up with jQuery

Once your HTML and CSS are in place, you’re all done.  Unless, however, you want to update the progress bar on the spot in front of the user.  If that’s what you’re going for, then here’s where you can use some jQuery goodness to animate the bar however you need.

First, you’ll need the most recent version of the jQuery library.  Link it into your HTML file, and then whenever you need to change the width of the #status bar, just call a JavaScript function like this (with the “80%” width attribute set to whatever you need it set to):

$("#status").animate( { width: "80%" }, 500);

Wrapping It Up

That’s really all there is to it.  Pretty basic stuff.  But it’s definitely a nice trick to have up your sleeve.  And with a little extra work on styling and JavaScript logic, you can have some pretty robust logic that does some really cool things.  The example below shows you how the extra styling looks, and will allow you to see how the #status bar animates when the jQuery function is called.

Until next time, happy coding!

Example

No Comments »

Posted by Anthony in Tutorials tagged css, html, optimization, PHP, validation, websites

In the last post, we explored how to set up an online form using HTML and PHP. In this post, we’re going to finish setting up the logic to store form field values and validate the form.  If you haven’t read the last post and want to catch up, please click here to go to part 1.

Step 1: Add PHP Functions for Setting/Resetting Variables

In the last post, we set the form up so the value for each form field is set to a corresponding PHP variable. Now we need to make sure that when the form field changes and a user action (like submitting the form) takes place, the PHP variables get set to the newly updated form field values.  This is a simple process, as we just have to create a function to set the PHP variables.  And while we’re at it, we can create another function to reset the PHP variables for our ‘Clear Form’ button.  Here are the functions we’ll use.  Note that we need to use the ‘global’ keyword inside the functions to access and successfully update the variables.

function setVariables() {
   global $user_name;
   $user_name = $_POST["user_name"];
   global $user_email;
   $user_email = $_POST["user_email"];
   global $user_message;
   $user_message = $_POST["user_message"];
}
function resetVariables() {
   global $user_name;
   $user_name = "";
   global $user_email;
   $user_email = "";
   global $user_message;
   $user_message = "";
}

Again, these functions will eventually get called when a user clicks on the Submit or Reset button, respectively.

Read the rest of this entry »

1 Comment »

Posted by Anthony in Tutorials tagged css, html, optimization, PHP, validation, websites

The more popular mobile devices get, the more reason there is to be cautious and deliberate when creating your website. While there are a bevy of issues in dealing with creating mobile-friendly sites, the one I’d like to focus on here is building out an HTML form. More specifically, since some mobile devices don’t have JavaScript enabled (either by default or by choosing, either way done to increase speed on your device), it’s not necessarily good to rely on JavaScript validation for your forms. And, since most current mobile devices aren’t Flash-friendly either (thank you Steve Jobs), the best method in creating a form is using HTML, styled with CSS, and using PHP for validation and processing.

With that said, here’s part 1 of how to build a bulletproof form using only HTML, PHP and CSS.

Step 1: Plan Your Form

This first step is important when building out a form.  Rather than just jumping in and starting to throw together a form, it’s helpful (and a big time-saver) to plan out what fields your form will have, and what types of fields they will be.  I find it helpful to either jot this info down on a piece of paper, or write it in pseudo-code inside of a comment block in my working file.  Either way, plan your form fields first.  It will make life much easier as you build out the form, and eventually its validation and processing.

For this tutorial, we’ll build out a form with three fields: Name, Email, and Message.  The form will also have a Submit and Reset button for form processing and resetting.

Step 2: Create PHP Variables for Each Form Field Value

Now that we have the form architecture figured out, we need to assign a PHP variable to each form field.  In our example, this means we’ll need 3 variables.  So at the very top of our file, inside of the PHP wrapper tags (<?php ?>), create a variable for each.  In our example, it will look like this:

<?php
$user_name = "";
$user_email = "";
$user_message = "";
?>

Note: This step could be swapped with step #3 below, but for the sake of brevity in this tutorial, I’m putting it here so we can plug these variable values directly in the form fields when we build out the form in step #3.

Read the rest of this entry »

No Comments »

Posted by Anthony in Web Design tagged css, Flash, html, javascript, optimization, PHP

Whew!  It’s been far too long since my last ramblings on the blog here.  And c’mon…what’s up with that title?  No Flash?  Don’t worry, I’m not turning anti-Flash like Steve Jobs or anything.  Heck, I continue to do a ton of Flash development work, and seriously enjoy doing it.  No, it’s nothing like that.  I’ll just that I’ve just launched an updated version of HesslerDesign.com that includes absolutely no Flash elements whatsoever (minus the blog section, because I write about Flash quite a bit as you can probably tell).

Why, you ask?

As time goes on, I’m finding myself drawing closer and closer to sticking close to pure HTML/CSS code, with other standards-compliant languages like PHP/MySQL and JavaScript.  Not to say Flash and it’s programming language (ActionScript) isn’t compliant with anything.  I had simply found myself doing things in Flash by default because it’s what I was most comfortable with, and could do with the least amount of technical issues.

But, now that I’ve been exploring more uses for JavaScript in place of what would normally be Flash code, it’s easier and easier to pull myself away from Flash.  Plus, as I’ve been doing more and more dynamic code content with PHP, I’m finding myself a lot more excited about using PHP than I am about using Flash.  I still enjoy Flash, and don’t get me wrong — there are definitely times and places for Flash.  But for where I’m at now, I am finding that my own site doesn’t currently need to rely on Flash so much.

Outside of the programming techniques used for the most recent release of the site, I felt like it was definitely the time for a change regarding the design of the site.  The new design has a much more sophisticated simplicity and clean look than the old version. It’s focus is more on the projects and artwork, as they take a very prominent position on the Work page with only the project details to accompany them.  No fluff content just to fill in space and give users something else to read.  Only the necessities.

With that all said, I hope you enjoy the newest iteration of HesslerDesign.com.  If you haven’t already, check out the Work page, which has a few new projects listed that I’ve completed recently.  I hope you like what you see.

Until next time, happy coding!

No Comments »

Posted by Anthony in design tagged design

For all you designers out there, you’ve inevitably had numerous encounters with colleagues and/or clients who had more than their two cents worth on a given design project. You’ve no doubt had to carefully and diplomatically state your case, and why certain design decisions are better than others, and why there is a need to trust a design professional, rather than…well…Microsoft Word or PowerPoint.

If you’ve had your fill of being overly nice trying to convey your ideas, I am happy to announce that there is now a service out there that is here to help: Design Police (http://www.design-police.org/). I stumbled across this site site after seeing it featured in a blog post on Smashing Magazine and knew that it is a keeper, and one that I had to share with readers.

The mission of Design Police is simple: Bring bad design to justice. Through their innovative kit that is available for download, you can use their material when editing and marking up designs. Trust me — it’s well worth it.

1 Comment »

Posted by Anthony in Web Design tagged css, html, stylesheet, websites

Here’s an oldie, but a goodie.  One of the questions I get a lot is, “Why isn’t my website reaching all the way to the edge of the browser window, and how do I get it to do that?”  Well, the answer is very simple, and it’s easily taken care of with one line of CSS code.

In your CSS code, simply assign the following:

html body {margin:0px; padding:0px}

That’s it. Seriously. By default, most (I hesitate to say all) browsers have a built in 10px or so padding around the edge of the window. By setting your html and body to have no margin or padding, it effectively overwrites the browser default values and uses yours.

While you’re at it, you might also be wondering how you can center your main container in the browser window, instead of having it left-justified.  This too is easy to implement with one snippet of CSS.  Let’s go ahead and assume that your main div container has the ID “container”. Your CSS code to center the div “container” will be:

#container {margin: 0 auto; width:960px;}

Notice that in this example, you need to fix your width to a certain value so the container knows not to take up 100%. The margin setting “0 auto” tells the container to have a margin of 0 (zero) pixels on top and bottom, with auto margins on the left and right.

So there you have it. Two basic CSS rules to make your page go all the way up to the edge of the browser window, and to center your main container in the window.

Until next time, happy coding!

1 Comment »

Posted by Anthony in Web Design tagged optimization, seo

One question I get repeatedly is, “How can I improve my search rankings?”  While there’s a vast array of variables that go into search rankings, most of which are beyond the comprehension of non-Google developers, there is a site that is devoted to providing information on Search Engine Optimization (SEO).  That site is: seomoz.org.

SEOmoz is a popular provider of SEO software.  It’s website is dedicated to all things SEO, including a blog, helpful articles and user guides, and best of all, a set of tools that webmasters can use to help their site’s SEO.  Some of the tools are only available to “Pro” members, which costs money.  But a little over half of them (at the writing of this entry) are completely free to use (some with daily restrictions on use).

One of the coolest free tools available to anyone is the SEO Toolbar for Firefox.  With the toolbar, you can access any of the SEOmoz tools right from the toolbar, without having to go to the actual site first.  It’s incredibly handy, and also includes stats like Page Authority and Domain Authority, which give real-time stats on the site you’re currently on.

So next time you get the question, “How can I improve my search rankings?”, look to SEOmoz.org as your first (and likely, only) stop for resources and tools to help guide you on your road to SEO success.

Until next time, happy coding!

No Comments »

Posted by Anthony in Web Design tagged design, fold, websites

Time and time again, I get the request nearly every designer hates hearing: “Will this be above the fold?” Innocent enough question, but honestly, anyone who asks this is still living in the 20th Century.  The reasons are numerous for why “the fold” is obsolete for websites. Instead of explaning them here, I’ll point you to a great site that’ll do the job for me: FindMyFold.com.

Okay, truthfully the shameless plug of FindMyFold.com is quite self-serving. Between me, you, Google, the Internet, and Al Gore, I sort of created the site. I thought it high time to do my duty as a designer and developer, and offer the site as a public service to the world.

So the next time someone asks you, “Is this going to be above the ‘fold’?”, point them to FindMyFold.com. At the site, you see what your fold is in your own browser.  Plus, there’s a handy-dandy “Test Your Site’s Fold” feature that you can use to test any site to see where your fold lands on that particular page.

Oh yeah, and while you’re there, make sure to share the news with your friends, with the built-in social links.  Let’s spread the news and get everyone up to speed!

No Comments »

Posted by Anthony in Flash tagged actionscript 3, classes, Flash, Video

What is VideoMax?

VideoMax is a very lightweight, fast, flexible, and easy-to-implement custom Flash video player class that can be used in any ActionScript 3.0 file. Some of the key highlights of the VideoMax class are:

• Lightweight: Importing the VideoMax class and creating an instance adds only 12kb to overall file weight. Compare that to the built-in Adobe ‘flvPlayback’ component, which adds 58kb to the overall file weight. Do the math. That’s nearly 500% heavier than this VideoMax class.
• Easy to Use: With just 3 lines of code, you can import the VideoMax class, create an instance of the player, and add it to your Flash file. And because of its dynamically-built nature, there are NO Library components needed. That’s right, NONE. All of the assets included in the VideoMax class are 100% built from scratch with nothing but ActionScript 3.0 code.
• Customizable: You can change a number of attributes to your VideoMax instances, so you can have a video player that is as unique as the video it plays. The customizable attributes include Width, Height, Auto Play, Auto Rewind, Auto Size, Buffer, Looping, Control Bar visibility, Tint, Play Button overlay, End Frame visibility, and onStart/onComplete listeners.
• Communicative: By using the onStart and onComplete listener attributes (and accompanying parameter attributes), you can have VideoMax dispatch events that call functions back in the parent file when the video starts and/or ends.
• Self-Sufficient: With its robust set of default attributes, VideoMax takes care of wrapping up all of the loose ends. Once you create your VideoMax instance, you can sit back and relax, knowing that everything is taken care of, including control bar resizing and positioning, buffering, automatic video resizing within the player, and more. Just import the class, create the instance, assign it attributes, and add it to your file. VideoMax will take care of the rest for you.

Where Can I Get VideoMax?

VideoMax is available for download at the Official VideoMax Page on HesslerDesign.com. There, you will find a free download of VideoMax, as well as examples and documentation on implementing VideoMax in your own Flash projects.

No Comments »