the markITeer

Archive for the ‘walking the walk’ Category

5 minute guide to HTML for marketeers

Posted by the markITeer on September 20, 2007

5 minute guideNow that marketeers earn more and more control over ‘their’ content using all sorts of content management systems (CMS) going from simple blogs to complicated website maintenance tools, they also get confronted more often with the technical side of things. And although the solution builders are trying their best to shield you from all that using fancy what-you-see-is-what-you-get (WYSIWYG) editors, there will be a point where you will have to get your hands dirty and write some basic HTML code in order to make your content look exactly like you had it in mind.

So here it goes… the 5 minute guide to HTML for marketeers.


First things first: What is HTML?
HTML is short for HyperText Markup Language : it’s a language in which you can define the markup of your content on the web. It’s the basic language every page on every website is build upon. To take the test: go select ‘view source’ from your browser’s ‘view’ menu now, and you will see the HTML code of this page.

The nice thing of HTML is that it is human readable! It’s all just plain text! If you scroll down a bit in the source code of this page, you will find that all this text can be found in the code! The difference is however that the code contains more than just the visible text of the webpage: it also contains how this text should be displayed. This is done using tags. A tag tells something about how a piece of text should be rendered on the page. There will always be an opening tag, indicating the beginning of the piece of text, and a closing tag indicating the end of the piece of text, and they look like this : <my_tag>my piece of text</my_tag>, with <my_tag> being the opening tag, and </my_tag> being the closing tag (the ‘/’ character indicates that it’s a closing tag).

Of course, if you would just make up a name for a tag like I just did with the ‘my_tag’ tag, the browser wouldn’t know what it would have to do with it. So there are a whole lot of pre-defined tags to obtain specific layout effects.

some examples :
– The ‘b’ tag puts my text in bold. So if I would like to put some text in bold using HTML, I would have to type following code : <b>this is some text in bold</b>. On your page this would look like this : this is some text in bold
– the ‘i’ tag puts my text in italic, resulting in code like this : <i>this is some text in italic</i>. On your page this would look like this : this is some text in italic

Pretty neat, hey?


So what else is there? Well every HTML page has a specific structure which is defined by…tags, and looks like this:

<html>
<head>
</head>
<body>
</body>
</html>

That is what the code of an empty webpage would look like. The head tag is used to hold some additional information on your web page (for search engines etc.), and the body tag is used to mark the beginning and end of the visible content of the page. And around all of this, there is the html tag.

Interesting in this basic structure is that tags can be nested: you can put tags inside other tags, just like the ‘head’ and ‘body’ tags are between the opening and closing ‘html’ tags. Keep this in mind, we’ll be needing this further on. Also, when you’re editing just a part of a webpage (eg inside a content management system), you don’t need to include these tags, because they always encapsulate the whole page, and never just a part of it.

So go ahead: create your first webpage! Open up Notepad, copy/paste the basic structure from above and add some text between the <body> and </body> tags. Put parts of it in bold and other parts in italic, and save the document as myfirstpage.html (note that every HTML page should have the extention .html or .htm!). Just double-click it and your page will open in your web browser!


Some tags may require a bit of additional information. This is done by adding attributes to the opening tag. Example: the tag for making a text clickable to another page or website is the ‘a’ tag. So by what we learned before, we could make a text clickable by writing something like this: <a>this is a link</a>, right? But to what page will the browser take us after we clicked the link? In our code we didn’t give any information about that. So that’s why we should add this to our tag using the ‘href’ attribute like this: <a href=”http://www.luon.com”>this is a link</a>. Now, when we click the link, our browser will know it will have to redirect to the http://www.luon.com website (check it out: this is a link). So open up your webpage again in Notepad (or another text editor), and go add some links!

Some tags make an exception on the opening/closing tag rule: If there will never be any text between the opening and closing tags, the two tags are combined into one!
Line breaks for instance: by default, all text will apear without line breaks, even if you put a line break in the code!
So if you put this text into the body of your code:

this is line 1
this is line 2
this is line 3

It will show like this in your browser:

this is line 1this is line 2this is line 3

To avoid this, you have to use the ‘br’ tag to generate a break. But instead of using <br></br>, the opening and closing tags have been melted together into <br/>, because there will never be any text between the opening and the closing tags of a break.
So if we put this into our code:

this is line 1<br/>
this is line 2<br/>
this is line 3

we get the result we were looking for:

this is line 1
this is line 2
this is line 3

Two other commonly used tags having an integrated opening and closing tag are the ‘hr’ tag which generates a horizontal line across your webpage and which is always used like this : <hr />, and the ‘img’ tag for images: eg: <img src=”http://www.luon.com/images/lo_luon.gif&#8221; />


I promised to return to the issue of using tags inside other tags: Suppose you would like to make an image clickable so that if the user clicks on it, he would be directed to your website. How would you do this?
First our image:

<img src=”http://www.luon.com/images/lo_luon.gif&#8221; />

Second : to create a link, we need the ‘a’ tag like in the example above :

<a href=”http://www.luon.com”>this is a link</a>.

So to link the image instead of the ‘this is a link’ text, we would have to put the ‘a’ tag around the image tag like this:

<a href=”http://www.luon.com”><img src=”http://www.luon.com/images/lo_luon.gif&#8221; /></a>

That’s all there is to it!

This technique is also used to create tables. Tables can be handy if you would like to present structured data in columns and rows, but also to create for instance a 3 column layout for your webpage as is the case on this website.
You can build tables using three tags:
– the ‘table‘ tag marks the beginning and the end of a table
– the ‘tr‘ (table row) tag marks the beginning and the end of a table row
– the ‘td‘ (table data) tag marks the beginning and the end of a table cell holding data
Unless you use some advanced HTML, all rows should contain an equal number of cells!

an example:

<table>
<tr>
<td>this is cell 1 on row 1</td>
<td>this is cell 2 on row 1</td>
</tr>
<tr>
<td>this is cell 1 on row 2</td>
<td>this is cell 2 on row 2</td>
</tr>
</table>

would give you following result:

this is cell 1 on row 1 this is cell 2 on row 1
this is cell 1 on row 2 this is cell 2 on row 2


Now that you basically know how HTML works, all you have to do is get yourself familiar with the most commonly used tags. This is my list of need-to-know HTML tags and attributes for marketeers:

enjoy!

Advertisements

Posted in 5 minutes, walking the walk | 1 Comment »

Creating a web mock-up

Posted by the markITeer on July 31, 2007

For many businesses, summer holidays are a period of slightly less stress and slightly more time to spare. Time to for example think about redesigning the old website. Traditionally, one would start with a good brainstorm, unleashing (hopefully) everybody’s wildest fantasies and ideas. But soon after, the difficult task of making these dreams reality will soon pop up and somebody will have to create a first sketch of the website.
This is where web mock-ups come into the picture. A web mock-up is basically a sketch or an early layout of a website. In theory, the difference with a prototype is that a prototype is ment to function, even if not fully so, whereas a mock-up is only ment to look like the finished product. But when speaking about a simple website, the two terms can be used interchangeably.

The aim is to quickly concretize ideas without too much hustle. This way, you can test and get feedback even in the early stage of conception. This feedback can than be incorporated back into the mock-up, until it reaches the point where everybody’s happy and designers and developers can take over to create the real thing.

In practice, a web mock-up will look like a number of boxes representing different elements on you pages such as banners, content blocks, navigation etc. No design, no functionality. The only ‘functionality’ that will be really there is the linking between the different pages so the flow of the website can be tested. As an example, I created a small mock-up for a part of the new EmailGarage website. Check it out here.

In prototyping terms, this way of working is also known as ‘rapid prototyping’ which stands for converting abstract ideas as soon as possible into real, concrete proposals which can be iterativaly enhanced using tester’s feedback. Rings a bell? Yep: this is indeed what you can also find in the web 2.0 ‘Getting Real‘ phylosophy.

So how do we do it? What tools are there to create such mock-ups?

Basically, you could catalogue the tools that are most commonly used for creating web mock-ups into 3 main categories:

1. tools for the real prototyper
2. tools for the designer
3. tools for the webbuilder

Category 2 and 3 require specific skills: in category 2 we can find tools such as Adobe Photoshop or Fireworks, which can be used to create grapically perfect-looking layouts. In category 3 we can find the real web-building tools like Adobe DreamWeaver which can be used to create fully functional and picture-perfect websites. Although both types clearly have their merits in the development process of web sites, they are not appropriate for creating web mock-ups.

Below you can find a comparison table of some commonly used (and abused) tools. I tested them on a number of different criteria:
– support for master pages: can you create e.g. a basic navigation frame that is automatically put on all pages without having to copy it to every page? If not you would have to make a correction to the navigation structure of your mock-up on each and every page, instead of just once on the master page.
– support for links on the master page: a number of tools offer support for master pages, but the links put on the master page are lost when you create the final HTML.
– support for page scrolling: does the tool support pages that are longer than one screen?
– support for page notes: the ability to add notes to a page
– support for element annotations: the ability to add extra information to page elements
export formats: which formats are supported for exporting your web mock-up.
– support for navigation tree: can you create a navigation tree for your mock-up, or are all pages on the same level?
users: what category of users does the tool address?
platform: on what platforms can the tool be installed?
pricing: what does it cost?

Although rather costly, I very much like Axure RP Pro 4. It’s simple user interface and enhanced functionalities allow you to create really quickly good web mock-ups (see also the example above).

That’s it.
Happy prototyping!

links : Denim, ConceptDraw WebWave, Axure RP Pro 4

Posted in walking the walk | 8 Comments »

Email and/or RSS?

Posted by the markITeer on July 12, 2007

Since a couple of months I’m systematically unsubscribing myself from email newsletters and subscribing to the RSS feed equivalent. I just couldn’t handle the massive amount of newsletters any more. It cluttered my inbox, drowned the important messages. My ideal scenario? Using e-mail for personal messages and RSS for all the rest.

However, being an email marketeer myself since quite some years, I was kind of shocked by my own actions. Could it be that RSS is replacing email after all? Is email marketing dead?

It’s in fact a very old discussion on the net. Back in 2004, at the dawn of RSS, RSS believers where quick to bury email alive, waving the spam-flag to prove their point. Email defenders answered with the email’s ease of use and personalization possibilities. It was an endless yes/no game stuck in the same arguments over and over again. Luckily the discussion faded and RSS and email believers alike came to believe that both technologies can peacefully co-exist and complement each-other in the marketing mix.

It took however till the wide-spread adoption of web 2.0 in 2006 for RSS to become a real mature medium of content delivery. Google launched its online RSS reader, blogs made the number of feeds sky-rocket and widgets offered all new possibilities.

So where are we now? Can RSS and email peacefully co-exist? Or is RSS becoming an email killer after-all?

Starting from the great comparison table between email and RSS Alex Barnett put together back in 2004, I created a new, up-to-date, version showing both mediums’ strengths and weaknesses from a marketeer’s and customer’s point of view, and added some remarks:

Remarks

(1) Email has proven a to be great tool for creating a personalized, 1-to-1 feel in mass communication, going from simple personalized salutation to Amazon-like delivery of personalized content. RSS on the other hand is currently mostly used for non-personalized content delivery. With RSS, you can choose the feeds you want to subscribe too, but that’s as far as it goes. The upside for the consumer is that because content isn’t personalized, and because RSS doesn’t require you to give any personal information to subscribe (as opposed to the email address for email marketing), the consumer can see the content without giving away any sensitive data. As soon as the content has to be personalized, the consumer would have to reveal himself. Strangely enough, this is an option that is almost never considered: You could offer the RSS feed subscriber the option to receive personalized content via RSS if he makes himself known. In that case the subscriber would receive a personal RSS feed URL with personalized content, and would he be able to get the best of both worlds.

(2) The viral effect of email has enormous potential. It is very easy for a recipient to add some comments and forward the email. The viral effect of RSS on the other hand was long time a problem. Web 2.0 did however solve this by embracing RSS as a means of content sharing between different social networks like digg.com or del.icio.us. People can comment on stories they received via RSS, add them to their online bookmarks which in their turn can be shared with other people and so on. Feedburner (Google-owned) is one of the big players in this field. It allows you to easily offer your feeds in RSS format and to have your stories submitted to a number of social networking sites. Interesting is that it also allows you to receive new content via email (e.g. the email subscribe link on the right)!

(3) Email marketeers can rely on a set of tools to track the behavior of the email recipients. Click-through, opened and bounce ratios, opt-ins and opt-outs, ROI, … they can all be measured because the consumer has had to make himself known in order to receive the content: he had to give his email address. And this allows the email sender to track all actions back to you, the recipient. Because with RSS the consumer doesn’t have to give any personal information, statistics are less detailed. Unless of course you could convince the consumer to subscribe to a personalized feed (see (1))…

(4) This is one of the major draw-backs of RSS content gathering. Email is much easier to search and archive. Most RSS readers only allow archiving of entire feeds, and for example Google (how strange sounds this?) doesn’t offer a search functionality to search all your subscriptions in its RSS reader (although there is a workaround available).

(5) This is however changing rapidly.

Conclusion

What was true in 2004 looks to be truer still. RSS and email have become two full-blown communication channels that can (and must) exist next to each other. It’s up to the marketeers to adapt to this reality and figure out how they can integrate both channels in their marketing mix.

Personally, I have a couple of rules I follow when I decide whether or not to keep an email newsletter subscription:

  • If the newsletter content and RSS feed content are identical, I go for the RSS feed
  • If the newsletter is highly personalized (and I don’t mean just the salutation), I keep my newsletter subscription. If one day however the personalized version of the newsletter would be available through RSS, I might still make the switch.
  • If the content of the newsletter is highly time-sensitive, I keep the newsletter subscription. RSS feeds have a lower priority than my email inbox.
  • If the email newsletter offers extras compared to the RSS feed, I keep the newsletter subscription.
  • If the email newsletter offers a clever aggregation of website content, I sometimes keep the newsletter subscription.
  • If the email newsletter offers content that is just sporadically interesting and there is no RSS feed, I unsubscribe. I would still rather subscribe to a RSS feed that delivers only once in while an interesting post between a bunch of uninteresting stuff, than to a newsletter offering the same content.

I guess it once again comes down to delivering the right content through the right channel. And RSS turned out to be a channel indeed.

Posted in spam, walking the walk, Web 2.0 | Leave a Comment »

The Future of Communications – A Manifesto for Integrating Social Media into Marketing

Posted by the markITeer on June 26, 2007

Social media is everywhere. Websites like MySpace, Facebook, YouTube and numerous blogging platforms attract millions of visitors from all over the world. Visitors that are not just passing by to see what’s going on, but are willing to participate in discussions, upload content and make themselves heard. Web 2.0 has given a clear voice to the people. People who might well be your customers. Or your customers-to-be. That’s why it’s important for companies and marketers to connect to social media and lay out an integrated communications strategy not based on the old monologue, but on dialog.

Brian Solis of FutureWorks PR put together a manifesto for integrating social media into marketing. He emphasizes the importance of not only diving in, but -more important- of making the mental shift. Find your audience, find the influencers, listen to them, get involved.

A few quotes:

“It’s an understanding that social media is about sociology and less about technology. It’s a mashup of new and traditional media that spans across advertising, PR, customer service, marcom, sales, and community relations.”

“The key point here is that Social Media has yet to reveal its true impact. While many are defining its future, the majority of people around the world have yet to embrace it and participate. This means that it’s only going to become more pervasive and as such, become a critical factor in the success or failure of any business.”

“Listening is marketing.
Participation is marketing.
Media is marketing.
Conversations are marketing.
Comments are marketing.”

“Everything we’re integrating into the marketing mix is aimed at sparking and cultivating not only conversations, but relationships. It’s humanizing companies and their products and services so that they matter to people.”

“In order to reach people, we have to figure out who they are and where they go for information. In the process, you’ll quickly discover that there is no magic bullet for reaching everyone – all at once”

“Remember, the future of communications introduces sociology into the marketing strategy. The technology is just that, technology. The tools will change. The networks will evolve. Mediums for distributing content will grow.”

“By listening, reading, and participating, corporate marketing will be smarter and more approachable than ever before. This is how we humanize brands, create loyalty, and earn customer’s business.”

You can read the full manifesto here and here.

Posted in walking the walk, Web 2.0 | Leave a Comment »

Putting your presentations online

Posted by the markITeer on June 18, 2007

Marketers create presentations. Lots of presentations. Presentations for clients, presentations for management, presentations to show a new product or to launch an idea, presentations to bundle information or presentations to convince the inconvincible. Some of these presentations are top secret, classified. But a whole lot of them are just waiting for a larger audience, waiting to bring you eternal fame and glory.

And that’s where Web 2.0 comes in: the ‘social web’ presents you with the audience whereas SaaS (‘Software as a Service’) offers you a whole bunch of online tools to rocket your presentations into cyberspace.

SlideShare, SlideBurner, AUTHORstream… there’s a whole lot of websites out there offering you the possibility to upload your presentation and show it to a community. The idea is simple: you register, you upload a presentation, the presentation is converted into a Flash file, some previous and next buttons are added and the whole thing is put on their website for everybody to view and comment on. And just like with eg YouTube, your converted presentation can also be embeded into websites and blogs using some simple code.

Having your slides available on the web this way is very nice. But something really important will still be missing: you. Slides are often just a framework for your presentation and the real convincing is in how you bring the message. That’s why Zentation came up with the brilliant idea of letting you synchronize your Powerpoint presentation with video material posted to Google video. After logging in, you upload your presentation and enter the URL of your video. You can then synchronize both by simply clicking a button next to the slide when the video reaches the point that the slide has to appear. And they too offer code so you can embed the result into your web page or blog. Check out Guy Kawasaki’s blog for an example (and a good presentation).

Here’s a small comparison table of some of the players:

As for the technical side, there are some issues with the conversion to Flash you have to take into account:

  • animations might (and mostly will) not work
  • slide transitions might (and mostly will) not work
  • exotic fonts might not be recognized
  • the appearance of bulleted lists might be altered

For those looking for something more: check out Adobe Connect, WildPresenter PRO or Articulate. These tools enable you to create fully-fletched online presentations with all the bells and whistles you want. it’s another league… with other rules regarding costs and time-to-deploy.

To round up, here’s a funny video by stand-up comedian Don McMillan on creating Powerpoints:

Posted in walking the walk, Web 2.0 | Leave a Comment »