How We Redesigned Elated.com: The Build Process

Matt takes a journey from PSD to HTML (via CSS and PHP) to show how he built Simon's new design for Elated.com.

How We Redesigned Elated.com: The Design Process

As Simon explained in How We Redesigned Elated.com: The Design Process, we recently decided it was time to give Elated.com a fresh new look. After a bit of to-ing and fro-ing, Simon came up with the beautiful design that you see today, and it was over to me, the coder, to implement it!

In this article I'll go over a few of the areas I worked on when building the design, and look at some of the challenges I faced and how I overcame them. I'll explore:

  • Building the CSS layout, including the header, footer, columns, logo, menus, and more
  • Adding a Twitter feed
  • Using web fonts with Typekit
  • PHP coding, and
  • Testing and putting live

I hope you enjoy reading it!

The basic CSS layout

The CSS layout

The basic XHTML markup and CSS were fairly straightforward, although the drop-down "Articles" menu proved a bit of a challenge, as you'll see later!

It's a fairly standard layout:

  • Header along the top, with logo, search box and main nav
  • Main content column on the left
  • Sidebar on the right
  • Footer with secondary nav

I used the XHTML Strict DOCTYPE, since I've found that this tends to give the most consistent results across browsers. At some point I expect we'll change the markup to HTML5 instead.

The logo

The logo

The logo tab is simply a styled link inside an h3 heading. I chose h3 rather than, say, h1 so that the site name isn't the most prominent heading on the page, for both accessibility and SEO reasons:


<h3><a href="/"><span>Elated: Helping People Make Websites Since 1997</span></a></h3>

The CSS sets the logo background image on the h3's a element. The span element is hidden by the CSS, so it's visible only in browsers that don't support CSS:


#pageHeader h3 a { cursor: pointer; float: left; width: 272px; height: 111px; margin: 0; padding: 0; border: 0; background: transparent url("/res/Image/v4/misc/elated-logo-tab.png") no-repeat 0 0; }
#pageHeader h3 span { display: none; }

The search box

The search box

The top-right search form lets you search our main content areas. It defaults to the articles but is context-sensitive — for example, if you're browsing the ImageKits it'll search those by default. There's a little bit of inline JavaScript in there to clear the "Search (xxx)..." text from the box when you click it:


    <form id="globalSearch" method="get" action="/">
      <div>
        <input type="hidden" name="action" value="search_content" />
        <input type="hidden" name="searchContext" value="articles" />
        <input id="searchQuery" name="searchQuery" type="text" value="Search articles..." class="textField" onfocus="this.select(); if(this.value.slice(-3)=='...') this.value=''" onblur="if(this.value=='') this.value='Search articles...'"/>
        <div id="searchButton"><input id="searchSubmit" type="image" src="/res/Image/v4/misc/search-button.png" value="search"/></div>
        <div class="clear"> </div>
      </div>
    </form>

The main menu

The main menu

I created the menu as an unordered list with a semitransparent PNG background so that the polka dots show through. The drop-down Articles menu is based on Son of Suckerfish, and is bolted onto the CSS for the main menu.

It was tough to get the Articles menu working with all the little subtleties such as the translucent background, the rounded corners/borders, the drop shadows, the horizontal separator bars and, in particular, those little green triangles above the submenu and to the left of the sub-sub-menus. I had to override a lot of the selectors on the submenu to get the sub-sub-menus working.

To be quite honest I'm still not sure how it all works, but somehow it does! Unfortunately IE7 had a weird problem with the menu disappearing behind AdSense (and IE6 didn't work at all, naturally), so IE6/7 users get no dropdown. Ah well.

I did contemplate creating elements like the rounded corners and drop shadows using the traditional approach of multiple background image slices. However, in the end, I used new CSS3 properties such as border-radius and box-shadow to achieve the same effects. While these effects may not work in all browsers — in particular IE7/8 — using CSS3 saved a huge amount of time (not to mention sanity). Hurrah for the progress of web standards!

To see how the various CSS selectors come together, look for the /* Nav menu */ and /* (suckerfish) */ sections in the CSS (if you dare!).

The columns

The columns

The main and sidebar columns were fairly straightforward. Both are wrapped in outer container divs — #mainWrap and #sidebarWrap — floated left and right respectively. For the rounded corner boxes with drop shadows, I created "top" and "bottom" divs containing background images for the corners, then added vertically repeating background images to the box backgrounds to create the drop shadows down the sides:


/* Main column */
#mainWrap { float: left; width: 660px; }
#main { width: 600px; padding: 0 30px; background: transparent url("/res/Image/v4/misc/main-content-bg.png") repeat-y 0 0; }
#mainTop { width: 640px; padding: 20px 10px 0 10px; margin: 0 0 0 -30px; background: transparent url("/res/Image/v4/misc/main-content-top.png") no-repeat 0 0; height: 0; line-height: 0; }
#mainBot { width: 640px; padding: 20px 10px 0 10px; margin: 0 0 0 -30px; background: transparent url("/res/Image/v4/misc/main-content-bot.png") no-repeat 0 0; height: 0; line-height: 0; }

/* Sidebar column */
#sidebarWrap { float: right; width: 320px; font-size: 0.9em; line-height: 1.3em; }
.sidebarBoxTop { width: 320px; padding: 0; margin: 0 0 0 -20px; background: transparent url("/res/Image/v4/misc/sidebar-box-top.png") no-repeat 0 0; height: 20px; line-height: 0; }
.sidebarBox { width: 280px; padding: 0 20px; margin: 0; background: transparent url("/res/Image/v4/misc/sidebar-box-bg.png") repeat-y 0 0; color: #666; }
.sidebarBox h3 { margin-top: 0; padding-top: 0; font-size: 1.1em; }
.sidebarBoxBot { width: 320px; padding: 20px 0 0 0; margin: 0; background: transparent url("/res/Image/v4/misc/sidebar-box-bot.png") no-repeat 0 0; height: 0; line-height: 0; }

The footer

The footer

The page footer has 4 columns: 2 columns of secondary nav, a copyright notice, and an "Elated: Love Your Site" tagline graphic. I created the nav columns as unordered lists, the copyright notice as a paragraph, and the graphic as a simple img tag. The CSS then styles each element, and also adds a background gradient to the footer:


/* Page footer */
#pageFooter { width: 940px; margin: 0 10px; padding: 20px 10px; background: transparent url("/res/Image/v4/misc/footer-bg.png") repeat-x 0 0; }
ul#footerNavOther, ul#footerNavMain { float: left; list-style: none; margin-right: 20px; }
ul#footerNavOther li, ul#footerNavMain li { margin: 0; padding: 5px 0; border-bottom: 1px solid #ddd; }
ul#footerNavOther a, ul#footerNavMain a { display: block; line-height: 1.1em; width: 160px; font-family: "museo-slab-1", "museo-slab-2", "Palatino Linotype", "Book Antiqua", "Palatino", serif; font-size: 0.9em; font-weight: 300; margin: 0; padding: 0; }
#pageFooter p.copyright { float: left; width: 290px; font-size: 0.9em; margin: 0 50px 0 0; }

Rounded buttons

The rounded buttons

Simon gave me a nice button style in his PSD: An orange gradient background, inset button text, and rounded button borders/corners. Rather than creating separate images for all the form buttons in the site — which would be time consuming and fiddly — I opted to use the new CSS3 border-radius and text-shadow properties to create the rounded corners and inset text, and a repeating gradient image for the background. This allows us to have great-looking form buttons of any size without having to do anything extra. Nice!

Here's the CSS for the buttons:


input[type="submit"] { margin: 0; padding: 4px 6px; font-size: 1.0em; line-height: 1.5em; border: 1px solid #ef6c3e; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff; background: #f05e10 url("/res/Image/v4/misc/form-button-bg.png") repeat-x 0 0; font-family: "museo-slab-1", "museo-slab-2", "Palatino Linotype", "Book Antiqua", "Palatino", serif; font-weight: bold; text-shadow: -1px -1px 1px #888; }

Sure, you don't get the rounded corners or text shadows on IE7/8, but the buttons still look decent enough on those browsers.

The exception here is the search button in the header, where I did the whole button as an image to keep it looking neat.

I also used border-radius to give nice rounded corners on form text fields and text areas.

CSS rollovers

The CSS rollovers

The design features quite a few rollover buttons, such as the RSS/Twitter/Facebook links at the top of the sidebar, and the various Share/Follow buttons towards the bottom of each page. I created all of these using the CSS sprite rollover technique outlined in our article Making CSS Rollover Buttons.

For example, here's the CSS for the top-of-sidebar buttons. Since these buttons include text too, I added left padding to each button to allow room for the icon:


#sb-rss, #sb-twitter, #sb-facebook { float: left; display: block; font-weight: bold; height: 19px; }
#sb-rss { padding: 2px 0 0 30px; margin-right: 30px; background: url("/res/Image/v4/misc/rss.png") no-repeat 0 0; }
#sb-twitter { padding: 2px 0 0 36px; margin-right: 0; background: url("/res/Image/v4/misc/twitter.png") no-repeat 0 0; }
#sb-facebook { float: right; padding: 2px 0 0 30px; background: url("/res/Image/v4/misc/facebook.png") no-repeat 0 0; }
#sb-rss:hover, #sb-twitter:hover, #sb-facebook:hover { background-position: 0 -21px; }

The news items on the homepage

The homepage news items

The main content on the homepage of www.elated.com is a list of the 10 most recent updates on the site. Each update features a horizontal orange bar containing the publication date and category; the clickable headline; an image (also clickable); and a description.

In the markup, each news item is wrapped in an .item div, and various other divs are used for the elements within each item (except for the headline, which is done as an h2).

The interesting one here, from a CSS perspective, is the orange bar. Here's the markup:


<div class="itemHeader"><span class="date">11 June</span><span class="section"> in <a href="/articles/cat/jquery/">jQuery</a></span></div>

The orange bar is a single-pixel orange background image, repeated horizontally and centred vertically. Then both the date and section spans are given a white background colour so that they block out the orange bar. The swirls are also done using background images: the .date span contains the left swirl, while the .section span contains the right swirl. By giving suitable padding to the 2 spans, the swirls appear to the left and right of the date and section respectively:


#newstuff .itemHeader { background: transparent url("/res/Image/v4/misc/item-header-bg.png") repeat-x 0 50%; text-align: center; font-style: italic; font-family: "Georgia", "Times New Roman", serif; font-size: 1.0em; margin: 0 0 15px 0; }
#newstuff .itemHeader span.date { padding-left: 60px; background: #fff url("/res/Image/v4/misc/item-header-swirl-left.png") no-repeat left 50%; }
#newstuff .itemHeader span.section { padding-left: 0.1em; padding-right: 60px; background: #fff url("/res/Image/v4/misc/item-header-swirl-right.png") no-repeat right 50%; color: #666; }

The Twitter feed

The Twitter feed

The sidebar features a feed showing our most recent tweets. There are quite a few third-party widgets that you can use to do this, but I opted to use the standard Twitter Profile Widget, styling it appropriately to match our site. Handily the Twitter widget already features rounded corners, which fit nicely with our design. :)

Fonts and Typekit

The fonts

We wanted to use something other than boring system fonts for our main headings. We settled on the lovely Museo Slab, and decided to serve it as a web font using the Typekit service.

Typekit is pretty straightforward. Essentially you sign up and select the font(s) you want to use (and the domain you want to use them on). Then you add a small amount of JavaScript to your page, and specify your fonts using CSS in pretty much the usual way. The main difference is that you need to specify 2 different font families due to Typekit's security mechanism. Here's an example:


h1, h2, h3, h4, h5, h1 a, h2 a, h3 a, h4 a, h5 a { line-height: 1.25em; color: #333; font-family: "museo-slab-1", "museo-slab-2", "Palatino Linotype", "Book Antiqua", "Palatino", serif; }

For more info on Typekit, see Simon's Typekit First Impressions article.

PHP coding (or lack thereof)

PHP

The site runs mainly on PHP. Fortunately, with the previous redesign I'd moved the front-end PHP code into template files that are kept separate from the business logic and database code. The template files are pretty minimal and mostly contain markup. This made it really easy to change the markup when redesigning this time.

The only time I needed to touch the PHP business logic was to add extra functionality to the news items on the homepage; previously these just consisted of some descriptive text and a date — no heading, image, or category.

Testing and putting live

Testing and putting live

One of the main motivations for the new design was to provide more flexibility and space for advertising in that right-hand sidebar. (The old sidebar was too narrow for anything but the thinnest of ads.) What's more, we already had a couple of advertisers lined up to buy ad spots in the new design.

For this reason — and because we were getting fairly sick of the old design! — we gave ourselves quite a tight deadline for putting the new design live.

To save time, I wanted to set up the new design so that both Simon and I could view it while I was developing it. Since we're on opposite sides of the globe — and to make things easier when putting the new design live — I put the files for the new design on our live site so that we could view both the existing site and the new design "live" at the same time. To do this, I added a switch to the main PHP file that told the site to use a different template folder based on the subdomain:


if ( $_SERVER["HTTP_HOST"] == 'newsite.elated.com' ) {
  define ( "TEMPLATE_PATH", SITE_ROOT . "/templates-new" );
} else {
  define ( "TEMPLATE_PATH", SITE_ROOT . "/templates" );
}

To make this work, I also needed to add the subdomain "newsite" to the elated.com domain in our DNS, and also add the following line to the Apache VirtualHost config:


ServerAlias newsite.elated.com

This meant we could easily browse the new design at http://newsite.elated.com/, while still preserving the live site at http://www.elated.com/. What's more, since both "sites" used the same back-end codebase, making the new design live was as simple as changing the above code to:


define ( "TEMPLATE_PATH", SITE_ROOT . "/templates-new" );

This meant that the last stages of the build process sped along nicely, and we were able to launch the new design ahead of time. Great stuff!

Summary

Although the initial design process took over a year (for various reasons), the build came together surprisingly quickly and easily over the course of a couple of weeks. Looking back, I can put this down to the following reasons:

  • Working closely with Simon (the designer) during the final design stages. This helped me to understand what I'd need to do during the build process, and also ensured that we didn't end up with a design that was very hard for me to implement (though that drop-down menu did involve some hair-pulling as discussed!).
  • Separating the presentation code from the business logic. As I mentioned above, I'd previously separated out all the front-end PHP code into template files, which saved an awful lot of time and hassle when it came to redoing the markup. Things like header and footer include files helped enormously too.
  • Using CSS3 where appropriate. A few years back, things like rounded corners and drop shadows on menus would have been extremely fiddly, involving lots of image slicing and messing around with CSS. By using new CSS3 features like border-radius, box-shadow and text-shadow I was able to avoid a lot of messing about!

I hope you enjoyed reading this article as well as Simon's, and that they've given you a few ideas for your next site redesign! If you have any feedback or pearls of wisdom to offer then we'd love to hear them in the comments below. Cheers!

Follow Elated

Related articles

Responses to this article

2 responses (oldest first):

05-Oct-10 16:54
Great steps guys! I walked through these all with your help Thanks.

Just some questions:

Is your site pure PHP driven? No CMS's used?

And tell a bit about elated.com back-end (admin area). The concept behind it, main structure, main parts of code, some screenshots....

Thanks guys for awesome and very very useful information to read and learn. Your site helps me a lot in my coding.
06-Oct-10 06:31
Hey nicksp

"Is your site pure PHP driven? No CMS's used?"

All custom PHP/MySQL with a bit of Perl.

"And tell a bit about elated.com back-end (admin area). The concept behind it, main structure, main parts of code, some screenshots...."

It's pretty random really - not sure there's much of a "concept" there LOL! It's basically a fairly simple CMS, with screens for adding/editing articles, ImageKits, PageKits, front page news items, etc.

The whole site (front and back end) uses a front controller pattern ( http://en.wikipedia.org/wiki/Front_Controller_pattern ) which I find makes life much easier when adding code or tweaking the site. We use mod_rewrite fairly extensively to create "nice" URLs without things like "?articleId=1234" in them.

Hope that helps!
Matt

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page