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 »

Alltec Global

  • Comprehensive Analysis
  • Architecture Overhaul
  • Full-featured CMS
  • Web Marketing
    Consultation
  • Training & Documentation

Design by: 828:design

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

Resizeable (proportionately!) embedded videos

Getting embedded videos to work responsively (and resize proportionately) has been a hassle, until I found this lil tidbit. Wrap your video embed code in a div with class “video-container”, and using the following CSS, the video will fill its container, and maintain it’s proportions as you resize it!

In the .video-container style, set the padding-bottom to the percentage you get when you divide your target height by your target width. So for 16:9 ratio, use 56.25%, since 9 / 16 = 0.5625.

I learned this technique from the example here: https://github.com/chriscoyier/Fluid-Width-Video

See this in action in this JSFiddle (http://jsfiddle.net/paleosun/caww0bke/).

Markup

1
2
3
4
5
6
7
8
<div class="video-container">
	<iframe 
		width="16" 
		height="9" 
		src="//www.youtube.com/embed/mjj9d33U9cI?rel=0&showinfo=0&vq=hd720&modestbranding=1&iv_load_policy=3&controls=2" 
		frameborder="0" 
		allowfullscreen></iframe>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.video-container{
	position: relative;
	padding-bottom: 56.25%;  /* for 16:9 ratio, 9 / 16 = 0.5625 */
	padding-top: 25px;
	height: 0;
	overflow: visible;
	margin: 0px 10px 20px 10px;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
Posted by Gary Reckard on Jan 24, 2015