Say Hello to the HTML Email Boilerplate

admin — Mon, 05 Dec 2011 11:35:03 +0000

Figuring out html email will test the patience of any human being. A seemingly small formatting issue will inevitably arise and you think to yourself, “self, I’m a world class web developer type person schooled in the latest and greatest html5/css3/whatever, I can tackle this with plenty o’ keystrokes to spare.”

Several hours/cups of coffee/googling later, you are ready to pull your hair out and begin to contemplate what you would do to the person/persons who created {fill in the blank email client here}. That’s pretty much why the HTML Email Boilerplate is around.

The HTML Email Boilerplate is a template of sorts that is absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo, etc. – the HTML Email Boilerplate

The boilerplate is here to provide you with some examples and helpful tips to keep your email design rendering as true-to-form as possible. You can use the boilerplate as a starting point to build your email. Or, you more advanced users may want to pick and choose specific snippets based on your needs.

In this article, we are going to breakdown some of the key aspects of the boilerplate and discuss how to implement it.

But before we get started, let’s review some basic tenants of html email:

The only thing you can reference externally are images. No external stylesheets, fonts, video (html5 is starting to change this though), etc.
There is limited support for CSS elements across email clients (email client = Outlook, Gmail, Hotmail, Yahoo, etc.). You can check out a helpfull spreadsheet of what client supports what features here.
Tables are most commonly used to layout an html email.
And almost diabolical in nature, you need to test across email client, browser, and OS.

1: Setting the DOCTYPE

While many email clients strip out the doctype or don’t allow for one at all, that doesn’t mean we don’t want to set one for our own testing purposes. In this case, the XHTML 1.0 Strict doctype is used mainly because two popular clients who strip out your doctype, Gmail and Hotmail, use it as the default.

2: Working With Images

There are a few issues to be aware of when working with images in HTML email:

Linking images to another page can be tricky. Different clients will set unwanted (and ugly) borders around a clickable image.
Some email clients add extra space at the bottom of the image.
Because many email clients turn off images by default, the format/frame of your message can be distorted.

To combat these issues, the boilerplate sets up a few sensible defaults in the head of the document. It resets the borders around linked images to zero. It sets up a class (image_fix) to use when you don’t want space underneath your images. The boilerplate also gives you an example of how to setup your images, always setting the width, height, alts, and titles; which help keep your format intact and consistent.

/* Some sensible defaults for images
		Bring inline: Yes. */
		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
		a img {border:none;}
		.image_fix {display:block;}

The boilerplate helps manage some of the issues you can run into when using images in html email. Bring these declarations inline to make sure your email will render as you intended it.

3: Tables, Tables, and More Tables

It’s probably safe to assume that you have used tables before. I mean, tables have been around since the dawn of (internet) time. And while not the newest or coolest method around, tables are the most common framing tool for HTML email and a tried and true method to space effectively. Adding to that, nesting tables is a great way to group and separate content to conquer the most complicated designs.

The boilerplate sets you up with a few starting points for working with tables. The first is an outermost table (#backgroundTable) that acts as a container of sorts — stretching to the width of the viewable space in an email client. It’s needed because some clients arbitrarily restrict the area to render – possibly resulting in oddly aligned content.

#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

...
The #backgroundTable class helps reset some email client specific formatting while setting the canvas for you to work in.
The second (inner) table is centered and set to a pixel width of (600px), a good width to use to keep your email from stretching wider than an email client’s viewable real estate (think preview pane).
Additionally, as it does for images, the boilerplate sets a few defaults for tables that help avoid formatting issues. The borders, cellpadding, cellspacing are set to zero and content is vertically aligned to the top of the cell.
Note: Because of limited support for div’s in email clients, Tables are your best and sometimes only chance for formatting and positioning content.

4: Client Specific Fixes
Much of the reason this boilerplate, and others like it, exists is to thwart what seems to be random acts of sabotage at the hands of Yahoo, Google, Microsoft, and the like. Yahoo sets your paragraph margins to zero, jumbling your text together in one large blob. Gmail disregards (really, obliterates) any styling in the head of your document and screws around with your images. Hotmail hates your headers and Outlook has long been the bane of any HTML emailer’s existence.
So the boilerplate tries to neutralize some of these nuances where possible, and mitigate the effect of the rest.
Specifically, for Yahoo, the boilerplate sets the paragraph margin to 1em in the head of the document and instructs to bring it inline. (more to come on “inlining” later)
p {margin: 1em 0;}
Changes:

To this:

For Hotmail, the boilerplate overrides Hotmail’s green header styling, normalizes the line-height, and sets a default width.
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
h1, h2, h3, h4, h5, h6 {color: black !important;} /* or whatever color you want it to be */
For Outlook, the boilerplate sets “border-collapse: collapse” to get rid of some default padding.
Tip: By setting #outlook a {padding:0;} in the head your document, you can force Outlook to offer a ‘view in browser’ option. An interesting feature that would be awesome if other clients offered. (H/T Fabio Carneiro and MailChimp for this excellent snippet.)

5: Mobile
Mobile is one of the more exciting areas of building HTML email. While for the most part we are stuck in the 20th century from a markup perspective, new smartphones have given us a glimpse of what life could be like. Finally, we have a chance to play with “newer” web technologies. We can frolic in the fields of responsive design, we can query to our hearts content, and we can surely target different platforms. Okay, so maybe I got carried away a little but given the state of email, mobile is looking better every day.
With mobile rendering in mind, the boilerplate provides a good starting point for mobile targeting. It helps with font resizing (or stopping it). It helps to optimize your email for mobile by setting the viewport to the device’s width. It also gives you the @media queries needed to target the iPhone (3+4), tablets (via resolution), Android phones, and a conditional statement for Windows Mobile.
Reminder: You shouldn’t bring any styles declared in the @media queries inline.

6: Working with the EBP: When and How to Bring Styles Inline
Tools like Dialect’s Premailer make inlining a breeze. A great tool for any html emailer to have in their chest, belt, or pocket protector.
As mentioned earlier, there are some clients that strip out your embedded styles in the header. We need to take another step from just having the embedded styles in the header and bring them inline. You can either do this manually, use your email clients built in tool (popular tools like Campaign Monitor and Mailchimp have them built in), or use a standalone tool like Premailer. Either way, follow the directions in the boilerplate to figure out what to bring inline.
To give you an idea of what we’re talking about, look at the Yahoo paragraph fix mentioned ealier in the article. It has to be inlined to work. If not, your margin declarations will be ignored and your paragraphs will bunch together. On the other hand with another fix in the boilerplate, markup like table td {border-collapse: collapse;} that targets a padding issue in Outlook does not need to be brought inline. Outlook will respect your embedded styles (well, for the most part ).
As an example, you would go from this:
p {margin: 1em 0;}
Pellentesque habitant morbi tristique senectus ...
To this:
p {margin: 1em 0;}
Pellentesque habitant morbi tristique senectus ...
Keep in mind that any styling in and right after the @media queries should not be brought inline. I would recommed removing the queried styles until you are happy with your email and then work them back in after inlining your other styles.

7: A Few Honorable Mentions
There are a couple topics that are worth mentioning but didn’t make it to the boilerplate for one reason or another.

HTML5 Video: While really, really close, there are some major support flaws in Hotmail that made it awkward to include. There are some interesting tactics being tested now that can render an actual video in an email in a number of clients and gracefully degrade to a clickable image. However, Hotmail throws a little bit of a wrench in the whole thing as it will show the video and allow playback but without any visual controls. Right click works but that seems like a stretch to ask your readers to do. You could also set the video to autoplay – but could you really live with yourself doing that?
Facebook’s Open Graph: Probably a candidate for the next release. I am still weighing the effect of having this in an email and specifically if there isn’t a browser version of the email made available – should it be there?

8: The State of Email
CSS3? Let’s get to CSS2 first.
Many emailers lament that they have to code like it’s 1999. Tables, not divs, reign supreme. CSS3? Let’s get to CSS2 first. Email clients randomly support tags, declarations, and whole specifications. However, with the advent of iOS devices and some movement in the client space, rendering engines like Webkit are popping up and making life for emailers a little easier. Because of this and other factors, we are seeing some of the most intricate and beautiful designs ever. It’s definitely an exciting time for emailers.
This movement has a ton to do with mobile, iOS devices in particular. As of June of this year, the second most popular email client was an iOS device. That means that we can use most anything a webkit browser will support to build our email – things like CSS3, HTML5, all come into play (woohoo). Don’t get too excited though, you still have to account for very limited to no CSS3 or HTML5 support in many other desktop/web email clients (not woohoo).
With that said, this raising of the bar has definitely made an already complicated space more complicated. While some email clients are moving to web based standards, for example, Outlook on a Mac now uses webkit just like its Apple Mail counterpart, most desktop email and web based clients are moving to acceptable html/css support at a turtle-esque pace. So while mobile has shown us something of a light at the end of the tunnel, it has also added another column to the already crowded matrix of testing possibilities.
Like I mentioned earlier, this is definitely an exciting time for emailers. With so many great companies and individuals pushing the envelope for what’s possible, it’s inevitable (at least I sure hope so) that the momentum will push things in the right direction – and by “things” I mean better html/css support, a little standardization, and fewer headaches.

Conclusion
The boilerplate is here to showcase and highlight some of the pitfalls of developing for email and email clients. And while not exactly plug and play, with a little elbow grease, it will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible. At the very least, it will save you some time googling and more importantly save you some hair.
I would love to hear back from you. If you have anything that you would like to see in the boilerplate, let me know here or @seanpowell.

Many Thanks
When it comes down to it, the HTML Email Boilerplate is simply a compilation of tips, snippets and best practices that have come across my desk and I would be remiss not to mention some of the great research and openness of Ros Hodgekiss, Brian Theis and the team over at Campaign Monitor; and to Fabio Carneiro and Mailchimp for the great work they do (and the great reset the boilerplate uses). The boilerplate is also put through its paces using two great email testing tools, Litmus and Email on Acid – without them, this would have been an impossible task.

Resources
Just a few that I use regularly…

Campaign Monitor’s Blog and CSS Support Cheat Sheet
MailChimp’s Blog and awesome Field Guides
Dialect’s Premailer Inliner Tool … or this one from MailChimp … or this one from Dave Cranwell
Litmus Email Testing Service
Email on Acid Email Testing Service
Emailogy – Email on Acid’s great boilerplate
And of course, the HTML Email Boilerplate

Webdesigntuts+

paulaborowska.com
admin — Thu, 01 Sep 2011 05:28:51 +0000

http://www.paulaborowska.com/
Web developer and designer for small and home based businesses.
http://www.paulaborowska.comhttp://www.paulaborowska.com/

htmlangels.com
admin — Thu, 30 Jun 2011 05:15:48 +0000

http://www.htmlangels.com/
Thousands of happy customers already know HTML Angels, know our kick-ass code and our quality. And now we are here full of energy, with our new service, ready to work one-on-one and make your dreams come true.

hotmeteor.com
admin — Wed, 18 May 2011 05:35:08 +0000

http://hotmeteor.com/
Hot Meteor specializes in crafting, designing, and developing engaging web and mobile experiences, and seeing our client’s stories told, heard, and shared with others.

tejpotter.com
admin — Tue, 19 Apr 2011 05:22:39 +0000

http://tejpotter.com/
The Portfolio of Belfast based freelance web designer, Tim Potter. Specialising in clean, standards compliant websites with a focus on simplicity, usability & accessibility.

Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 1)
admin — Tue, 15 Mar 2011 01:20:18 +0000

This time I’ve got for you a fun tutorial for everyone. In Part 1 we will create a very original design for all the comicbook fans out there. We will create this blog layout from scratch using several tricks in Photoshop to make it look awesome. Then in Part 2 we will learn how to slice it, code it, and get it ready to be converted into a blog CMS theme. Are you ready?
Before Getting Started
Let’s get it started! In order to speed up the reading I will avoid some of the most basic explanations (like how to create a layer mask or how to edit the handlers or Beziers of a vector shape). You will need some basic knowledge about Layers, Guides, Vector and Layer Masks, Brushes, the Pen Tool, and working with Typography (Character and Paragraphs).
The assets for this tutorial are:

The Paper Texture – Scraps
Sunburst Shapes
Comic fonts from Font Squirrel (Komika Title and Komika Text)
Social Media Icon Pack by Komodo Media

The first step is creating a mock up, doodle, or even just a sketch the layout on a napkin. Having a rough draft of the site’s structure makes easy placing the elements on the design. Below you will see a simple sketch showing the following elements:
A header, with the logo, search bar and social media links, besides the main navigation bar.

A banner, with featured posts, notice how the post text is placed over the image into a talk bubble to depict the “comic” style.

A content area, with a list of posts displayed in two columns, each post have a picture associated and the text is shown into a talk bubble as well.

A footer, with a list of the blog’s categories, archive and popular post and recent comments and the copyright information.

Step 1: Setting Up the Document
Open Photoshop, download the 12 columns Photoshop template from 960 Grid System or create a new document 960px with and make draw some Guides to the left and right borders.
Increase the working area to see how it looks on wider resolutions and increase the height as well. I’m setting the document dimensions to 1420px width and 1200px height. Finally go to Layer > New Fill Layer > Solid Color… and set a Black (#000000) background for the canvas.

Step 2: Header Background
Draw a horizontal Guide around 450px from the top border, we will use it as a reference guide to add a shade on top of the page. Using the Rectangle tool, draw a wide rectangle using this color as foreground (#AA0001). Then apply a Gradient Layer Mask (Black to White) to the rectangle in order to hide the bottom part of it.

Tip: do not ever use a Gradient Layer for backgrounds, because when increasing the height of the canvas (a very common practice in web design) the background gets distorted.

Step 1: Add a Texture to theBackground
Open the “Paper Texture” from the assets Copy and Paste it above the red gradient layer. Scale it in order to make it fit into the bounds of the design and change the layer’s Blending Mode to Linear Burn. We will slice this as a large image background, but for wider resolutions we need to subtle merging the edges of the paper with the black background, for this, using the Burn Tool, darken the areas close to the Left and Right edges of our paper texture. You can use a big and soft Brush (0% Hardness).
Always keep your layers organized, put both layers (“Paper” and “Rectangle”) into a folder named “Header Bg”.

Step 1: Sunbursts
Moving forward with the comic style, let’s add some sunburst stripes to create a dramatic background for the logo.
Open the “Sunburst” shapes from the assets. On the Custom Shape tool, choose your favorite sunburst shape an draw it over the red gradient layer. Place the shape to near to the left border of the 960 template (show the Guides to see the bounds). Apply to the “Sunburst” layer a Radial Gradient Layer Mask (white in the center and black in the outside). Change the Layer Opacity to 50%. Optional: using an irregular Brush, paint with Black over the Layer Mask to create a more grunge merge between the sunburst and the background.

Step 1: Halftone
In order to enforce the comic style, we will add some Halftone points over the header background. Create a new layer above the “Sunburst” layer, and render some Black and White Clouds in there (Filter > Render > Clouds). Then go to Filter > Pixelate > Color Halftone. Change the “Halftone” layer’s Blending Mode to Multiply and add a Layer Mask > Hide All to it. Then using a big and soft Brush (Color: White and Opacity and Flow to 75%) paint some areas of the layer mask to make visible only a bit of the halftone pattern.

Step 1: The Title
Now you have the header background finished, let’s add the Logo. First draw a reference Guide around 180 px below the top border, the logo shouldn’t be below that guide. Using the “Komika Title” font face from the assets type the title of the site (“Comicastic”) Font Size: 68pt and foreground color: #FFB401. Then Add more text element, like the exclamation sign or the slogan in white (font size 16pt).
Then using the Free Transform Tool rotate the text a few degrees left to make it look less formal. Try to get something like the image below, but remember not to place any element below the guide. Finally put all these layers into a folder labeled “Logo”.

Step 7: Logo Layer Styles
Add a Layer Style > Gradient Overlay (#EA9403 – #FFC501) a Stroke (Size:1px, Inside, #FCB600) and a Drop Shadow (Black, 50% Opacity, Distance and Size: 2px) to the “logo” layer. Use a similar Style to the slogan, but change the colors of the Gradient Overlay to #EDEDED - #FFFFFF and the Stroke to White (#FFFFFF). If you place the exclamation sign to the logo, you can try converting it into a shape (Layer > Type > Convert to shape) and distorting it a bit as shows the bottom of the image below.

Featured Posts Banner
Step 8: Background
Use the Rounded Rectangle Tool (Radius 5px) to draw a wide rectangle all across the banner below the logo as shows the image below, the height if the rectangle is up to you, I’m setting 250px. Then apply a Gradient Overlay (Colors: #DA7E00 – #F0AD00, Angle: 90°) and Stroke (Color: #F2AA00, Size: 1px, Position: Inside).Layer Styles to it.

Step 9: Changing the Top Banner
Using the Direct Selection Tool (A) over our brand new rounded rectangle, grab the points of the top left corner and move them to the right (you can use the cursors for an accurate move). Then move the bottom right points a few pixels left.

Step 10: Adding the sliding picture container
Now, using the Rectangle Tool draw a gray rectangle inside the yellow banner (630px x 250px aprox.), you can leave the bottom part of the gray rectangle a few pixels away to the bottom of the yellow banner to create an out-of-bounds effect. Add a Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) and a Drop Shadow (Color: #000000, Opacity:50%, Distance: 0px, Spread: 0px, Size: 5px) and try to place the rectangle as shows the image below. Finally, put both layers (Gray and Yellow rectangles) into a folder named ”Top Banner”.

Step 11: Main Navigation
Using the font family “Komika Text” type the pages navigation at the top right of the top banner, set the font Size to 18px and color: #FFFFFF. Put it on a folder named “Pages Navigation”, be sure this folder is behind the “Top Banner”. Then using the Rounded Rectangle Tool (Radius: 3px, Color: #EFA800), draw a rectangle just behind the first word of the navigation, name the layer “Selected Tab”. Next using the Direct Selection Tool (A) move the points of the bottom left as shows the image below. Next apply a Gradient Overlay to the “Selected Tab” layer (Colors: #F0A900 – #FEBF00, Angle: 90°). If you want to, you can add a very subtle Drop Shadow (Color: #000000, Opacity: 25%) to the navigation text.

Step 12: Add the banner images
To show an actual sample, paste any image over the banner. If the image is bigger that the rectangle you can use a Clipping Mask, for this paste the image above the gray rectangle, then Option / Alt – Click between the two layers, this will clip the image inside the rectangle no cropping needed.

Step 13: Banner Controls
Select the Custom Shape Tool and chose one of the arrows, and draw a couple one next to the other, both pointing left. Then Apply to both a Gradient Overlay (#6D0004 – #980000) and a Stroke (Size: 1px, Position: Inside, Color: #B20002). Put both arrows into a folder named “Prev” and using the Free Transform Controls and holding the Command / Ctrl key, distort the arrows a little bit. Then duplicate the folder and rename it to “Next”, move it to the right of the banner and go to Edit > Transform > Flip Horizontal to change its direction. Finally put both folders “Next” and “Prev” into a new folder named “Controls”.

Step 14: Controls Hover
Now duplicate the “Next” and “Prev” folders and apply a different layer style to the arrows in order to create a hover effect for each one. I’m Copying the Layer Style from the exclamation sing of the title.

Step 15: Halftone details
With the same process of Step 5, create a Halftone Layer above the yellow banner. With the “Halftone” layer selected do Command / Ctrl – Click over the yellow banner, then hit Command / Ctrl + Shift + I to invert the selection, then delete the exceeding. Change “Halftone” layer’s Blending Mode to Overlay and Opacity to 25%. Finally add a Layer Mask > Hide All and using a big soft White Brush, paint over some areas on the layer mask to make visible only a few portions of the pattern.

Step 16: Featured Article Talking Bubble
Now is time to add a field to put the featured post’s content. For this, using the Custom Shape Tool look for the Rounded Cornered and Rectangular talking bubble. Draw it over the “Featured Image” Banner and place it on the right as shows the image below. Before designing any of this features you need to do some research if it’s possible to achieve this kind of effect, even if you don’t know how to code, you can look for some existing libraries of Ajax (JQuery / MooTools) and see what is already done and working, and then adapt your design to an existing library.
Then, using the Direct Selection Tool (A) distort the shape of the bubble a little bit. Finally apply a Drop Shadow (Color: #000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).

Step 17: Featured Post Text
It’s time to add the title and a brief to our featured post. For the title use “Komika Title”, 18pt. #680001. For the Body text, use “Komika Text Tight”, Size: 16pt, Color: #1B1B1B. Place the text layers right aligned as shown on the image below.

Step 18: Comments Box and Post Meta
Now, add another bubble, but smaller this time, use this color as foreground: #9C0001 and add a Stroke layer style (Color: #D00000, Size: 1px, Position: Inside), just as shows the image below, then add the comments number with “Komika Title” font face, Color: #FFFFFF and Size: 24pt. And the word “Comments” with “Komika Title”, Size: 12pt, Color: #FFB301.
Finally add a small Meta (information about the post) below the post brief with “Tahoma” font, Size: 10pt, Color: #1B1B1B. If there’s no enough space to put the Meta text, you can use the Direct Selection Tool to increase the height of the featured post bubble box a little bit.
Tip: Do not ever transform a Vector Rounded Corner element using the Free Transform Tool in Photoshop, this will distort the corner, select the points you want to move using the Direct Selection Tool and then displace them.

Step 19: Featured Post Title’s background
Duplicate the featured post background bubble, hide the drop shadow, change the fill color to yellow (#FFC001) and rasterize it. Then, using the Rectangular Marquee Selection Tool, select all the yellow bubble below the title line, then Delete the selection. Next, add a line of border, with the “Bubble Title” layer selected, Command / Ctrl – Click over the “Bubble Background” Vector mask. Then Go to Edit > Modify > Contract and set the value to 1px. Finally, hit Command / Ctrl + Shift + I to invert the selection and delete it.
This is a good time to set everything related to the top banner organized into folders and add more detail if you want to, I’m adding a yellow line between the Post brief and the Meta.

Main Content
Step 20: Content Background
Now let’s move forward with the main content background, create a Folder named “Page Content” and draw a white (#FFFFFF) Rounded Corner Rectangle (5 px radius) several pixels height (If the original canvas size becomes too small at this time you can increase its size, just ensure to keep the top border as is).

Step 21: Post Image
It’s time to start adding content to the page, as default on blogs we will design a list of the latest posts.
Draw two squares (3 columns width aprox.) and place them as shows the image below. Doing the same process than step 12 add some images over the squares using them as Clipping Masks. Finally select the square and add a Stroke Layer Style to it (Color: #FFB801, Size: 1px, Position: Inside).
We will work over one of this images adding the content around it, and then duplicate it as many times as post want to show on the homepage.

Step 22: Add posts’ Titles and Categories.
Draw two wide rectangles, one yellow (#F2AA00) and another White with yellow border below (#FFB401). Over the yellow stripe, type the title of the post using “Komika Title”, Color: #670003, Size: 18pt. And on the white stripe, type the Categories names using “Komika Text Tight” Size: 13pt, Colors #212121 for links and #670003 when mouse over.

Step 23: Post brief and Meta
Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using “Komika Text Tight” Size: 14pt, Color: #FFFFFF, a sample Meta text using “Tahoma” 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

Step 24: Finishing the main content
To finish this part add a Comments bubble, basically repeating the process of Step 18. Then put everything on folders, I’m naming the post folder “A post”. Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

Step 25: Page Content Corner
To increase the “comic book” style, we will add a simple page curl at the bottom right of the white background.
First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a “reflex” of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named “Page Curl”. Keep it handy because we are using it later.

Step 26: Footer Background
We are almost done, first create a folder named “Footer” and ensure is below the “Page Content” folder, inside it draw a red (#9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

Step 27: Background sunbursts
Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

Step 28: Footer content background
We will add common elements of a blog such Categories and Archive on the footer.
Now, let’s add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

Step 29: Footer content background – Curl
Select the first rectangle, (you can delete the others at this point). Then duplicate the “Page Curl” folder and place it inside the “Footer” folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

Step 30: Categories
Now, add the title of the section, in this case “Categories” using “Komika Title”, Size: 14px Color: #F2AA00. Use guides to delimit the title baseline, keep it at least 20 px below the end of the page content background. Then add some rows as sample categories, using “Komika Text Tight”, Size: 16px, Color: #FFFFFF, and Red (#EC000A) as hover effect. As an additional detail for the hover effect, add a little yellow (#FFB301) arrow using the Custom Shape Tool. Put all the layers into a folder named “Footer Element”.

Step 31: Duplicate the footer section
Duplicate the “Footer element” folder and move it to the right, change the words to depict “Archives” this time.
Then duplicate the folder again but this time expand the translucent background to make it twice wider, on top, type the titles for “Popular Posts”, “Latest Posts” and “Recent Comments”, use yellow for the first one and gray for the other two. As you guess, this will have a similar functionality than a tabbed pane. Then add a little yellow triangle to mark the selected tab.

Step 32: Tabbed pane content
Since this part will have mostly lists of posts, lets add them, basically is a combination of “Komika Title” and “Komika Text Tight” with different colors (See the screenshot below). The first row will be a sample of the selected (hover) item, on this, add a black (#000000) rounded rectangle behind the text and add a Horizontal Gradient (Black to White) Layer Mask.
Finally, add a little Pager at the bottom of this section.

Step 33: Search Bar
It’s time to add some details to finish up our graphic. Let’s start with the search bar. Create a folder named “Search Bar” on top of everything, create a Rounded Rectangle (3px Radius, Color: #000000 with a Stroke Effect Size: 1px, Position: Inside, Color: #7C0000) as the search input, and a small rectangle for the search button; Copy the Layer Style of the selected item on the main navigation and paste it to the search button. For the actual button, type the word “Go!” over it with White, and apply the same Drop Shadow than the main navigation text (recycling layer styles is a great time saver). On the Search input, type the Word “Looking for something” using “Komika Text Tight” Color: #F9A600.
Then add a Rectangle behind all the layers inside “Search Bar”, fill it with a dark red #380001 (Fill: 50%) and apply a Stroke using this Color: #890101. Convert it to a Smart Object and apply a Layer Mask > Hide All to it, fill the mask with a Reflected Black – White Gradient to create the effect show at the bottom of the image below.

Step 34: Social Media Icons
Repeat the process of the search bar background but this time using a less height bar and with a sightly different Stroke color (#860001). Then type the word “Follow us” using “Komika title” and paste all the icons you want to add, you can use the mini icons from the assets. Don’t forget to keep your layers organized under folders.

Step 35: Footer navigation and copyright information
Finishing today’s work, let’s add the Footer navigation. Delimit the section with a white Line, masked with a reflected black – white gradient. Type the navigation links using Arial, Size 10px, Color: #515151 and highlight a hover effect with yellow: #F2AA00. Then add the copyright text Right aligned.

Step 36: This is it!
Finally double check all the layers are on its respective folder.

Conclusion
We finished the graphic part of the process, now it’s time to jump over NetTuts+ to see how to slice this and turn it to HTML+CSS, are you ready?
.

Webdesigntuts+

pushhere.com
admin — Thu, 10 Mar 2011 05:59:00 +0000

http://www.pushhere.com/

paulbredenberg.com
admin — Tue, 01 Mar 2011 05:36:53 +0000

http://paulbredenberg.com/

swwweet.com
admin — Mon, 24 Jan 2011 06:03:00 +0000

http://swwweet.com/
Swwweet is a small web design studio based in Barcelona, Spain. We are a small web design studio based in Barcelona, Spain. Our goal is to make your users happy with our beautiful, usable interfaces and our handcrafted semantic code. Our secret? We care about your business as much as you do.

iamjonas.se
admin — Fri, 17 Dec 2010 09:50:28 +0000

http://iamjonas.se/#all
Personal portfolio of Jonas Persson, front-end developer and designer.

pelletized.com
admin — Mon, 13 Dec 2010 05:46:11 +0000

http://www.pelletized.com/
Personal webspace and resume of Ed Wheeler, a Web/Graphic Designer and XHTML/CSS Developer.

otadesigns.com
admin — Thu, 09 Dec 2010 06:07:39 +0000

http://www.otadesigns.com/
I am Chris Ota, a web and interface designer. I specialize in Hawaii web design on the island of Oahu. Hand coded HTML with the latest web standards, I strive to also create clean and intelligent designs.

fedosejev.lt/beta
admin — Thu, 09 Dec 2010 05:59:49 +0000

http://www.fedosejev.lt/beta/index.html
Tomas Fedosejev online portfolio and blog

brokedesign.com
admin — Mon, 06 Dec 2010 06:46:06 +0000

http://www.brokedesign.com/
At Brokedesign our goal is to create a different and unique point of view to solve a given problem. Provide a solid base of answers, goals and ideas that will allow you to stand tall among your peers yet keep you on the edge of something new.

sitebuilder24.hu
admin — Mon, 29 Nov 2010 07:58:36 +0000

http://www.sitebuilder24.hu/
100 percent error-free PSD To XHTML coding for agencies and freelancers within 8 hours if need be.

astereostudio.com
Amit Kumar — Wed, 24 Nov 2010 07:00:00 +0000

http://www.astereostudio.com/
The personal portfolio of Andrew Clemente, a Rhode Island based freelance web designer and developer. Astereo brings designs and projects to life.

felcman.cz
Amit Kumar — Tue, 23 Nov 2010 07:56:44 +0000

http://felcman.cz/
Martin Felcman – front-end web & social media developer, manager, konzultant.

sum-tech.co.jp
Amit Kumar — Mon, 22 Nov 2010 08:11:57 +0000

http://www.sum-tech.co.jp/audio/

Sifiso – Free HTML and PSD template
admin — Mon, 16 Aug 2010 14:11:52 +0000

This time around I’m giving away an HTML template with the Photoshop files for “Sifiso”. Sifiso is a one page “portfolio-like” template which you can use for your personal site. It features bold colors, transparent elements as well as hard to miss extra large icons. Sifiso is ideal for web designers, illustrators and photographers; You can use Sifiso as a final product for your own site, or as a good starting point for your clients.
View The Demo!
You can download Sifiso’s source code from here and PSD files from this link.
Features
The one pager Sifiso has all the right stuff for a strong personal portfolio:
a catchy introduction area – a sexy summary of what you do. You have to edit the text in the PSD to change this section
a testimonials section - sport what your clients say about you. Simply edit the text inside the p tags in the HTML
a spot for quotes - maybe a couple of words from famous people in your industry, again – open the PSD to edit this area
showcase area – screenshots of your best stuff, add your own pictures and edit the HTML.
finally, a contact form – how else will they get a hold of you? This will have to be done in a server side language of your choice

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).

View The Demo!
You can download Sifiso’s source code from here and PSD files from this link.
Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.
Read More Articles from Fearlessflyer
Web Design Company India
www.think360studio.com

cssWOW Showcase | Css Gallery | Css Awards | Design Inspiration Tutorials » html

www.laconfection.fr

brookspumfreyresearch.co.uk

html5master.com

Say Hello to the HTML Email Boilerplate

1: Setting the DOCTYPE

2: Working With Images

3: Tables, Tables, and More Tables

4: Client Specific Fixes

5: Mobile

6: Working with the EBP: When and How to Bring Styles Inline

7: A Few Honorable Mentions

8: The State of Email

Conclusion

Many Thanks

Resources

paulaborowska.com

htmlangels.com

hotmeteor.com

tejpotter.com

Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 1)

Before Getting Started

Step 1: Setting Up the Document

Step 2: Header Background

Step 1: Add a Texture to theBackground

Step 1: Sunbursts

Step 1: Halftone

Step 1: The Title

Step 7: Logo Layer Styles

Featured Posts Banner

Step 8: Background

Step 9: Changing the Top Banner

Step 10: Adding the sliding picture container

Step 11: Main Navigation

Step 12: Add the banner images

Step 13: Banner Controls

Step 14: Controls Hover

Step 15: Halftone details

Step 16: Featured Article Talking Bubble

Step 17: Featured Post Text

Step 18: Comments Box and Post Meta

Step 19: Featured Post Title’s background

Main Content

Step 20: Content Background

Step 21: Post Image

Step 22: Add posts’ Titles and Categories.

Step 23: Post brief and Meta

Step 24: Finishing the main content

Step 25: Page Content Corner

Step 26: Footer Background

Step 27: Background sunbursts

Step 28: Footer content background

Step 29: Footer content background – Curl

Step 30: Categories

Step 31: Duplicate the footer section

Step 32: Tabbed pane content

Step 33: Search Bar

Step 34: Social Media Icons

Step 35: Footer navigation and copyright information

Step 36: This is it!

Conclusion

pushhere.com

paulbredenberg.com

swwweet.com

iamjonas.se

pelletized.com

otadesigns.com

fedosejev.lt/beta

brokedesign.com

sitebuilder24.hu

astereostudio.com

felcman.cz

sum-tech.co.jp

Sifiso – Free HTML and PSD template

Features

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

How to Edit

Conclusion

Web Design Company India

LeeGustin.com