This is the first part in a series of articles that will teach you how to code dynamic HTML. Are you ready? Let’s go!

Step 1 – be mentally prepared

Wow, that sounds dramatic, doesn’t it? Just wanted to get your attention first. I wont be teaching you new skills or anything, but I will be teaching you how to think different!

Dynamic is the keyword here. By now, you should have realized that there are many methods of doing the same thing. Right now, you have to code with the intention of everything being dynamic. With an interface, every single piece of text and every image should be dynamic.

Step 2 – make the content look good, no matter what!

Here’s the next keyword for you – content! The very first thing you should do is identiy what the content is on your site. And what I mean by that is the actual body text. In this area, the user will be able to insert text (obviously), images, lists, tables, anything you can imagine. He will be able to insert an essay and he will be able to insert just two lines. And both of those have to look AGAP (as good as possible!)

And here is the first value for you to use:

div.content {
  min-height: 400px;
}

Putting a min-height on the actual content-div (that is, if you use a div and not a HTML5-friendly <section> or <article>) ensures that there won’t be too much of a difference between a page with two lines of text and one with a hundred lines of text.

Moving on:

div.content, div.content p, div.content ul, div.content ol, div.content table {
  font-size: 12px;
  font-family: Arial;
}

In order to avoid confusion, make sure that the div and the content inside the div has the exact same look as inside the actual CMS. In face, extend it to lists and tables – copy the same margin and padding.

Also, pro-tip:

div.content p {
  margin-bottom: 1em;
}

1em is a dynamic value. It essentially means one line-break that is as big as the actual font-size of the p-tag.

Step 3 – blurbs

The CMS solution gives the user the ability to add images to the content area. But there’s also a second way to add images – through blurbs!

So, what are blurbs? Blurbs are essentially an area inside a design that’s reserved for an image or a Flash movie. They often have a fixed width and height. But sometimes, the height can be dynamic, making only the width fixed. So, how do you code the HTML for that?

First of all – here’s the HTML:

<div class="index_blurb">
  <!-- BLURB GOES HERE -->
</div>

Simple enough, right? And here’s the CSS:

.index_blurb
{
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.index_blurb img
{
  display: block;
  margin: 0;
  padding: 0;
}

This is simple enough, right? The overflow value is only there to fool-proof the design – if the user accidently inserts a image with different dimensions, it won’t break the design.

Conclusion

So there you have it. This is about two different things – making the design fool-proof and making it easier to understand and use for the user. Stay tuned for the next part!

I am all against those CSS hacks that exists out there. You know how it is – sometimes Internet Explorer just won’t behave as the other browsers. CSS hacks aren’t pretty and can screw things up. But you’ve got a job to do and a client that is waiting, so what do you do?

Enter conditional comments! A fool-proof way to serve different CSS files to different versions of Internet Explorer!

Why use conditional comments?

CSS hacks can get the job done. But they often rely upon faulty browser behaviour and thus isn’t very future-safe. Who knows how future browsers will interpret them?

Conditional comments is nothing but regular comments but with a add-on. All other browsers reads it as comments and you can be 99% sure that future non-IE browsers will as well. Let me give you an example:

<!--[if IE]>
  <link href="css/IE.css" type="text/css" />
<![endif]-->

As I said: regular comments but with an add-on.  All regular browsers will view it as a comment and move on. IE browsers will read the style sheet. Excellent!

But wait – there’s more! Say what you will about Internet Explorer but that browser IS improving. IE8 and IE9 in particular seems to behave more or less like the other browsers, making an IE-specific stylesheet for those versions unneeded. They might even break the layout! So what now?

Conditional comments are actually quite smart! They allow you to target specific versions of IE, like this:

<!--[if IE 6]>
  <link href="css/IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

You see how simple it is? Only IE6 will read that CSS file! You thought that was good? Take a look at this:

<!--[if lte IE 7]>
  <link href="css/IE7.css" rel="stylesheet" type="text/css" />
<![endif]-->

The above example actually target IE version 7 AND BELOW! You see? More modern browsers will never read that specific CSS file.

An added bonus this technique is that it validates. And since it won’t break in any other browser, and probably never will, it’s a fool-proof concept. Code away!

Internet Explorer 9 is a completely different beast than before. Both the interface and the underlying engine has undergone a major overhaul. IE9 runs a lot faster, has a much smoother interface and better support for the up-and-coming HTML5 and CSS3.

However, let me first take the time to criticise (I like to do that): why does the IE9 beta installs OVER IE8 instead of being installed as a stand-alone product? That’s rather weird and inconvenient.

Anyway, the first thing that strikes me is the UI – it reminds me a lot of Google Chrome and looks a lot cleaner and smoother, focusing the users attention on the actual content instead of the browser. The icons are smaller and in my opinion it looks better.

I tried surfing around popular pages such as Facebook, Twitter, Google etc. And everything is really fast, I was pleasantly surprised. I don’t know how it compares to Chrome, but it feels on par with it, which is really impressive.

However, it does crash a lot. It is to be expected of a beta, but I ran into a rather large number of errors. Hopefully, they will have it all sorted out in time for the final release.

I haven’t yet tried out some actual coding, but it is supposed to have much better support for HTML5 and CSS3, which is a REAL relief! Just imagine what the web might look like in five years! I’m really looking forward to embracing the new technology.

However, there is a solution to this problem that has other advantages as well, and I’m going to tell you all about it!

When I’m working on a project, I usually use Firefox and the Web Developer toolbar extension. It has many advantages and one of them is the ability to easily turn off Firefox caching. This is gold when you’re doing front-end design! (And I also hear it’s now available for Google Chrome!).

Anyway, let’s say your job is to update a site with a new font and some new styling. You download the CSS, make the changes and upload the file again. And what happens? The client calls a few days later and claims they can’t view the changes made! Telling them to reload the page to clear the cache will do no good since the harm is, in a way, already done! How can we prevent this?

Well, let me introduce you to our simple friend – query strings! While they are normally only used with a server language, like PHP or ASP.NET, (or, in some cases, with JavasScript) they can be utilized when calling CSS style sheets and JavaScript files! Just use a line like this:

<link rel="stylesheet" href="http://www.yoursite.com/css/layout.css?v=1" />

This will do no actual effect on the style sheet, or the way it is referenced. You can use this for your first release of your project and the v=1 part tells you, or anyone else picking up the project, that the CSS is on its first version.

HOWEVER! Let’s say you want to update that file. Download it, make the necessary changes, then upload it and change the calling so it looks like this:

<link rel="stylesheet" href="http://www.yoursite.com/css/layout.css?v=2" />

The browser will interpret this as a second CSS file, completely separate from the first one, and thus it will not use the one that is cached! This is great stuff! Of course, the browser will then continue to cache the file as usual, which is all fine and good.

This also has the advantage of telling the developer, whether it be you or anyone else, how many changes has been made to the CSS since the site was first released.

No more angry clients calling back telling me they can’t view the changes! So simple, yet so powerful!

Also, they’re not just pretty to look at – have a peek at the source code and spy on what other people are doing! You might get an idea or two for your own project.

However, please remember to not steal anything! I realize there’s a fine line between inspiration and duplication, but as long as you keep it in the back of your head, I’m sure you’ll have nothing to worry about.

Anyway, here we go:

CSS Manía

Zeniltuo

Screenalicio.us

Unmatched Style

Web Creme

CSS Beauty

Style Crunch

CSS Remix

There’s actually one more use to these galleries – they’re a great place to submit your own design that you feel proud of. Now, off you go designing those fancy, sexy layouts!

I thought I would give you a collection of my favorite WordPress plugins. I use all of them on this very site.

Akismet

Akismet is a fantastic spam fighter! It is without question the very first plugin that everybody should install on their newly set-up WordPress account. Once activated through an API key that you can obtain on WordPress.org, it will automatically thrash spam comments on your blog posts.

Download Akismet

HeadSpace2

The plugin All in One SEO Pack was for long considered the very best plugin used to handle your site’s search engine optimization. However, I strongly recommend using HeadSpace2 instead. It allows even greater control over all your site’s pages and posts. The level of customization is just stunning.

Download HeadSpace2

CommentLuv

Simple name for a simple plugin. Every time one of your readers make a comment and writes in the address to their own blog, this plugin goes looking for the latest blog post on that site and displays it under the author’s comment. Cool way to give something back to the reader for taking the time to comment!

Download CommentLuv

Fluency Admin

This one is perhaps not one noticable to your readers, but rather to you, the adminstrator. It completely re-amps the admin interface, replacing the sidebar buttons with hover menu’s, making navigation easier. I personally like this look better than the default one, but this is down to personal choice.

Download Fluency Admin

Google XML Sitemaps

This goes hand in hand with HeadSpace2 or any other SEO plugin you may have installed. It will generate a XML sitemap, making it easier for Google robots to index your site.

Download Google XML Sitemaps

Socialize This

Generates a set of icons to every one of your blog post, allowing the reader to share your posts on a social network. You can customize which social networks to use, and even download other themes to change the look. And as a bonus – this plugin can automatically update your Twitter with a link to your latest blog post every time you publish something new.

Download Socialize This

WP-DPManager

It’s really important to constantly back-up your work – you never know when your server might have a breakdown and you lose all your work. This plugin allows you to back-up your database, either manually or automatically on a set interval, browse your tables, optimize your database, etc. Highly recommended!

Download WP-DBManager

This article will focus on stuff that’s probably very obvious to some of you, and it isn’t groundbreaking stuff. However, sometimes we all need to be reminded even of the most plain things. No matter how great of a web designer you are, if you can’t focus then you’re not gonna do much good, are you?

Social media sites

Two of my favorite online services are Facebook and Twitter. I admit that I probably stay logged in more or less throughout the whole day. And while it can be difficult noticing when it becomes a problem and hinders your work – do the first step and just don’t log in! Close the tabs containg the program. Reconnect later when you have the time to spare.

I am of the opinion that there is nothing wrong with a little social networking every once in a while, especially since it can actually leads to establishing new contacts. But it is equally important to know when you have to focus and concentrate on your current project.

Don’t forget the third-party applications!

I personally love TweetDeck – it’s an awesome way of interacting on Twitter. But no matter what program you choose to use – close it down! And I mean it entirally – sometimes minimizing it just don’t cut it.

Most programs make use of different notifications when stuff happens and this can clearly be a distraction. But even if you just turn off the notification system, the icon clearly begs to be clicked on! Just one more time… (Or is that just me?)

So – close it! Close it down!

Your own personal browser war

This depends on what exactly you’re working with. But let’s say you’re designing in Photoshop. Why do you even need to have your browser open at all? Close it down! (Heard that before?)

However, if you’re working with the programming aspect of a project then you clearly need to have it open. But when you do – don’t have any more open tabs than you need to. Just like in the TweetDeck case, it’s all too easy to bring back that Facebook tab to check “just one more time”…

You can also hide both your bookmarks and even the address bar! You can’t type facebook.com into a non-existant address bar, now can you? Only open up tabs that are relevant to your project and then hide it. It’s amazing what difference such a simple, yet drastic change can make to your workflow.

Also, a little tip. Use Ctrl+R (Command+R on OS X) to reload the page.

Your inbox

Most people (including me) keep their mail boxes open all the time. It serves as a referencing point – at any time I can look through my conversation with the client to see what exactly has been decided. I never print anything and I hardly ever take notes by hand, so I have it all on my computer.

My advice here really depends on your situation and your role in the company. If you know that your boss wants you to totally focus on your project at hand then this is what you can do: increase the amount of time between automated email checks. Whenever a box pops up on your screen, telling you that you have a new mail, it’s very tempting to click it. Just avoid that problem altogether.

However, I do realize that this isn’t feasible for everyone. For example, I could never do that – something really urgent might come up and I have to drop everything I do to check up on it. My job includes being available if the situation calls for it.

How to handle phone calls

For some people, phone can be a BIG distraction, especially for us obsessive people (my iPhone is more important to me than putting on my socks!). However, there’s one really important thing that can be done to overcome this – schedule all important phone meetings.

Do you know why this is such a huge deal? It’s because it’s a lot easier fitting in your work and making more out of the time you have if you know exactly how much time you have on your hands before the next phone meeting is about to take place. Think about it – the most distracting things are those that you don’t expect.

There’s also another simple solution – just turn off the signal and let the voice mail take care of it. That way, you can decide for yourself when to deal with an unexpected situation that might arise.

Smartphones – not always that smart

While on the subject of phones – let’s talk a bit about smartphones! Since you’re working with the web, chances are you probably have one of those smartphones. I have an iPhone myself, and I am very happy with it. However, the fact that you can do so much with it can also prove to be a distraction while working. What’s the point of post-poning automatic email checks if your phone is gonna tell you all about it anyway?

You can turn it off entirely, but it might also suffice to just put it to silent mode and NOT keep it visible. It’s so easy to fall into the trap of checking “just one more thing”. Don’t do that!

Instant messaging – instant annoyance

No matter what service you use as your instant messaging tool – it can also be a BIG distraction when your friends or co-workers constantly tries to strike up conversations with you in the middle of a project.

While setting your status as “Busy” might suffice in some situations, I would say that the very best thing is to turn it off entirely. Not everyone will respect your status.

Final words

This is only a handful of (obvious) tips to utilize if you’re feeling to distracted. Some of ‘em might be hard to implement though.

What do you do to stay focused?

Sad but true – it’s look that matters! This is especially true when you take services like StumbleUpon into account. First impression is often the most important impression.

That’s why I thought I would dedicate this article to the top 10 blogs that really caught my eye. So look, take in and be inspired. And perhaps find elements to implement in your own site?

Douglas Menezes

Filcka.cz

Getting crazy

PV.M Garage

Gary Nock

Gisele Jaguenod (& birdie)

Istok Pavlovic

Productive Dreams

Lady Omega

Kevin Potts

Reflection

One thing all of these sites have in common is that the designers have worked a lot on the little details which makes the entire site looks a lot more professional. Other than that, they’re all very different in styles. There are many ways to make a website!

The reason I listed those is that sometimes you need inspiration, both as a designer and as a programmer. Don’t stare at your screen for hours to no end, go out there and see what others are doing!

But what the heck is it?

Google Analytics is a tool for measuring your site visitors. You can find out how many visitors you have, unique visitors, pageviews, plus what browser, operating system and screen resolution they make us of. All of this is presented in nice-looking graphs, that you can customize to your hearts content. Google Analytics is, quite simply, one of the best web analytic services I’ve ever used, and here is my top 6 reasons why you should use it!

6 fabulous reasons to use Google Analytics

Oh yes, here it is. And here we go:

1. Keep track of visitors. Yes, I’m being captain obvious here, but unless you’re running a blog with a comment system, you have no way of knowing if you have any visitors at ALL if you don’t use a system like this.
2. Watch your site growth over time. Google Analytics provides awesome customability to your graphs so you can compare different time periods and other stuff.
3. Find out just where your visitors come from! This is an awesome feature – does your traffic come from search enginge’s, backlinks or simply by writing the URL in the address field?
4. Track down your most popular page. Because everybody wants to get to know the popular kid, right? Then you can learn what makes him cool, and try to apply that same coolness on your other pages.
5. It will help you make those design decisions. Tracking your users choice of browser and screen resolution will prove invaluable when you have to make design adjustments to your site.
6. It’s all free! Can you think of any better reason? I can’t!

How to set it up

Now, let’s talk about a little how to set it up. First of all, you need a Google account. You may already have one, a simple Gmail address will suffice. If you don’t have that, just surf over to www.google.com/analytics and get yourself an account.

Once you’re in, you need to set up a profile. You usually have one profile per website. You can actually have several websites connected to one Analytics-account, which is really nice.

Anyway, click on “Add Profile” and then choose to add a profile for a new domain.

After filling out your website’s address and time zone, you’re then given the JavaScript code that is to be pasted into every one of your pages. Just remember, it’s REALLY important that you:

1. Do not make any alterations to the code. If you want to tab out the code so it looks nice and clean, just be careful!
2. Be sure to put the code just below the closing <body> tag. The reason for this is that it allows the entire page to load uninterrupted before Google starts analysing the visitor. However, I never had any problem with the code slowing the my websites.

So now you’ve installed the code, now what? Now…you wait for 24 hours, to give Google time to start tracking your code. If you’re just as inpatient as me, that’s a pain in the ass.

After those 24 hours, you are ready to go! You can start right away to track your visitors. Take your time to click around the different sections. And please notice that all the graphs you see can be customized.

Analyze away!

1. Several persons comments how great it looks.
2. Then, one person points out that it doesn’t work in all browsers, for example in Internet Explorer.
3. Another person, often the blog author, chimes in and comments that this is only a demonstration.
4. And yet another person gives a comment like “who gives a fuck about Internet Explorer?”
5. All hell breaks loose…

While I understand the importance and need for those demonstration blog posts, I feel that we, the developers, should be really careful in what tools we chose to use. I know we all love what we’re doing and most of us love to experiment with the latest technology. But behind every website, there’s a client who doesn’t care if we accomplish that fancy shadow effect with CSS3, jQuery or images. He just wants it there, preferably in the browsers that their user base make use of. He doesn’t care about validating code, proper semantics or which version of HTML you use!

Did you know that it was only recently that I stopped caring about Internet Explorer 6?

I think this is really important to remember – often, we don’t design and code for ourselves; we’re doing it for an audience. I don’t even think you should take the client into the equation, I think that’s the wrong approach. The one person you should care about is the end user!

Decisions to take early on in a project

First thing first. Every company has their own way of doing things. Some company’s make use of studies to determine what kind of users they believe are the website’s primary target. There are several reasons for doing these studies, but these are the main things that you may want to know:

• What are the age of the targeted audience? How computer-savvy are they?
• What kind of computer do they use? PC, Mac, notebooks, iPads?
• What browser do they mainly use?
• And so on…

But not all companies have the funds, or the time, to do these kind of studies. In these cases, it’s really good to have a clear communication with the client. What kind of customers do they have? Are these the same people that they want to target with the website?

The answers to those questions should help you make the decision as to what tools to use when you begin building the website.

So…we’re stuck with the same tools as ever?

You know, I really wouldn’t say that either. Some of these new technologies offer a way to fool-proof the design all the way back to Internet Explorer 6. You know, the browser I just told you I didn’t care about anymore. (And what a relief THAT was, let me tell you!)

So what tools CAN we use? When will I ever get to the point?! All right, here it is:

Basic HTML5
Perhaps this one requires a bit of testing before I can fully commit to this statement. But marking up your document in proper HTML5 tags, such as <header>, <section>, <footer> and the like is not wrong! All the browsers in use of today support it; just treat them as regular <div> tags. (But don’t forget to put the display: block property in the CSS! That’s the only thing these new tags don’t share with regular <div> tags.)

JQuery
Yes, one of the benefits behind this JavaScript library is the extended backwards support. This allows you to create really nice looking effects for your website, unhindered by what browser the end user might have.

Google Font Directory
Yes, their list of fonts isn’t exactly big…but it’s really easy to use and most important of all – it works all the way down to Internet Explorer 6! But, as always, use a back-up font. However, I understand you may feel uncomfortable using a library on someone else’s server, even if it is the giants Google we’re talking about.

Regular HTML4 and CSS2
I have only one simple thing to tell you, and here it is:

Only bad craftsmen blame their tools.

There’s a lot of things you can accomplish with these simple tools that you already know so well. Be creative! That’s your job, after all.

Exceptions to the rule

You want to know something funny? I write this blog post about how it may be in your best interest to hold off on these new, fancy technologies just a little bit, but…look at this very website! Look at the rounded corner in the picture up there! Look at the shadow effect in the portfolio section. You don’t see it? That’s because you’re using Internet Explorer 8, 7 or 6.

Remember though – Studio51 is not for some client. This is my own playground where I get to arrange every part the way I see it fit. In here, where I am free from restrictions and can play around in every way I care to, in here I think it’s important to put those technology’s to use! If nobody ever uses HTML5 or CSS3, then no browser will ever see the need to implement it.

Final words

I love watching demonstration sites. I love to fantasize about what great things you can accomplish with all of these new tools. But you have to live in reality and give the client what he or she wants. In the end, we’re not doing what we’re doing only because we love it – we’re delivering products.

Always try to keep that in mind.