Splash of Style...Macs, Photography, Design, and other Passions

ReDesigning a Web Site with Expression Engine

May 16, 2009 by debbie T | Content Management • CSS • Expression Engine • Web Design • Web Development • XHTML

I have been a faithful Expression Engine user since 2004. I was lucky enough to be one of the thousand or so people who received free copy way back when. Movable Type had just released version 3, and there was a huge uproar over the new licensing agreement. Pmachine (Expression Engine) decided to take advantage of the bad publicity and give away a ton of free copies (originally $149).

Anyway, I have been a fan ever since. Yeah, version 1.5 might be looking a little long in the tooth, but it works for me. I know they are busy perfecting the new 2.0 version so it’ll be worth the wait.

So, back to the point of this post. I use Expression Engine on another large web site I have. It’s been almost 4 years since I last designed it, and it’s in bad baaaad need of a redesign. It’s true that if you don’t use it, you lose it; a lot of my web coding knowledge has been tucked away into back pockets in my brain, so it’s also been a challenge to relearn CSS. There has been so many new tips and tricks, and the good news is, no need to design for old outdated browsers. I do still need to worry about IE6 users, but further back than that, nope. Done!

So, for the past week or so, I have rolled up my sleeves and concentrated on relearning CSS and the Expression Engine design tags & templates. It’s been a blast. I forgot how much I loved coding!

My Process

I don’t know if anyone will care about my redesign process, but I figured that I would try to document it anyway, at least for my own sake.

Where to start? Read the Rest of the Article

CSSEdit and Espresso Editors by MacRabbit

May 16, 2009 by debbie T | CSS • Mac Software • Web Design • Web Development

I have used quite a few Mac code editors but to be honest, I had never been 100% satisfied with any code editor on the Mac (sigh) as I was with Dreamweaver, Homesite, and/or HTML-Kit on Windows. It’s not that I am not happy with Mac editors, I just never found the absolute perfect replacement.

I started using skedit years ago, and I found it was sufficient for larger coding tasks. For quick coding tweaks, I found nothing beat Text Wrangler.

But I was starting a new re-design project using Expression Engine, so I wanted to try out a few different options.

CSSEdit

I dug out my copy of CSSEdit that was barely launched once, and I figured now that I had some true CSS coding tasks to do, it was time to shake of the dust and use it. Now I just LOVE it! It’s awesome.

Sometimes I like to hand code CSS, and other times, I like the editor to insert code for me. CSSEdit will do both. It has code hints & completion and syntax highlighting, all of which I love and NEED! It’s easy to fill in the appropriate fields, and it will insert the CSS code for you. I found it to be the most Dreamweaver-like app I have ever used when it came to CSS coding.

Disappointingly, it does not work with (x)html coding, so it’s not a “one stop shop” editor. It will not open an .html or .php document using the File>Open menu. It will open it if you drag the file from Finder to the CSSEdit icon on the Dock. But it’s really not meant for html code, but it does CSS editing and it does it well!

Espresso

I purchased the latest MacHeist 3 bundle, which included a copy of the Espresso code editor. I had been looking forward to using Espresso since it was created by MacRabbit, the same developers as CSSEdit. I had previously launched it once or twice, and wasn’t thrilled with it at first glance, but I figured this would be a great time to really put it through it’s paces. And I am glad I did.

I like the interface and how projects are displayed in the workspace. Although I wish there was some sort of Project Manager window, maybe coming soon to a future release, or perhaps I will just get used to opening the project file just like I would any other file.

I love that it has a different approach to tabs. Tabs are not located at the top horizontal menu, but on the side bar, at the top of the file list. I think it’s more intuitive that way.

(x)HTML code completion and hints both work very well.

The FTP cloud publishing feature is a bit unintuitive, but I am hoping that either I have to work with it more, or it will become better with future updates. For now, I still use Transmit for my (s)FTP transfers. There is a quick publish feature, and that might be a good option, but I wish there was a right-click ‘upload’ option for any given file from the side bar.

I really disliked the default syntax highlighting color theme, and all the other available View themes were either light text on dark backgrounds (hate dark backgrounds), or white backgrounds with very light text. huh? What’s up with that? So, I took one of the color syntex highlighting themes, and made adjustments to it for my own needs. It was very easy to tweak the CSS theme in CSSEdit, as it was just a plain .css file!

I haven’t had the opportunity to work with any Espresso Sugars, but I did download a copy of the Expression Engine sugar, so we’ll see how that goes when I get deeper into EE code for my new project. I also haven’t worked with snippets, but I do love how they work in Skedit, so hopefully they will be useful in Espresso.

The browser “preview” works well with regular static html and CSS but I can’t see how it could possibly work with dynamic code, unless you have a server set up on your computer. I don’t have time to mess with that, so all my browser views will have to be online, where it can work with the database directly.

CSS editing in Espresso is disappointing not too bad, but not as good as CSSEdit. CSS code hints work for the CSS property name, but there are no hints for the value. – I was behind on a few updates, eek. Updated to version 1.05 and it does indeed include code completion for CSS values. It completes the closing bracket and trailing semi-colon for you.

Since MacRabbit are the same developers for CSSEdit, I thought that there might be integration or something, but so far, CSS editing is not wonderful. the best, so I will stick with CSSEdit for CSS editing.

It might sound like I don’t like Espresso, but I really do. At this stage, it’s still brand new for me; I know I haven’t tapped into all its power yet, and I think the same is true for MacRabbit as well. They will be adding more features and hopefully there will be a great future ahead.

But so far, I am impressed, and I will continue to use it. Would I pay the full price of $80? No, I don’t think so, but I am glad I got it as part of the MacHeist Bundle. I think if there was better CSS Support like in CSSEdit, or even some sort of integration between the two (similar to how all Adobe apps work well both together and separately) I would consider paying the $80.

So, that’s my quick (and probably premature) review of CSSEdit and Espresso.

Together with Transmit FTP, it’s a good work process!

Google Books

February 26, 2009 by debbie T | Books • CSS • Digital Photography • Internet • Web Design • Web Development • XHTML

I know I knew about this before, but never really looked into it….but Google has a very large collection of books to browse.

http://books.google.com/books

Add the books to “Your Library” so you can save them for later. There’s tons of web design, html, css, and photography books available, with links to Amazon & Barnes and Noble. Very cool!

MacRabbit Espresso Public Beta

December 30, 2008 by debbie T | CSS • Mac Software • Web Design • Web Development • XHTML

Wheee! yay, finally!

MacRabbit is now offering a public beta for their new code editor named “Espresso”

Oh I wish I could play. My Macbook Pro is staying at Applecare Hospital, and I don’t know if I will be getting it back soon.

It is something I have been looking forward to for awhile though. It looks really great, I can’t wait to check it out on my MBP!

http://macrabbit.com/espresso/

Relearning CSS & Web Design

November 29, 2008 by debbie T | CSS • Firefox Browser • Web Design

One of my older web sites is in desperate need of a new web design; the problem is I am so rusty and out of practice. sigh, one of the perils of getting older! You don’t use it, you will lose it!

I needed to re-learn CSS positioning and layout, so I took a couple of days and read through Chapter 8 of the CSS Anthology book by Rachel Andrew. Fantastic book for learning the bits and pieces of CSS.

So, I think I now have recovered enough knowledge to tackle my project.

Back a couple of years ago, when I was regularly designing, designers had to worry about coding for horribly outdated browsers like IE 5 for Windows & Mac and Netscape 4. Thankfully, the browser stats for the site I am redesigning show an insignificant number of visitors using these outdated browsers. I still have to deal with IE6 (which still shows about 30% of my visitors) but the design will be simple, so I don’t foresee a problem. Uh oh, I probably just jinxed myself!

And while we are on the subject of IE6, who ARE these people still using that insecure browser? The cool thing is the stats show about 17% of visitors are using a version of Firefox. It is not a techie site, so that is good news!

Want to learn more about positioning and layout using CSS? Check out these other sites:

Sitepoint Giving Away Free Book

November 20, 2008 by debbie T | Books • CSS • Web Design

It’s a twitaway:
http://twitaway.aws.sitepoint.com/

Sitepoint is giving away a free full pdf copy of their book “The Art & Science Of CSS”

On the twitaway page, it states that you can either follow Sitepoint on Twitter or give them your email address to download the book. I followed them on Twitter, but wasn’t sure how the download exactly worked, so I just gave them my email address to get the download.

UPDATE: Okay, I found out how it works on Twitter. They send you the link in a direct mail from Twitter. Cool.

If you go the email route, be aware that they do like to haunt you a little bit afterward, but it’s not too bad. I don’t mind, especially when they are giving away a free book.

But I did receive my download link by email, and it took seconds to download…It looks like an interesting book. Now to find time to actually read it.

Panic Releases Coda for Mac

April 24, 2007 by debbie T | CSS • Mac Software • Web Development • XHTML

Yesterday, Panic announced the release of Coda 1.0, an all in one web developer’s tool for Mac OS X. I love Panic’s FTP app Transmit, so I am looking forward to checking it out further.

Other Web Resources:

Hopefully tonight, I will have time to download the trial and experiment.

Get Naked – 2007

April 4, 2007 by debbie T | CSS • Web Design

Well it’s that time of year again, when all daring designers decide to get naked and show off their true form.

Tomorrow marks the Second Annual CSS Naked Day. Remove your CSS style sheets, IF YOU DARE! baahaahaa.

http://naked.dustindiaz.com/

Since I am using WordPress, it is easy to remove the CSS file link. I saved a copy of my theme’s “header.php” file, added the text explanation of why my site is so plain, and deleted the link to my style sheet file.

CSS Child & Adjacent Sibling Selectors

July 18, 2006 by debbie T | CSS

[This is an advanced CSS tutorial. To learn the basics of XHTML and CSS, please view my Web Design Made Simple tutorials.]

It started out with an email discussion with friends, and worked its way into a detailed experiment to grasp how CSS child and adjacent sibling selectors worked. (Important Note: some advanced selectors do not work in IE version 6 or below.)

### CSS Children

What is a CSS child? It is a direct descendant of an element.

<div>
<p>This is <em>fun</em></p>
</div>

* The p tag is a child of the div tag
* The em is a child of the p element
* The em is a descendant, but not a child of the div tag

### CSS Adjacent Siblings

What is a CSS adjacent sibling? It is an element that follows right after another, as long as they both have the same parent.

<div>
<h1>Heading</h1>
<p>This is fun</p>
<p>This is challenging too</p>
</div>

* The h1 and both p elements are children of the div element.
* The h1 and both paragraphs are siblings, but only the h1 and the first paragraph are adjacent siblings.
* Both paragraphs are adjacent siblings.

Now that we have the definitions out of the way, how do the selectors work?

### CSS Descended Selectors

If you want to define a style for a descendant of an element, you would create a CSS rule with two selectors separated by a space.

div em {color:blue;}

The above CSS code would display all em text as blue as long as it was nested somewhere inside a div element.

### CSS Child Selectors

If you only wanted to define a child, then the greater than special character is used.

div>em {color:blue;}

The above CSS rule would format em text only if it was located directly in the div element. Any em text nested in a paragraph or heading would not display blue.

### CSS Adjacent Selectors

To define a CSS adjacent selector, the plus sign is used.

h1+p {color:blue;}

The above CSS code will format the first paragraph after any h1 headings as blue.

h1+p+p {color:blue;}

The above CSS code will format the second paragraph after any h1 headings as blue.

### Experiment

The best way to understand CSS is to experiment with it; if you are intimidated to experiment with your own file at first, but if you would like to see an example, I am sharing my child.html file. View source to see the embedded CSS and detailed notes.

Have fun!

TechCheatSheets.com

July 16, 2006 by debbie T | CSS • Internet • Web Development • WordPress • XHTML

I love cheat sheets! Found a great resource at Tech Cheat Sheets.

Besides various cheatsheets for php, css, and html, you can also find WordPress Themes and Microformats cheatsheets.

I just used their easy submit form to send the URL for the Expression Engine Quick Reference cheat sheet.