SEO, CSS, Web Design and stuff

I have a variety of ads on my various web sites. That means I work with numerous advertisers and ad agencies.  As webmaster, I am a publisher and they are buyers wanting to run ads on my sites. I have noticed that a number of the advertisers simply do not understand the internet and how to approach marketing on the net. Given that the net has been around for a while, this is somewhat surprising and unfortunate. I guess it just goes to show that some adapt more rapidly than others, some never adapt at all.

So here is the thing. Some of the corporations that have ads on my sites keeps sending me mail every few days about some or other new, extremely important campaign they are running. Maybe it’s a campaign for a new product, or a special discount to drive sales, or whatever.  Usually the campaigns are of limited duration, often a few days or a week or two. So when advertisers want to run some new campaign they consider to be important for them on the net, they want to have all their “affiliates” (or “associates” – we’re usually called one of those things, even though for me the corporations are simply buyers of ad space), they send out their emails to us, and want us to jump.

Old time marketers are used to advertising this old fashioned way and running campaigns is how its done. That’s how it’s done on TV, radio, in newspapers and magazines. So “campaign” is a huge and important word in their vocabulary. They have historically placed ads on TV, radio, in newspapers etc. for a limited run This way of doing things works well in those media, it’s a time-proven strategy.

But it doesn’t work like that on the internet, and they don’t get it. There is a simple reason why it doesn’t work like that. Take my tiny little case. I run several web sites, with 500 or so web pages spread over a handful of sites (and I am small, there are webmasters out there with thousands and even tens of thousands of pages). I spend my time adding content, updating contents, fixing and tweaking code to improve speed, adding and modifying widgets and snippets, improving the looks and interactivity of the pages, and stuff like that. Whenever I create a new page, I place ads on it, once and for all. The one thing I do not want to do is to keep running back to my pages to modify ads, add a new campaign code or do some small change because a new campaign is running, and then run back to the same pages a few days later when the campaign is over to change the code again.

And why? It’s simple. A newspaper is set and printed anew every day. My web pages live a long, long time. To some extent what the advertiser with his brand new, exciting campaign is doing, is asking me to go back to all the previously published newspapers, back to day one, and change his ads in all those papers. And why am I not going to do it? Because I make very little money on one individual ad on one individual web page. I, and most other webmasters, make our money on many ads giving small revenue on very many pages. So it is hardly ever worth my time to go back and fiddle with 300 pages first to insert some new text and the back again to all those pages to change the text again just because of some campaign.

The marketers who understand the net, know this, and have adapted to it. Take Google and Amazon-they are smart guys. What they do is to buy space on my site. Say, for instance, sidebar ads of 160 times 600 pixels, or some other format. And then they deliver the content to this web space from their own servers in an “iframe” or with JavaScript or some such technology. And if they want to run a new campaign, they simply place new contents in the ads. They change the content continuously, and I don’t lift a finger. I don’t have to spend a single minute of my time for this to happen. When Amazon started running their recent campaign on the new improved Kindle-2, dozens of ads on my sites simply changed content. I had nothing to do with it. And I am happy with that. I am very happy, actually.

I think it’s as simple as that – pages on the internet are produced in a way that differs from other media, so the old fashioned methods have different implications and don’t work as well in the internet marketeering channel. On the other hand, there are new and other technologies for pushing content (“push technology”) that marketers with an understanding of the inner workings of the internet and how content is produced on the net, can employ. These technologies are simple to use, and with them marketers can achieve the same results on the internet as using other channels, and they can actually achieve them more easily and cost effectively.

{ 0 comments }

This is a comprehensive reference which covers all versions of HTML and CSS, including HTML5 and CSS3. It is written by a Web development expert who has participated in the development of the new standards, and who is very knowledgeable. I was very impressed by this book, which I think currently is the most comprehensive, complete and up to date reference book for CSS and HTML available. The book is an outstanding go-to guide for both for beginners and professional Web developers as it is fully updated for the latest CSS and XHTML standards and provides clear and concise examples.

The author, Thomas A. Powell, is president of PINT, Inc. (pint.com), a nationally recognized Web agency. He developed the Web Publishing Certificate program for the University of California, San Diego Extension and is an instructor for the Computer Science Department at UCSD. He is also the author of the previous bestselling editions of this book and Ajax: The Complete Reference, and co-author of JavaScript: The Complete Reference. This broad expertise and background has clearly been important in the writing of HTML & CSS: The Complete Reference.

This excellent book covers all the elements supported in today’s Web browsers–from the standard (X)HTML tags to the archaic and proprietary tags that may be encountered. HTML & CSS: The Complete Reference, Fifth Edition contains full details on CSS 2.1 as well as every proprietary and emerging CSS3 property currently supported. I was positively surprised by the width of the coverage of CSS3. It also has good annotated examples of correct markup and style which show you how to use all of these technologies to build impressive Web pages.

Also, CSS and XHTML: The Complete Reference, Fifth Edition covers the newest browser versions including Firefox 3, Internet Explorer 8, Safari and Opera, and contains much updated information about the browser and cross-browser compatibility of the various HTML and CSS elements. In addition, helpful appendixes cover the syntax of character entities, fonts, colors, and URLs.

I was very favorably impressed by this book. It is well written and well organized, and even though it is has more than 800 pages, very little space is wasted. CSS and XHTML: The Complete Reference, Fifth Edition also contains good examples of useful Java. Overall the book is very up to date and so comprehensive that I think it will be useful for a long time, even though things change relatively fast as far as CSS and HTML is concerned. If you, like me, like to have a good reference book that is well organized, contains information on browser implementation and even some good examples, this is a very good choice which I strongly recommend!

Links to books by Thomas A. Powell at amazon US, amazon UK, and amazon CAN.

{ 0 comments }

This is a big and thick book – 740 pages including appendices. It is marketed as a beginner to intermediate book on HTML, XHTML and CSS.

The book provides coverage of these three Web authoring standards, and also gives some coverage of the upcoming releases of HTML 5 and CSS 3. The book also explains the basic structure and necessary formatting to create static and dynamic web pages. What it does is the following:

• Explores the basics of HTML such as tags, attributes, and how to structure content to create specialized document formatting
• Shows how multimedia and scripting can be used to make your content dynamic
• Author, validate, and troubleshoot your coding and documents
• Enable content for multiple devices—from the standard PC browser to various mobile devices
• Understand values, lists, colors, fonts, and other CSS metrics and formatting basics

The HTML, XHTML, and CSS Bible is relatively comprehensive, but not nearly as comprehensive as the size and thickness of the book indicates. Once you start reading it, you will find that it wastes space on every page: irrelevant code is included in virtually every example, and sometimes lots of it; the illustrations show irrelevant stuff – like for instance 1 inch of the top of the browser for most web pages shown; there are endless listings of irrelevant stuff that should only have lived with fine print in the appendices.

So, despite its thickness this book never goes deep into any subject, and the coverage of most subjects is, in fact, very thin and, to my mind, not very helpful. It is not good at covering the emerging Web standards. And the CSS part of the book is especially thin and at times somewhat misleading. It doesn’t even give the basics for the simpler of the tableless CSS layouts.

So, I would suggest you move on to other titles if you’re looking for a good reference book or a book that can teach you (in a good way, including teaching you to start doing things right as early as possible) how to build web pages if you are a beginner. This is not a book I recommend.

Links to the HTML, XHTML and CSS Bible at Amazon US, and Amazon UK.

{ 1 comment }

CSS3 contains a lot of fun stuff. One of the new things is the ability to rotate virtually everything. Most of the major browsers have already implemented it – that is, it is supported in the most recent versions of Firefox, Safari, Opera and Chrome. It is not supported in IE8 (what did you expect?).

Here is a little image of a rotated and skewed box with some rotated texts generated by CSS3 (WordPress doesn’t display it right, so I am using an image, but see also the live demo which also contains the full CSS and markup):

Here is the essential CSS for the yellow box (repeated for all the various browsers, but the -ms code is useless:

 .rotateit {
width:300px; background: yellow; font-size: 16px;
height:300px;
-moz-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-webkit-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-o-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-ms-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg); }

You can use the code in the demo and play with it. It is quite interesting.

A couple of things are well worth noticing: (1) Even though all other div’s and p’s are inside the containing div, they can easily end up outside it – they will overflow, in other words, and the box that contains them does not expand correspondingly. (2) As you can see, elements overwrite one another as well as expanding outside the box, meaning that rotated elements behave like absolutely positioned ones.

Have fun!

{ 0 comments }

Creating boxes with rounded corners on a web page used to be a large operation. It required the making of  images representing rounded corners, with the same colors as the box and the background, and then positioning them in the corners of the box using four DIVs, each with one image slice as background. Not very difficult, but time consuming.

With CSS3 and browsers supporting it, the same task is incredibly easy and requires very little code. Here is the basic code for a box with rounded corners using CSS3 (we have to use extra lines for webkit and mozilla browsers):

.box { border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px; } 

With a little extra code for color and such, we get the box on the right. Extremely easy – so now everybody can have neat, rounded boxes on their web pages or blogs.

Also, CSS3 compliant browsers support box-shadows and text-shadows. And they can be used alongside the rounded corners easily. The basic code for a box with rounded corners and shadows is simple too:

.box2 { box-shadow:5px -5px 10px #000;
             -webkit-box-shadow:5px -5px 10px #000;
             -moz-box-shadow:5px -5px 10px #000;
          border-radius:20px;
		-moz-border-radius:20px;
                -webkit-border-radius:20px; }

With a little extra formatting this gives us the second box on the right. Pretty neat and simple? (Here is a demo-page with these two boxes and the CSS and markup.)

You can also make individual corners rounded for webkit and mozilla browsers:

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

And if you can’t see the rounded corners and the box shadows, don’t blame me. Blame your browser! You simply have the wrong browser (probably Internet Explorer), and need to download and use Firefox, Opera 10.5, Safari or Chrome!

{ 0 comments }

Opera 10.5 has arrived! Opera has today released the newest version of its Web browser, and claims it’s the fastest browser available for the Windows operating system. While timing isn’t everything, it is important, and this new version arrives just in time for the arrival of the controversial browser ballot screen in Europe, and at a time when European criticism of Internet Explorer has reached new heights. So probably this is good timing!

I have downloaded and tested the browser. It is great! “Opera 10.50 is the fastest browser in almost all speed tests,” claims Lars Boilesen, CEO of Opera Software. Opera 10.5 uses a new JavaScript engine called Carakan and a new graphics library called Vega, which Opera says make this the fastest browser ever produced for Windows.

I don’t know if it actually is faster than Chrome or the most recent version of Firefox – I have not tested that. But I tried it on a few different sites and pages, and noticed that the support of CSS3 is much improved. Opera 10.5 now supports such CSS3 features as “box-shadow”, “text-shadow” and others. It also provides support for some of the new HTML5 emerging standards, for instance for video.

Testers seem to confirm this this version is better and faster, but still a number of smaller issues remain. See, for instance the extensive testing in Betanews and the Javascripts tests referred in Fiercecio. There are also some issues concerning DIVs that don’t display quite right under certain circumstances and TABLEs that sometimes take to much time to load.

What annoyed me the most was that Opera on install set itself up as the default browser without asking me. To me that is a no-must-do. Something that makes me mighty upset, and that forced me to spend time to find out how to reset this.

My feeling is that this is a good step ahead for Opera, but that even so they should perhaps have waited a little to get things a little more right.

{ 1 comment }

There are lots and lots of books on CSS (Cascading Style Sheets), but Beginning CSS Web Development stands out from the crowd. It is a well written book that delves straight into the practical matter and gives broad coverage at the same time as it contains a lot of practical examples of good usable code. I have learned quite a lot from this book and used several of the smart solutions provided in it.

CSS is one of the most important technologies on the web today. It gives tremendous power in styling web sites and reduces the complexity of code as well as the time it takes to maintain and change sites – especially for large sites with hundreds or thousands of pages this is extremely important. CSS also gives web developers power to style web sites so that they are usable, compact, good looking, and consistent in layout.

In addition to the essential CSS basics – cascade, inheritance, contextual selectors, and specificity – this book covers advanced techniques like accessibility, hacks, and filters. It concludes with a case study, and features a CSS reference section that allows you to look up required syntax as quickly as possible. It also provides examples and code that is standards compliant and semantically good.

Collison’s writing style is relaxed, clear, and appropriately humorous. He even tells you (often — he’s English!) when’s a good time to grab a cup of tea. He presents complex topics very clearly.

Beginning CSS Web Development: From Novice to Professional by Simon Collison is the perfect book for newcomers to CSS and for those slightly more-experienced CSS designers who need a soup-to-nuts review.  A very well organized and usable book, and a book that I am happy to have in my CSS library. I recommend it!

Links to books by Simon Collison at amazon US and amazon UK.

{ 0 comments }

CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. Eric A. Meyer, a Web Standards proponent and one of the most well known CSS wizards, has created an excellent hands-on training book that comes with a video tutorial and HTML/CSS files to be used to get hands on practice.

I really liked CSS Web Site Design and the training materials. Eric Meyer moves you back and forth, shows how minor changes to rules and syntax can affect the look and feel of a web page, and demonstrates the correct use of CSS in a very thoughtful manner. If you really want to learn by doing, I can hardly think of a better guy to instruct you than Eric Meyer!

The book teaches you to easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space, all using a project-based approach. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos, allowing you to follow along and learn at your own pace.

The setup is very professional, and easy to watch. Eric Meyer uses a made-up site, Javaco Tea, for teaching the CSS concepts. And, he goes through every detail, from masthead to footer, explaining how each piece works. And he really teaches you the latest techniques for designing Web sites with CSS.

The included CD-ROM is loaded with classroom-proven exercises and QuickTime training videos, and real-world projects take you through the Web page creation process, one step at a time. It has over 60 Step-by-Step Tutorials

• Using CSS and XHTML together
• Learning essentials of selectors, inheritance, and the cascade
• Creating CSS navigation
• Laying out pages with CSS
• Adding colors and backgrounds
• Setting typography
• Creating white space, margins, and borders
• Creating tables
• Styling for print
• Plus much more

A great book, with great hands-on training, by a great author! It is expensive, but well worth it in terms of time you might save later on and mistakes you will avoid doing! (You can also buy it without the video training – but I recommend getting it with.)

Links to Eric Meyer’s books at amazon US, amazon UK, and amazon CA.

{ 0 comments }

The Ultimate CSS Reference by Tommy Olssen and Paul O’Brien is exactly that – a broad reference guide covering all the CSS syntax. It covers every single CSS keyword, selector, pseudo-class and corresponding attribute known (including some that aren’t even in the official ratified W3C standard but supported by certain browsers) from CSS version 1 right through to the latest CSS 3. So it is broad enough to be useful for quite a while.

The Ultimate CSS Reference is also well laid out, easy to look up as a reference, and well organized. The writing is short, clear, concise and to the point. Just as a reference book should be.

It also has some additional, very useful and great features. One is that after every property, there is a little box that explains which browsers are compatible with it. The book even explains if the property is buggy, and explains why and if there is a fix – it contains a lot of useful CSS hacks. Also, there are quick references stating whether or not attributes are inherited, what their initial values are, and which version of W3C specification they come from.

As with any book of this nature, it is out of date virtually as it’s printed in some respects. For instance, the newest versions of the major browsers are not covered. Even so, this book, and also its companion, The Ultimate HTML Reference, are definitely two books that are useful and that will stay so for quite a while.

To me, this book is a must. The only other reference book that can compete with it is Eric Meyer’s Cascading Style Sheets – The Definitive Guide. However, this book has a slightly more complete coverage, at the same time as it doesn’t go quite as deep into some issues as Eric Meyer does in his book. So if you don’t want to keep both around, it’s a matter of taste and preference. Recommended!

Links to books by Tommy Olssen at amazon US, amazon UK, and amazon CAN.

{ 0 comments }