There is a ton of competition out there in the low end web design market. Instant web sites, web site tonight, site ground sites, the list goes on and on. In many ways this is a great thing for the consumer that is wanting to get a web site up and running without working with a professional designer. If you have some knowledge about HTML, CSS and PHP, and the ability to edit photographs - then you will likely be able to create something that has some style and represents who you are. What you won't get ... as much as they try to tell you otherwise ... is custom web design. 

Yesterday I was looking at the site of a fairly well known 'marketing and self-publishing guru.' As soon as I arrived at the site I knew where he had gotten the template for the site, for free. He bills himself as a highly effective seller of 'high end' products, and yet he created a website from an easily recognizable theme - one used on literally thousands of other web sites - added a stuck on logo in the header, and called it a day. And sometimes - there is nothing wrong with that. Maybe all you need is to get yourself out there at the most simple level, or maybe you don't think that you have enough money to work with a professional designer. I understand. 

And I have a very simple question - how much is your time worth? The one night web solutions ... aren't. The average person will spend 20-30 hours putting together a site that is billed to take 2 hours. What you will learn as soon as you begin working on the on-line interface is that only certain aspects of the site are editable and that in order to actually get things to line up and look the way you want them too, you have to spend a lot of time figuring out how to game the system. And as far as custom graphics, imagery and style that reflect your brand identity or match your logo, there are none. 

Many of us tackle a problem by saying that we want to just plow through it. I am certainly guilty of the 'ready, fire, aim' approach sometimes.  The reality is that taking some time up front to talk with a professional designer and web developer before starting your engine can save you A LOT of time and A LOT of money in the long run. 

I can help you get started and build something that works and is ready to expand and grow as your business grows. I will work with you as a collaborator. Most of the sites I build these days are made to be managed by the client.  Let me help you get the custom look that you want - and THEN you can have control over your creation and use your valuable time and energy to add to the impact of your site with fresh content - rather than mediocre design.

Give me a call to get started. H2O Marketing - 413-241-7119 - Web design, marketing and graphics with a purpose. 

… the Golden Section that is. If you have never encountered this concept in the past, you have certainly seen it in action. The  Golden Section is a ratio (specifically 1 : 1.61803398874989) that has deep roots in math [the Fibonacci sequence], art and nature. It is a naturally recurring pattern - nearly everywhere. From the chambers in a chambered nautilus to the pattern of seeds on the head of a sunflower to the way that corn forms on a corn cob, or the way a pine cone grows.  It is also called the Divine Proportion. DaVinci used it on the Last Supper, le Corbusier used it as the basic proportion for many of his most famous buildings, the Parthenon and the Great Pyramids use the ratio to attain balance and pleasing, stable  structure.

Since very early in the history of human thought and language, the golden section has been used to create designs that are balanced and naturally pleasing to the human eye. You have seen these patterns … but may not have known about the underlying structure that informs the design.  The ratio creates a spiral pattern when mapped over itself - and this spiral is common in nature. So what does this have to do with web design? Though it may seem counterintuitive, using a natural ratio as the foundation for a web grid structure makes good sense. The Golden Section is a natural place to start when creating an underlying structure (or grid) for a web page. If you base your layout on a clear grid -  the design will naturally make sense to look at. In very practical terms - start with a square of any dimension, say 600px. To create your width and height based on the golden section; multiply by 1.618 (970px) then subtract the original dimension to get your secondary width (370px). This may sound like an odd dimension - but many designs are being based on this kind of proportionality. Let’s look at a couple of examples.

Wordpress - one of the most popular platforms for blogs - and increasingly a standard for light Content Management Systems - has a whole array of themes, especially 3 column themes, that have a golden grid as their foundation. These themes just seem to look right, even if we can’t explain why.

The Disney website is very 'busy' and yet there is still a clear grid structure supporting the curves and rectangles.

Go to  Disney, and you will notice immediately the overall ratio of width to height is nearly perfect for a golden section … then look deeper into the design and start to see more golden rectangles showing up in the main video window, in the small imagery at the bottom of the page, and even in the XD logo on the left hand side. Did they do this consciously? Probably not. My guess would be that the designers charged with this huge site naturally think in proportions that line up with the golden section. You and I have been raised to view this proportion as natural and ‘right’.

Coke also uses a layered design of proportioned rectangles.

Now let’s take a look at the Coke web site - we see again the same basic dimensionality built into the site, and built into the smaller sections displayed on the site.  One of the beautiful things we can learn from the Fibonacci’s and from the golden section is a lesson in hierarchy. A layered web design, with sections that build on the smaller sections and multiple points of overlap, will hold our interest longer than a straight layout that looks like a long string of words on a page. So in your next design - go for the gold. And if you are ready to have a team step in and give you the assistance you need to create a functional and beautiful web site - call me at H2O Marketing - 413 241 7119.

You’re a D.I.Y. master, right? You’re building your own web page using tools that are readily available on the web for very little cost. Great. You’ve collected pictures, you’ve written text, you’ve even gotten out some markers and made sketches on a page. You know how many pages you want and how the navigation will work (check back for another post about effective navigation). Everything is going so well.

And then you start this new and strange process of ‘coding’ your web site. One of the things you notice immediately is that all the wonderful fonts that you want to work with don’t seem to be available. Web fonts and web typography are vastly different than traditional print typography. With the web you are not creating a static object that everyone will view the same way. You are actually creating a recipe. You are putting all the ingredients into small containers, writing all the instructions onto a page and then handing them off to someone else (or someone else’s web browser) to create your dish.

The web browser is the all powerful chef in the kitchen. What you intend to create can only be as palatable as the chef who makes it. And there are a bunch of chefs out there.

Common Browers and the percentages of people who use them:

Internet Explorer (66.82%)

Mozilla Firefox (22.05%)

Safari (8.23%)

Google Chrome (1.23%)

Opera (0.70%)

Other (0.97%)

[http://en.wikipedia.org/wiki/Comparison_of_web_browsers]

To complicate matters more, there are multiple versions of these browsers in common use. And they will all interpret your web page recipe in a slightly different way. And the computer on which these browsers are running will also impact the way they are viewed. And so we come back to fonts - the size and font face displayed when viewing a web page will depend on the Browser, the Computer and the Code.

Why can’t I use all my fonts to build my web page?

If you assign a font to your HTML document that looks really cool on your screen, it is vastly unlikely that someone viewing your page on another computer will have it installed. On their browser, a basic font will be substituted. Probably Arial or Times New Roman.

Here is a list of the basic font faces that are available on the majority of computer systems, both MAC and PC:

The fonts that are most safe to use are:

• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier

Other options that usually work cross-platform are:

• Palatino
• Garamond
• Bookman
• Avant Garde

Fonts that work on Windows and MacOS but not UNIX / Linux are:

• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• Impact

When building web pages, these fonts are generally grouped into “Font Families”, so that if one of the options is not available, the browser will pick the next font in the list. The list of web safe font families is:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

If you use any other fonts in your HTML code - you are likely to run into problems. So using our handy chef and recipe analogy - you have a pretty short list of ingredients that you can assume most cooks will keep in the kitchen. If you specify a red curry powder only available at the Indian specialty store on the corner of E.28^th and Lexington Ave., most people will choose another recipe … and you will be out of luck (or out of a new reader, a new client, or a new consumer!)

How come I see interesting fonts on other sites?

Great question. Here is the trick - you can use graphics to do all sorts of fascinating things on your page. Using the tools of the trade, like Gimp, Photoshop or Fireworks, you can create complicated graphics and text applications and then build them in to your site. All the bells and whistles are normally in the application of graphics and more advanced methods of styling, like CSS (Cascading Style Sheets).

So now you’ve got it figured out - you can use graphics to build your site and get exactly the fonts you want! Well, not really. These graphics are more like pictures of your fancy ingredients, rather than the ingredients themselves. The computer chef can show you what they look like, but they have no flavor.

The Down Side: Creating pages that are heavy in graphics and light on actual screen rendered text using default fonts will make it hard for search engines like Google to “read” and index your page. As a result you may not appear in search results the way you want to. This also applies to how your page may show up (or NOT show up) on today’s generation of Smart Phones, which rely on rendered text and will often skip graphics.

A comparison: Here is the same page shown on one hand with the fully displayed graphic elements and on the other with only the screen rendered text and no graphics. You can see how this could cause problems if you are hoping to be seen on search engines. Pretty bland, eh?

Most of the commonly available online D.I.Y. web site builders allow only a small amount of customization to the structure of the page. They do provide a wide number of templates to assist you in building a site, but the options are very limited in what you can change in terms of graphic interest or font treatments. They rely on the standard font families to make building the pages fast and relatively simple. (imagine your run of the mill generic Mac&Cheese)

So how do I create a professional looking site with such simple fonts?

By strategically using graphics and rendered text to create a hybrid that works! This is the winning combination that will get you a beautiful web site that ALSO works for you on the search engines. A truly custom web site that reflects your unique value proposition is not a one night job. The decision making process that you will need to engage is a series of trade-offs. How many ’secret ingredients’ and how many regular cupboard ingredients do you want to use?

If your goal is a dynamic, unique and professional web site, take the time to learn about combining graphics, typography and images that will give your customers a good first impression, and generate sales.I can help you get started on the right path - or I can handle the whole thing for you!

• You will get great design work.
• You will likely have a clearer understanding of what you do and why you do it.
• You will feel connected to the work you do or you will know how your work needs to change in order to fit who you are as an individual or a company.
• You will experience the benefit of working with a designer committed to helping you fulfill your company's mission and purpose.
• If you don't have a mission or purpose ... you'll have the tools you need to create one.

I spent 3 days last week at Stanford University in the Graduate School of Business. Yea, me, sporting the MBA. I didn't actually get an MBA - but I participated in an intensive 3 day program called "Integrating Mission and Strategy for Non-Profit Organizations" - which we were told was about 1/2 of an MBA for Non-Profits, except with better buffet food. 

The course leaders were Jim Phills and Chip Heath - two incredibly smart guys who play off each other in the classroom like a couple of characters from a buddy movie. They teach leaders in social innovation how to put forward the most compelling and psychologically impactful messages - and how to formulate, refine and STICK to strategies. They teach at the Stanford School of Business, so why is it that they both have Doctorates in Psychology?