Anna Ullrich just published an excellent article called Who’s Editing Your CSS? explaining how Expression Web 2 handles CSS and why you can trust the program to spit out proper non-bloated code.
If you’ve watched my webcast or read any of my articles you should have an idea of this but Anna’s article is far more thorough than anything else I’ve read.
Oh, by the way Anna: Who is editing your CSS? Your page is broken in Opera ;o)
I guess it’s time to announce the worst kept secret of the century: I’m writing a book about Expression Web 2. More specifically it’s called Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours and it is scheduled for release in October this year.
The book is already listed for pre-order on Amazon.com so if you are real eager to get your hands on this literary masterpiece you can put your money in now and set up your lawn chair and tent by the mailbox. Bring food though… October is still some months away.
In writing the book I’ve tried to show not only all the great functionalities of Expression Web 2 but also how you can develop a good work routine that produces consistent results every time. It is bursting with tutorials and demos of how you can achieve the same results with different techniques and it is my sincere hope that it will help budding as well as fully blooming web designers bring some extra panache to their designs.
So if you are wondering why I have pretty much fallen off the face of the earth, now you have the answer: I’m up to my neck in easy-to-understand-but-hard-to-come-up-with tutorials that will give people the skills and know-how to get the most out of this powerful piece of software.
Building Compelling Websites on the Microsoft Platform
I’m doing an Innovation Briefing Webcast about Expression Web 2 for Microsoft this coming Thursday at 11am Pacific Time. Hit the link below to sign up to join in. I don’t know if there’s still more spots for registration but if not, the entire one hour session will be recorded and published in wmv format for download and streaming.
I’m meeting with the Expression Web dev team on the Tuesday before and I haven’t really nailed down what to present at the webcast so if you have any questions or want to see a demo of a specific function or anything like that, please drop me a line and I’ll work it in.
Before you ask: No, I don’t work for Microsoft.
|
WEBCAST DATE
|
||
|
||
 |
Paul from Microsoft approached me a while back about doing a one hour presentation on my work with Expression Web. The session now has a name: “Expression® Web — the powerful, new, professional web editing tool” and it will take place at Microsoft’s Vancouver office this coming Wednesday at 8:30AM. For those of you who can’t make it, Paul and I will also produce a screen cast version of the session which will be available online some time in early June.
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):
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.
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.
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.
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.
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;
}
<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>
/* 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).
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.
At the end of Anna’s tutorial we were left with this block of code:
<!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:
<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:
<p class=”style1″>
Lorem ipsum dolor sit …
</p>
In addition to the very attractive 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:
<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:
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:
<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.
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”.
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.
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:
<!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:
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.
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.
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><?php bloginfo('name'); if ( is_404() ) : _e(' » ', 'sandbox'); _e('Not Found', 'sandbox'); elseif ( is_home() ) : _e(' » ', 'sandbox'); bloginfo('description'); else : wp_title(); endif; ?></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.
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).
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.
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 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.
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.
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.
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.
I’ve been working with Expression Web for about 6 months now and I’ve found that above all other things, what sets this program apart from the competition is it’s handling of CSS. More specifically how easy it is to not only write CSS from scratch but also to modify existing code for fantastic results. Case in point: The new look of this blog. If you’ve visited before you’ll notice that I recently upgraded it from the dull look of a standard WordPress blog to something altogether different. And what will (hopefully) surprise you is that once the design was conceived (which took some time) the actual coding only took a couple of hours! All this thanks to Expression Web and how it handles CSS code.
People often ask me how to make their WordPress blog look great. In the past I’ve always told them that it’s a lengthy process and you really need to know a lot of code to get to where you want to be. That’s just not the case any more. I am willing to go as far as saying that with some basic training and a rudimentary understanding of html, anyone can make significant and functional changes to their blog using Expression Web without ever knowing what CSS is and how it works (this technique will work on any blog or other website that uses CSS btw.)Rather than just blabbering on and on about how great this program is for designing and re-designing blogs (and no, I’m not on the Microsoft payroll even though I’d like to be - hint hint people!) I’m going to show you just how easy it is to make changes to your blog by tweaking the CSS code with Expression Web.
DISCLAIMER: Although altering CSS code in Expression Web is very easy, it doesn’t mean that the end result will be very attractive. For that you need an eye for design. So even though you follow my instructions to the letter, there is no guarantee that your blog will look any better. I’m just giving you the tools: It’s your job to bring the creativity. Not everyone is a designer. Harsh, but true.
There are two main ways to set up a blog: You can get one for free at WordPress.com, Blogger.com or any number of other places. Just make sure you are free to edit the CSS through the service. I know Blogger.com allows you to do this, I’m not sure about the others. Or you can host one yourself. As far as I know, the most popular blogging software out there is WordPress, but there are others that work just as well. The good thing about WordPress is that it’s 100% free, constantly improved and that there are thousands of great plug-ins and other goodies to make it more interesting. The advantage of hosting a blog yourself is that you have complete control over the content and that you have your own domain name rather than something like myblog.wordpress.org.
This is by far the most important and time consuming step. The only way to make your blog stand out visually is to make it look good. And the only way to make it look good is by having a great design concept. I can’t tell you how to do this; it’s like painting a picture or writing a poem - creative work defies explanation. What I usually do is I write down some words that describe what I want to convey in terms of emotion, “feel” and so on. Once I have a general idea I play around with colour combinations in Kuler and find something that fits. Then I look for inspiration and start sketching things out on paper. Finally I consolidate all my ideas into an actual image of what the final product should look like in a program like Expression Design. For this blog I used Adobe Illustrator, Adobe Photoshop and Expression Design to create the final graphical representation of the blog. If you want anything more than just simple boxes and colours, this step is vital.
Blogs work on two planes: PHP on one side and CSS on the other. The PHP portion for the most part decides what content is displayed and the CSS side decides how this content is displayed. But the PHP portion also has an impact on how the content is displayed because it decides where different elements appear like if the sidebar should be on the left or the right, whether the menu is vertical or horizontal etc. If you intend to build your new blog from scratch and you don’t know PHP well, this can be a grueling process. Fortunately much of the work has already been done for you by others. (I have to tread lightly here because what I’m about to say might sound like blatant plagiarism.)
Rather than building your theme from scratch, try to find one that has the basic components you are looking for already laid out. In most cases one of the standard themes have everything you need and if not you are almost certain to find one that does. So rather than reinventing the wheel, you should build on the experience of others and focus on making things better. Just be warned: This is touchy territory. If you blatantly rip off someone else’s theme without giving them credit, you are in for a world of hurt. The line between borrowing and stealing code is very thin and you can easily step over without even knowing it. So to be safe it’s always a good idea to credit the creator of whatever basic theme you decide to build on.
Every theme is different. And if you want to reshape a theme to your vision you need to understand how it works first. In the past this process was a total nightmare, but with Expression Web it is incredibly simple:
Now you have complete access to your theme and it’s CSS and you are ready to understand exactly how it works. While in Design view you can now click on any element and see the complete list of divs and other elements that make this specific part of the blog look the way it does. You will also see all divs and other elements displayed as superimposed boxes showing how the content flows. That way you will immediately get a solid understanding not only of how the theme works but what you need to change to make it look the way you want.
If you’ve decided to make a graphic-heavy blog, you need to “chop” your design into manageable pieces. To be more precise, you need to cut out all the elements you want to feature in your blog in such a way that they’ll fit inside the divs, tables or whatever other element you wish to display them on. Expression Design and it’s Crop Marks feature is excellent for this purpose. You can see how this is done in this video demo I posted last year. How exactly you chop your design is up to you - it all depends on the desired end result. I’ll post some examples in a separate article later.
This is the fun part: Once you have your testbed set up and connected to a local CSS file, you can start messing around. There are several ways of doing this depending on what you want to achieve. If for instance you want to alter the width of your main content area, all you have to do is click on any object within that area, then find the div that controls the area you want to change in your top bar and finally resize it by moving the sides using your mouse. It couldn’t be easier.
If you don’t like the brute force approach you can fine tune the code using the Modify Style feature: First off, click on the element you want to change. The style that controls this element will automatically be highlighted in the Manage Styles tab. Right click on the style, select “Modify Style” and a window will pop up with all the different options for modifying the style. Now you have complete access to the style and you can change it in any way you want for immediate results.
A great thing about this method is that as you change the CSS code, you can see the changes in real-time right inside Expression Web using the Design view. Any change made will immediately be visible and as a result you see right away if something isn’t exactly working out the way you planned. It also means that if you do things that are not allowed in CSS, you’ll see that it doesn’t work and you can find out what went wrong. If you want to you can also make changes directly in the style sheet and see the changes in real-time. As a result, your style coding process becomes much easier and more effective.
When you work with style sheets in Expression Web, you are actually working in two documents simultaneously: When you make that initial change in the stylesheet link (step 4) you are actually opening the .css file for editing. And when you save your testbed, the program will ask you if you want to save the changes to the embedded file as well (that would be the style sheet).
That way you avoid forgetting to save your latest CSS alterations and the process is that much simpler.
Now all you have to do is upload the new CSS file and any related graphics, make whatever changes you want to the php code and your blog will have a new look.
There are a couple of things you need to know about styling blogs. First off, all blogging software is different so the php code will vary greatly. If you are planning on making massive structural changes in the blog, you might want to take a very close look at the documentation. Secondly, blogs often work with separate pages. In WordPress you have three sets of views: the “index” view, the “Pages” view and the “single post” view. To fully restyle your blog you need to make changes to all these views. The easiest way to do this is to open each view in your browser, copy the source code into your testbed document and make changes on a view-by-view basis. That way you have all bases covered. Third, make backups! It’s easy to mess things up really bad if you are just experimenting, so when you have something you like, make a backup. That way you can always go back and fix whatever you broke. Fourth, Ctrl+Z only works in the document you are currently in. So if you make a CSS change in your testbed document and then hit Ctrl+Z or click “Undo”, the undo will only affect the testbed document and not the CSS document. To undo your latest blunder in the CSS document you have to have that one open. It’s easy to forget and can lead to some real hassles later on. Fifth, WordPress templates are full of errors to begin with. These normally consist of unclosed or excessive divs and will normally show up in Expression Web as yellow highlights. Take the time to fix these in the PHP code or you could get some really bizarre results in browsers you didn’t test. Finally, test in as many browsers as possible. CSS is notoriously complicated because all browsers handle it differently. But if you do things properly your blog will look the same in all environments. Unfortunately the only way of making sure is to test it in all browsers, even ones you don’t really use.
So there you have it. That is the rough outline of how I restyled this blog to make it look the way it does now. The same technique was used to restyle the Vancouver blog Dabbler.ca and several other blogs I’m currently working on. It’s fast, effective and functional. I am guessing that the Expression Web team is going to touch on the same techniques in their presentation at MIX08 later this week (but I could be wrong - there are probably better ways of doing this) and I am definitely going to be there to pick up some more tips and tricks.
I’ll be posting some code examples to give you an idea of exactly how this blog works later on. For now, design, experiment and have fun.
Expression Web Team Feed
