There was an urgent need to expand the product gallery for the Nature’s Carpet website I built last fall. More specifically they were asking for the ability to easily update and ad new carpets with info and pictures. The info would be fairly minimal (name, product number, some short details) and the most important aspect would be the ability for the visitors to see high quality photos of the carpets as surfed through without having to open new windows etc. In accordance with my new found obsession with standards based code and CSS, I decided that this could be an interesting challenge: Could I make a tableless product gallery with pop-up images triggered by roll-over behaviours and some other fancy effects while still keeping all the info in an unordered list? Well, after some trial and error, the answer is yes. And here’s how it’s done (I actually did all the styling in Expression Web using the Modify Styles functions, but for brevity (and those of you who don’t use Expression Web) I am just going to list out the actual CSS code here):

From idea to reality

One of the challenges with the Nature’s Carpet site is that it will be constantly updated by the company itself. Would be easy if the backend was a CMS, but as of now it’s not so it is done manually. The tricky part was to make the code as fool proof as possible without making the site bland and uninteresting. I had this idea of having each carpet represented by a small rectangle with a thumb nail on top and the name and info underneath. When the visitor hovered over the rectangle, the background colour should change, and when she hovered over the image, a larger one should pop up automatically without having to do anything.

Step 1: Make a list

The most fool proof thing I could think of was a simple unordered list. And that’s easy enough:

<ul>
<li>
<img alt=”Aureg - Bracken” height=”100″ src=”products/dark/thumbs/Aureg%20-%20Bracken%20-9445-38.jpg” width=”150″ />
<h3>Aureg - Bracken</h3>
<p>Berber loop PIle</p>
</li>
</ul>

Problem is an unordered list looks like an unordered list. What I wanted was something that looked like a 3 column table.

Step 2: Wrap the list items in a box

To keep the list styles separate from the rest of the list items in the page, everything needs to be wrapped in a box.I call it showcaseWrapper:

#showcaseWrapper {
}

All the content in each unordered list item should also be wrapped in it’s own box. Since there are several lists, it has to be a class rather than an id:

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

This strips away the regular spacing and elements featured in an unordered list. Now the list items themselves:

ul.showcaseList li {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

Pretty straight forward: The margins are used to space the boxes evenly. Each box has a solid grey stroke and a white background. They float to the left and line up side by side rather than on top of each other. Take special note of the “width” and “height” numbers: They are not flexible because I want the items to line up nicely. These values match the content displayed perfectly and fills out the space nicely. Depending on what you want to put inside your boxes, you can change them. I would advice against making the height dynamic because if one box is taller than the rest, the order becomes disorder and the whole thing becomes a big mess.

Step 3: Make a Hover Effect

I also wanted the boxes to react to the mouse hovering over them to give the visitor a more interactive experience. This is surprisingly easy: Just ad a “hover” stage to the list item with some different info like this:

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

Notice that the only difference is the background colour. You could make it more fancy by using a graphic background and the sliding doors technique like Verlee did. Or you could make the entire list item into a link. The posibilities are endless.

Step 4: Style the Content

Now it’s up to you to style the content as necessary. Since everything is wrapped in the showcaseWrapper id, you can safely style everything within the wrapper without it affecting the rest of your site. Here are a couple of examples:

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}
 
#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

Final HTML Markup

1
2
3
4
5
6
7
8
9

<div id=”showcaseWrapper”>
<ul class=”showcaseList”>
<li>
<img alt=”Aureg - Bracken” height=”100″ src=”products/dark/thumbs/Aureg%20-%20Bracken%20-9445-38.jpg” width=”150″ />
<h3>Aureg - Bracken</h3>
<p>Berber loop PIle </p>
</li>
</ul>
</div>

Final CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/* The box that wraps the entire list /*
 
#showcaseWrapper {
}
 
/* Styles for text not contained in the lists  */
 
#showcaseWrapper h2 {
color: #666666;
font-size: 1.2em;
text-transform: uppercase;
margin-left: 5px;
margin-top: 0px;
clear: both;
}
 
#showcaseWrapper p {
padding : 10px;
clear : both;
}
 
#showcaseWrapper a {
color: #5F8C00;
}
 
#showcaseWrapper a:hover, #showcaseWrapper a:focus, #showcaseWrapper a:active {
color: #3D5900;
text-decoration : none;
}
 
/* The list itself  */
 
ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}
 
/* Turning each list item into a box and stacking them sideways */
 
ul.showcaseList li {
margin: 0 10px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}
 
/* The hover effect for the list box  */
 
ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}
 
/* Styles inside the list boxes */
 
#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}
 
#showcaseWrapper ul.showcaseList p {
font-size : 0.9em;
padding : 0;
margin: 5px 10px 10px 10px;
}
 
/* Padding the image */
 
#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

Here again is the final result. And yes, it validates (provided the client didn’t mess with the html code).

I attended a very interesting one day conference in Vancouver today called Bridging Media. The intent of the conference was to

open the channels of communication between the broadcast and digital media communities. We aim to increase an understanding of our respective industries and strengthen our approach to building multi-platform projects.

Over the last few yers I’ve been working with pure digital media and video distribution on the web and I’m aslo the technical producer for The Pratt & Taylor Show on Rogers Sportsnet Pacific, so with one foot on each side of the divide this conference was pretty much a must-attend for me.

NOTE: For all you expression people who read this blog and right now scratch your heads because this seems to be totally off topic: It’s not. This has to do with the future of online video and content distribution - something you will be working with no matter what kind of projects you are involved it. It’s a bit of a meta-topic but it’s still quite relevant.

I won’t go through the conference here - Miss604 has done an excellent job live-blogging the entire event. Instead I’ll share with you my thoughts and perspectives on the problems presented and the whole concept of media convergence as a whole.

A bridge built from one side only will probably fall

The title of the conference was Bridging Media, and the intent was a good one. Unfortunately there were few if any broadcasters present, so the bridge was only being built from one side. The conference was attended by all the usual suspects in the digital and social media scene and also a large group of independent movie producers and they shared what I would classify as a standard from-the-digital-world view of the situation: Broadcasters rely on funding, digital media relies on other streams of revenue. The broadcasters don’t want to share our content because they are a bit antiquated and they are afraid of losing control of their own dominance and their own content. The digital realm is the future and we should just ignore the broadcasters and move on. In other words, if you build it (a digital media outlet), they (the viewers) will come, and they’ll bring money. (This of course is my very broad and biased interpretation and I’m sure many will be angered at it. So be it.)

To prove this thinking, examples like Sanctuary, Quarterlife and Ask A Ninja were brought up. And this brings me to my first issue: None of these examples are actually applicable in the conversation: Both Sanctuary and Quarterlife were created by well established producers with a strong fan base and more importantly solid funding.. If a complete unknown with the exact same idea had presented any of these concepts to investors, they would most likely be turned down or get insufficient funding. Furthermore, the chance of them reaching a wider audience would be next to zero. Why? Because the web is saturated with similar content and it’s almost impossible to break through the noise to get people’s attention. As for shows like Ask A Ninja that actually get picked up, they are flukes and one-offs. Building a business based on the thought that your show will be picked up by a major network is financial suicide. And the one commonality of all the similar shows that have been picked up is that they were started as jokes with no intention of making it big. So this whole way of thinking is fundamentally flawed. Such successes simply can’t be reproduced by entry-level content producers, at least not without a fair bit of luck (as in winning the lottery kind of luck).

NOTE: Since posting this article, Sanctuary has been picked up by the Sci-Fi Channel for broadcast release. Quarterlife was picked up by the E! Channel in early February. Both these shows were launched on the web with the intention of migrating to broadcast proving that building a fan base online can help you move to the living room screen. Unfortunately you have to be famous and have millions of dollars backing you tho…

The other idea that was touted, that you can make money off your content if enough people come to your site, is also highly questionable. Simply generating visits is not enough to generate money these days. Having a video series on YouTube that has over 2 million views combined will give you exactly $0 in revenue. To turn your content into money, you have to either use advertising or sell services. And that’s where the divide really shows itself in all it’s width and splendour.

Broadcasters are content producers

Putting on my broadcast hat, I can understand why there were no broadcasters at the conference. And I also understand why even if they were there, they would have no answers: Broadcasters are content producers that expect to get paid for the content the produce. A phrase that kept coming up throughout the conference was the question “What business are you in?” The thinking presented was that if you share your content online and want to get money from it, you should use it as a way to get other business that will generate money. As an example, Papercraft was brought up. They produce funny and informative videos on their website explaining complicated technical terms in an understandable way. These videos make no money but companies ask them to make custom videos and these make money. So it’s a completely different way of approaching the whole concept of revenue gathering.

Broadcasters and other content creators on the other hand, are not interested in using their content to advertise services. Their content is the service they provide. They are in the business of making content. If they were in the content of selling services, they would be an advertising agency. And that’s why there is a divide. The two sides are talking two entirely different languages and thinking about things in completely oposite ways.

The question is if there is any way of making them come together at all. Right now, the digital media community is building a bridge over to the broadcast side, but the broadcasters are digging a tunnel to the digital media side. And while a bridge built from one side is likely to fall down, a tunnell will bore it’s way to the end and start functioning whether the other side wants it or not. TV and film producers are quickly learning that the internet is an excellent marketing tool and are working on ways of leveraging this technology to theri advantage. On the other side, the digital media community feels it has content that should be presented on an equal level with the broadcasters and they are trying to push this content into the classic broadcasting channels. The problem is that once you move into the realm of public broadcasting, a whole mess of legal and financial problems arise: Who owns the content? Who made the content? Who has the rights to distribution? How do we pay the producers? Who is responsible if it turns out the content is illegal in some way? These are issues that are largely ignored by the digital media community because it is based on a somewhat anarchistic approach to content ownership (i.e. once it’s on the web it’s free). Broadcasters on the other hand have to make sure proper ownership is in place and that all the rights are where they should be. Otherwise they lose their licence. Unfortunately many people in the digital media community don’t understand (or choose to ignore) why this is so. But as a content creator I can tell you that when you find material you created on someone else’s web site, and you realize that not only do they earn money from it but they pass it off as their own, you feel creatively raped. So until the digital media community bring a more open attitude to the concept of rights and ownership, the broadcast side will be very reluctant to work with them.

At the same time there needs to be a softening of the firm and archaic guidelines that govern the broadcast side. For the most part, the systems in place both for television and films were created way before the web was even given a name. They are cumbersome, full of red tape and based on an attitude that only “proper” broadcasters can make broadcast content. That’s just not the case any more and the broadcasters just have to accept the fact that they are no longer the only roosters in the hen house. But that doesn’t mean that hot chicks farting is worth broadcasting, no matter how popular their videos are on YouTube. That brings me to my final point:

1,000,000 views don’t make you Stephen Spielberg

The fact that your video is popular on YouTube doesn’t necessarily mean it’s worth broadcasting. In fact, many of the most popular videos on YouTube are such trash that they should never be broadcast. And others are blatant misinformation that has no place in the media realm. If you exclude funamenalist states like Iran, China and even the US, most countries have very strict guide lines for media outlets when it comes to balanced coverage. The internet has no such rules and as a result anyone can publish anything and present it as true. It’s a running joke that people who quote the internet need to check their sources, but it’s pretty evident that it’s not something we should laugh at. People, organizations and even governments with an agenda can use the internet indiscriminately to misinform and even blatantly lie to their audience with no reprisals. And because of clever marketing strategies and viral distribution, much of this content becomes so prolific people start believing it. Some of the best examples can be found on YouTube if you search for “global warming”. A public broadcaster would never be allowed to air much of this content because it is based on half truths and whole lies. And it’s often very difficult to tell if content produced is factual, rubbish or even part of some evil ploy. So if a broadcaster is going to get involved, these things need to be checked and re-checked and re-checked again to ensure balance and factuality. What stunns me is that many people on the digital media side don’t see such misinformation as a problem or even think exclusion of such content is equivalent to cencorship. I agree that all sides of any story have a right to be told, but when large corporations or organizations use substantial funds to deliberately misinform the public through lies and manufactured evidence we have a serious problem on our hands.

This is one of the reasons why when a digital media content producer approaches a broadcaster about distribution of her content, the broadcaster is rather reluctant to even talk to her. I’m not saying it’s right, I’m just explaining it.

So should we just tear down the bridge then?

I guess I sound pretty pessimistic about the whole thing. I’m not. I just want to get all the facts out and make people understand that the fundamental problem here lies in the lack of a common language. The analogy of a bridge is actually a very good one, but it should be thought of more like a bridge over the Gibraltar strait than a bridge over the Nanaimo river. It might seem like the digital media community and the broadcasters are standing on the same land mass and speak the same language, but in reality they are entirely different countries with different languages, customs and rules. What’s need more than anything is an interpreter or a common language we can all work from. As long as the two sides think they are on the same plane, nothing will change. They need to understand that they don’t see things the same way and that to communicate they need to find a common vantage point somewhere in the middle.

All that said, I applaud the effort and look forward to Bridging Media 2.0.

Finally, for all the Expression people who by this time must surely have stopped reading: This is relevant to you because at some point in the near future, one of your clients is going to ask you how they can put a video online and get it featured on a TV show. Now you know why it’s not as simple as putting it on YouTube (and that you’re not the only one confused about why it’s so hard).

I ran some stats today on this blog and Dabbler.ca to see what browsers people use to view the site. The results were pretty much as expected and prove that even though Internet Explorer 7 has been out for quite a while now and IE8 is on the horizon, people still predominantly use the CSS mangling Internet Explorer 6.

blog.pinkandyellow.com stats:

1. Internet Explorer 6.0 - 18.34%
2. Internet Explorer 7.0 - 11.18%
3. Firefox 2.0 - 6.80%
4. Mozilla 5 - 6.50%
5. Firefox 1.0 - 4.58%
6. Netscape - 3.34%
7. Firefox 1.5 - 2.39%

Dabbler.ca stats:

1. Internet Explorer 7.0 - 18.58%
2. Internet Explorer 6.0 - 16.35%
3. Firefox 2.0 - 15.77%
4. Safari - 3.15%
5. Firefox 1.5 - 2.92%
6. Mozilla 5 - 1.40%
7. Internet Explorer 5.5 - 1.21%

(If you’re wondering why these stats don’t ad up, it’s because I took out the Google, MSN and Yahoo! search bots)

These stats are actually quite interesting. First off, it’s obvious that people insist on holding on to older versions of web browsers. God knows why, but they do. Secondly, considering that this blog only contains info on programming and design and therefore should have visitors who are predominantly programmers or designers, it’s surprising to see that IE 6 tops the list. One would expect that the people who make web sites are the most up to date on the newest versions. I also note that Safari doesn’t figure on this list but comes in at #4 on Dabbler’s (guess Mac users don’t care much about Microsoft Expression). I’m glad to see that Firefox is climbing the charts even though it still has a long way to go before it can top Internet Explorer. But what really makes me scratch my head is #6, Netscape. Seeing as that company officially dumped the navigator last month, I don’t understand why programmers still use it. It’s crap people! Move on.

And now for something completely different:

The smart little anti-commenting-spam filter Akismet has been working overtime for me since I re-installed this blog in January. And over the weekend, it broke the 8,000 spam comments captured mark. That’s 8,000 ads for Paris Hilton nudies , SEO optimization and pharmaceuticals. I have no idea why this blog is generating such a colossal ammount of spam - especially since our other blog Dabbler.ca only collects a fraction of that even though it’s viewership is signifficantly higher.

All I can say is thanks to the WordPress team for pre-installing Akismet in their builds. Without it I would spend all of my time filtering comments instead of writing.

(And an apology to those that have gotten their comments deleted by accident. Problem is that if I forget to purge the filter for a couple of days, I have hundreds of very long messages to sift through and I tend to just delete everything. So if you feel wronged, just try again.)

This is an expansion to Anna Ullrich’s tutorial Center a page (horizontally) by using CSS which can be found on her blog. I’m picking up where she left off, so if you are confused about where we are when we start, I suggest you read her post first.

In this tutorial I’m going to isolate the CSS styling in Anna’s tutorial and move it to a separate style sheet (.css file). Doing this has two benefits: First off you can apply the same style sheet to multiple pages without having to insert all the code in each one. Seccondly, by leaving all the styling in a separate file, you can make global changes to a whole web site by just changing one file. This is a major benefit if you are working with larger sites that have many pages.

Starting point

At the end of Anna’s tutorial we were left with this block of code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
 
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 1</title>
 
<style type=”text/css”>
 
.style1 {
background-color: #CC0066;
}
 
</style>
</head>
 
<body style=”background-color: #CCCCFF”>
 
<div style=”width: 395px; margin-left: auto; margin-right: auto;”>
<p class=”style1″>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus.
Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor
bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum,
nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien,
egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam
sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas
consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu,
justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero
diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel
purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a,
consectetuer at, eros.
</p>
</div>
 
</body>
</html>

This code creates a page that looks like this:

Let’s quickly dissect the code to help understand exactly what’s going on. The first important part of code is contained in the <head> area:

8
9
10
11
12
13
14

<style type=”text/css”>
 
.style1 {
background-color: #CC0066;
}
 
</style>

Everything within the <style type=”text/css”></style> containers will be interpreted by the browser as styles to be applied to the content further down in the document. What this particular piece of code says is that every time the style of the class “style1″ is applied to content, that content should have a background colour of hot pink (#CC0066). You can see the class being called further down in the document:

20
21
22
23
24
25

<p class=”style1″>
Lorem ipsum dolor sit …
</p>
</blockquote>
In addition to the <em>very attractive</em> pink background (sorry Anna, but in spite of my company name, pink really isn't my colour) there is more styling applied to the text, but this is contained in a div within the html code itself:
<pre lang="css" line="19"><div style=”width: 395px; margin-left: auto; margin-right: auto;”>

This line of code says that all content between the two <div></div> containers should be 395px wide and have a left and a right margin set to “auto”. It’s this line of code that centers the content: By telling the browser that both the left and right margins are automatic, the browser will give them equal values depending on how big the window is and put whatever is in between in the center.

But this is a somewhat messy way of doing it, because most of the styling is inside the html code and is not repeatable. What we want to do is make it a style that can be used again and again. You can avoid this problem by employing a different method when you build the site - I’ll post a different tutorial for this technique - but for now, we’ll just fix the code to make it more funcional:

Sifting out the styles

Since we already have the style settings, all we need to do is move them to the style area in the <head> by cutting and pasting the definitions like this:

<style type=”text/css”>
 
.style1 {
background-color: #CC0066;
width: 395px; margin-left: auto; margin-right: auto;
}
 
</style>

To make this more understandable, we can rewrite it like this:

<style type=”text/css”>
 
.style1 {
background-color: #CC0066;
width: 395px;
margin-left: auto;
margin-right: auto;
}
 
</style>

To make this work properly, you also have to make a small change in the html section replacing this:

19
20

<div style=”width: 395px; margin-left: auto; margin-right: auto;”>
<p class=”style1″>

with this:

<div class=”style1″>
<p>

Much simpler, right? Well, we can do even better. Notice how the <body> is also defined within the html code? We should move that to the styles section as well:

<style type=”text/css”>
 
body {
background-color: #CCCCFF;
}
 
.style1 {
background-color: #CC0066;
width: 395px;
margin-left: auto;
margin-right: auto;
}
 
</style>

Finally we remove the styling from the <body> in the html section. Now the html is “clean” and the styles are all contained in a separate area.

Modifying the styles

This is where Expression Web’s excellent CSS tools kick in for real. Now that we have separated all the styles, Expression Web lets us play around with them in any way we want without typing a single line of code.

You’ll notice that the Manage Styles panel now has two entries: body and .style1. By right-clicking on either one of them and clicking “Modify Style”, you open the Modify Styles panel where you can edit the styles in pretty much any way you wish. If we open the panel for .style1, we see all the information contained in the style: The name of the style, what categories are active (in bold), a preview of the style as a whole and even a complete text sting of the entire style. From this panel you can make all possible changes to the style and see the results in real-time both in the preview window, the code window and also in the visual area of the design page. Likewise you can use the “New Style” button in the Manage Styles panel to create new styles through the same window. And once you have styles in your Manage Styles panel, you can apply them to any portion of the content simply by highlighting the area, right-clicking on the style you want and selecting “Apply Style”.

Making a separate style sheet or CSS file

Finally, we are going to port the styles to their own file, also called a Style Sheet or a .css file. Microsoft Expression makes this very easy. First off, you need to make a new .css file: File -> New -> CSS. This opens a fresh CSS document. Save it wherever you want and give it a reasonable name. I tend to name the main .html file and it’s corresponding .css file the same, so since my main file is called centeredContent.html, I save my .css file as centeredContent.css in the same folder.

Next, click “Attach Style Sheet” in the Manage Styles panel and select the file you just created. This causes two things to happen: First, a line of code is added to the <head> of the html page:

<link href=”centeredContent.css” rel=”stylesheet” type=”text/css” />

This is a relative link telling the browser that there is a file that relates to the page called “centeredContent.css”, that this file is a stylesheet and that it’s content is css code.

NOTE: At this point I renamed the style “.style1″ to “.box” to reflect exactly what it does. You can do this in the Manage Styles panel, in the code or in the pop-up window. Just remember to change the name in the html code as well so that where it used to say <div class=”style1″>, it should now say <div class=”box”>.

Secondly, the Manage Styles panel now shows the attached style sheet file:

But as you can see, centeredContent.css has no styles in it yet. So next we grab the styles and simply pull them down on top of the name of the .css file and voila, the styles are in the external style sheet. If you look at your <head> you’ll see that the styles are gone from the <styles> area, so you can delete the whole <styles> section without anything happening. When you open the centeredContent.css file, you’ll see that the styles are now resting there. You might think that this will cause problems, but because of the way Expression Web handles CSS code, nothing really changes. You can still manage the CSS code from the Manage Styles panel the same way you did before, from the html file, without ever opening the .css file, and you still have the same control as before. The main difference is that you can now create multiple html files that get their styles from the same .css file and that changing styles in that one file will impact all the other html files.

The end result looks the same (but appearances can be deceiving)

That’s it. The page looks exactly the same as before, but the code is much cleaner and we now have the ability to build many pages using the same style sheet.

Final code for centeredContent.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
 
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 1</title>
 
<link href=”centeredContent.css” rel=”stylesheet” type=”text/css” />
</head>
 
<body>
 
<div class=”box”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus.
Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor
bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum,
nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien,
egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam
sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas
consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu,
justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero
diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel
purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a,
consectetuer at, eros.
</p>
 
</div>
 
</body>
</html>

Final code for centeredContent.css:

1
2
3
4
5
6
7
8
9

body {
background-color: #CCCCFF
}
.box {
background-color: #CC0066;
width: 395px;
margin-left: auto;
margin-right: auto;
}

I’ve been working with Expression Web 2 Beta for two weeks now and I’ve found it to be a vast improvement from the first release. I’ll get back to that in a later post but right now I want to share with you some interesting and annoying bugs that have gotten in the way of my work.

File tree updates and image file recognition

I don’t know why, but it seems Expression Web works with some form of paging file or log that keeps track of the files in your site. That’s all fine and dandy except it doesn’t correspond with the folder you are working in. Let me explain: When I design sites I regularly ad new folders and files outside of the program by simply copying and pasting them in explorer view. Unfortunately these changes are not reflected in Expression Web unless you hit F5 or click “Refresh”. And even then, whether the tree gets updated or not seems rather random. Especially if it’s a sub-folder you currently have exploded in the tree view. Every time I ad a new file or folder within a sub folder of the site, I have to unexplode the tree to see the update. And that’s a couple of extra mouse clicks I could do without.

But that’s just the half of it. For some reason the program has serious trouble recognizing simple image files. This problem is heavily debated in the Expression Web forum and I’ve encountered it several times. Basically if you ad an image file into an existing folder outside of Expression Web, it’s hit and miss whether that file will actually be recognized by the program. Chances are all you get is a little red X instead of the image. The only way to remedy this issue is to go to File -> Import Image and import it into the program. This seems highly unneccessary as these are standard issue files (jpg, png, gif etc) that don’t require special rendering of any sort. And it gets really annoying when you are making minute changes to an image file to make it fit your layout because every time you overwrite your old file, you have to re-import it to see that update.

To be fair, I’m not sure this last issue is a real bug or if it’s an intended feature from the Dev team. Ideally I’d like to see both of the above issues resolved so that the updating/importing of new files are done automatically. If not, my secondary option would be that both full file-tree updates and image importing is included in the F5 Update function.

The PHP destroyer

Expression Web 2 Beta does have extensive support for PHP, but it’s not quite there yet. I’ve been designing some new WordPress themes with the software and I’ve come across something really weird: On the second upload of the same file, the PHP is garbled (at least parts of it). Here’s exactly what happens:

I have a file called header.php. Right at the top of the <head> there is this line of code:

<title><?php bloginfo(’name’); if ( is_404() ) : _e(’ » ‘, ‘box’); _e(’Not Found’, ‘box’); elseif ( is_home() ) : _e(’ » ‘, ‘box’); bloginfo(’description’); else : wp_title(); endif; ?></title>

After editing and saving the php file, I uploaded it to the server and ran a test. Everything was fine but there were some minor issues further down in the file that needed tweaking. I made the necessary changes, saved and re-uploaded the file. This time, once it reached the server, the line above read like this:

<title>&lt;?php bloginfo(&#39;name&#39;); if ( is_404() ) : _e(&#39; » &#39;, &#39;sandbox&#39;);     _e(&#39;Not Found&#39;, &#39;sandbox&#39;); elseif ( is_home() ) : _e(&#39; » &#39;, &#39;sandbox&#39;);      bloginfo(&#39;description&#39;); else : wp_title(); endif; ?&gt;</title>

It’s pretty evident what happened here but why it happened is beyond me and I think it’s pretty clear why I find this “mildly” frustrating. It does look a lot like the old PHP problem EW had, but what’s new is that it only appears to effect small parts of the file rather than the whole. There is plenty of PHP code further down in the same file that remains unaffected even though the <title> tag is completely garbled. Ghost in the Shell anyone?

I always say that unless you start things right, you’re going to run into problems somewhere down the line. Nowhere is that more true than in building websites, especially if you venture into the realm of standards based scripting. Fortunately there are people out there who know how to do things the right way, and they are more than willing to share their knowledge with us layfolk. One such person is Eric Meyer and with his new CSS Sculptor for Expression Web he sets out to make the deceptively complicated task of making web sites look the same across all browsers easier for one and all.

If you’re one of those people who like to write all your CSS in Visual Studio and you know absolutely everything about standards-based coding, you need read no further. If on the other hand you are like me and CSS is like a second language you still have trouble with, this is vital information.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep.

Why do I need this?

There are two answers to this question: The first one is that for some reason different browsers interpret CSS differently so unless you really know what you are doing, chances are the sites you build end up looking slightly different depending on whether the visitor uses Internet Explorer 5, 6, 7 or 8, FireFox, Opera, Safari or any number of other browsers. There is no good reason for this other than that in spite of many years of work, the “standards” that govern CSS and other web code are so vague and flexible that there is no joint agreement on exact interpretation. It’s worth noting that Internet Explorer has always been the big culprit here and that with the release of IE 8, Microsoft is finally joining the fold and matching the rest of the world. But I digress. What Eric Meyer and other CSS gurus have been telling anyone willing to listen is that with some strategic coding, you can still make the all browsers act the same way. But this requires work. CSS Sculptor sets out to do the brunt of this work for you.

The second answer is that even though Expression Web has many CSS templates, they are mostly empty and they require you to insert all the little pieces that make the code compliant. And that’s a lot of hard work on your part.

To give you an idea of exactly what CSS Sculptor does that EW doesnt, I’ve built two examples. They are both out-of-the-box layouts with standard text inserted. They were both created with about 5 mouse clicks and I only made minor adjustments to get this demo up and running - specifically I separated the CSS from the CSS Sculptor project and put it in a separate file and I inserted the dummy text from the CSS Scupltor project in the EW project to have some filler. Both these pages were made using Expression Web 2 Beta and they have no alterations of any kind from me. You can see the Expression Web example here and it’s CSS code here. The CSS Sculptor example is here with it’s CSS code here.

Anyone can see that the two examples are miles apart in both layout and functionality and you’ll also notice that the CSS part of the generated pages are hugely different. And while none of the pages will apper exactly the same across all browsers (mostly due to lack of defined elements like a background colour), the CSS Sculptor page is by and large fully working while the Expression Web page is unuseable garbage (notice where the footer is located).

OK. So what exactly does it do?

As is obvious from the examples above, CSS Sculptor spits out a lot more code than the native CSS generator in Expression Web. The code generated by CSS Sculptor also contains parts of Eric Meyer’s CSS Reset code which goes a long way in ensuring browser interoperability. In addition, the program gives you a ton of plug-and-play options like menu bars, colour schemes and so on to get you started quickly and easily. To top it off, it even inserts both dummy text and plenty of commented out instructions and explanations to make it easier to understand exactly what’s going on. To an avid coder this might seem excessive or even unnecessary, but to a designer who dabbles in code it will be a life saver.

So should I buy CSS Sculptor or not?

Whether this application is for you depends on what you do and how you do it. Like I said before, if you know what you’re doing and you usually type out your CSS in Visual Studio for a perfect result with no testing, you’re not likely going to use this app even if you should. If on the other hand you are constantly creating new CSS layouts and you find yourself sifting through the web again and again to figure out why your margins keep shifting or why your header is hiding under the main body, this is a good tool to get your on your way.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep. That way you spend less time fiddling with the framework which means you have more time to tackle the intricate details. And time saved means more time for the important stuff.

Personally I can see a hundred uses for this application and I’m not going to think twice about shelling out the dough to get it. Eric Meyer’s CSS Sculptor for Expression Web will sell for $99.99, retail but for the first couple of weeks after it is released, WebAssist will be offering a discount on it. For my purpose, the many colour schemes and other nifty editing options included are superfluous, but that’s because I like to see what I’m doing when I’m doing it and I tend to change my mind a lot during the designing process. Even so, having a quick and easy way to get the framework up and running properly means a lot less wasted time and increased productivity, and for that alone it’s worth it.

Eric Meyer’s CSS Sculptor for Expression Web is a simple one-click install that snaps into Expression Web automatically and requires no work on your part. Once installed, it shows up on in the program and works flawlessly. And although it doesn’t build stunning websites for you all by itself, it gives you a solid foundation to start from.

I’ve had a chance to play around with Expression Studio 2 Beta for about a week now and I can tell you there are some huge improvements in the new releases. Today I’m going to limit my scope to Expression Design 2 Beta. It’s only fair considering how harshly I criticized the first release of this program.

I have yet to experiment with the XAML part of this program so these observations are purely based on my experiences with Design 2 as a design program.

Pixel friendly

If you read my other posts on Design you’ll know that the first iteration of the program operated on a pixel-free basis meaning that it allowed you to export bizarre image sizes like 19.325 px and so on. Although this wasn’t a problem if you were designing vector graphics for vector applications, it was a huge pain if you were desiging for export to bitmaps. Well, those days are gone my friend. Design 2 not only works in pixels if you want it to, but it snaps to pixels as well so you avoid exporting white space.

Clean bitmaps

Another big issue I had with Design 1 was the horrendous quality of the bitmap exports from the program. When I first blogged about it, the Expression Design dev team actually contacted me directly because they couldn’t believe their own eyes. But sure enough, the program was mangling bitmaps to such a degree that they were pretty much useless. Well, once again the dev team listened and the new bitmap exports are crystal clear. I’ll post a new set of exports when I find the time but I can tell you right now that they are on par if not better than PhotoShop.

Effects outside the artboard

One weird thing about Design v1 was that the applied effects didn’t function outside the artboard. I guess it makes sense in some ways but for an Illustrator guy like myself it was just damn weird. And it did occasionally lead to problems. In Design 2, the effects are no longer artboard-bound which means you can create elements with effects, store them off the artboard and still see what you’ve done to them without having to drag them back in. You can also make crop areas outside of the artboard and export these elements to bitmap, XAML or whatever you want.

New exports

Whereas before you had to tur off the layers you didn’t want to export, you now have several export options in the export window. First off you can export everything visual on the artboard like you could before. The second option is Export Selected which lets you only export the currently selected element on the artboard on a transparent background. The third option is Export Slices which lets you export a series of slices in one click. Simple improvements that save a lot of time.

Sub-layer control

Coming from PhotoShop and Illustrator I found it incredibly annoying that you had no visibility and locking control on the sub-layers in Design. This has been fixed and you can now toggle visibility and lock on all sub layers independently. Again a sublte improvement that makes a world of difference.

So far the Design 2 experience has been a joyous one for me. I have yet to encounter any bugs and the program is more functional than the original. There are still things it can’t do but the inclusion of proper layered PSD importing makes these shortcomings less of an annoyance. I am currently desigining a new website using only Design 2 Beta and once it’s up and running I’ll give everyone a full run through of the experience.

For now I highly recommend getting the upgrade.

I’ve been talking about this for a while now and it’s time I got a little more specific. It is my contention that with some small tweaks, WordPress can be used as an excellent Content Management System (CMS) and used to serve small-scale business websites. This isn’t something revolutionary - a simple Google search on the words “WordPress” and “CMS” gives you many interesting entries - but I don’t think the full potential of this alternate use has been explored. So I’ve taken it upon myself to see just how much I can get out of this small little program and if it can be used to serve my many clients in a more effective manner.

Why WordPress

That’s the first question I get: “Why WordPress? What’s the point? Why don’t you just use a CMS like Joomla! or Drupal?” To answer the last question first, in most cases using Joomla! or Drupal is like trying to kill an ant with a tank. Not only is the tool way too big and wasteful to do the job, but chances are the ant slips between the belt threads and you don’t actually achieve your objective at all. These huge Open Source CMSes are excellent if you are building large-scale community based websites with multiple blogs etc etc but for small business applications they are often too large and cumbersome. What’s needed is a simple, easy to understand CMS that gives the client the ability to quickly edit, update and manage her website with the least ammount of hassle. Sure, you can build something like that yourself, but why bother when there is already an application that pretty much does what you want available for free?

There are a couple of other reasons why I want to tap the full potential of WordPress for this project: First off, WordPress has an extensive and growing library of plug-ins and ad-ons that make it a very powerful piece of software. Seccondly, blogs have become an excellent way of promoting yuour business by letting your clients interact with you on a semi-informal basis. And WordPress is a blogging platform. Nuff said. Thirdly (and maybe most importantly), WordPress blogs has an uncanny ability to get synced up with search engines like Google and MSN almost immediately upon being launched. Through a couple of very interesting experiments I’ve learned that the best way to get your website listed on Google is simply to build it on a WordPress platform. And if you are running a business, geting listed on Google can be the difference between being noticed and going under.

Project Outline

What is needed to make this work? One major hurdle used to be the ability to put the standard blog front page on a sub page. This used to require quite a bit of coding, but in WordPress 2.3 and above it’s actually built into the main setup.

The next big issue is to get out of the standard header, body, footer layout scheme that all WordPress themes are built on. Although this feature is unneccesary in most cases, I can think of a dozen scenarios where you want individually styled pages with their own CSS backend and right now, that’s not something you can do right out of the box. I’ve been theorizing about this problem for some time and the solution appeared most unexpectantly at a session at MIX08 where the presenter to save time ignored the whole WP theme and built an external page with the loop calls inside it. It was a bit of an aha moment for me that you don’t actually need to stick to the rigid frame of WP, and although it is technically not correct to do so, if it makes my life easier, to hell with correctness.

Another question is to what extent one can use the Custom Fields to make styling changes in pages. I’d like to experiment and see just how far I can push this feature.

Finally, is it possible to make a non-WordPress site utilizing the WordPress infrastructure and database? In other words, can I build completely separate pages outside of WordPress and then use the loop calls etc to insert the required info in such a way that the site can be managed from the regular Admin panel without the client having any access to the controlling files. This final question is the crucial one because in the end what is needed is a manageable CMS that gives the client unlimited access to the content but limited or external access to styling, layout and other important files so that nothing can be “broken” by mistake.

The Future

In the coming weeks I’ll be launching two sites built on a WordPress as CMS v0.1 platform (pretty much stragith WordPress with some heavily customized themes) and once these are done I’ll dive head first into a major hacking project to see just how deep the rabbit hole goes. With any luck I’ll have a fully operational and customizeable CMS to use as a base for my client sites before the summer. In the spirit of cooperation I have every intention of blogging about all my findings and sharing the code and hacks with the online community. I’ll also blog further on how to modify WordPress blogs using Expression Web to help bring some beauty to the blogosphere.

Silverlight is supposed to support the excellent Opera web browser, but there is a long road between theory and reality. As of right now, a clean instal of Silverlight will not function at all in Opera, even with the “masking” or “cloaking” feature. According to Opera themselves, Silverlight was supported already in version 9.22, but I’m running 9.26 and it doesn’t work for me.

Crazy Boomerang Blog has come up with a snippet of JavaScript that seems to solve this problem by cloaking Opera and pretending it’s Safari (!?!?) running on Windows. This works to a degree but depending on the SL app will cause the browser to crash. So far there is no support for Silverlight 2 and if you try to apply this smart little JS app, all you get is a blank space. I can’t say for sure, but it appears that this is actually an Opera problem and not a Silverlight one. Regardless, I hope the people at MS and Opera can get their heads together and get this app running on what is possibly the best (and definitely the fastest) browser on the planet.

[Crazy Boomerang Blog]