Clearing Floats – A Better Solution

October 30th, 2009

I’m sure all web designers have come across a really annoying problem with multiple  <div> columns that float.

The Problem:

If you have a 2 column layout and one <div> has “float: left;” and the other “float: right;”, the containing <div> tag is not going to expand beyond those 2 floating <div> tags. The old solution was to put a new <div> tag under those columns, with the CSS rule of “clear: all”. So you would end up with the following code:

<div id=”container”>

<div id=”column_left”>Content</div>

<div id=”column_right”>Content</div>

<div class=”float_clear”></div>

</div>

#container {
border: 1px solid #000000;
}

#column_left {
float: left;
}

#column_right {
float: right;
}

.float_clear {
clear: both;
}

Although this works just fine and dandy, the main issue with it is that it creates extra unwanted HTML markup. Well the good news is that a better solution has since emerged. Instead of using the float_clear tag, replace your #container CSS with the following:

#container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}

This results in the same outcome as using the <div class=”float_clear”></div> markup and clear: both; CSS.

Brilliant!

mark development

why have more than one website?

October 29th, 2009

If you have a website that attempts to pitch or present too many unrelated products or services, put some thought into separating these out into micro-sites. (A micro site is just a smaller website that focuses on a few products / services)

Remember, a website is for it’s visitors, not for the person that owns it (I harp on about this quite a lot).

intelligent grouping is the key to successful websites

intelligent grouping is the key to successful websites

A website devoted to one (or a few very closely related) products or services can sometimes be a far more powerful selling environment then one that over diversifies.

A website focusing on a smaller category of products or services will give the following advantages:

Customers are more likely to find the information specifically relevant to them

Focused products/services websites allows you to create content and branding appropriate to that item. You can often end up with conflicting messages when you are trying to sell to many things.

In creating sites dedicated to a smaller group of subjects, it will be obvious where the gaps in your sales supporting content are. These can be missed in larger sites.

You have just a few seconds to convince a visitor they are in the right place. If your site doesn’t focus on the things that are important to them and communicate this quickly, you can bet your pet monkey that the next site in the Google listings will.

I have used this tactic very successfully for many years, and unlike many trends on the internet it is timeless as a concept. At the time of writing we launched another micro site for a business today.

This tactic is fiendishly valuable when you are using Pay Per Click marketing to promote the sale of a product or service. If you have ever researched the concept of landing pages, I guess you could consider using focused micro sites as the logical and ultimate extension of this.

OF COURSE this tactic will not suit all.

If you are heading down the organic route, you’ll probably find there is a stronger case to create one larger more powerful website.

Photos courtesy of Flickr Creative Commons license from users L.Marie

thomas marketing

increase website conversion rate by considering customers

October 28th, 2009

We often tell clients, “we don’t build websites for you, we build them for your customers”. In effect, you are not our customers, your customers are (you just get to pay the bill! – doesn’t life stink sometimes).

If you can think of your website as not yours, then you’re off to a great start.

consider the "wants" of your visitors

consider the "wants" of your visitors

Customers are selfish creatures, all they care about is themselves and their own needs! With this in mind, structure your information and wording to talk directly to the needs and wants of the customer.

Example:

“Edge of the Web have a combined 30 years experience in building websites for our customers. We have worked with clients ranging from internationals to one man bands.”

_____________

Boring huh?

How about:

You need a website that communicates effectively, enhances your image and most importantly gives your potential customers the confidence to pick up the phone. Edge of the Web can help you achieve this.

_____________

OK so maybe that’s not perfect either, but I’m sure you agree it’s far more relevant and compelling to a first time website visitor right?

I suggest you go through your own website (or proposed text) and look for every instance of the word “we” or “us” or “our” or “I” or your company name, and consider how this could be turned into a statement of benefit for your customers.

Note: Your “about us” page is the place to let rip with the “we” and “our” sentences.

Think also about the information architecture of your website, and particularly your navigation bar layout.

How many times do you see websites with a navigation bar structured along these lines:

Home | About Us | Our Approach | Products/Services | Contact Us

Once again, this is a very self centric structure that is very unlikely to appeal to your customers, both in terms of the order of the items, and the language used. Try to position the elements in order of priority to your customer.

With that in mind I’d strongly recommend you bring your product or service to the fore and move all the information about yourselves to the back of the queue. In the scenario above I would suggest:

Home | Products/Services | Approach | About Us | Contact

It’s more succinct, and certainly more relevant.

NOT CONVINCED?

Well consider this: When you go looking for a product or service on the internet, do you start by looking for a company that impresses you and then figuring out whether what they are selling satisfies your requirements?

I doubt it.

Most people want to identify whether you tick the purchase boxes first, and only then they will start researching whether they consider you to be trustworthy, experienced, ethical, friendly, etc etc etc.

Of course this advice does not apply literally to every single instance of a website in the world, but I’ll bet it applies to you!

Photos courtesy of Flickr Creative Commons license from users amylynne

thomas marketing

Kittens

October 28th, 2009

How would you tell it?

a.) “KittenCo have been established kitten breeders since 4000BC when we supplied Cleopatra with a tortoiseshell that wouldn’t scratch the sarcophagi.”

b.) “Clawless kittens for sale”

c.) “You can have the adorable kitten you’ve always wanted without fear of nasty scratches! For fluffy balls of fun that can’t damage your family or your furniture, nothing comes close to a KittenCo kitten of your very own to love!”

If you answered a then you’re falling into the most common trap of company websites – talking about yourself and not your customer. Visitors want to know what you can do for them, save your history for your About Us page, that’s where it belongs.

If you answered b I’m sure your honesty will be appreciated, but it’s not exactly a persuasive sell – which is probably not so bad with kittens, but trying to sell industrial ovens that way isn’t likely to be successful (they aren’t so fluffy and cute).

If you answered c then congratulations! That’s probably the best way to go about clawless-kitten-selling. Let your customer know exactly why THEY will benefit from your product and your company. Your homepage needs to focus on your customer, place the emphasis on their needs first and then explain how their needs will be utterly exceeded by using your awesome product or services.

hannah copy writing, marketing

choosing email addresses for my business

October 26th, 2009

To be clear, this post is about choosing email prefixes, not the domain name itself. A prefix is the bit that comes before @ in your email address. Examples include sales@mydomain.com, enquiries@mydomain.com, yourname@mydomain.com. This is particularly relevant to small business owners.

First lets look at personal domain prefixes.

choose your email address wisely

choose your email address wisely

There are 3 common variants on your name for an email address.

thomas.valaitis@
This is quite a formal arrangement. If you have an unusual surname (like mine!) it can be confusing to relay to people by phone, and to an extent is also prone to misspellings when people have your business card in front of them. It can however suggest that you are part of a larger organisation where you may not be the only thomas@ or tom@ or even thomasv@. I would recommend this arrangement where size and formality are of importance to you (though I am never a fan of talking up your size).

tvalaitis@
/ thomasv@

This implies a touch less formality than the previous example, but is not as

casual (or size indicative) as a simple first name approach. For my own business email address I tend to use a “thomasv@” email address (it’s a nice compromise for somebody with a complicated surname).

thomas@
Clearly this is a more casual email address prefix, which is great if you are proud of your small company size and expect to remain the only Thomas. The biggest advantage to a shorter email prefix is that it’s easy to remember (unless you also have a crazy first name!) and could be considered more personal.

Whichever email prefix you go for, it’s a really good idea to have all the other variations and common misspellings of your name set up as email forwarders to your main account. This ensures you do not miss any important mails. As an example I forward the following to my thomasv@ pop3 account:

tvalaitis@
tomv@
tom@
thomas@
valaitis@
thomas.valaitis@
t.valaitis@
tom.valaitis@
tomvalaitis@

So having identified which personal domain prefix you are going to adopt, you also need to think about domain prefixes for your business at large.

Common examples include
sales@
enquiries@
info@
complaints@
support@

In my businesses, I tend to have an “enquiries@” and an “info@” email address. The “enquiries” I have set up to handle the enquiries that come to us online, and info I use for clients who already have made contact.

I have them both set up as group forwarding emails, which means I pick the members of the respective teams to which these emails arrive.

Example:

I may have enquiries@ directed to the guys in my businesses that are good at selling and building relationships (the people whom I want to handle the sales calls).

I tend to use the email addresses prefixes purely as forwarders, as once a potential customer makes contact, I like them to have a personal email address (i.e. person = face = trust = accountability) to receive from and reply to for all future contact.

The info@ email address is a useful account to have so I may get customers to send in information that I want a number of people (or the whole team) to have access to. We tend not to promote this account on the website or business stationary.

For small businsses I wouldn’t recommend kicking off with too many email addresses as this can be confusing for customers (and you), and you can potentially lose control of what is pointing where (and are they being picked up).

If you would like more information on picking your email address prefixes I can be contacted at:
mrthomasvalaitiswhositsattheblackdeskbythewindowjustinfrontoftheprinter.iwishicouldtakemyownmedicine@edgeoftheweb.co.uk

Photos courtesy of Flickr Creative Commons license from users derrickkwa

thomas random , ,

sticking to a common theme

October 26th, 2009

there's nothing like Christmas in July

there's nothing like Christmas in July

Have you ever visited a friend’s house and admired their living room with modern furniture; leather sofa, glass table, cosy fireplace, and feature wall. Suddenly you notice the HUGE Jon Bon Jovi poster hung in the corner with torn edges curling up, the Christmas tree next to the lamp even though its the middle of summer, and the life-size cardboard cut-out of David Beckham leaning against the television. All of a sudden this beautiful, modern room has turned rather tacky.

Think of your website as a living room, its important to stick to a common theme in the design. The use of a modern fonts, crisp colours, and subtle drop shadows can all go to waste if you’re faced with a huge header image not using a similar theme. If you cannot produce well taken photography it might be worth looking into stock photographs for better images that are more suited to the overall design and theme of your website while portraying your business in the right light.

And nobody wants to see a Christmas tree in summer (unless you’re in Australia of course).

Photos courtesy of Flickr Creative Commons license from users We Are CS

bhups design

the best way to plan a website, a wireframe!

October 23rd, 2009

One of the most important (scratch that…THE most important) aspects of building a website is to construct a wireframe.

What is a wireframe?

"put the meat on the bones"

"put the meat on the bones"

A wireframe is in essence the skeleton of your website. As my old history teacher would say, once you have the skeleton, you can start to put the meat on the bones. Too many web designers just start throwing lumps of flesh around and whilst you may be able to make pretty websites like this, they will likely have very little structure.

A wireframe contains no pictures, and usually no body text either. Once you start puzzling over colours, images and wording, you can totally lose the plot with a wireframe.

So a wireframe is a blueprint of how a site will be laid out, and where your links will be placed, and where important elements of each page will be structured. The point of the wireframe is to create a structure that focuses on how you want information to flow through your site and how you want your website visitors to travel from one page (or piece of information) to the next.

If you can be disciplined enough to construct a wireframe, you’ll find that the design and wording fall into place much more quickly later on, and most importantly your site will become a ruthless selling machine. After all, there’s nothing worse than visiting a website that provides a service you would like, but you just can’t figure out how to get in touch, or enquire, or find the next piece of info right~?

The biggest problem for a web design company in using a wireframe model to correctly plan a website, is that it can be a little under-whelming for the customer. The exciting bit is seeing your website come to life with imagery and colour and content. We understand that’s when the project starts to feel reel and everyone can get on board. Sometimes I can see the disappointment in a clients face when we present a text-less, colourless, image-less model of their website. It’s a particularly brave thing to do for a web design company when pitching for new business, but time and time again we’ve proved it’s the only way to build a site of any substance.

Note: the larger your website and more complex your proposition, the more important a wireframe becomes.

So before you whip out that colour wheel and start looking for metaphoric pictures of seedlings, take a while to plan your site. Sure it’s dull, but the benefits are profound.

Photos courtesy of Flickr Creative Commons license from users METROgrl

thomas marketing

Do It Yourself!

October 19th, 2009

There are plenty of options out there to “build your own website”, some obviously better than others, but is it a good idea?

Well first off, it will probably save you some money up front and in some cases web builders are free. So it may seem an appealing way to get your self an online presence. But beware, there are a few drawbacks.

Firstly they will almost certainly be template driven, so don’t expect your site to be unique and one of a kind. Sure you’ll probably be able to add your own logo, but the layouts, colour schemes and pictures will more than likely be predefined. Secondly the code that the builder produces may well be very “un-search engine friendly”. If you want  your site to get to the top of Google then taking this route will not be your best option. The site builder may produce nests and nests of code that Google will dismiss and not list your site. The problem is that if this is the case Google may not continue crawling your site and it could take a long time for you even to appear on their listings. Also bear in mind  the disability act. Your site should comply with guidelines setup by the W3C, so people who are visually impaired can still navigate around your site using screen readers. The use of a site builder may not take this into consideration.

So to sum it up, although it might be an appealing option to use a site builder, there are some things to take into consideration. At the end of the day, the best way to build a website is from the ground up, with neat hand-built code. Which of course is all that us folks at Edge of the Web do! :)

mark development

Funny

October 15th, 2009

Being a stand-up is hard. I mean really, ego-crushingly, brutally hard.

Everyone who makes a success out of being funny first has to endure years upon years of empty venues, drunken hecklers, flat audiences and the awful pain of a punchline greeted with silence.

And most of the people who go through that never make it any further.

So if you want your content to be informal and entertaining – go for it. But remember, this is a business, not a stand-up routine.

A website is your opportunity to speak out to customers and clients all over the world.

The last thing you want it to be greeted with is deafening silence.

hannah copy writing

making a good first impression

October 13th, 2009

Have you ever been speed dating? Here are some useful tips you may wish to consider:

  • Remember, you are not the only option for each potential mate
  • If you look a mess, you’re going home alone
  • If you don’t have anything interesting to say, you’re going home alone

    speed date your way to success

    speed date your way to success

  • If you do have something interesting to say, but don’t say it quickly…you’re still going home alone
  • If you don’t differentiate yourself, you’re going home alone
  • If you aren’t memorable, you’re going home alone
  • It’s not possible to be attractive to everybody (unless you’re the Fonz or Alba), so don’t try. Be proud of who you are.
  • If you pretend to be something you’re not, you’ll get found out eventually (but you may not go home alone that night)
  • If you only talk about yourself, you’re going home alone

Think of a search engine as a speed date.

A speed date offers you a number of very brief opportunities to connect with people looking for something you wish to provide.

Your customers are of course potential mates, and your website is you!

Now revisit the above list and look at what’s letting you down. The same rules of engagement apply.

Photos courtesy of Flickr Creative Commons license from users Urban Mixer

thomas marketing

Privacy Policy | Terms of Use