We give life to your ideas

Smart Website Design & Development

We Build Websites

Elegance in <code>. Elegance in UI. Striving for elegance in all that we do. We provide user-friendly and admin-friendly websites with strong attention to search engine guidelines and modern web standards. see our portfolio »

We Value Relationships

Maybe it's the personal service. Or our sound reasoning. It could be our commitment to excellence. Whatever it is, clients keep coming back. We earn business at every meeting, with every decision and with every line of code. And clients seem to like that!

We have fun!

Bill leads the way in establishing the conditions for a successful project while advocating for better processes. With the support of his staff, client expectations are managed from day one through constant and clear communication. Bill works to keep decisions in alignment with business and user goals.

Problem Solving Simplified

We apply technical skill and creative problem solving to develop elegant website solutions. We also offer support to our clients with ongoing marketing and maintenance services customized for each unique business. The success of your project starts with a clear understanding of your needs. Contact Us today to schedule your first meeting or feel free to send us a message with the requirements of your project.

Visit Cherokee, NC

  • Create/Share Itinerary
  • Event Listings
  • Full Screen Homepage
  • CMS Development
  • User Interface Design
  • Responsive

Design by: Element Advertising

visit site »

Tutco-Farnam

  • Completely Custom
  • Product Builders
  • Product Selector
  • Engineering Resources
  • Video Library
  • Analytical Analysis
  • Marketing / Maintenance
  • 10+ Year Client
visit site »

Blue Ridge Music Trails

  • Interactive Map
  • Event Listings
  • Event Filtering
  • Full Site Search
  • Responsive Design
  • Media Gallery

Design by: Element Advertising

visit site »

ChiLiving, ChiRunning, ChiWalking

  • Multi-Site CMS
  • Many Custom Features
  • 3rd Party Ad Integration
  • Training Programs

Design by: theBATstudio and JuneAllison

visit ChiRunning.com » visit ChiWalking.com » visit ChiLiving.com »

Highland Brewing Co.

  • Events Calendar
  • Blog with Sharing
  • Many Customizations
  • Advanced CMS Features
  • Videos & Photo Gallery
  • Highly Designed

Design by: Jared Ray and Matt Levin

visit site »

Blue Ridge Bone and Joint

  • CMS Development
  • UI Design
  • Pervasive Blog
  • DB Driven Content
  • Dynamic Navigation
  • Marketing / Maint.

Design by: Jared Ray

visit site »

Tops for Shoes

  • Compare Shoes
  • Browser Style,Color,etc
  • Like on Facebook
  • Create/Share Wishlist
  • CMS Development
  • User Interface Design

Design by: Sharon Harms

visit site »

MAHEC

  • Comprehensive Analysis
  • Dynamic CMS
  • Multi-Audience
    Architecture
  • Advanced CMS Features
  • Permission Level Editing

Design by: 828:design

visit site »

A-B Tech

  • Homepage Architecture
  • Top Level Rebranding
  • Mobile Version
  • Analysis & Recommendations
  • Section 508
  • Award Winning!

Design by: 828:design

visit site »

We'd Love to Hear From You

We value our relationships with our clients. Even if you are not ready to delve into your project, we'd like to have you over. You're welcome to contact us by any of the methods listed to the left or via the form below.
* designates required fields

We're in town but not quite on the map. Check out our personal google map for brief directions or download/print our directions pdf.

Blog

My user-friendly, in-field form labels technique

It seems to be a burgeoning trend for web designers to do away with external field labels, and instead put the field label within the field itself. While the input tags 'placeholder' attribute does not yet enjoy total crossbrowser support, there are plenty of other javascript-based solutions that allow you to add placeholder text within an input field.

However, these methods have a serious UI downfall. When a user begins typing in the field, the placeholder disappears, leaving no clues as to what type of input belongs in the field. Try typing into this field, and see as the placeholder text disappears:

In a complex form, with many different input fields, this can get annoying and burdensome. I did a little poking around and found several really cool solutions to this problem. Some move the label to the left of the field, but this method clashed with the design I was working with at the time, as the label then covered up some other field or content. Another method I found added a neat tooltip over the field, but I wanted something a bit simpler, visually, and their tooltip disappeared when you left the field, and you were only left with the value you entered.

In the end, I decided to roll my own, instead! Here is what I came up with.

So, this has several features:

  1. As soon as the field gets focus, the label moves up out of the way.
  2. When you leave the field, the label stays out of the way if you left a value in the field, or moves back down if you left it empty.
  3. The text of the label is surrounded by a 2px white stroke, so it's easier to read over the top of the form element.

You can see this JSFiddle for a working example: http://jsfiddle.net/paleosun/v0523qyj/

I used jQuery to provide 'progressive enhancement', so if the visitor does not have javascript enabled, they will just see the form field with the placeholder text. But if they have javascript enabled, it converts the simple field to my fancy pants, user-friendly field. 

Currently, the CSS is hardcoded to place the field label in the right spot in the field, and then at the right spot above the field. However, you could take this a step further, and add jquery that calculates the field height, etc,, and sets the correct "top" and "left" values for the label.

And here's how it works:

Markup

1
<input type="text" id="example-field-1" class="infield-label" value="" placeholder="Example Label" />

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.infield-label-wrap{
	position: relative;
}
.infield-label-wrap input{
	height: 24px;
	display: block;
}
.infield-label-wrap label{
	position: absolute;
	display: block;
	top: 8px;
	left: 10px;
	color: #333;
	font-weight: 300;
	margin: 0px;
	font-size: 12px;
	z-index:10;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}
.infield-label-wrap label.focused{
	top: -8px;
	color: #a7152a;
	font-weight: 700;
	margin: 0px;
	letter-spacing: 1px;
	text-shadow:
		-1px -1px 0 #fff,  
		 1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff,
		 -2px -2px 0 #fff,  
		 2px -2px 0 #fff,
		-2px 2px 0 #fff,
		 2px 2px 0 #fff;
}

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function() { //when the document is ready...
	$("input.infield-label").each(function(){
		/* wrap field with a container that has position:relative */
		$(this).wrap('<div class="infield-label-wrap"></div>');
 
		/* Create a label element with correct 'for' and label text from 
		    id and placeholder, respectively*/
		$(this).before('<label for="'+$(this).attr('id')+'">'+$(this).attr('placeholder')+'</label>');
 
		/* remove the placeholder attribute */
		$(this).attr('placeholder','');
 
		/* When input changes, add 'focused' class */
		$(this).on('change',function(){
			$(this).siblings('label').addClass('focused');
		});
 
		/* When field gets focus, add 'focused' class */
		$(this).focus(function(){
			$(this).siblings('label').addClass('focused');
		});
 
		/* When field loses focus, remove 'focused' class,
		   butt only if the field is empty */
		$(this).blur(function(){
			if($(this).val() == ""){
				$(this).siblings('label').removeClass('focused');
			}
		});
	});
});
Posted by Gary Reckard on May 19, 2015