Create a website

Giveaway: 5 Books – HTML Email That Just Works

aaaa — Mon, 11 Jul 2011 20:30:11 GMT

Follow Six Revisions on Dribbble!

Campaign Monitor, a web-based email marketing software for web designers, is giving away 5 copies of Create Stunning HTML Email That Just Works! to 5 Six Revisions winners. Read on to see how you can get a chance to win this awesome prize.

Update: Giveaway Period Has Ended

Comments on this post are now closed. Stay tuned for results.

About the Book: Create Stunning HTML Email That Just Works!

Create Stunning HTML Email That Just Works! is a practical guide to applying your web design skills to the largely mysterious realm of HTML email. Produced by Sitepoint and Campaign Monitor’s Head of Customer Support, Mat Patterson, the book features tips and advice from the Campaign Monitor team. It’s an essential resource for both new and jaded email designers alike.

Frustrated web designers take note: Not only will you learn how to make your email newsletters look great in most inboxes, but also how to add email design and marketing as a service that you can offer to your clients.

Create Stunning HTML Email That Just Works! is available now at Sitepoint for $29.95 USD. Find out more and download 2 free chapters at:

http://www.campaignmonitor.com/book/

About Campaign Monitor

Campaign Monitor offers everything a designer needs to run successful email marketing campaigns for themselves and their clients. Send beautiful email campaigns, track the results, manage your subscribers and even earn a profit by letting your clients send at prices you set. Give Campaign Monitor a shot by signing up for a free account.

Connect with Campaign Monitor by following them on Twitter @ campaignmonitor, becoming a fan on Facebook, as well as checking out their company blog where they write about news, announcements, and tips and tricks for email marketing, project management and email design.

Update: Giveaway Period Has Ended

Comments on this post are now closed. Stay tuned for results.

How to Win a Copy of Create Stunning HTML Email That Just Works!

For a chance to win, simply leave a comment that answers the following question:

How would Create Stunning HTML Email That Just Works! help you if you win?

Giveaway Details

This giveaway ends on Wednesday, December 1, 2010 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you’ve won. Please only comment once. The winners will be randomly selected using the same method as previous Six Revisions giveaways. The winner will be announced on a separate post and you’re advised to subscribe to our RSS feed so that you can be quickly notified when the announcement post has been published. Please note that comments are moderated and so your comment may not show up right away.

Web Designer’s Guide to PNG Image Format

aaaa — Mon, 11 Jul 2011 20:30:01 GMT

Follow Six Revisions on Dribbble!

Once upon a time, there was the mighty GIF image format, the most popular type of image compression for web graphics. Then, it was announced that software programs using GIF would require a license (this was because of the Unisys patent for the LZW compression method used in GIF). This change sped up the development for its successor: the PNG format. PNG, which stands for Portable Network Graphics, gained popularity and, nowadays, it’s probably the most used image format when it comes to web design, alongside JPEG.

In this guide, we will cover everything you, as a web designer, need to know about the PNG image format.

Understanding Digital Image Formats

There are many digital image formats available for you to use, but only some of them are optimized for web use. For example, the TIFF image format is not designed for web use; it’s used for printing. Examples of image formats for the web are JPEG, PNG, GIF, and SVG.

Why are certain image formats suitable for the web, while others aren’t? Because images on the web must be optimized and highly compressed so that they don’t get too huge.

Some digital image formats, especially those designed for print (such as TIFF) are so unnecessarily high in resolution, metadata, and color-richness — which all become irrelevant when viewed in computer monitors — that they are too big in file size for web use.

Compression Methods

There are two general kinds of image compression methods: lossy and lossless.

Lossy compression is when the compression algorithm being used results in some loss in data. This means that you will not get the exact same image as the original if you try to decompress it. The data loss, in most instances, is done in such a way that you don’t lose too much quality; at least not enough that people will notice.

On the other hand, lossless compression is the opposite of lossy. Lossless compression involves compression algorithms that when decompressed, will get you exactly the same image as the original. An example of lossless compression is when you are zipping up a document using the ZIP format. When you unzip your document, it will be the same as the original.

PNG uses a lossless compression algorithm. On the other hand, JPEG uses a lossy compression algorithm. What this essentially means is that, by saving your original images using JPEG, you might witness some quality loss (the same goes for PNG in certain situations, as you’ll see later on).

Some Technical Stuff about PNG

Aside from using lossless compression, PNG is a bitmapped image format, which just means it’s a raster image format. If you skipped Design 101, raster images, unlike vector image formats such as SVG, cannot be rescaled without losing quality. However, raster images are better than vector images for complex images such as photographs.

PNG was designed for quickly transferring images on the web and for displaying images in computer screens, so it only uses the RGB color model. The CMYK color model, which is typically for print purposes, is not available when saving images in PNG format. In short: the PNG image format is not optimal for graphics that will be printed.

PNG-8 and PNG-24

There are two PNG formats: PNG-8 and PNG-24. The numbers are shorthand for saying "8-bit PNG" or "24-bit PNG." Not to get too much into technicalities — because as a web designer, you probably don’t care — 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel.

To sum up the difference in plain English: Let’s just say PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons.

Another difference is that PNG-24 natively supports alpha transparency, which is good for transparent backgrounds. This difference is not 100% true because Adobe products’ Save for Web command allows PNG-8 with alpha transparency.

The Short Story: When to Use PNGs

When you need to preserve transparency and large amounts of color, as well as achieve full or partial transparency, the PNG image format is the best.

Since it’s a lossless format, images saved using the PNG format aren’t going to be small all the time, but because PNG stores a lot of additional data, you can easily optimize images for web usage to reduce file sizes.

PNG vs. GIF vs. JPEG

Let’s compare the advantages and disadvantages of using PNG versus the two other popular web image formats.

PNG vs. GIF

Short answer: Always use PNG over GIF unless you are making an animated GIF or when you want to use images with transparent backgrounds on older versions of IE (however, there’s a workaround for supporting PNG transparencies in IE6 and below, using JavaScript PNG fix libraries). I’m not alone on this, Jeff Atwood, founder of StackOverflow and the Coding Horror blog, will agree.

PNG has some important advantages over GIF that web designers will care about, such as:

There are, of course, many other advantages, but those are the ones that matter to web designers.

Here’s a visual comparison of PNG versus GIF. Note that for the sample image below, you would not use PNG-24 because it has simple colors and will also weigh more than GIF. However, the PNG over GIF notion still stands: If you save a photographic image (such as a photo of your mom and dad), PNG-24 will have a better result than GIF.


PNG-8, file size: 3.73 KB	PNG-24, file size: 5.68 KB	GIF, file size: 4.20 KB

Optimization Tip: There are a lot of tools you can use to optimize your images. Below, I used pngcrush for the PNG images and Smush.it for the GIF image. No apparent loss in quality, and PNG-8 still wins over GIF.


PNG-8, file size: 3.69 KB	PNG-24, file size: 5.41 KB	GIF, file size: 3.71 KB

PNG vs. JPEG

JPEG will be tinier in file size versus PNGs when we’re talking about photographic images. This is because it uses a lossy compression algorithm specifically designed for photographic, rich-color images.

So for web use, if you’re putting up a photographic image on a web page (such as a picture of your cat), always choose JPEG over PNG. Using PNG over JPEG in this situation will result in a bigger file size (often 5-10 times more than JPEG).

Here is a PNG vs. JPEG (quality: 70) comparison using a photographic image. Note that we use PNG-24, not PNG-8, because it’s the proper format for photographic images.


PNG-24, file size: 66.6 KB	JPEG, file size: 14.41 KB

Further optimization with pngcrush and Smush.it:


PNG-24, file size: 64 KB	JPEG, file size: 14.2 KB

Optimization tip: You (as the web designer) will criticize your images more than your website users, so a good advice is to be a little more "brutal" when saving your web images. Find a good balance between file size versus quality. Lower your quality settings until it becomes unbearable.

When to Use Each Format

Here is a simplistic summary of the file format comparisons:

Use PNG-8 over GIF for images with simple colors (logos, icons, buttons)
Use PNG-8 over JPEG for images with simple colors (logos, icons, buttons)
Use PNG-24 over GIF for photographic images
Use PNG over JPEG when using alpha transparency
Use JPEG over PNG for photographic images
Use GIF for background transparency for older browsers (IE6 and below)
Use GIF for animated GIFs

PNG-8 Color Reduction Optimization

When choosing the PNG-8 image format, you may see a decrease in the number of colors in the image. This is why it is good for simple artworks such as logos, icons, and UI elements such as buttons.

Pick PNG-8 in instances where there is a limited color palette. This will help you achieve a smaller image file size without any visible difference, allowing you to build faster, leaner and more responsive web designs.

An optimization trick you can perform is reducing the number of colors of your PNG image. This will drastically reduce its file size, and you can do it with little-to-no apparent loss in quality.

Most software applications that can save PNG files will have the ability to allow you to manually enter the number of colors to include. For example, Photoshop’s Save for the Web & Devices feature (which you can get to by going to File > Save for Web & Devices) gives you a dropdown menu for setting the number of colors for the PNG format. Reduce the number of colors until you see a visible difference in quality.

Below, you can see the optimization of the RSS icon we used earlier through the reduction of the number of colors. Reducing the number of colors from 256 to 16 results in very little noticeable loss in quality and results in a file size that is 62% smaller — over half of the file size was shaved off!


PNG-8 256 colors, file size: 3.73 KB	PNG-8 64 colors, file size: 2.18 KB	PNG-8 32 colors, file size: 1.75 KB	PNG-8 16 colors, file size: 1.41 KB

PNG-24 Posterization Optimization

This optimization technique helps you optimize the PNG-24 format and this is how it works: it reduces the amount of colors by combining similar colors.

In Photoshop, here is how you can do this optimization trick: Open the image in Photoshop. Choose Image > Adjustments > Posterize and then decrease the levels until it results in visible quality loss. Then just use the Save for the Web & Devices feature to save the image in PNG-24 format.


PNG-24 Original, file size: 29.5 KB	PNG-24 Posterized, file size: 23.9 KB

Summary

For web designers, the importance of reducing images sizes is a way to increase the overall speed of a web page. Optimized, smaller images in a web design means:

Faster web pages that load more quickly
Less bandwidth consumption
Less data required to transfer to site visitors, which means lower data activity

You may be wondering if PNG is the best image format — this is an inevitable question. The answer is: it depends. As shown in this guide, there are many variables that will affect what image format you will choose. Certain situations will find PNG-8 favorable over PNG-24, while others will produce better results when using JPEG.

PNG has certain advantages over GIF, such as lower file sizes and being an open format. However, PNG transparency in IE6 isn’t supported so you might have to use GIFs (or a JavaScript library that emulates PNG alpha transparency in IE6, such as IE PNG Fix). The same can be said for when you’re dealing with animated images, which GIFs can do.

Regarding PNG versus JPEG: the choice depends a lot on what type of image you’re optimizing. Specifically, PNG does extremely well with limited color schemes, solid colors and supporting transparency (which JPEG does not support). For complex, photographic images, JPEG is the way to go.

The main thing to take away here is that you should use a combination of image formats. You shouldn’t strictly use PNG, or JPEG, or GIF. Furthermore, you shouldn’t be afraid to optimize each image manually so that you can achieve better results and smaller file sizes. You should always use an image optimizer, which will squeeze out every last excess byte.

There are two things that will help you pick the right format: experimenting and experience. The more you save images for the web, the quicker you will be in recognizing situations in which PNG, JPEG, or even GIF should be used.

References and Resources

How to Create a Web App’s Site Web Design in Photoshop

aaaa — Mon, 11 Jul 2011 20:28:54 GMT

Follow Six Revisions on Dribbble!

This web design Photoshop tutorial on Design Instruct, our other site, outlines techniques for making a layout comp that will work well for the sites of web apps, startup companies, SaaSs, and other modern, "Web 2.0"-themed, product-centric sites.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

Subscribe to the Design Instruct RSS feed
Follow @ designinstruct on Twitter

Winners of MediaLoot Subscriptions

aaaa — Fri, 22 Oct 2010 14:06:56 GMT

Last week, we ran a giveaway to hand out five 1-year subscriptions to Six Revisions readers for MediaLoot, a subscription-based site offering resources to designers and artists including icons, Photoshop brushes, textures, vectors, print templates and more.

There were over 200 participants that looked for a chance to win the subscription simply by leaving a comment on what their first download would be if they won. We’ve randomly selected the winners, and in this post, we share with you the winners.

MediaLoot Subscription Winners

Please join us in congratulating the winners (who should’ve already received information about their prize). Send a tweet to congratulate the winners!

Thank you to all of the participants and to MediaLoot for furnishing these prizes. If you missed out on winning, you’ll have plenty more chances to win more exclusive giveaways here on Six Revisions, so subscribe to the RSS feed to make sure you don’t miss any of them!

A Complete Guide to VPS Hosting

aaaa — Fri, 22 Oct 2010 14:06:49 GMT

Web hosting is a tricky business – there are a wide variety of options out there designed to fit a wide range of needs, but like with most things, there are trade-offs.

Shared hosting is usually cheap and easy, but the resources are limited.

Dedicated servers are powerful and customizable, but a certain level of technical knowledge can be required to run them, depending on the hosting company you choose.

What happens, then, when your site is too big and gets too much traffic for a shared hosting plan, but doesn’t require the resources (or expenditure) of a dedicated server?

If you find yourself asking these questions, then you should look into VPS hosting.

Virtual private server (VPS) hosting is a flexible, scalable, and economical hosting solution that can fit the needs of almost any kind of website. It’s a perfect solution for those who have outgrown their shared hosting plans but don’t really need to move to a dedicated server.

One thing to note before we dive in to examining the features and benefits of a VPS – the specs on a VPS vary widely from host to host. To see if a certain host offers a certain feature, make sure to ask the provider.

So What IS VPS, Anyway?

In answering this question, maybe it’s better to examine how VPS hosting fits in to the overall offerings of most hosting companies. Shared hosting is just that – your site is hosted on a machine with a bunch of other sites, and each of you share the same resources, including RAM, disk space, and CPU. Your site uses what it needs if it’s available, and if it’s not – well, that’s the limitation of shared hosting. Likewise, a dedicated server is also self-explanatory – your site is the only one hosted on server, and you have all the aforementioned resources available at your beck and call. Dedicated hosting is therefore for those large sites with big databases and lots of traffic, whereas the limitations of shared hosting’s usually prevent it from housing that kind of site. Dedicated servers are also relatively expensive, while one can get a shared hosting plan for under $10 per month.

A Look at VPS Resources

So that’s it, then – a VPS is for everything in between, right? Well, yes…and no. A VPS (Virtual Private Server) is a flexible solution that falls in between shared and dedicated hosting, not only in price but also in the way it functions. Like a dedicated server, a site hosted on a VPS gets its own RAM and disk space; however, like a shared server, it uses the same processing capacity (CPU) as a certain number of other sites. So, while your site’s performance isn’t reliant on shared RAM and disk space, it is dependent on a shared processor. Moreover, the distribution of processor share varies from provider to provider. The table below shows how most hosting companies break down the differences between shared, VPS, and dedicated hosting plans:

Differences by Hosting Plan

Shared	VPS	Dedicated
Shared RAM, Disk Space, and CPU	Dedicated RAM and Disk Space, Shared CPU	Dedicated RAM, Disk Space and CPU
NO Server Level Customization	Server Level Customization Allowed	Server level Customization Allowed
All Server level Software Pre-Installed	Server Level Software (OS, cPanel, LAMP) pre-installation varies by provider	Server Level Software (OS, cPanel, LAMP) pre-installation varies by provider
Full Customer Support Typically Provided	Support Levels Vary By Provider	Support Levels Vary By Provider
$	$$	$$$

Burstable RAM

A VPS doesn’t just have more RAM, disk space, and a proprietary share of CPU than a shared account. Depending on the provider, some VPS plans offer burstable memory, which is a pool of RAM set aside for extraordinary events. This is the stuff that can help counter the so-called “Digg-effect,” that much-whispered about occurrence that’s the simultaneous hope and fear of everyone who runs a web site. When you have an unexpected high traffic event, burstable memory will call on a pool of reserved, shared memory to satisfy the needs of temporary high traffic. This is not available on shared servers and, while the necessary memory is available on a dedicated server, your site might not get the kind of traffic on a daily basis to justify the expense of a dedicated server. Again, not all VPS plans have burstable memory, so ask your provider if their VPS plans do.

All Support Aren’t Created Equal

Much like the differences between shared, VPS, and dedicated hosting plans, there are differences in the levels and types of support offered to VPS platforms. For example, some companies offer semi-managed VPS solutions, while other companies take a completely hands-off approach – but generally, the different kinds of support are as shown below:

Levels of Support

Un-managed	Semi-Managed	Fully Managed
Hosting Company handles hardware and network support	Hosting Company handles hardware, network, and standard software	Host handles all hardware, network, and software issues.
User responsible for ALL software, performance issues	User handles all custom software	Host handles installation of custom software.

As you can see, a VPS can be the perfect middle ground for many – enough flexibility and resources for those who need more access or control than on a shared server but without the cost of a dedicated server. If you need root access, you can’t get that on a shared server, but you can get it on a VPS. If your site experiences unpredictable swings memory usage, and your host provides it, then the presence of burstable memory will be attractive. And, if you’re a fan of customization, then the fact that you can customize server-level software such as PHP, MySQL, and Apache will perk your interest. In short, choosing a VPS will allow you to have many of the same characteristics of a dedicated server but in a more affordable and manageable package.

Do I Need a VPS?

The answer to this question is a definitive “maybe.” Since you’re looking at this site, you might be a Web designer who has a few sites, an online portfolio, and a couple of long-standing clients whose sites you manage. Is a VPS for you? Well, you’ve most likely outgrown a shared platform, and as a professional, it won’t do to have your site run poorly because another site that you share a server with is using more than its fair share of resources. A dedicated server could be overkill – if you don’t need all the resources on a consistent basis, you may not be able to justify the expense.

Essentially, here’s the criteria I would use to judge things – if your site is made up of primarily static, HTML-based content, then you probably don’t need a VPS package. However, if you have a large amount of files stored, multiple sites, dynamic content, and the possibility of major traffic from time to time, then you might consider upgrading to a VPS. It’s a powerful package that allows you to do more than you could with a shared hosting plan, but requires less investment than a dedicated server.

What is your hosting set-up, and why? Have you considered using a VPS?

Coding a Clean and Professional Web Design

aaaa — Fri, 22 Oct 2010 14:06:44 GMT

In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called " Create a Clean and Professional Web Design in Photoshop" using HTML/CSS.

This is the second part of a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.

The "Clean and Professional Web Design" Series

Final Result

Click on the preview below to see the live demo of the web design that you’ll be creating in this tutorial.

Download

You will need the Photoshop (PSD file) of Part 1 of this tutorial, download it from that tutorial.

Also you can download all files including the examples used in this tutorial from the link below if you want to study it offline (or use it in a project).

clean-professional-website.zip (ZIP, 74.8 KB)

Introduction

In this tutorial, we’ll create a fixed-width web layout using some basic coding techniques. We will go through step-by-step from the top to bottom. So this means that we will start from the the header, then content, and then the footer section. Preview the examples when they are available to make sure that you are following along.

Setting up the file structure

1 Create a folder in your computer for the tutorial files and name the folder clean-professional-website. This will be our working folder.

2 Inside this folder, create the following:

images folder – will contain all images used in the tutorial.
index.html – our site template.
css folder – will contain our stylesheet called styles.css

3 Open index.html and styles.css in your favorite text editor. Also, open the PSD file in Photoshop; it’s inside the clean-professional-weblayout zip file from Part 1.

4 Our file structure is set up now and we are ready to go.

5 Open the Photoshop file. Open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. Choose the Rectangular Marquee Tool (M) and set the options as shown below. After the options are set, click on the top left of the canvas (next to the logo) to make a selection.

6 Use Edit > Copy Merged (Ctrl + Shift + C) to copy the selected area. Create a new document and paste (Ctrl + V) the copied selection into the new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as bg_body.jpg in the images folder. Use the same settings for saving all the files so that there is no issues with how they are rendered on a web page. I used the JPEG – Very High preset but feel free to change these settings (you can probably get away with just JPEG – High or PNG-8 to keep your web page CSS backgrounds as lightweight as possible). If you change the default settings, be sure to save it the same way every time to provide consistency in the images.

Setting up the HTML and CSS files

7 Move to index.html. The first thing we want to do is reference style.css and in the of our HTML document.


 
 
 8 Open 
styles.css and add some basic style rules. We’re going to take a shortcut here and use the Universal Selector margin/padding CSS reset to zero out all the elements’ margins and paddings. This works the majority of the time, but it’s better to invest some time learning about more robust CSS Reset techniques which you can find here: 
Resetting Your Styles with CSS Reset.
 
 9 Here is the style rule declaration for resetting the margins and paddings:
  /* CSS Reset */
* { margin: 0; padding: 0; }

 Implementing the background
 
 10 We’re going to implement the background we created (body_bg.jpg), tiling it horizontally (
repeat-x). We’re going to set it as the 
 background. We also define the default 
font-family that we are going to use in this website.

 body {
 background: #fff url(images/body_bg.jpg) 
repeat-x 0 0;
 font-family: Arial, Helvetica, sans-serif;
}

 Let’s preview how the background looks. In Example 1 below, you can see how background is implemented.
 
 Example 1 : See the background in action.
 Setting up the layout’s container div
 
 11 Let’s move into some HTML. We’ll contain our layout in a 
960px-wide container div called 
#container.