ImageScale scales and repositions images into the center of a container div using JavaScript. The plugin aims to reduce maintenance issues when dealing with a fixed content area that needs to handle multiple image sizes.  While JavaScript image resizing isn’t always ideal, this plugin should do the trick when batch image processing is not an available option.

Markup

The markup requires only the container div and the image to be resized. This plugin can also be used in conjunction with various slideshow plugins that have multiple images displayed in the container div.

1:    <div id="example1">
2:         <img src="images/4.jpg" />
3:    </div>

Includes

To use ImageScale  you must of course include jQuery, as well as including the single ImageScale JavaScript file .

1:  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2:  <!-- Points of Interest -->
3:  <script type="text/javascript" src="plugins/imagescale.js"></script>

Initializing

Simply initialize the plugin as you would any other jQuery plugin. Note that this plugin works most reliably when called in the $(window).load function rather than the usual $(document).ready.

1:  $("#example1").imageScale({height: 400,width: 400});

Options

The two options used in ImageScale are width and height. Generally, these would be the width and height of the parent container.

• width – the maximum width to which the image will scale
• height -the maximum height to which the image will scale

View the Demo

Download Demo

As a web designer for Journal Interactive I design dozens of ads a week in addition to working on larger projects. The below samples represent my favorites from the past two years.

Static Ads

Flash Ads

I also create Flash ads and am the designated designer for ads that are heavy in ActionScript. These links showcase script-driven  and other creative animations.

1. Improving comments
2. Reinventing online video
3. Creating a user-centric experience

My group tackled the third issue and came up with some really great ideas which I (hopefully adequately) presented after our time was up. Phillip Smith of Mozilla walked around taping everybody and then uploaded the videos. Well, here I am:

Typically, my role as a designer finds me organizing mostly finished ideas, arranging them into wireframes, providing full color comps for review, slicing the images into HTML/CSS/JavaScript, and passing everything off to our developers. It was clear from the beginning, things were different in this project.

To begin, I was brought in when ideas were still completely up in the air. Rather than reacting to what others had already mostly hashed out, I actually was able to provide my own voice and participate in shaping the features and content. This was followed by a much more intense and drawn out design process than any other project I’ve worked on. Every pixel of the site went under the microscope, was shown to nearly a hundred people, and was second-guessed constantly. In the end, almost all of my original design decisions made it into the project, though it often took two months of debates and alternate designs to get there. Rather than relaxing and handing the project off at this point, I participated heavily in the development and site administration through our CMS. At this point, I had invested so much time and was so familiar with every aspect of the project that I could not contently pass work on and sit back. I felt compelled to stay involved as the project felt more and more like my own personal statement.

The results of all of this are a thousand new tricks in my bag, a great sense of accomplishment, and something I can be proud to have my name on. The lessons learned can be a post (or a book, really) on its own, so for now, please just enjoy all of my hard work over the last 6 months: tapmilwaukee.com

New Years Resolution 2011: Create a term to replace “look and feel”

Instant validation provides users with immediate form validation errors, correcting user input as soon as it’s entered rather than waiting for form submission. The appearance and position of the validation error messages are easily styled through CSS and plugin options. Currently available validation types include required fields, email addresses, phone numbers, zip codes, and numbers, but more will be added!

Markup

Create your form and all of its inputs. For each input that requires validation:

1. Enter the validation error you want to appear as the input’s title attribute.
2. Give the input a class to indicate validation type. The current validation types are:
   • requiredText – any characters must be entered
   • emailAddress – a valid email address must be entered
   • int – a whole number must be entered
   • phone – a 10 digit number with dashes must be entered (111-222-3333)
   • zip – five digits must be entered
3. If a field can either be empty or match a specific input type, assign it a class of “orEmpty” in addition to the validation type.
4. Tell the plugin where the validation error should appear by giving it a class of:
   • showTop – default value which will be used if no display class is provided
   • showBottom
   • showLeft
   • showRight

1:  <input title="Please enter a valid email address." class="emailAddress" type="text" />
2:  <input title="Entere a 5 digit zip code." class="zip showBottom orEmpty" type="text" />
3:  <input title="Please enter your phone number formatted 111-222-3333." class="phone showRight orEmpty" type="text" />

Do not add any of the Instant Validation classes on inputs that require no validation.

Includes

The only includes you need, aside from the jQuery library itself, are the Instant Validation JavaScript and CSS file.

1: <script type="text/javascript" src="instantvalidation/js/instantvalidation.pack.js"></script>
2: <link rel="stylesheet" href="instantvalidation/css/instantvalidation.css" />

Initializing

Target the parent form(s) of your validated inputs to initialize the plugin.

1:  $("form").instantValidation();

Options

• fadeSpeed - the speed at which the validation messages fade in and out

View the Demo

Download the Demo

Markup

First create a div with the class “pointsofinterest” and give it a unique id if multiple instances of the POI plugin will be used per page. Then list the image being displayed, followed by two unordered lists. The first is for each of the points that appears over the image. Note the two spans which provide the x and y coordinates for the points. The second list contains the contents which will appear on hover or click. End that initial div and the markup is done!

1:      <div class="pointsofinterest" id="example">
2:      <img src="images/river.jpg" />
3:      <ul class="poi_points">
4:        <li>Lorem Ipsum
5:             <span class="y">15</span>
6:             <span class="x">50</span>
7:        </li>
8:        <li>Praesent Pulvinar
9:          <span class="y">75</span>
10:             <span class="x">500</span>
11:        </li>
12:        <li>Nunc Adipiscing
13:          <span class="y">250</span>
14:             <span class="x">150</span>
15:        </li>
16:        <li>Praesent Dapibu
17:          <span class="y">400</span>
18:             <span class="x">400</span>
19:        </li>
20:      </ul>
21:      <ul class="poi_contents">
22:        <li><h3>Lorem Ipsum</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum.</li>
23:        <li><h3>Praesent Pulvinar</h3>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo.</li>
24:        <li><h3>Nunc Adipiscing</h3>Nunc adipiscing purus id orci rutrum placerat. Praesent dapibus metus vitae velit blandit tempor. Nunc adipiscing purus id orci rutrum placerat. </li>
25:        <li><h3>Praesent Dapibus</h3>Praesent dapibus metus vitae velit blandit tempor. Nunc adipiscing purus id orci rutrum placerat. Nunc adipiscing purus id orci rutrum placerat.</li>
26:      </ul>
27:    </div>

Includes

The only includes you need, aside from the jQuery library itself, are the POI JavaScript and CSS files.

1:  <script type="text/javascript" src="pointsofinterest/js/pointsofinterest1.0.pack.js"></script>
2:  <link rel="stylesheet" href="pointsofinterest/css/pointsofinterest.css" />

Initializing

Initialize like so for the default presentation.

1:  $("#example").pointsOfInterest();

Options

• speed - the speed at which the overlay contents fade in and out
• showOnHover – set to true or false to determine whether or not the overlay contents show/hide when hovering over the POI
• contentsHideOn - can be set to “none”, “click”, or “hover”. When set to “click”, clicking on an overlay hides it, “hover” will hide on hover, and “none” will require the user to use the close button or canvasHidesOn to hide the overlay.
• canvasHidesOn - also set to “none”,”click”, or “hover”. This controls what effect mouse events on the canvas (the image). When set to “click”, a click anywhere on the image will hide the current overlay, when set to “hover” simply hovering over the image will hide the current overlay, and when set to “none” the close button or overlay itself must be interacted with in order to close the overlays.
• closeButton – set to true or false to determine whether or not the close button appears on the overlays
• arrowVOffset and ArrowHOffset – vertical and horizontal offsets for the arrow image which is generated as part of the overlay. These can be used to help adjust the position of the arrow.

View the Demo

Download the Demo

I’ve been struggling with this overabundance of features at work lately, where I’m continually asked to add yet another widget/ad/photo gallery/video player/news story to an already overcrowded page. The fear with each design is that it will become lost on the page, which is inevitable when a page features nearly 4 dozen different items to look at. The other point to consider is that even if the new addition does successfully grab the user, it’s just going to detract user attention from other features on the page, features I probably spent last month trying to make stand out.

So, what’s wrong with a busy page? A lot, a lot is wrong. For each hour spent creating a new feature for a site, there’s an hour not being spent maintaining or improving an existing feature. Each feature added to a site is yet another feature to maintain, support, and redesign in the future. And most importantly, each new feature doesn’t necessarily mean a new website user. In fact, it most often means the same amount of users on the site, but just one less user of another area of the site. Essentially, a website with too many concepts divides its own customer base, becomes impossible to maintain, and is doomed to eventual failure.

But all the cool kids like videos, and photos, and polls, and blogs, and news stories, and Facebook, and Twitter, and Flicker, right? Yes, that’s what all the cool kids are doing, but you’re insane to try to actually use them all. As a moderate Facebook user, a fairly new Twitter user,  a daily reader of news sites, a blogger, and the webmaster for a few different sites, I could honestly waste as much as 8 hours a day doing essentially fruitless online activities every day. But I don’t. And if I did, I would have no time for work. And without work, I’d have no money, and with no money, your business really shouldn’t care about me.

Yet, businesses are pouring immense amounts of time and resources into pumping dozens of daily tweets to various market segments, into adding hundreds of photos to Facebook, and into blogging on a daily basis. I currently only follow 18 users on Twitter, and I’m already completely inundated with meaningless updates. I get it, AJ Bombers, you have burgers and want people to eat them, but the 10-15 tweets a day is a bit much. It’s actually getting to the point where the logo and business name actually gets me a bit angry. A simple daily specials update, or tweets about menu changes when they happen would actually serve the customer well, but when every unimportant bit of information is shared, the actually important messages are going to get lost.

Well, what’s a business to do to keep up with this crazy pace? Slow down, simplify, think before you act. While it’s true that the online world moves fast and you don’t want to be the last person on the train, you also don’t always need to be the first. Take the time to fully understand what you want your site to do, who you want to use it, and how you want them to use it before adding a new feature. Don’t over-complicate or over-saturate your message. Keep it simple and make it resonate. Most importantly, understand what you’re doing before you do it. Don’t add a service because you think it would be a good idea, add a service when you are rightfully convinced it will serve you well.

Webmasters, content producers, designers, developers, and marketing personnel, let’s clean up or act a bit and start acting like distinguished lecturers of important theories instead of hobos with sandwich boards shouting on street corners.

Web Design, for the Web, you know, on a Computer

A lot of funky web designs – laden with inline scrolling, full of confusing navigation, accidentally hidden content, odd colors – are caused by designers or marketing personel who design websites on or for paper. Print designers make many fundamental mistakes when trying to design a site because they’re so locked into brochure or printed ad design that they don’t stop to think about how things will look online, how to deal with screen real estate, and how to handle a template which will be responsible for displaying varying content. Marketing managers have been known to actually print websites to paper and then discuss the design aesthetics based on the print-out! That’s like critiquing a CD mix while sticking your fingers in your ears and shouting “la la la la la”. The more that people realize web design is its own entity, the better treatment of design on the web we will see.

@font-face

Solving the dilemma of boring font choices or images for headlines is the @font-face CSS rule. By allowing the designer to upload a font and define it as a style, any font can now be displayed on any machine. Although support for this is not universal, it degrades into the normal CSS font rules gracefully, so you can start using it now to enhance your projects. I actually only used this for the first time about two weeks ago, but I’m already hooked!

CSS3

My favorite part about web design is chopping up a dozen tiny images to achieve rounded corners, gradients, and drop shadows. Wait… that’s my least favorite part. Thankfully, it’s something I’ll never need to do again thanks to CSS3 with it’s wonderful border-radius, gradients, and box-shadow properties. The additional wonders of multiple backgrounds, border images, text-shadows, and transitions will eliminate much hastle and enable great design.

jQuery

Simply put, jQuery obliterates the need for Flash. jQuery allows for amazing animations, gorgeous photo galleries, draggable and dropable user interfaces, and more without needing to introduce additional technology onto each page. Because jQuery is just JavaScript (which Flash usually needs to use just to load), and it operates by applying effects to standard HTML elements, the transition from a static mock-up to a engaging animated page requires less effort from the programmer and from the client’s machine. It’s an absolutely dream to work with and once people use this they’ll never go back to Flash.

Experienced Users

Once an entire generation grows up online the need for explaining simple operations in great detail, for reminding users to update their 10 year-old browser, and for scaling back designs should dwindle. It will be nice to be able to design without having to be constantly reminded that half the world still somehow doesn’t know to click on links and buttons or to click the logo to return to the home page. This might not happen any time soon, and their of course will always be a need to cater to thouse who are less tech-savvy, but it’ll be amazing to not have to worry about the lowest common denominator quite so much.