Let’s see some code and talk about it.

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

Let’s break down what Safari is being told here.

minimum-scale=1.0

This parameter tells Safari that a user should only be allowed to zoom out to the actual width of the web page. So if the web page is 320 pixels wide a user will only be able to zoom out to 320pixels.

maximum-scale=10.0

This parameter tells Safari to allow a user to scale to 10 times the size of the site.

initial-scale=1.0

This sets the zoom to the actual size of the site upon loading the web page.

So…these parameters allow a user when using their iPhones to zoom in and out when viewing your web page. Unfortunately, allowing zooming on your web pages creates a problem. When zoom is enabled and a user turns their phone changing the view of your web page from portrait to landscape Safari automatically zooms in. This does NOT happen when zoom is turned off. When zooming is disabled on your web page the view of your web page will be displayed properly within the viewport at 100%.

To disable zoom you can do the following:

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />

So in essence you can either have zooming or you can have proper viewing of your pages on orientation change. This is unfortunate and unacceptable. As such, I went looking for a solution and found the following Javascript courtesy of Jeremy Keith:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
     var viewportmeta = document.querySelector('meta[name="viewport"]');
     if (viewportmeta) {
          viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
          document.body.addEventListener('gesturestart', function() {
               viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
          }, false);
     }
}

In essence this solution turns zooming off until a user performs the two finger gesture for zooming. When a user attempts to zoom the above Javascript will turn zooming on and allow a user to zoom.

There are two problems I find with this solution.

1. At times (if not all times) the zooming does not turn on the first time a user attempts to zoom.
2. After a user zooms for the first time, the smooth orientation change fails and when changing to landscape Safari automatically zooms in again.

This solution only works if you want to allow a user to smoothly transition between portrait and landscape before zooming. Once they have zoomed the smooth transition is disabled. This was unacceptable for me. Unfortunately, I have not found a perfect solution to all the issues above. I have however found one I consider to be better.

My solution:

1. Turns off zooming by default
2. Turns zooming on when a user begins a gesture (attempts to zoom)
3. Once a user removes a finger or fingers from the screen, waits a second and turns the zoom off

This is not an ideal solution. There are certainly holes.

The main problem with turning zooming on during gesture start is that the zooming isn’t actually activated until the second gesture. So, if I attempt to zoom I am unable to. If I attempt to zoom a second time the zooming has been turned on from the first attempt and now I am able to.

Also, the zooming cannot be turned off directly after a user stops touching the screen. Otherwise it would work like so:

1. User places fingers on the screen
2. User starts a gesture to zoom
3. Zooming is turned on
4. Zoom does NOT work
5. User removes fingers from screen
6. Zoom is turned off

That said, here’s the code:

The HTML meta tag:

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

The Javascript:

var mobile_timer = false,viewport = document.getElementById('viewport');
	if(navigator.userAgent.match(/iPhone/i)) {
		viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
		window.addEventListener('gesturestart',function () {
			clearTimeout(mobile_timer);
			viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
		},false);
		window.addEventListener('touchend',function () {
			clearTimeout(mobile_timer);
			mobile_timer = setTimeout(function () {
				viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
			},1000);
		},false);
	}

The Javascript with jQuery

var mobile_timer = false;
if(navigator.userAgent.match(/iPhone/i)) {
	$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
	$(window).bind('gesturestart',function () {
		clearTimeout(mobile_timer);
		$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
	}).bind('touchend',function () {
		clearTimeout(mobile_timer);
		mobile_timer = setTimeout(function () {
			$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
		},1000);
	});
}

I frequently have meetings with clients who say, “Should my business be on Facebook or Twitter?” Or they often say,”I want to be on Facebook and Twitter.” Clients asking either question never really understand why their competitors are using modern social networking channels online. They also don’t really understand what it can do for them and how to use those channels themselves. Why should my business use Facebook? This is an interesting question. Should every business use Facebook or another form of social networking? I won’t answer these questions for you. However, I will tell you what I think the social networking model means in business and what it can do for businesses.

In its simplest form, social networking is good ol’ fashion list building. What is list building? Again simply, it’s the gathering of contact information from prospective customers. There are many ways to go about list building. You can purchase email lists online for bulk mailings. You can make a form available for people to assign themselves to your list; for instance a newsletter. You can pay firms who already have lists for access to their lists or to have them contact their lists on your behalf. Or, you can use a massive list of users already in one place like Facebook.

Why should I build a list?

These days it is not simply enough to open the doors of a business or launch a website. List building is a game of numbers. Let’s say 100 people know about your business. If you reach out to all 100 of them to offer them a deal on something you’re selling, chances are with any offer you’ll only convert on 1% or less. 10% if you’re lucky. That means less than 10 people will respond, take interest or take you up on your offer. If you typically convert less than 10% of the people who know about your deal, you can see how important it is to have as many people know about your deal as possible. When it’s your job to reach them, it’s your job to build a big list.

How can social networking help me build a list?

There are more than 800 million people actively using Facebook. Let’s say you’re a restaurant that serves Thai food. Let’s say 10 out of every 100 people like Thai food. Let’s say there are 400,000 people in your local area within driving distance of your restaurant that use Facebook. That means there are around 40,000 people on Facebook in your area that could potentially be interested in your food. Imagine 40,000 people seeing that you’re offering a deal this Friday night. If you were to reach all of them and convert just 1%, you have 400 people in your seats this Friday. List building is a numbers game and you have to be conservative with your numbers. You most likely won’t be able to build a list of 40,000 people. The local Brew Pub down the street from me in Bethlehem, Lehigh Valley has around 7100 fans on Facebook and they do quite nicely for themselves. I’m sure the beer has something to do with that. I’m sure their lists do as well.

How do I get people interested?

This is perhaps the most important question. You can’t just put up a Facebook fan page with a few pictures and your hours of operation. You need to be engaging. Engaging your users is how something becomes “viral”. The beauty of Facebook as a social networking channel is that you no longer have to do all your list building yourself. If you can provoke people to interact with your wall, friends of those interacting with your fan page are introduced by proxy. Posting, commenting and liking by potential or existing customers opens you up to all the individuals in their networks. The trick is to engage people. Get them to build your list for you.

How do I get customers to build my list for me?

There are a lot of ways to do this. I’m sure I’m not privy to all of them. Some businesses post funny videos. Some businesses are controversial. Some businesses bombard fans of their pages non-stop. Actually all of these techniques when done well are okay and can be helpful. The technique I really push with my clients is incentivizing. Incentivize your Facebook fan page! Before doing so please read Facebook’s terms of service.

Make a button or link as easy to click as possible.

The easier something is to click the easier it is to funnel your users where you want them on your site. Your users shouldn’t have to be precise when clicking on something you want them to click on. Notice in the example below the image to the left has a small clickable area and the area to the right has a large clickable area.

Use space to make menus and lists of links easy to read.

Proper spacing between links and navigational items is imperative when it comes to the usability of your site. If links are too close together the eye has a harder time distinguishing between items. This will cause a delay in the time it takes a user to get where they want to go or more importantly where you want them to go. Notice in the image below how much easier it is to read the second menu. Your eye can skip things it knows it doesn’t want immediately.

Make CSS work for you. Don’t use images as buttons or navigational items.

Let CSS do the work for you. Instead of creating graphic buttons and navigational items as jpegs, gifs or pngs (unless using the images as a CSS background image), make them text based and use CSS to align and style. Text based navigation is good for SEO. Also, your CSS rules are mathematic which means your spacing and alignment will be uniform. No sense eyeballing it when CSS will get your padding (for instance) right every time.

Apply CSS styles directly to the button or navigational element (if you can)

It is best practice to apply the majority of the CSS rules that make a link a button or a navigational item directly to the link itself as opposed to it’s parent elements. You can’t always accomplish this but for many reasons it’s helpful. For instance, if you have an unordered list of elements with your links contained in the <li>’s applying the padding which spaces the links directly to the links (<a> tags) expands the links by the amount of padding thereby expanding the clickable area. When the padding is applied to the <li> it decreases the clickable area of each link. Notice below. The clickable area is in green and the width and height of the <li> are in red.

You can download the plugin here:

http://www.ternstyle.us/products/plugins/wordpress/wordpress-members-list-plugin

Here is a list of the changes made:

• Started using WordPress’ built in shortcode support.
• Overhauled file and folder structure.
• Fixed pagination bug on the administrative member list.

There is one major issue with the upgrade:

It is imperative that you completely remove any previous version of this plugin before installing version 3.2.1!

http://www.ternstyle.us/products/plugins/wordpress/wordpress-event-page-plugin

or here:

http://wordpress.org/extend/plugins/event-page/

Our apologies for the delay in getting this new version out to you all.

http://i.imgur.com/lW6NL.jpg

It is my contention that we cannot whittle down the principles of web presence simply to an end result. Although more followers is the goal, do we not wish for our followers to have some concern for what they’re following. The purpose of social networking campaigns is to reach more people but when did this process become so diluted that we stopped caring about the content we’re asking our followers to relate to? Holding followship (fellowship) hostage may be a means to an end but stands to alienate followers as soon as they’ve clicked “follow”. This “blackmail” style web presence building is like saying, “I’ll scratch your itch if you scratch mine.” But are we simply relieving a short term itch and ignoring the rash that causes it?

1. No Index/No Follow (or lack of Index/Follow)

Search engines will eventually find your website (hopefully sooner than later and with frequency). Once a search engine has found your website it needs to be instructed what to do. Many web developers overlook this. In fact, in many of my old projects I did. It’s a common mistake to not properly set up your web pages’ meta tags. If you wish for your website to be indexed and you wish for every page of your website to be indexed make sure your web guy didn’t somehow leave a meta tag in the head of your web pages instructing search engines to not index and not follow your pages. If it’s there remove it. Replace it with an index and follow command.

How do I know if my web pages are set to be indexed or followed?

1. Go to your homepage in the browser of your choice
2. Right click on your page or go to your “View” menu at the top of your browser window or tool bar.
3. Select the option “Source”, “View Source” or “View Page Source”
4. Now you’re looking at a bunch of code you may not understand.
5. We’re looking for the meta tags which will fall between the head tags that look like this:

   <meta name="robots" content="index, follow" />

6. If you don’t see this line in the head of your web pages your web guy is a tool. Furthermore, if you see this meta tag…

   <meta name="robots" content="noindex, nofollow" />

   … fire him.

That was a bit harsh. Maybe don’t fire him (we all make mistakes). Gently ask him to set the meta tag to index/follow.

2. No homepage content

Your homepage is your landing page and your most important page of your site. It’s a page that should be visually pleasing and intuitive for your viewers. This usually means keep the text to a minimum. However, in terms of the weight of your pages, your homepage is probably your most respected page. It should be rich with keyword heavy text. Add text to your homepage but break it up with images. Maybe throw in a slider to place in rotating content that search engines will see but won’t need to be digested all at once by your user base.

3. Inline Styling

Inline styling is the use of styling commands directly on an HTML element in your web pages. Inline styling as a method of styling a document produces unnecessarily bulky HTML and makes the editing of styles across your site difficult and time consuming. If you wish to change the color of your links across your site and you end up getting billed for 2 hours worth of work your web guy is probably using inline styling methods. C’mon people. Stick with stylesheets.

How do I know if my site is using inline styling?

1. View the source of a page on your website again.
2. Look for code like this:

   style="width:100%;background:#000;padding:10px;font-size:12px;color:#fff;"

If you see this once or twice on your site breathe easy. If code like this exists on numerous pages and numerous times per page, your web guy is a tool.

4. Navigation Before Content

The natural flow of a website is to work top to bottom. Typically a header, horizontal navigation, the body of the page aside a sidebar and then the footer. It is temping to write the HTML for a website in this order as well. However if you place your navigation before your content it will be the first thing a search engine sees. This is a more esoteric point. We are all guilty of it in the web world but it is something that should be addressed. Your navigation should be placed in the footer and positioned (most likely absolutely) wherever you’d like it to reside on your pages. Notice the site your viewing now put the navigation first. However, this site (http://www.ternstyle.us/) does not.

Okay, for this one I won’t call your web guy a tool. For SEO purposes though, have him restructure your HTML.

5. Non-unique Page Titles

This one matters. Each page should have its own unique content. As well, it should have its own unique page titles. Every page on your site should not consist simply of your business or blog name. It should not carry just your tag line. Each page title should be tailored to the content presented on the page it is representing. You wouldn’t name your children George, George and George would you? Well maybe this guy would.

6. Wide Sites and Skinny Sites

The width of your site is very important. If it’s too skinny those of us with high resolution monitors will have to get real close to our desks to view it. If it’s too wide those of you who haven’t upgraded your browsers yet will have to scroll horizontally to view parts of the page. For instance, this site is too wide for monitors set to a resolution of 1024 x 768. Oops! I’m a tool. The optimum site width is 960px. It will suit most modern monitors (modern monitors,modern monitors,modern monitors…say that 10 times fast). 960 is divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16. Use it!

How do I know the width of my website?

Well firstly can you see it all without scrolling horizontally? Horizontal scrolling is a big no-no. Vertical is okay because these days most people have mouse wheels. there is no need to move the mouse to get more page. Horizontal scrolling is tedious. If you have to scroll horizontally redesign your site.

Unless you’re using a browser like Firefox with Firebug enabled or Safari with the Develop menu enabled it’ll be hard for you to determine the width of your pages. Each site will be styled differently. You can search through the CSS files for width commands or simply ask your web guy. Maybe he knows. Get creative. Take a screenshot and drop it in photoshop or something. Set your screen resolution to 1024 x 768 and see what happens. I trust you. You’ll figure it out.

More ways to determine if your web guy is a tool to come. For now I have to redo all my old work that taught me what to teach in these silly blog posts.

Check us out:

http://www.ternstyle.us/

With a new logo, a new layout and some fun technology integrated into the site we hope to make visits to our site a bit more intuitive and fun. Leave a comment and let us know what you think of the new design.

Here is the change log for the Members List plugin:
Click Here.

Here is the change log for the Automatic Youtube Video Posts Plugin:
Click Here.

Also I added some documentation on some additional helpful functions for the Automatic Youtube Video Posts Plugin:
Click Here.

My business relationships have been voluminous and share many things in common. The first thing these relationships have all shared is that everyone is busy. So the question becomes, “How can vendor and client move through their communication quickly with a high level of understanding in an effort to get to what is really important (the work)?”

Assume as little as possible

The busyness in business cries out for shortcuts. In communication shortcuts often mean a lot of assuming. Assuming someone understands you seems a quicker solution than taking the time to actually confirm it. Many times I think we get away with this. There have been a number of times I haven’t. A client asks for a task performed. I tell them what’s involved. I assume I understand what they want. They assume I understand what they want. They end up with something different than what they thought they asked for. We need another point of communication which takes longer than the first and a second round of tasks. Did we really take a shortcut?

Develop a lexicon

This responsibility will most likely fall on the shoulders of the web developer. You will have the most experience in the web world. You’re more familiar with key terms. Educating your clients and continually using proper industry terminology will help you in the long run. It is okay to remind your client that the “skinny gray area” of the page is actually the sidebar. Don’t let the terms you use remain gray areas. In the event that a client can’t seem to adhere to an industry term remember that the most important thing is that you use the same term to describe the same thing. Be flexible. Use their term if you need to.

Document processes for bug reporting

When developing any online application or really any web based process that requires scripting there will be bugs. The library of code an application uses is often so interwoven that a change in one corner of your application will change and/or break another corner. As a client you will find bugs in your applications. The way you interact with your website will be very different than the way your web developer does. The less internet savvy you are the larger that gap becomes. You may need to report a bug at some point. The way you do this is crucial to its speedy resolution.

At times bugs present themselves in very specific ways. A click before drag and then a refresh may throw an error that a double click before a drag and refresh does not. When reporting a bug it is important for a web developer to know even the most minute details about how the bug presented. If a programmer can’t reproduce the bug he may not be able to fix it.

Clients, document your processes. It may be tedious work when you’re doing it but this is your best chance if you want your issue resolved and resolved quickly.

Take notes and save emails

This one is a simple one but you see how it makes sense. As a client or a vendor I’m sure you remember a time when you couldn’t recall something that was said in a meeting. Why force another point of contact? Keep your notes neat and your emails archived.

In summary:

There are many more things you could do to improve your communication with your clients or vendors. I think it is paramount just simply to have its efficiency be a part of your thought life. Considering ways to make your working relationships work better will most likely make it happen extemporaneously on some level.