The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Webkit FTW

To keep things simple, I’ll start off all of this code using the -webkit vendor prefix. This will keep our code cleaner and easier to read as we learn. The reason I chose Webkit is simple: the CSS keyframe animation support rocks. Even Firefox, which recently added keyframe support, really won’t cut it nearly as well as Safari.

Afterwards, we’ll discuss how to toss in the other vendor prefixes and what type of experience you can expect on each browser. Ultimately, if you’re really looking for a solidly supported effect that works on as many browsers as possible, I recommend seeking out a jQuery snow plugin. However, if you’re up for a fun CSS learning experience, keep reading!

Getting Started: We Three PNGs

The setup for this project is three snowy background images. You can definitely add more if you like, but we’ll use three here to keep things nice and simple. Basically, all you need is three transparent background PNG files of varying size with random little white dots on them.

Here’s my process for setting these up. First, I created a 500px square image and used a tiny brush at full hardness. You can set up a scatter brush if you want but I like the control of manually placing the dots around the canvas. Then, to make sure it tiled nicely, I went to Filter>Other>Offset.

Since I started with a 500px square image, I’m going to cut that in half and offset by 250px both horizontally and vertically.

After you’ve run this command, you might have some messy spots near the center, these should be easy to clean up with a little erasing. The important part is that the edges wrap nicely so the middle of the image can be changed however you want.

Now save your PNG out and repeat this entire process for a 400px square image and a 300px square image. For these last two, I made the snowflakes a little blurrier and reduced the opacity a little.

Applying the Backgrounds

Now we’re going to apply these images to our background in CSS. I’m throwing them on using the body selector but feel free to apply them to something more specific.

Implementing multiple backgrounds is exactly like applying only one background, the only difference is that you throw in a comma after the first image URL and add in another. Here’s what our code will look like, note that the background images will all repeat by default.

body {
	background-color: #6b92b9; 
	background-image: url('snow1.png'), url('snow2.png'), url('snow3.png');
}

Multiple backgrounds have great support across the board, the only real thing you have to worry about is, you guessed it, older versions of IE. As with just about everything else in advanced CSS, multiple backgrounds are supported in IE9, but nothing older than that. Hopefully the new IE auto update program will put an end to these types of woes!

Setting Up the Keyframes

In the past, we’ve done some decently complex keyframe animations on Design Shack, but this time we can keep in really simple.

@-webkit-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Despite the fact that I’m referring to this as “simple” there’s admittedly a lot going on in this syntax so let’s break it down piece by piece. What this is doing is setting up an animation that we can then call into action elsewhere in our CSS. The base syntax is “@keyframes” but here we’re implementing the Webkit version so we used “@-webkit-keyframes”. The “snow” part is the name that I chose for the animation. You have some freedom here but try to choose something descriptive and helpful.

Next we initiate two frames. The first is what our page will look like at the beginning of our animation, the second is what it will look like at the end. At the beginning, I’ve placed all of our background images at the top left of the page using “0px 0px.” Then at the end, I’ve moved each image to a new location. Just like when we place each image, we’ll separate each set of position values with a comma.

The Position Logic

The position of each image at the end of the animation may seem arbitrary, but in reality this is very intentional. In order to make the animation work right, you have to understand a few things.

The reason we’re using keyframe animations instead of the simpler and much better supported transition property is because we can loop a keyframe animation endlessly so it will continue to snow indefinitely. With this in mind, you have to remember that once a single instance of an animation has run its course, it’s going to start over. If you don’t position your images properly, you’ll see a blip at this point.

The trick is to utilize the size of your images to make sure the end frame matches the beginning frame, thus creating a seamless transition. For instance, my second background image was 400px by 400px, so I moved the background 400px down during the course of the animation, the same for my third image at 300px. For my first image I did something a little different. I wanted it to move faster so I doubled the height and moved it 1,000 pixels. Since this is a multiple of the height, the last frame will still match the first.

Also notice that I moved the horizontal position of the images as well. This adds a bit of wind into the equation so the snow isn’t falling perfectly vertically. If you want the snow to sway back and forth as it falls, simply add in a few more frames.

Implementing the Animation

Our final step is to return to the body selector and throw in “-webkit-animation” to create an instance of the animation. First we state the name of the animation that we want to use, in this case “snow,” then we state the duration of the animation (20 seconds), next we choose a timing function (linear) and finally we loop the animation infinitely.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
	-webkit-animation: snow 20s linear infinite;
}

With that, your website should be snowing like crazy in Safari! Let’s take a look at expanding this a little.

Other Browser Prefixes

Now to add more browser support. Our keyframe setup section should be expanded to the following. I’ve started with the base syntax without a browser prefix, then used the prefixes for Mozilla, Webkit and Microsoft.

/*Keyframes*/
@keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-ms-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Then we do the same for the styles in the body. All of the various browsers use the same syntax, only the prefix changes.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow2.png'), url('snow3.png');
 
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

Note that the IE support here is purely for the future. Only IE 10 has support for keyframe animations and its still under development.

“Not So Fast” says Firefox

At this point I wanted to be all done with the tutorial, but alas, I opened up Firefox and found a problem: no animation! After some digging it turned out that the problem is in the multiple background implementation.

The issue is a strange one. Firefox supports multiple background images and it supports keyframe animations. It even supports animations that use multiple background images! However, for some reason it doesn’t seem to support moving each background image’s position independently during a keyframe animation.

Update

Great news, commenter Patric solved our little Firefox problem! It turns out my love for shorthand got me into trouble here. Firefox works perfectly if you list out all of the values in the initial line. Here’s the updated keyframe code:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
 
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

See It in Action

Demo: Click here to launch

Conclusion

To sum up, making a pure CSS looped snow animation that works in modern browsers is a snap. A few minutes of Photoshop and a couple of simple lines of code and you’ve got the North Pole. IE won’t support keyframe animations until version 10, Opera currently has zero support and Firefox has support, but it’s not as extensive as what you’ll find in Webkit.

This project perfectly illustrates why it’s important to play around with this stuff before it’s ready to be implemented in the real world. I had no idea that Firefox would throw a wrench into my little animation until I actually got my hands dirty with an experiment. Now I find myself much more educated on the necessary syntax for CSS animations on a browser to browser basis.

The Apple design team is widely regarded as one of the most talented group of designers in the industry today. The trends that they set are followed by not only every other major tech company, but by web designers in every conceivable product and service niche.

Follow along as we embark on an exciting journey through time and witness the evolution of Apple’s design style. You’ll get several amazing glimpses at Apple.com dating all the way back to 1997 as we witness the rise and fall of several important design trends.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Apple and Design

The image above is a snapshot of the Apple website as it currently stands. It’s a perfect picture of everything we love about Apple’s sense of design. It’s clean and minimal with a strong emphasis on the beauty of the product.

There aren’t a million different banners or mega drop down menus to sort through, just a simple navigation scheme, a featured product and four distinct content boxes along the bottom that serve as a universal way to highlight other important products and information.

Notice the copy as well: brief and to the point with a touch of hyperbole (where would Apple be without it?). Despite the fact that the iPhone 4S has hundreds of features to be bragged about, they’ve whittled it down to four basic bullet points, just enough to snag your interest and encourage you to look further.

Was It Always This Way?

Apple has long been known for their sense of style and superior design. Unbeatable innovation is at the forefront of their success, but pushing that success along has been a tightly integrated brand image that’s irrevocably ingrained in its products, commercials, web pages and even its stores.

As we look at Apple.com as perhaps the most prominent and frequently updating pulse for Apple’s visual brand, I can’t help but wonder about the journey. How did this brand evolve? What did early versions of Apple.com look like? Were they similar? Did they share the same simple aesthetic or were they more prone to reflect the busy web design styles from a decade ago?

Apple in Print

To get a feel for Apple’s brand evolution, we should briefly consider the time before Apple.com even existed. From the genesis of the company, Jobs always placed a strong emphasis on simplicity. However, that term had a very different visual translation back then. Mac Mothership has a delightful collection of vintage Apple ads that give us a glimpse into Apple’s brand image in the late 70s, as you can see, it’s a far cry from Apple.com today.

These ads are filled with sales pitches and informational copy. This may be a necessary evil for new product categories, but it goes beyond this. Even the logos show an evolution of Apple’s definition of itself. The original on the left is a very complex illustration of Newton under a tree, the updated version on the right is a colorful rainbow shooting across the page. Both are far more complex than the simple and ubiquitous symbol we see today.

For the next twenty years Apple would flirt with generous amounts of whitespace but only briefly in between ads that followed the same basic copy heavy approaches that we see above.

It could be said that the most important jump towards the simplicity of the Apple brand that we know today came from TBWA\Chiat\Day, the agency behind the original 1984 Macintosh commercial and subsequently one of the most famous ad campaigns of all time: Think Different.

By 1997 Apple had found its identity. In over a decade, the Think Different campaign hasn’t aged a day. It doesn’t feel antiquated like the original Apple ads, it is instead timeless and powerful enough to impact many subsequent generations.

Back to the Web

Think Different changed everything for Apple (this charge was of course led by the return of Jobs in 1996-97). It provided an amazing identity not only to Apple, but to its customers. Visually, it rocked Apple’s brand style into what we know today.

Nowhere is this clearer than on Apple.com. Using the wonderful time machine of The Internet Archive, we can travel back to the early days of Apple’s website. Think Different hit in 1997 so if our premise proves true, we should see this as a year of change for the site. Here’s a look at Apple.com around the middle of 1997:

Not quite what you’d expect from Apple is it? Like the early print ads, here we see type, and lots of it. To be fair, compared to the general state of web design at the time, this was in fact a fairly minimal design. Indeed, everything is laid out nicely, but there is a ton of content. In fact, what you don’t see in the screenshot is that those news paragraphs go on for miles (click here for the live version).

Keep in mind that this design is pre-Think-Different. The previous Apple.com designs shared this aesthetic. Now let’s jump to May of 1998, the first in-tact post-Think-Different Apple site I could find.

The difference between the two aesthetics is incredible, they don’t even appear to be from the same company (let’s face it, they really aren’t). Where we used to find clutter and an over-abundance of information, we now find whitespace; tons and tons of white space. Where we used to find a page that scrolled for miles, we now find brevity.

The simple headline just says “Apple,” the product shot has made its rise to the hero and there’s even an impressive animation of the iMac spinning into place via the wonder of the animated GIF.

Think Same

The most amazing part of the 1998 design to me is just how similar it is to what Apple is currently using going into 2012! The typography, logo and splashes of color serve as an important design lesson in what type of elements you can expect to age over time in your design, but the fundamental layout here is shockingly close to what we see on Apple.com today.

The top portion of the site is reserved for the main product feature (in this case the original iMac), and the bottom is split into a few horizontal rectangles that feature other important products.

Key Differences

As I mentioned, the typography is a main element that stands out in this evolution. There’s a reason we refer to sans-serif typefaces as “modern,” you can clearly see how Apple’s current font brings their designs forward in time compared to the classic old style serif from 1998.

One of the most important changes I see here is the navigation, notice how far down the page it is. These days we’re so accustomed to topside navigation that this design would certainly throw many users for a loop (perhaps even an infinite one). Apple has obviously learned that helping you get to where you want to go on the site is quite literally a top priority.

A very important component of the layout that you don’t get from the cropped screenshot above is that the fixed width content sits on the left side of your screen. These days modern sites usually center their layouts so that the origin is the middle of the browser window.

Also worth mentioning is the Apple news feed, which remained a staple on the site for years and was only removed earlier this year.

Moving Forward: 1999

By October of 1999, Apple was still using the same design. The products are evolving but the page design is almost exactly like it was the year before. Notice the shout out to Pixar’s Toy Story 2 right on Apple.com, can you tell that Steve is at the helm of both companies?

Also notice a big change in the logo, by now Apple has killed the rainbow in favor of a solid white Apple. Apple would prove to be a strong leader in a logo simplification movement that’s still going on today. You can read more about this in our article, Pepsi vs Coke: The Power of a Brand.

2000

When we hit May of 2000, we see a few big changes take place. For starters, the entire layout is now centered in the browser. Further, the navigation has finally been moved to the top and closely resembles the aqua-style interface that Apple made famous with OS X. Notice the how complicated the navigation is with the two layers of links.

Glossy buttons and tabs were a huge movement in web design and were the standard “cool” for several years. The current web designer obsession with simple, minimal buttons with flat colors or subtle gradients is a direct response to this more ornate style

2001

Fast forward to November of 2001 and we see a few more important jumps. The aqua style has made its way down to the news feed, sans-serif type is beginning to take hold (notice the subhead) and the content boxes have evolved dramatically. We’ve made the jump to four instead of three and the boxes are now fully distinct shapes with rounded corners like those we see in the tabs at the top. They’re still rounded today, but Apple has pulled back dramatically on the border radius.

Though Adobe takes the center stage in this screenshot, 2001 was a monumental year for Apple due to the release of iTunes and the iPod. This marks their first foray into a generation of non-traditional devices that would entirely redefine the company. This was also the year they made the jump to OS X, a decisive move to a much more friendly and intuitive system which would prove helpful in winning over Windows users drawn to the Mac by their love of the iPod.

2004

By late 2004, Apple had begun to experiment with highlighting its main content area with a solid color rounded corner box. More typically, you would see this box in black, which made for beautiful contrast with the white background, but the iPod’s colorful advertising marked an occasion to bring some life to the page.

Another really important aspect of the 2004 design: they’ve made the jump to all sans-serif type. This is a major milestone in the advancement of design trends.

2005

Flirting with black in 2004 led to a major experiment for the release of Tiger in 2005. Here we see most of the Apple.com homepage flooded in black. A trend that carried to many of the product pages.

Also a very big deal by 2005 were product reflections, visible on the bottom of this page with the iPods. I fully remember seeing these and immediately ripping them off for the projects I was working on at the time.

2007

Apple trends stayed fairly static for the next few years, it wasn’t until late 2007 that they finally made a huge and very welcome leap towards the site that we know today.

The site’s homepage has been completely overhauled. They’ve widened up the content considerably and killed the old aqua navigation, replacing it with a greatly simplified version utilizing the smooth gradients that I already mentioned would follow the aqua trend for most designers. The expanded content width can definitely be attributed to the widescreen displays that were now present on most desktops and notebooks alike. It’s very important to stay aware hardware evolutions that can and should affect UI design trends.

Also notice that the search bar is finally at the top of the page. This was an afterthought thrown in at the bottom for far too long and it was great to see it finally get the attention and prominence that it deserved.

2011

Apple found its stride with the previous design and it stuck largely unchanged until January of 2011, an impressive run by any standard!

At the beginning of this year, we saw Apple take a step back and return the navigation to a glossy look, albeit an updated dark finish. They also began experimenting with some subtle background noise texture, a painful move in my opinion that made their typically leading design team seem like they were jumping on popular trends set by countless others before them. Click the image below to see the texture up close.

What’s Next?

It’s difficult to predict where Apple’s homepage will go next, but we see some interesting experiments taking place further in the site. Despite the fact that the home page has dropped the noise texture, the current iPhone page has introduced a much heavier implementation of a textured background, with an inset product area.

There are also some really impressive animations of the iPhone flying in and out of view. These replace the animated GIFs of 1998 with modern web technologies, but the heart of the idea is definitely the same.

Going forward, will we see Apple return to old tricks like animated products and glossy buttons? And will they trudge on in their implementation of textured backgrounds, perhaps introducing more of the textures that we see in iOS? Your guess is as good as mine!

Conclusion

This study of the evolution of Apple.com is so much more than a look into the whims of a single company, it serves as an important lesson on several major web design trends for all companies in the last decade. We witnessed the simplification of layouts and reduction of text, the rise of sans-serif type and the several year love affair with gloss that we’re still toying with today despite the resulting rebirth of minimalism.

We can easily spot other trends as well such as the increase in importance of search bars, the realization that navigation should be prominent and easy to find and the richness that new web technologies are bringing to web design in a post-Flash era. Apple has been responsible for pushing HTMl5 and CSS3 perhaps more openly than any major tech company in a direct assault against Adobe’s reign.

A huge thanks is owed to the folks at Internet Archive for preserving these and countless other important pieces of design history. I greatly look forward to seeing whether Apple will serve as a leader or follower in web design trends in the years to come.

From here you gain access to a slew of applications both free and paid. These are all built for OS X Lion and can be downloaded directly into Launchpad. In this case study I’ll be looking into design trends for Mac app websites. These are specifically geared towards OS X and do not include iOS apps… the styles are very different. Along with these tips I have also compiled a small showcase gallery of my favourite Mac app sites to share a bit of inspiration.

Enlarge your Key Points

When people land onto any app website they hope to figure out the purpose of the application very quickly. The easiest way to do this is by immediately grabbing the visitors’ attention and guiding them throughout the layout. And from past experience it seems jumbo-sized text/graphics will often do the trick.

Alfred App is one such example which incorporates the entire screen into a sliding layout. Both the app logo and download button jump off the page at a glance, along with the monstrous app icon! Users familiar with the Alfred app will recognize the unique hat and magnifying glass. And it’s not just the top page area, either.

As you scroll down you should notice each page section is also broken into pieces. The demo screenshot area has a small column for thumbnails with a beautiful display of the app. Just by checking out the few demo shots it’s generally understood what the app can do. As you find more application websites keep your eyes open for the “big picture” stuff which is meant to stand out. Also keep yourself thinking about what should be jumping off your own app website.

Clean-cut Characteristics

The more popular site designs are often featuring the same type of elements. This could be a more finalized and detailed icon design, fancy logo text, and other fun graphics. But you should follow Apple’s example and cut out the expendable stuff. Clean and simplified interfaces will keep your visitors’ focus moving through more downloads and purchases.

I am a huge fan of Instagram which has taken up plenty of my time on iOS. And the Mac app Carousel is a beautiful sister-service on the desktop. If you notice their site layout features a smaller logo area with more room for screenshots. Additionally the typography appears more refined to match the classy, upscale theming.

You should also notice there isn’t any main navigation here. Consider duplicating this for your own app website, it removes a lot of user frustration. This idea goes double for mobile users finding your website for the first time on iPhone or Android. If you can portray your app’s message on a single page I say go for it!

Include Standard App Store Icons

To grab your visitor’s attention is one important requirement, but you also want to garner their trust. And people who are using the Mac OS are generally trusting of Apple developers. You should include badges and/or buttons on your site to let people know that you’ve been published into the app store. It may seem small, but it can be of huge significance to new potential customers.

The Mac App Store Marketing Guidelines (PDF) go into a bit of detail about the App Store badge you see on most of the popular Mac apps. I also like to hit up dribbble’s shots to see if anybody has cool design sets or icons relative to the theme.

Provide a Demo Where Possible

Remember the whole point of conveying your message quickly? This can most easily be achieved through images or video – no big surprise there. But even just thumbnail galleries or slideshows sometimes aren’t enough.

You should try to include a demo of your service in a type of workflow infographic There are tons of free PSDs to download which fit into MacBooks, iPhone’s, iPad’s, and everything else. Here’s a beautiful example of a free iMac PSD template to download. Now you could take screenshots of your application and build small demonstration images.

This works really well in the example above for NotifyMe. The app is open and developed for all 3 platforms on iOS/iPad and OSX. At first glance you can assume the app is a notification-type system. Through a small demo graphic and some further explanation, you can put together the extended features to compose your opinion on the app.

Dynamic Animations & jQuery

Apple is also well known for having beautiful transition animations. Their attention to detail in both design and function is incredible – spanning the breadth of their entire software portfolio. And as a web designer publishing under Apple you may find your app site could use a magic touch.

Reeder for Mac is beautiful and the demo site fits just as well. Notice the page URLs are extremely simple and easy to pass along to friends or via social networks. Additionally the navigation is held in a side column, while page content is slimmed down to the bare minimum.

Although Reeder does have quick page speeds, it is only one example of many app websites. If you enjoy these dynamic animations consider looking into the jQuery library and also the jQuery UI set as well. These are two very popular JavaScript libraries with pre-built functions for page effects… and you can build a lot! For one idea you may enjoy this small Apple-style tutorial using jQuery to build a splash screen fade-in effect.

Inspiration Gallery

As mentioned earlier no case study would be complete without a small design showcase. Below are just a few examples of my personal favorite OS X app website layouts. Check ‘em out and let us know what you think! And if we missed any awesome app layouts you really like be sure to let us know in the comments.

Versions

Espresso

Things for Mac

Delibar

Transmit

Checkout

Kaleidoscope

Tangerine!

Dropzone

Postbox

Courier

Lighthouse Keeper

Git Tower

Espionage

Cornerstone

Soulver

iBank

WalletApp

Sparrow Mail

Each project is unique and calls for a unique solution, but I’ve found it helpful to keep a few rock solid and incredibly versatile alignments in mind that I can bust out when I get stuck. The ten layouts below should be enough to get you through even the worst cases of designer’s block when you can’t figure out the best way to arrange the content on your page.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Keeping It Simple

Page layout is equal parts art and science. Creating something that’s visually attractive and unique takes an artist’s eye. However, there are several very easy to follow guidelines that you can use to create solid layouts that work for any number of cases. These principles include choosing and sticking to an alignment, structuring your whitespace properly and highlighting important elements through size, positioning, etc.

Designers often stress out far too much about the layout process. We have a tendency to approach a project while thinking that it needs to be completely unique in every respect to be worth our time and the client’s money. However, if you have a good look around the web you’ll see that this isn’t necessarily the case. Great looking websites often use layouts that are fairly simple and not the least bit unique. It’s true that the pages we designers marvel at the most are often from the peculiar sites that break the mold, but your average client just wants something usable, clean and professional.

In this article we’re going to take a look at ten very common layouts that you can find on countless sites across the web. Notice that the way these sites are styled, meaning the colors, graphics and fonts, is unique, but the basic structure of the sites themselves are based on tried and true methods for laying out a webpage. We’ll emphasize this by first showing you a simple silhouette of the layout so that you can project your own thoughts and designs onto it, then we’ll follow it up with one or two examples of real sites that use the layout.

If you’re a web designer, bookmark this page and come back the next time you get stuck laying out a page. Keep in mind that each of the following layouts represents a basic suggestion for you to mold and modify. I encourage you to not use them as is but put your own spin on them based on the needs of your project.

Three Boxes

This is probably the most simple layout on the list. In fact, you’ll be tempted to think that it’s far too simple to ever fit your own needs. If this is the case, you’ll be surprised if you really put some thought into how versatile the arrangement really is.

The three boxes layout features one main graphic area followed by two smaller boxes underneath. Each of these can be filled with a graphic, a block of text or a mixture of both. The main box in this layout is often a jQuery slider, capable of showcasing as much content as you want!

The silhouetted shapes along the top are areas that can be used for logos, company names, navigation, search bars and any other informational and functional content typically on a website.

This design is ideal for a portfolio page or anything that needs to show off a few sample graphics. Each of the images could be a link that leads to a larger, more complex gallery page. Later in the article we’ll see how to mix this idea up even further.

In the Wild

Below we see a beautiful implementation of the three box layout in Peter Verkuilen’s portfolio. As suggested above, the primary graphic rotates and displays a number of Peter’s recent projects. Clicking on one of the boxes will bring you to that project’s dedicated page where you can find out more information.

Simple, effective and attractive. You can probably pull off a full, live web page with this layout in under an hour!

3D Screenshots

As developers continue to create an endless collection of webapps, the 3D screenshots layout seen below, or some variant of it, is becoming more and more popular. The basic idea is to top your page with a headline and then toss in some stylized previews of your application. These often come with reflections, heavy shadows, big background graphics, or even complex adornments such as vines crawling all over the screenshots, but the core idea is always really simple.

Another place I see this trick used a lot is in pre-built themes. In these cases, a designer is selling a stock layout and really needs his/her placeholder graphics to shine, and nothing says cool and modern like some fancy 3D effects!

In the Wild

Pixelworkshop uses this technique, not as a stock theme, but to actually showcase stock themes! Here the 3D screenshots swap out in a slideshow and come up in a number of different arrangements. Stop by and take a look to see all the various ways the designer presents the images.

Advanced Grid

Many of the layouts that you’ll see in this article adhere to a pretty strict grid alignment. However, for the most part, they don’t simply suggest a page full of uniform thumbnails. For instance, the layout below mixes up the size of the images to avoid redundancy.

As with the three boxes example, there’s one primary graphic heading up the page. This is followed by a simple twist on the idea of a uniform grid of thumbnails. The space would allow for a span of four squares horizontally, but instead we’ve combined the first two areas so that the left half of the page differs from the right.

As we mentioned with the first layout, the blocks don’t have to be images. For example, you can imagine this as blocks of text on the left flanking square images on the right.

In the Wild

In the gorgeous example below, this layout is used for a children’s clothing website. Notice that near the bottom of the alignment, they’ve switched things up even further so that the left side features an almost oddly-sized image followed by a paragraph, neither of which perfectly line up with the content on the right side.

Again, once you’ve got your basic layout in mind, you can make subtle changes like this while maintaining the integrity of the underlying structure. Another interesting trick they used was to split up the main graphic into two areas. It’s actually all one JPG, but it has been divided into two images to show off even more content.

Featured Graphic

Sometimes you don’t have enough content for a page full of images. So what do you do if you want to showcase one icon, photo or perhaps even a symbol such as an ampersand? The layout below is a super easy solution that is quite popular and reads very well due to the lack of distractions.

The result is a page that is bold, yet minimal and clean. The statement it makes is strong and impossible to miss, just make sure your graphic is good enough to be featured so prominently!

In the Wild

Just how common is this layout? A lot more than you might think! With minimal effort I was immediately able to come up with two sites that use some close variant of this technique. Notice that you have options for how you want to format the text and even where you want to place the navigation. The second site rearranges the secondary elements quite a bit but it’s instantly recognizable as the same basic layout.

Five Boxes

The five boxes layout is simply an evolution of the three boxes layout. All of the same logic applies, it’s just been modified to hold even more content. It could easily be four boxes as well, it just depends on what you want to showcase. It also makes it look like you put a little more effort into the design!

Obviously, as you add to the layout, the secondary items become smaller and smaller so for most uses, five boxes is probably going to approach the limit.

Just as with the three box layout, this one is so versatile that it can literally be used on just about any type of site. Ideas for switching it up include adding a large background graphic, rounding the corners, adding shadows and/or reflections, or perhaps even adding an interactive element to the smaller thumbnails. You could easily add in buttons that cause them to scroll horizontally.

In the Wild

Here again we have two examples of this layout being used in slightly different ways. The big thing to notice here is that despite having similar layouts, these two sites almost couldn’t appear more different from each other if they tried. One uses a hand drawn illustration style, the other photographs and gradients. The first one uses muted colors and script fonts, the second bright colors and modern fonts.

This drives home the argument that using one of the layouts in this article won’t kill your creativity. Once you’ve arranged the content, there’s still plenty to be done in the area of aesthetics. This is what will really define the site’s personality and often make or break a client proposal.

Fixed Sidebar

Thus far all the sites that we’ve seen have had a top-side horizontal navigation. The other popular option is of course a vertical navigation, which lends itself to creating a strong vertical column on the left side of the page. Often this is a fixed element that stays where it is while the rest of the page scrolls. The reason for this is so the navigation can stay easily accessible from any point in the site.

The rest of the content can borrow from one of the other layouts on this list. Notice that I’ve again modified the three box layout, this time in a four box arrangement. Once you’re done reading this article, look at all the layouts again and think about how you can mix and match the ideas to create new layouts.

In the Wild

As with the previous example, the two sites below actually look very different, even from a layout standpoint. However, if you look again you’ll notice that they both use a left-side vertical sidebar and the four box layout. The second example has simply moved the smaller boxes to the top of the page! Yet another interesting idea that you should keep in mind when creating a site based on these examples.

Headline & Gallery

Everyone loves a good gallery page. From a layout perspective, what could be simpler? All you need is a solid, uniform grid of images and some room for a headline with an optional sub-head. The key here is to make your headline big and bold. Feel free to use this as a point of creativity and include a script or some crazy typeface.

This example uses squished rectangles to mirror the real site below, but this can and should be modified to fit whatever you’re showing off. The point here is to get you to think outside the box and not default to a square, maybe you could use vertical rectangles or even circles in your own gallery!

In the Wild

The developer below used this design to create a gallery of the logos for clients that he has worked with. Notice that he’s not suggesting that he created the logos, but is simply showing off his client base in a very visual fashion. This goes to show that even if you’re not a designer, a thumbnail gallery might be a great way to showcase an otherwise plain and boring list of items.

Featured Photo

The layout below is extremely common, especially among the photography community. The basic idea here is to have a large image displaying either your design or photography (anything really), accompanied by a left-side vertical navigation.

The navigation might be the strongest in a left alignment, but feel free to experiment with a center or even right alignment to compliment the straight edge of the photo.

In the Wild

The site below really makes the most of this layout by turning the one featured image into a horizontal slider. One image is featured at a time but you can see the next one peaking onto the right side of the page. When you hover over this, an arrow appears that allows you to slide through the photos.

As an alternative, why not try to make a site that utilizes this same layout but with a vertically sliding image gallery? The space almost seems more suited for this as you won’t have to include an awkward cutoff area to protect the navigation.

Power Grid

The power grid is the most complex layout in this article, but it is one of the most effective layouts I’ve seen for pages that need to contain all kinds of various related content. From images and music players to text and videos, you can cram just about anything into this layout and it stays strong.

The key lies in the bottom half of the preview above. Notice that there’s actually a large container that holds a series of rectangles. This container provides you with the boundaries for your space, and all the content you place inside should be formatted in a strong but varied grid, not unlike the advanced grid layout near the beginning of this article.

In the Wild

This one can be really hard to wrap your mind around until you see some live examples. The first is a showcase of art and culture. That description alone tells us that the content is going to be all over the board, and indeed we see that the page is filled with Twitter feeds, photos, lists, images and more.

However, it all fits tightly inside the grid that the designer has established. This layout is easily extendable so that no matter how much you throw at it, the overall appearance should remain fairly logical and uncluttered as long as you format and arrange your content properly.

This layout above heavily reminded me of a tutorial I wrote a while back on designing a website for a rock band. Here we have a very different looking page, but a nearly identical arrangement of content, especially in the lower half. The real trick to pulling this layout off right is to start with a few really big boxes, which are then broken up into smaller areas of content as needed.

If you’re still feeling lost, check out the full tutorial, which will walk you through every step of the process.

Full Screen Photo

The final layout on the list is another that is ideally suited for photographers, but will work on any site with a big, attractive background graphic to display and a limited amount of content.

It can be really hard to read content when it is laid over a background image, so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links, copy, logos and other content.

Rather than using the bar as one really wide content area, try splitting it into a few different sections. This can be done by varying the background color, adding some subtle vertical lines as dividers or even actually breaking the big box into smaller disconnected boxes as I’ve done above.

In the Wild

This layout might feel incredibly restrictive, but below we get a glimpse into just how much it can hold. This photography site fills the bar with navigation, an “About” block of text, a few recent photos with descriptions and a large logo! Not bad for such a small space, and it pulls all this off in a very clean and non-cluttered way.

Conclusion

There were a few key points made above that I want to reiterate in closing. First, even though page layout definitely isn’t necessarily a “one size fits all” practice, there is a science to it that can be quickly and easily applied in an incredibly vast number of circumstances.

Next, the layout ideas presented above need not result in cookie cutter websites that all look the same, but instead merely provide you with a basic canvas on which to build a notably unique finished design.

Finally, the key to successfully implementing these ideas is to remember that they’re not set in stone. Each should be changed to fit your specific project and can even be mixed and matched to create new ideas!

Leave a comment below and let us know what you think of the layouts above. Are there any not mentioned above that you default to when you’re having trouble? Leave a link to an example.

1. Google Analytics

Analytics is a great word, meaning “sophisticated data analysis and modeling, including developing customer profiles, determining customer and merchandise price profitability”. Google Analytics is certainly a great statistical tool, and is completely free. It integrates into your website using a small piece of code and is hosted by Google so it doesn’t require you to install anything. The downside is the inability to install plug-ins to track extra aspects of your site.

2. Mint

Mint is a tool created by a designed called Shaun Inman (who has a great personal site design to boot). It is a locally run piece of software, which means installing it on your web server. The advantages are that it is very customizable and looks great. ‘Pepper’ can be used to add plug-ins and extra features not included by default, created using the Mint API. Mint costs $30, which is a small price to pay for an in-depth knowledge of your visitors.

3. AWStats

AWStats is a different style of tool as, rather than tracking hits in real-time through a piece of code on your site, it reads web server log files to generate statistical reports. There is a good chance that your web server already has AWStats installed and it may just need turning on. A degree of technical knowledge is required to install and configure AWStats yourself, but it can be a useful tool for another perspective on your traffic.

4. StatCounter

StatCounter comes highly recommended by many people as a free, hosted tracking service. They offer a huge variety of different statistics, from entry and exit pages to country/state/city information. It is completely free, so may be worth giving a try to see if it fits well with your tracking needs.

5. Urchin

6. Webalizer

7. The Counter

8. Going Up

9. Omniture

10. Webtrends

We would recommend only using one or (at the most) two of these tools at a time. Most of them slow the loading of your page to an extent, and adding several at a time could impact the experience of a visitor.

The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section will discuss Hyperlinks, Pictures and Lists.

Hyperlinks

HTML uses a concept called hyperlinks to link one HTML page to another. The code for these is straight forward:

1

<a href="page2.html">Go to Page 2</a>

The page2.html part is the file which you would like to link to. The Go to Page 2 part is the text which the visitor will click on to follow the link. Generally, a website has a navigation bar – close to the top of the page – which is made up of a collection of hyperlinks to allow visitors to navigate through the website. Some more tutorials cover this in our navigation category.

Images and Pictures

Pretty pictures are a vital part of a website, and graphical content can draw in users and provide extra information. The tag to add a picture is very straight forward, but you must remember two important things. You need to note which folder you put the picture and link to it correctly, and all image filenames are case sensitive. To link to a file called flower.jpg in a directory (folder) called pictures, you would use the following:

1

<img src="pictures/flower.jpg" alt="Flower" />

The src part shows the folder and filename of the image, and the alt part gives a description of the picture for people who aren’t able to view images in their web browser.

Lists

HTML can use two different types of lists. These are bulleted, or ‘unordered’ lists and numbered, or ‘ordered’ lists. These is a different piece of code to display each one, but in essence they are identical. One will result in a bullet being displayed next to each item, the other a number going up by one each time. The code you would use is:

1
2
3
4
5

<ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
</ul>

The ul part states this is an unordered list, and the li part denotes each item in the list. You can probably guess which part you would change if you want a numbered, ordered list – you simply use ol in place of ul. Lists are very easy to use in HTML, and can also be combined with CSS to create navigation menus which look great. The final part of this tutorial will look at using tables and forms in HTML, for displaying tabular data or taking input from the visitor by means of a form.

Introduction to HTML Part 3 – Tables and Forms

HTML and CSS – The difference

Think of HTML as the structure of the website you are making. It will contain the text, images and links – all put in the correct order – to compose the page that you want to display. CSS is the look and feel of the page. In your CSS you define the colours, fonts, backgrounds and borders surrounding the content you have in your HTML file. We explain below how to attach your CSS file to your HTML file, but read our CSS tutorials for more information on that topic.

A simple HTML page

The best way to learn is by doing, so the following are a few examples of HTML in action. This is, at it’s simplest, a HTML page:

1
2
3
4
5
6
7
8
9

<html>
   <head>
      <title>My Website</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      Website Text
   </body>
</html>

That’s it – it’s much more straight forward than you would expect. HTML works on a system of tags, with each one surrounded by brackets. Any tag that you open must be closed. This can be done as above with a seperate opening and closing tag (i.e. body) or using one tag such as below, for a line break, br. Here is a brief description of the tags used in the above example:

html – This tells your web browser that you want to display a HTML page – everything inside those tags is HTML.

head – The ‘head’ is a section where you can show the title of the document and provide information about what the page contains.

title – The title is self explanatory, and displays in the title bar of your web browser window.

link rel="stylesheet" type="text/css" href="style.css" / – This links the CSS file (style.css) to your HTML document.

body – The ‘body’ is the main section. Anything inside the body tag will display in your web browser.

This won’t really do much good though, as it will display a blank page with ‘Website Text’ inside it. The following will explain how to get a little more advanced:

Paragraphs, Line Breaks and Headings

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

<html>
   <head>
      <title>My Website</title>
   </head>
   <body>
      <h1>Main Heading</h1>
      <p>
         Welcome to my website, full of information
      </p>
      <h2>Second Heading</h2>
      <p>
         Here is some more information about my website, going into
         further detail about what you can look at and how you can navigate
         around.<br />
         If you would like to contact me, you can do so from our contact page.      
      </p>
   </body>
</html>

This is a slightly more advanced example which introduces the idea of defining headings, using the h1 tags, putting p around paragraphs, and using br where you just want a normal line break. Having one page is OK, but generally you would want more than one page, with the ability to link them together…

Introduction to HTML Part 2 – Links, Pictures and Lists