Happy perusing.

Note: This following page has a PageRank of 3.
Float vs. Inline-Block

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.

Make sure your and your staff’s visits to your website aren’t skewing your numbers.

We take pride in our work and in our businesses’ ever diligent cyber tenticles we call our websites. They are the facets of our businesses that when called upon reach out over great lengths to bring in leads and customers. As our websites need constant care to survive, we update them, alter them, improve them and visit them often. If we’re doing our jobs we probably visit them more often than anyone else.

We visit them. Our staff visits them. Our marketing teams visit them. Our moms visit them! None of these visits help us determine how our websites are performing. It is important that we make sure our analytics software is able to filter us out of its reports. I’m not well versed in many different forms of analytics but I know that Google allows us to do this by I.P. address. It is important to have some level of filtering in place in any situation where we are collecting website usage statistics.

If you’re using Google Analytics read here: http://www.google.com/support/googleanalytics/bin/topic.py?topic=11091

In the event that you have a dynamic I.P. address that you can’t filter using your analytics software’s various filtering methods you’ll need to get creative. You could use query strings in conjunction with conditional statements when visiting your pages which is a brutish solution but one nonetheless. If using a content management system you could make sure to always be logged in and use a plugin that removes the tracking code for your account. Be creative.

Happy analyizing.

Both of these methods have their flaws and quirks which present themselves uniquely in different browsers. Aside from efficiency we’ll also have to take into consideration browser compatibility. These are the two standpoints from which I’ll explore the two very contrasting methodologies.

The Float

The first thing we should know about floating elements is why this method was invented in the first place. The original concept of the float was for text-wrapping. The idea was to take a block level element, such as an image, and set it to justify to the left or right respectively while allowing text to wrap around it. Its application, although very effective as a means for rendering an entire document of elements, is a bastardization of its original intention. You say, “Who cares?” Well, as a result of the aforementioned bastardization there are precautions that must be taken to make sure that a page is rendered properly visually when using floats this way.

The main issue presented by floating elements is that a floated element is not automatically recognized by its containing parent element. In my opinion this was a flaw in its application from the get-go. Regardless as to the element being floated its parent element’s size should change accordingly to accommodate the floated element. It does not (without some trickery).

The second and daunting issue with floats is that you can’t center floated items. So if you have a list where you’d like the items centered in your document and you’ve floated the list’s items you’d need to set a width to the list to be able to center it properly. This means no more purely dynamic list. Whenever you add or subtract an item you’ll need to update the width of the list to make sure it stays centered. For this I don’t like floats for anything centered.

Notice below that the parent element with a 3 pixel border does not properly resize to envelope its child which is 200 pixel in height.

The float everything method

This method is fairly self explanatory. For some reason a  floated parent recognizes the size of its children who are also floated. I find this to be a week option but one I employed myself for quite some time. Look back at some of my old sites and have a giggle. This method requires making sure most of your elements are floated which means a lot more CSS. I recommend against this method. One of its main issues is the addition of plugins or add-ons which use their own CSS or the minute styling details you’ll need to delve into when adding things inline with content. And don’t get me started on how fun this becomes when your talking about forms and form elements and how poorly they’ll begin to play with others. Move on from this method.

The clear fix

The “clear fix” is probably the most widely used solution to the float issue and is being employed in the above example to ensure that this text does not sit directly under the seemingly empty parent container. CSS has a command entitled “clear”. The clear command when applied to an element forces that element to be rendered under floated elements which float matching the associated value. The above example uses the command “clear:left;”. This command will make the element it is applied to clear any element rendered in its path that is floated to the left. Other values include “right”,”none” and “both”.

The clear fix is clunky. You need extra html mark-up placed in your code wherever something is floated. It’s just plain inelegant but it works. The following code does the trick:

<div class="non-floated-parent">
     <div class="floated-child">
          This is a floated element which is floated to the
          left and has a parent element with a 3 pixel border.
     </div>
     <br style="clear: left;" />
</div>

The overflow method

The overflow method is the most elegant solution. It’s pure CSS. There is no need for extra mark-up. No need to alter your templates or HTML. However, you still need to add a few lines of CSS to any element which is not floated and has floated children. This method consists of adding a CSS width and overflow attribute to the containing element. Like so:

.parent {
     overflow:hidden;
     width:100%
     border:3px solid #333;
}

The child can then be set up like so:

.child {
     float:left;
     width:200px;
     height:200px;
     background:#ccc;
}

The above code will produce this:

This method requires a minimum of one CSS command be applied to each or a group of parent element(s). I like this one the best so far in terms of floating elements.

Articles to read on floats:

• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://www.quirksmode.org/css/clearing.html
• http://www.positioniseverything.net/easyclearing.html

The Inline-Block

The inline-block method is just as quirky (maybe quirkier) as the float method and requires its own work-arounds. Firstly, Internet Explorer 7.x and earlier does not care to treat an inline-block element as an inline element. It only assigns it block level status. This means that just like a block level element inline-blocks are rendered on their own lines regardless as to the space they consume on the horizontal plain. This requires you to use conditional CSS commands to reset anything set as an inline-block which needs to actually be rendered inline as simply “inline”.

Also, vertical alignment at times becomes an issue with inline-blocks. So you’ll need to account for this by using the CSS command “vertical-align”. Lastly and probably the most daunting issue with inline-blocks is that when they align themselves they recognize whitespace such as a carriage return or a tab character in the actual html mark-up as an inline element and depending on your font-size (because yes your font-sizes are applied to whitespace) you’ll see space between things like list elements which you’re attempting to render on one line butted up against each other. There are solutions for all of these things.

Here is a menu styled using the inline block method:

Notice that if you’re using IE 7 or earlier the list items are rendered on their own lines. If you’re not using IE7 or earlier but wish to see what it would look like, it looks like this:

• List Item 1
• List Item 2
• List Item 3

The IE 7.x and earlier issue

The way I resolve this is with conditional stylesheets. You can read about that here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/.

More often than not I am using the float or inline-block element for either my columns or my navigational lists. Here is the code I would use for my lists for all non-IE7 and earlier browsers:

ul, li { display:inline-block;margin:0;padding:0;list-style:none; }

This will set up your lists nicely for you to style them individually throughout your pages. Here is what the CSS should look like in your conditional style-sheet:

ul, li { display:inline; }

Thats all you need to fix the IE 7.x and earlier issue. I use conditional stylesheets anyway because I prefer to use CSS for my png’s over javascript.

The Vertical Alignment Issue

Take a look at this menu with mixed heights:

• List Item 1
• List Item 2
• List Item 3

Notice that the vertical plain the items are rendered in is set by the text inside the list items. The text is rendered inline with all the other text. This is an issue when setting up columns in a document as inline-blocks. You can float three divs next to each other and they’ll be rendered with the very tops of themselves as high as they’re able to go. This is not so with inline-blocks. With inline-blocks the text is respected more so than the containing element.

To fix this I use this code:

.ul, .li { vertical-align:top; }

Or so that I don’t need to set this multiple times for all elements which require it I’ll use this command which set everything to be aligned this way:

* { vertical-align:top; }

This code will make the above menu look like this:

• List Item 1
• List Item 2
• List Item 3

You like? Well we still have the pesky space between the items to deal with.

The Spacing Issue

This one is no fun at all and may make you abandon the inline-block method and stick to the float method. I’m okay with that. Do what you’re comfortable with.

Okay, let’s remember that the issue at hand is the recognition of the whitespace characters like carriage returns and tabs in your actual mark-up between your elements you’re attempting to block together. The first thing you could do is simply remove the whitespace.

Our menu to be easily readable and editable looks like this:

<ul>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List Item 3</li>
</ul>

To alleviate this issue right away we can write the code like this:

<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>

See below for what happens when you remove the whitespace:

• List Item 1
• List Item 2
• List Item 3

Nice! With one major exception. We can’t always do this. If you’re using a content management system or any code that renders certain aspects of your HTML for you you may not be able to effectively remove all that whitespace. Now what?

Well, remember your browser sees that whitespace as text so it is assigning a font-size to it. Let’s see what happens when we set the ul’s font-size to zero:

• List Item 1
• List Item 2
• List Item 3

That works great! Except now we are unable to see the text inside the list items. So If we want to set the font-size to zero we need to do this to the parent element (the ul) and then reset the text of the list items back to what we want them to be. That’s a lot more CSS if we weren’t already specifying the font-size for the list items or any links they may parent. This method, although effective, sucks! If you’re using inline-blocks though it may become necessary.

There are some other tactics to circumvent the spacing issue like setting negative margins. The best way is to remove the whitespace. If you can’t do that it’ll take a few font-size command to set you straight.

Articles to read on Inline-Blocks

• http://www.quirksmode.org/css/display.html
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/

Float vs. Inline-block Chart

In Summary

Each method has its own symptoms and repercussions. There are solutions to all the problems that both of these methods produce. Some of the solutions are actual solutions and others are work arounds. It seems to make the most sense to not adhere strongly to one method and use them in situations that call for them. How do you know which situation calls for which method? Use the one where you can employ actual pure CSS solutions instead of work arounds. Don’t lose the dynamics of your pages by having to update the CSS every time you need to make a change.

For instance, I’ll use floats for images (their original intention) and when dealing with areas of pages with fixed heights. A fixed height means no need for a clear fix. I’ll use inline-blocks for template columns. Columns are a part of the template that aren’t usually dynamically driven so it’s easy to remove whitespace between the column elements. For menus and navigation inline-blocks work great for vertically aligned lists and with the vertical-align and font-size fixes are great for horizontal menus that are center aligned. Usually horizontal navigation has a fixed height so floats are okay. However, and a big however, if you’re dynamically generating your horizontal menus and floating the items right they’ll be rendered in reverse order. In which case, I’ll usually use inline-blocks for right justified horizontal navigation or really any navigation where I don’t care if there is a little space between the elements.

First and foremost, write efficient compact code in whatever way makes you happy, comfortable or suits your compulsions. I know I do. Happy codings.

When Doug contacted me I wasn’t even aware of his position in the community here in Bethlehem, PA. Now that the site is launched, the new year has arrived and budgets have rolled over it’ll be time to catch one of Mock Turtle’s shows which are run primarily out of the Charles Brown Ice House just over the Lehigh on the north side of Bethlehem. Visit the various schedules on Mock Turtle’s site to see when you can come out and see a show.

Visit the site here:
MockTurtle.org

Let me know if you enjoy the design. The puppets on the homepage slider are my favorite part.

Thanks for visiting,
~ matthew

I just want to say great plugins. I love the way you think and as soon as I make some money i will send you donations (i’m broke) I wish you all the best and hope all your wants and wishes come true.
sincerly,
Steve

Thank you Steve. Your gratitude does not go unappreciated. I don’t care that you don’t have money to donate; just thank you for using my plugins. I am glad they are a help to you. Oh, and I like the way I think as well.

Well enough is enough. I had to take some of that time and attempt to spruce up my site a bit. Ternstyle now has a shinier face. Many of the components of the new layout were take from the previous more simplistic design but now the look is a bit glossier. Also, I moved to a 3 column layout to accommodate various social networking plugins. Make use of them! Join me on Facebook, Twitter or just subscribe to my RSS feed. Every now and then I have something to say you’ll find worthwhile.