Keep in mind that these examples are the results of what I’ve gathered through the web as I was looking for inspiration. It does not guarantee the best results, nor yield the highest output. It is simply a starting point of what current band websites are doing.

Streaming Audio or Video

This is your product, the merchandise, the "goods". Every band website must have a form of streaming audio somewhere in their pages. It doesn’t have to play right away as soon as someone hits your site, but it’s nice to have a player that is real accessible. You make music right? So let’s hear it!

Shinedown

Shinedown’s website features multiple media players right in the front page.

Civil Twilight

Civil Twilight’s streams their latest tracks as soon as the page loads.

One Republic

One Republic has their video player right with the large header image:

A Blog

Definitely a must have for a band website. This lets the fans know what’s going on with the crew. It can be as simple as their daily ramblings or what goes on behind the scenes. A blog can transform that voice in the radio, into a real human form. It also provides a way for fans to interact through comments and forums.

The Temper Trap

The Temper Trap website is an active blog of the band. You will see a solid following of readers, twitterers as well as facebook fans.

Thirty Seconds to Mars

Thirty Seconds to Mars’ blog features their latest press release and performances. The blog runs a dynamic intense debate commenting system for each post:

The Flaming Lips

The Flaming Lips’ blog is about anything from T-Shirts, interviews and food.

Unconventional Layout

Classic Rock n’ Roll behavior: We don’t want no rules! Borders? Headers? Footers? – We just want a website that’s cool, fun – a website that rocks!

Cage the Elephant

Cage the Elephant’s website has no visible frames, unpredictable patterns, paint splatters as well as hand-drawn elements. Be sure to check the drawing game in the home page – which plays the band’s music simultaneously (quite genius).

The XX

Another unique setup. This website simply show a large “X” overlay of scenes of the band performing. Very original.

Broken Bells

Be sure to check Broken Bells. See the large audio player with a ball-like-thumping thing in the middle. Pretty cool.

Giant Header

Ahhh, the modern giant header is more like my style and arena. It has more of that "awe" factor which viewers of various niches all agree: It’s simply stunning (of course, if its done right).

Three Days Grace

Three Days Grace’s band photo is beautifully placed as the website’s header. Big and bold – nicely done.

The Dirty Heads

A collage of photos acts as this website’s large header.

Jimmy Eat World

The same as The Dirty Heads, Jimmy Eat World’s website also has a large collection of rotating polaroid snapshots for the header.

Good Design

I guess this goes without saying – overall, you need good design. Band websites must be appealing, inviting and of course pleasing to the eye. You need reason to attract viewers – which in turn will browse through your site, listen to your material and convert them to loyal fans.

Below are some more musician websites that I think have inspiring designs:

Mumford and Sons

Also featuring a large photo as a the header. Real nice font treatment.

Muse

Busy and unruly backgrounds laced with transparent containers for the content. Muse’s website is very modern and progressive. *Side note: One of my all time favorite bands of all time.

Neon Trees

I’m loving the color schema of this one. Nice solid Futura Fonts – very cool.

Arctic Monkeys

Artistic logo partnered with a cool swirled navigation. Arctic Monkey’s website is quite traditional and effective.

Rick Monroe

Rick Monroe’s website is a mixture of grunge, country and subtle web 2.0 components. Nice large photo backgrounds and gradients, transparencies…the works.

Star Sailor

Bizarre grid structure, loud neon-like color scheme.

Bad Religion

I’m really feeling Bad Religion’s web blog. Really good grid spacing, and beautiful font (sifr) effect.

Switchfoot

Beautifully done background of the sky with birds. Color schema is amazing as well.

Weezer

Large rotating images as the header / banner featuring band’s photos of their performances.

K’Naan

Large header slideshow, video blog and audio players all over.

Conclusion

So the bottom line of a good band website? All of the above? None of the above? You be the judge. The trend is to always push the boundaries outside the norm. Web designers are always faced with a challenge of how to create the ultimate page – one that no one else has. Band websites are certainly amongst one of those challengers. It will be interesting to see what the future has in store for such sites.

Be sure to check these other articles for band design inspiration:

• 25 of the Best Websites of Bands and Musicians
• Top 30 Indie Band Website Designs
• 10 Well Designed Band Websites

Stay tuned for future articles that may include themes, PSD files and tutorials. Subscribe to my feed or follow me on Twitter.

So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

Add the following code right above the closing head tag:

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Let it be known that is is one of my older themes that I once had for sale in Themeforest. It did quite well in the beginning. Although I noticed the decline in sales as time passed, therefore I decided to give it away for free.

So what’s so special about it?

Monte Cristo is clean, sharp and minimal. Yet the subtle graphic effects give it a bit of modernity and heightened class. I especially like this theme because it kind of reminds me of the older style of web pages – with the borders, and the “page-peel” effect (which was quite big a couple of years ago). It comes with an options page where you can tweak the slideshow settings, switch stylesheets etc. It also comes with an alternate homepage template, as well as a “portfolio” page. Read my old sales pitch page for more details.

Creative Commons Who?

I’ve changed all my giveaways to have the Attribution Type of Creative Commons licensing model. What this means is that you can use the theme however you want – as long as you leave my credits in the footer. *But if you REALLY must take off the credits in the footer (i.e. you’re installing it for a client website): contact me – we may be able to work something out (hint: a small donation of some sort).

Conclusion

So go ahead, install Monte Cristo and have a blast. I’ve tested the theme to run on WP 3.0 and all major browsers. Also, make sure you read the “ReadMe.doc” file in the theme folder for additional instructions. Lastly, keep an eye out for more of my freebies. I shall be releasing more real soon!

Note: Since I created the theme almost a year ago, it doesn’t utilize the newer features of WordPress 3.0 such as post feature images, custom post types and custom menus.

Walgreens

This one is first for a reason. Walgreens obviously have a very creative team behind their website: from the buttons, navigation, choice of fonts – they all simply tie together. Be sure to check out the product slider in the home page.

Wegmans

There’s something about this website that appeals to me. Maybe it’s the real time Twitter feed in the home page, or maybe it’s the massive drop down list in the main navigation.

Target

Target always had major headlines in regards to the beautiful branding of their store. The same goes for their website – simple, elegant and classic.

Whole Foods Markets

Nothing too fancy going on with the Whole Foods website. All elements are well intact, beautiful spacing, and well coordinated.

Fresh and Easy

You gotta love that mix of bright and dark greens. The Fresh and Easy website absolutely stayed true to their company colors. Be sure to notice the product review marquee in the header.

Hy-Vee

One of my favorites, the Hy-Vee website is clean, easy to navigate and has a very timeless design (much like Target).

H.E.B.

Another simple and elegant design, the HEB website is sleek and sharp with subtle hints of modernity.

Safeway

One web wonder: the Safeway website definitely ranks amongst my top picks. I love the play of colors – browns and dark reds, the mixture of different font sizes (from very large to super small), as well as professional use of icons throughout the pages.

Kroger

It is quite refreshing to see to see Kroger’s color scheme. I like the combination of blues and fades – gives the site that current and stylish feel.

Ahold

Though technically not a supermarket (more of a brand), Ahold has one of the more astonishing website I’ve seen to date. What I especially liked: the typography. Simply beautiful.

Win Dixie

May not be the most spectacular amongst this list, the Win Dixie website has the more traditional elements of a fundamental supermarket website.

Giant Eagle Market District

Definitely not ordinary – Giant Eagle Market District’s website has a style of its own.

Foodzie

You gotta fall in love with the Foodzie website. From their original color schema, watercolor backgrounds, custom icons and beautiful typography – this website screams “amazing“.

Lava Lake Lamb

The Lava Lake Lamb website itself is simple and straightforward – bringing out their amazing photography all the more.

Straub’s

The Straub’s website is very original – from the custom background to the classy fonts. Check out their introductory page with a dual slideshow of their content.

Frog Hollow Farm

Far from being fancy – the Frog Hollow Farm’s website is clean and minimal.

Save Mart Supermarkets

Even though the pages are riddled with content, Save Mart’s website is very organized. Here you will find coupons, locations, store specials, recipes – plenty of information that is presented wisely and logically.

Vallarta

Though the different backgrounds may use a little subtleness, the Vallarta website is quite welcoming. Photos of staff, their stores and products – you really get the true feeling of being inside their markets.

Trader Joe’s

Real out of the ordinary, the Trader Joes website is filled with handwritten elements, grungy splashes, and custom icons. Check out their fully animated flash header.

C-Town Supermarkets

Another brightly themed website: C-Town Supermarkets is quite a sight. I especially like the nice flash feature in the home page – including a product hover / slider in the bottom.

Conclusion

So what do you think? Notice the similarities? The differences? What do you think is an important factor in Supermarket websites: is it the store locator? Coupons? Specials? Also, notice that not all of them have the capability of online store – do you think this is even important?

I look forward to your comments. Please feel free to leave them below. Lastly, if you think I left out any sites – please let me know as well.

Bokeh and Blurry Backgrounds

I first saw this style from this popular Tumblr theme. Bokeh is an effect where a colorful palette of round reflections are so washed and blurred from an out of focus lens of some sort. This mystique of photography somehow brings the subject (the content in our case) a much more focused and sharper look. The Bokeh effect gives the entire page an overall feeling of harmony and beauty.

Blur

Bokeh in combination with transparencies as well as rounded corners give this template a thumbs up from me!

You can view the Item here, or Demo from Here

Modern Business 3

This template uses bokeh in the inner frames of the page. Very sleek, professional and elegant.

You can view the Item here, or Demo from Here

Dark ‘n Clean

Another Bokeh Beauty, don’t miss the amazing typography from this theme!

You can view the Item here, or Demo from Here

Overlapping Folds

This style has been around for a while, but still doesn’t fail to amaze me. It is when the designer takes page elements and wraps them among sections of the page, as if it was three dimensional.

Unite

Definitely one of my favorites. Exceptionaly detailed – the folds even change in orientation when scrolling up and down

You can view the Item here, or Demo from Here

Stage

This one is very unorthodox. Folds, peels – 3d everywhere!

You can view the Item here, or Demo from Here

Fancy Folio

More in the safe and conservative style, checkout the folded navigation button

You can view the Item here, or Demo from Here

Wild Slideshow Transitions

May it be Flash or Javascript – I’ve noticed a trend in transitions. The “fade” and the “sweep” no longer suffice, check out the slideshows in the templates below for a better demonstration.

Perception

Sliced, reversed, waves – the slideshow on Perception will leave you breathless.

You can view the Item here, or Demo from Here

CleanCut

The transition effects on CleanCut will give your images that “Wow” factor.

You can view the Item here, or Demo from Here

Infinite xHTML/CSS Theme

The slideshow on this template is a combination of many styles, played in random order. Tastefully done.

You can view the Item here, or Demo from Here

Accordions

Instead of the regular slideshow, some templates integrate an Accordion effect (or both) right in the home page. Both are somewhat similar, though the Accordion is a new trend that gives your website that out of the ordinary style.

Innovation + Science

Definitely of of my favorites – Innovation + Science is very sleek, sharp and clean. The accordion is a good choice for this template.

You can view the Item here, or Demo from Here

Newscast

Again, one of my favorites – this template’s got it all: typography, spacing, color, javascript effects – and of course the accordion. Probably the best magazine styled theme I’ve ever seen.

You can view the Item here, or Demo from Here

Echoes

Awesome, awesome, awesome!!! This template simply echoes “awesome!”

You can view the Item here, or Demo from Here

Minimalist

Just as the title describes, minimalist styled websites try to achieve the best look out of the least styling. The aim of the minimalist is to present beauty out of pure simplicity.

Europa

Big solid fonts, grayscale schema, massive spacing – this template speaks simple yet beauty.

You can view the Item here, or Demo from Here

Squared3

Squared3 has good typography, as well as excellent color scheme.

You can view the Item here, or Demo from Here

Minimalistic Studio

This template should also have been in the “Wild Slideshow Transitions” category, again – a nice solid template with simple accents and design applications yet effective results.

You can view the Item here, or Demo from Here

Conclusion

There you have it, a collection of tasty design trends in themeforest templates. What did you think of them? Would you buy any of these templates? Did you at least get inspired to build something as beautiful? Do you notice any other trends in Themeforest or elsewhere that is worth mentioning? Let me know your thoughts in the comments section:

Step 1: Set the groundwork

In Photoshop, create a new document, 800 pixels width x 340 pixels height. Add a new guide – 70 percent from the top border of the document:

Add a dark background (I chose #292929), add a text layer and type out your words. The text settings are: 100 pt in size, color #ffffff, and type is “Myriad Pro – Black Italic”. Note that if you don’t have the same font – use something a similar italic, block type font.

Now, delete all the letters in your text layer and duplicate the layer for each letter. What we’re trying to do is have a layer in its own layer like below. Nudge each letter so they’re quite close to each other:

Step 2: Create the Text Effects

Now we’re ready to create the text effects. Double click the first letter and apply the following effects:

Drop Shadow:

Inner Shadow

Gradient Overlay

Add the following colors for the gradient (to do this click the gradient box from above). Move the color handles in the bottom bar to the position indicated. Leave the colors at #000000 and #ffffff.

Step 3: Copy and Paste the Layer Styles

Right click the first letter layer, select “Copy Layer Style”

Go to the next letter layer, right click and select “Paste Layer Style”

Continue doing this process to all the layers.

Step 4: Final Touches

Adjust your letter positioning according to your text content. The point is to just have enough spacing for subtle shadows to appear onto the next letter. I also decided to change the font color to the word “flyer” to #d30000 to match my color schema – choose your own color for yours.

Finally, create a new layer just above the background layer. Using the brush tool with these presets: (choose a really soft tip, adjust to 300 pt, with color #ffffff, opacity level to 24 percent). With just one click – daub right in the center of the document to give it that really soft glow in the background.

Conclusion

There you have it, a simple yet beautiful logo from nothing more than layers of text subtly overlapping each other. Play with the effects to your heart’s desire. You can even adjust the vertical positioning of each letter – just to add a bit more kick. Feel free to Download the PSD file.

Take a look at our markup:

1
2
3
4
5
6
7
8

<ul>
<li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li>
<li><img src="images/107023_5283.jpg" title="Cloudy Skies"  /></li>
<li><img src="images/1282015_12556521.jpg" title="Nice Horsy"  /></li>
<li><img src="images/1262387_19591724.jpg"  title="Grassy Meadows" /></li>
<li><img src="images/220121_3233.jpg" title="Jigsaw Pieces"  /></li>
<li><img src="images/1282209_96954111.jpg" title="Retro Groove"  /></li>
</ul>

Pretty clean right? Ok, now we start manipulating and styling with code:

Step 1: Wrapping Elements with jQuery

We are going to use jQuery to find all these images in a list item and check if it has a title attribute. If it does, it will wrap the image in a DIV with class name “wrapper”.

1
2
3
4
5
6
7

$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{								
				$(thumbs[i]).wrap('<div class="wrapper" />')

jQuery will also take the contents of the image’s title and place it inside another DIV called “caption” and place it inside wrapper, right after the image itself. Finally, let’s remove the title attribute from the image tag.

1
2
3
4
5
6

var imgtitle = thumbs[i].title;	
after('<div class=\'caption\'>' + imgtitle + '</div>').
				removeAttr('title');
 
			}					
		}

Now take a look at our mark up when the document loads:

1
2
3
4
5
6
7

<ul>
<li>
<div class=”wrapper”><img src="images/77335_4871.jpg" /></div>
<div class=”caption”> Autumn Leaves</a>
</li>
...
</ul>

Pretty slick right? Now let’s move forward.

Step 2: General Styling with CSS

Now that we have our DIVs in place, we can now set up the general styles with our stylesheet. What we’re trying to achieve is to hide the caption from a viewing area set on its containing DIV: wrapper.

Take a look at our stylesheet:

1
2

div.wrapper{width:218px; height:218px; overflow:hidden; position:relative;  }
div.caption {position:relative; text-align:center; padding:55px 15px}

Note that the wrapper dimensions are taken from how wide and tall the images are.

Step 3: Events and More Styling with jQuery

Now back to our script, all we need to do now is assign a couple of events to the hover method of our wrapper DIV. Thankfully, jQuery’s .hover() simplifies this action by letting us bind two handlers (in and out) all within the same context.

All we need to achieve is a way to slide the caption DIV upwards when we hover (maybe decrease the opacity of the image), then slide the DIV back downwards when we mouse out:

1
2
3
4
5
6
7
8
9
10

$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);

Notice that I also used the .animate() function for manipulating the CSS properties which renders all of our effects smoothly.

Optional Pretty Styling:

For demonstration purposes I’ve added pretty backgrounds, as well as font types to maximize the effect. Simply add a background to the DIV caption, and assign different font types and styles (check out Google Fonts).

There you have it. You have just created your own image hover effects using jQuery and CSS. You can download the source code from here, or view the live demo.

Please feel free to comment below on what you think of this tutorial.

Features

The one pager Sifiso has all the right stuff for a strong personal portfolio:

How to Edit

The source code is very pretty straightforward – simply edit the HTML with your own. The PSD contains 4 files – one for each main section of the page. All files are layered, grouped and labeled. To edit a text section – find the layer and edit the text within. Fonts used are “AR Blanca” (for the logo), and “Helvetica Nueu LT Std” for everything else.

Conclusion

Keep in mind that even though Sifiso may be full of images, it is still coded professionally to conform to standards and SEO. I hardly used any “image” tags (except for the portfolio section), and still used HTML text where it should be (see screenshot below).

*Note that I talked about how to code this way in my 3 part post: How to create a single page portfolio from scratch.

Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.

LittleBigPlanetoid

Awesome use of large backgrounds – especially in the header area; this website screams “I’m unique” in all angles.

Render Creative

Render creative specializes in high end websites. This is easy to tell from their superior placement of large images, use of muted colors as well as large fonts.

Sam Houston

The Sam Houston website displays good use of shades, silhouettes and matted elements. What I especially liked is the timeline that serves that historic purpose.

All K Pop

Talk about busy – All K Pop is a magazine styled website powered by EE.

GOP

Once again, excellent oversized header – with alternating backgrounds for the faces. Bright, bold color schema with wide open spacing between elements:

Think About It

The Think About It website features beautiful contrasting greens against whites, along with good use of transparencies.

Campaign Monitor

The popular email marketing software runs their home site in EE. Top notch design with superior web 2.0 elements.

Office of the Governor

Really? Office of the Governor is running EE: Another testimonial for the platform’s accountability.

Chapman University

Good utilization of transparencies and high contrasting colors.

Havilah Legal

Talk about blue, this law firm website is very sleek and professional. I like the conformity to the strict color schema.

Trevor Allen Photography

Impressive slideshow, fancy lifted page effect, creative backgrounds – this website is simply stunning.

I lounge

This is an example of how complex an ExpressionEngine website can become. Many facets such as blogs, reviews, polls, a store and plenty of ads fused into one.

Ruth Badger

The Ruth Badger website is a presentation of good web 2.0 elements including ribbons, diagonal backgrounds and clean typography.

Tweetsie Railroad

Fun and fantastic, Tweetsie’s design is anything but ordinary.

Paul Rand

Very simple, serene and personal, the Paul Rand website is proof of clean web marksmanship.

VK Magazine

Superior typography, good spacing and placement, beautiful icons – VK Magazine takes content organization in a whole new level.

Mock Elections

Beautiful vector graphics, combined with muted colors – Mock Elections is a good example of an artistic webpage. Be sure to check out their awesome navigation buttons.

Echo-Factory

A somewhat refreshing combination of dark orange shades and dirty backgrounds. Nice origami Twitter bird.

Conclusion

As you can see, with a little talent and ExpressionEngine – you can do a lot. The platform comes in three pricing categories (free, personal and commercial) which varies from included and excluded features amongst them. For more information – head over to ExpressionEngine’s website.

What about you? Do you have an ExpressionEngine website you want to showcase? Please leave a comment below!

Are you ready to get your hands dirty? Let’s start coding:

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.

Inside the head section of our HTML, insert our script tag:

<script src="jquery-1.3.2.min.js"></script>

Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

1
2
3
4
5
6
7
8

<script src="jquery.cycle.all.2.72.js"></script>
<script>
	$(document).ready(function(){
		//cycle plugin
		$('.slideshow').cycle({
			fx: 'fade' 
		});
</script>

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.

Create several images that will go inside the slideshow - all must have the same dimensions – in our case: 476 pixels and 349 pixels.

Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

1
2
3
4
5
6
7

<div class="slideshow">
<img src="images/feature-1.jpg"/>
<img src="images/feature-2.jpg"/>
<img src="images/feature-3.jpg"/>
<img src="images/feature-4.jpg"/>
<img src="images/feature-5.jpg"/>		
</div>

Append this code inside your existing style.css file:

#feature .slideshow {float:right; position:relative; left:-24px; top:21px;}

This ensures that the slideshow will sit on top of the designated box in the feature div:

Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.

The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.

This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".column:gt(2), #previous-work ul li:gt(3)").hide();		
		$("#testimonials").append("<div class='more'><a id='more-testimonials'>More Testimonials</a></div>");
		$("#previous-work").append("<div class='more'><a id='more-previous-work'>More Previous Work</a></div>");	
		$("a#more-testimonials").click(function(event){		
			if ($(".column:gt(2)").is(":hidden")){							
				$(".column:gt(2)").slideDown('slow');
				$("a#more-testimonials").text("Less Testimonials");				
			}else{
				$(".column:gt(2)").slideUp('slow');
				$("a#more-testimonials").text("More Testimonials");	
			}			
			event.preventDefault();					  	
		});
		$("a#more-previous-work").click(function(event){							
			if ($("#previous-work ul li:gt(3)").is(":hidden")){
				$("#previous-work ul li:gt(3)").slideDown('slow');
				$("a#more-previous-work").text("Less Previous Work");				
			}else{
				$("#previous-work ul li:gt(3)").slideUp('slow');
				$("a#more-previous-work").text("More Previous Work");
			}			
			event.preventDefault();	
		});

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/

Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

1
2

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />

Inside our custom script tag, (right after the last “});”) insert the block of code:

1
2
3
4

$("a.zoom").fancybox({
			'zoomSpeedIn'	: 500,
			'zoomSpeedOut' : 500
	});

In our unordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag:

class="zoom" rel="group"

Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.

Look for the form tag inside index.php; add a method and an action attribute:

<form id="contact-form" method="post" action="">

This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

1
2

<pre>
<?php print_r($_POST) ?>

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//see number 1
 if (array_key_exists('send', $_POST)){
		//see number 2
$to = 'youremail@mail.com'; //this is your email address
	$subject = 'From Your Contact Form';
	$name = $_POST['name'];
	$email = $_POST['email']; 
	$comments = $_POST['comments'];  
		//see number 3
$message = "Name: $name\n"; 
	$message .= "Email: $email\n";
	$message .= "Comments: $comments";
		//see number 4
	mail($to, $subject, $message);
}
?>

What the above code is doing:

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it - a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We've added some jQuery magic as well as a little bit of PHP functionality. As you see - a lot of work does go into it (and that's just a single page!)

In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.