Building the Perfect Newsletter

How many times have you found yourself subscribing to the next big web 2.0 applications’ launch mailing list, and then never getting a single email? Or joining a weekly newsletter that is completely disorganized and has more information than a month worth of site content? Just like websites, newsletters can be essential and extremely useful when used the right way, or damaging if their purpose goes to waste. Which direction are you going to head in with yours?

A Newsletter

news‧let‧ter – a written report, usually issued periodically, prepared by or for a group or institution, as a business firm, charitable organization, or government agency, to present information to employees, contributors, stockholders, or the like, and often to the press and public.

First, it’s important to understand what exactly a newsletter is. A dictionary.com search reveals that the meaning behind a newsletter is a written report published for the publics convenience.

And yes, breaking the word down into two parts would reveal two individual words: news and letter.

While all this seems like a pointless English lesson, it seems like many people have forgotten that a newsletter is intended to contain news. Because of this, other names get thrown around such as “mailing list”. No matter what you happen to be calling the damn thing, the bulk of the content is and should be in some way – news. Whether it’s straight from site content, announcements and updates, or information on a launch, it’s all still news to the reader. Let’s try not to forget that.


Getting a visitor to pay attention to a newsletter requires a bit of design and organizational skills next to the ability to include something worthy of reading. The days of plain text email are dying away, with most email providers allowing html based emails. HTML allows you to do everything you could do with a regular site, including structuring an emails fonts, colors, and layout with css and remotely hosted images.

Don’t sit there saying “what makes a good newsletter design?”, because the question can be both answered and solved simply by looking around. Emails just appear in a persons inbox – they are no different than sites.

A good place to start is by mimicking your own site design in a newsletter design. This doesn’t mean if your site is split across 9 columns and two thousand pixels wide that your newsletter should be the same, but pull the colors, logos, link styling, and fonts from your actual site layout to let the reader get a feeling like they’re at the site themselves without leaving their inbox.

DL: Version 1 Newsletter

When Devlounge first launched, we had our own newsletter which was styled to match the design at the time. Split into two columns, the left featured a few of the latest post excerpts and the right contained a feedburner subscribe now link as well as links to Astereo and 9rules. It wasn’t incredibly advanced, but it matched the site well enough that I thought its purpose was served.

The list of where to get quality newsletter inspiration from goes on and on. I like to grab some inspiration from the Campaign Monitor Blog, which always features some excellent examples of in use newsletter designs. Take a look at this gem I found on the blog while I was writing this. Very well organized, and very well designed.

Vairen Newsletter

Depending on the type of newsletter, designs can range from simple to highly advanced. Hollister usually sends around extremely simple newsletter showcasing a new product or two for men and women. Nothing over the top, but effective at the same time.

HCO Newsletter Preview

Next we’ll get into creating and publishing your newsletter and getting subscribers and keeping them.



Killing the Pattern Maker

Recently I was hit with a comment I found hard to swallow: “All your designs look the same”. I re-read the comment a few times while I thought of a witty response, before closing the browser and telling myself to forget about it, and then deciding it’d make for one hell of a hot topic issue to bring up in an article. So here it is, the question designers have to ask themselves over and over again when creating new pieces – “Is this too similar to…”

Who is the pattern maker?

First you have to realize who the “pattern maker” is. The pattern maker is ourselves. Each one of us does things a certain way, and one we begin to do things one way, we tend to stick too it if it works and start fresh if it doesn’t. This is evident in design (finding one style or niche and sticking with it), music (a band tries to reinvent itself after a flopping album), sports (the ones your surrounded by as a kid tend to be the ones you pick up on as you grow), and etc, etc. “Patterns” literally control our lives, and many times it’s hard to break away from them.

So patterns + design equals?

As a designer, many times you fall into “ruts” or a consistent way of making sites. A lot of times, this happens after one design really gets high praise from the design community. Because it turns out well, you tend to pull and re-pull elements from that one design and re-use them in multiple instances and all different designs.

It’s not just a select few people who reuse specific elements on multiple designs either. Many times, those who browse the web frequently can spot designs and the people behind them without and knowing, simply by picking up similar tendencies that a design may show. Even such small things as how gradients are used, fonts, colors, etc can hint at who designed a specific site. For example, when I first saw the Flock site design, without knowing Brian Veloso designed it, I instantly picked up that it was done in “his style”. Does that mean he doesn’t show variety in his designs? Absolutely not. It just meant that I could pick out minor things here and there that I personally could attribute to him.

Stop comparing

So how do we stop ourselves from reusing some of those design elements over and over again? Many times, it’s just too hard to stop. Like trained dogs, some things are just stuck with us. Every time I bust open photoshop and put together a design, any time it has two columns are start saying to myself “It looks to similar to Devlounge”, and I end up forming a design with the same type of structure; logo, header, nav, two columns, footer. But that’s how I’ve been designing for ages; even before I knew anything about web standards and all the new “trends” of today, I was always setting sites up the same way since that days of Homestead WYSIWYG site builders.

And sometimes, even when you want to try to break out of that pattern, you get the clients who want you to design their project because it was your style that got them interested in the first place. I’d really love to be able to put together grunge style sites for bands again, but every requests I’ve got recently is a request for a design with the same “style” as Devlounge. Your hands get tied behind your back, and your forced to reuse some things here and there to give them that effect.

Let the pattern maker live, but let him rest too

The best bet is to limit what design elements you reuse and try to find available work that will allow you the space to experiment and try something new. I myself have to face the fact that anytime I put together a two column layout I’m going to see some reference to Devlounge, even it’s it’s the slightest bit, because I look at Devlounge every day and the setup is now burned in my head. But there’s millions of two column designs out there, so why should I compare myself to myself all the design. You’re going to find yourself adapting to a certain style and reusing it, but don’t let it phase you too much. If you designs are different, don’t let an odd comment bring you down.


Homepage News

Be Thankful

Don’t stop reading too soon, because there’s a big announcement at the end of this site update, and I don’t want you missing it. First, let’s start at the beginning. The Devlounge team would like to wish all our readers celebrating Thanksgiving a happy one. When you’re done eating, stop by and enjoy a nice design related article for a snack.

Next, you’ll notice the homepage has grown a little bit, with the addition of a job board and exclusives section. The exclusive section will be finished in the next day (a little busy today), but the new job board is up and ready to go. The job board is now powered by Krop, a newly launched service which provides a central job board that some of the top companies used to hire employees. Krop jobs are not only posted here, but on the krop homepage, Newstoday, Lounge72, and Uxmag (just to name a few). Talk about getting the word out. While the service is not free, you can be sure you’ll be receiving millions of times more exposure than posting on one site alone. Give the new job board a try by using the “Post Job” on the homepage. We’ll also be updating the extras page this weekend to accommodate the new job board.

Krop - Homepage Screenshot

But, we’re still about giving our visitors options, so the free job board will remain, it will just be refined and limited to Devlounge only exposure. Two options can only make it better for you.

Now, onto the big announcement. They’re calling this the ultimate designer / development gift basket. We proudly present you with a brand new contest right in time for the holidays. Gain exposure, gain some music, and a whole lot more. Find out just what in the world we’re talking about by hitting up the official Very Merry Mass Promotion Holiday Giveaway page.



The benefits of being unique

Would-be thieves of this era would probably benefit from branding the relatively new adage “Hell hath no fury like a designer scorned” on their monitors. The web might be for anyone, but that doesn’t mean the content of the web is suddenly free from copyright — and the watchful gaze of said content’s creator — and everything is free for the taking. But that’s the trouble with having something impressive and innovative – other people want to be just like you! It works in real life without a hitch (I’m doubting Graceland ever sues Elvis impersonators) — but the Web is the Wild West of real life. And designers on the web definitely have guns to go around.

Stage #1: Denial (Of course!)

As referenced in Airbag Industry’s chronicle of Falkner Winery’s design theft, of COURSE designs are public property. Let’s say, if I wanted a new look for my site, I have permission to take Google’s logo and colors, correct? If you say yes, go hide now. Theft is theft. In real life, it’s punishable by jail time and fines. On the Internet, people get incensed and then go about documenting your folly and getting suitable recognition from it. This is in addition to people laughing at you, naturally, and being made fun of — Internet style — is about the same as having a whale fall on you. Love hurts.

Let’s play a game of fill in the blank. If a design is obviously not your own, you __________? The idea would be to e-mail the creator and ask for permission — which may or may not be given, seeing as people don’t really share babies (Oh, Billy’s your son? He’s mine too! How amazing!) or indulge that thought. The second, and much better option, would be to create your own designs. Generally, anything you create on your own not only has more personal value but also brings more to the “Table”. Besides that, it’s easy. I’ve seen things made in Paint and the oldest possible version of Frontpage (with rocks and twigs and little flies for cursors, no doubt) that can be genuinely appealing because — and yes, this is cheesy — it’s unique. It’s new. It’s innovative. It’s fresh. And most of all, it’s all yours.

Stage #2: Not me! HIM!

The prevailing theory on the Internet, among clients, is that if anything happens with the website, it’s automatically the designer’s fault. Using the same sad story of Falkner Wineries, one has to understand that the client didn’t necessarily put a stop to the theft. And it was a gradual process, I’m sure, in which the client probably saw an image of the finished design several times. We have to assume that the client that doesn’t notice such blatant thievery is some primordial species of shellfish, or understands the process and wants it to continue. And then, the client transfers the weight of the warfare to the designer when they are equally responsible. The designer eventually did make some sort of amends by … turning the logo about 30 degrees and changing a few colors. The design is changed completely now, right? Everyone can go home happy! The fact that this was considered a solution by the designer is somewhat pathetic.

If you, as a designer, are ever in a position where your client wants a design that’s “just like this thing” or “SUPER-DUPER-MIRROR-CLONE-CONTRAPTION of this!”, just say no. As a designer, you have to be able to exercise your own creativity; else, you’re not exactly a designer, are you? You’re just a monkey with a glue stick. It could be a logo, a website, a quotation, a layout; it’s still theft. While it looks bad on a small level, it looks even more ridiculous on a larger level. Don’t put your client or yourself in jeopardy of the wrath of the INTARWEBZ because revenge is swift, and the effects are lasting. So make a stand. Be inspired, but don’t hit Ctrl-C. Learn from other designs, but don’t “borrow” them. In a day and age where seven year olds can publish content on the Internet, don’t make yourself look bad by taking what’s already there. It’s too easy to steal a design; it’s also too easy to love a design. There shouldn’t be any insecurity about sharing content on the Web. The line starts here, gentlemen. No cuts.

Stage #3: Mine has a copyright logo on it!

The idea of copyright is a bit faulty. Anything that comes into existence has its own copyright the instant it is created. Yes, anything. Doodles, writing, sketches, any demonstrations of how humans actually have brains, and are not filled with Jell-O. Copyright feeds off of chronology. If someone created something first, they can have said creation under their name. Let’s not say copyrights are meaningless; it’s just a weak argument if someone says that simply placing the copyright logo on something means it is automatically protected. Under that assumption, these Post-It Notes I have across my computer are protected under federal law, so thieves beware!

The problem at this stage is, intellectual content is hard to protect at any stage. Lawsuits for this sort of thing go on all the time. Our generation is placing more emphasis on truth, in literature, design, and everyday life, probably in retaliation to the variety of cover-ups that have taken place on a global level in the past few years. When it comes down to looking good (at someone else’s expense) or looking a bit threadbare on your own, pick the latter. There’s more room for growth in the expanse of one’s own creativity than there is when following the orbit of someone else. Don’t believe me? Try it yourself. Using Google’s branding, try to come up with something new. Now, how many people will confuse your design with Google itself? The answer is a ridiculously large number I’m not even capable of typing without messing up. When you copy a design, you put yourself at risk of being forgotten. Copyright strikes with a vengeance — the content that is up first is the content that wins. Everyone else gets trampled in the dust. So instead of this depressing theft-talk, let’s turn to…

Branding your creativity

Find things that sync with you. Listen to music that suits your creativity and expand that into your designs. Look for colors that inspire you, shapes that bring you to your knees (Cookie Monster silhouettes, anyone?), and inspirations from the windows of the Internet. You see, inspiration doesn’t fall back on copyright. It falls back on what you want and like; an amalgam of what’s cool to you, and eventually, what’s cool for the rest of us. If you have enough pride in your own work to put it on the Internet, like Gary Brolsma, do it. No one is going to judge what’s “worthy” of the Internet or not. After all, it’s all good in the hood.


Design Focus

Friday Focus #7

I’ve been working on site upgrades the last few days, which along with a busy personal Friday, forced me to miss the target day in “Friday Focus”. So, without further delay, here’s Friday (Sat) Focus, with an extra zing for missing a day.

Sites of the Week

I didn’t see too much originality hitting the css gallery scene this week. Rather than showcase designs similar to others we’ve already shown, we’ll wait for next week and hope there’s some more creme to add to the crop.

Digg Weekly

DesignCSS based forms
From Smashingmagazine comes a great list of many of the various types of web forms composed using mostly css. This is a great resource for anyone to have.

ProgrammingCSS based Dropshadows (No Images)
A short tutorial for using css (without any images at all) for creating drop shadows for block elements. Could come in handy as an image alternative.

Site Updates

So those site update we were talking about? First, the nav bar has been fixed to work in all browsers and not be different sizes. The search bar has been removed, but can be brought up from anywhere simply by hitting search which will toggle it on or off. Our job board is in the process of being improved as well. A lot of new stuff is coming over the next week, so expect a lot more in next Friday’s edition of FF.



Google, MS, and Yahoo Sitemaps

From Techcrunch we have learned that Microsoft, Yahoo, and Google will sideline their search engine war games for a universal sitemap protocol. The protocol will allow you to get your sitemap indexed on all three search engines without submitting to each one. For example, Google Sitemap users will soon have their sitemaps indexed on both Microsoft and Yahoo Search. The protocol is based on sitemaps.org and is xml based.

You can read the entire article at Techcrunch.



Fun Javascript Snippet

My friend sent me an interesting code snipplet that rearranges the images on a given page. If you’d like to try it out, click this link: Re-Arrange Images Code Snipplet.

Below is the code:
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22);
DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position=’absolute ‘; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22;

You can actually browse to any site that is heavy in images and paste the above code into the address bar after the page has finished loading. I hope you find this as entertaining as I did.



Mintpages Goes Final

The community project that Devlounge co-creator Prash started a few months back has finally gone final – Mintpages. We’ve been operating under the default vBulletin skin for months, but we’ve now upgraded to a super sleek skin, designed by the extremely talented Nicolò Volpato.

Mintpages - New Skin

Mintpages is a private community that requires you fill out an application to determine membership status prior to access.


Homepage News

Calling All Writers

Hello Devlounge community. I’m writing this post not as another site news update, not to annoy your feed reader with a cry for help, but a genuine and heartfelt need for additional writers. Devlounge has grown tremendously, and as we get closer to that 100,000 unique visitor mark, providing our visitors with fresh weekly content is a priority to us.

It hit me today while I was putting together the new authors index (finally) that we really have no authors. Ronalfy and myself anchor just about all of the posts, which makes it hard to service an entire design community with different content. There’s only so much you can write about in a given amount of time without recovering a topic you talked about just a few articles back. Prash has been busy getting some of his own projects off the ground to participate as well.

We are in need of a staff of 10 quality writers, who care about their readers and will put out new and original pieces as often as they can, to help ensure Devlounge remains a top contender in the design and development community. We’d like to hear from you if you are interested, but please seriously consider the amount of dedication you’ll be able to give to Devlounge before getting in touch with us. We’ve gone through many contributors who haven’t done much contributing, either because they forgot about the site or they have been just too busy.

If you are interested in joining the Devlounge team, please visit the contact page and drop me a line as soon as possible. Providing references to a current blog / site or things you have written will greatly help, because we like to see that you know what you’re talking about.

With your help we will continue to bring quality content to our visitors.

Thanks for reading.
Team DL


Design Focus

Friday Focus #6

This week our “Sites of the Week” includes a few reboots we missed first time around, as well as an entirely new site. (Not in reboot.)

Site of the Week + Missed Reboots

The Choppr

I know a lot of people who run PSD slicing and coding services, but when I ran across this design I couldn’t help but fall in love. One of my favorite slicing sites I’ve seen in a while.

Snook.ca Reboot

45Royale - Reboot

Last week we missed both Snook and the 45royale reboots. This was because I must have been sleeping, and totally forgot about some of the nicest reboots of November 1st. So there they are, better late then never.

Digg Weekly

Design: How to Design that Web 2.0 Site
If you’re truly interested in mastering that “Web 2.0” look so many seem to strive for (when the term is really meaningless), this guide explains what all web 2 sites have in common. Simplicity.

Programming: 12 Year Old Develops Browser
A 12 year old codes his own browser. Not much else was very popular on the Digg radar in programming this week, but this is still an interested read showing the talent there is in some of today’s youth.

Weekly Spotlight

From the same person behind the recently launched Launchfeed comes a humorous site to give people what they deserve. Totally Deserved is a fun site allowing you to publicly gives friends what they deserve. Designed by I Create Things.


Homepage News

Put Us in Your Browser

Firefox 2 and IE7 fans rejoice. You can now search Devlounge no matter what page your on, even if you’re not on the site at all. Using the Opensearch capabilities of a FF 2 and IE7, you can add Devlounge as a search option right to the browser.

To do so, just select the drop down in the search bar of FF2 or IE 7, and you should see a “Add Devlounge” link. This should work from any page here on DL. Add it today!

Devlounge - Add DL to your search



ReviewMe Review

Review Me is a new service from the people behind Text-Link-Ads. The service allows bloggers to write reviews and be paid for it. It also allows those wishing to get their site or service reviewed the opportunity to seek out sites they want to review them. So just how well does this new service stack up against others, and is there a practical use for it? We discuss.

When I checked my email today, I had an interesting message from the guys of Text-Link-Ads. The email was brief, but it basically told me that Devlounge was pre-approved as a blog at Review Me. I immediately headed to the site to see what Review Me was all about, where I was presented with a pastel colored site with big fonts and big objectives.

The Homepage & Service

The homepage was rather blank, with not a lot describing the purpose of Review Me. This is because Review Me is separated into two different categories – Advertisers (those wanting to get their product / service reviewed) and bloggers (us people doing the writing). Upon picking one of the categories, you are presented with a little more information about the general purpose of Review Me.

Review Me - Logo

Of course, I found myself falling under the blogging category, so I gave it a click and came upon four simple steps to getting started:

  • Submit your site for inclusion into our ReviewMe publisher network. Begin by creating a free account using the link below.
  • If approved, your site will enter our ReviewMe marketplace and clients will purchase reviews from you.
  • You decide to accept the review or not.
  • You will be paid $20.00 to $200.00 for each completed review that you post on your site.

What jumped at me was the tantalizing $200 max pay out. $200 for one review? That had me interested.


The signup process was simple and quick, like it should be. Because I was pre-approved, Devlounge was instantly accepted, so I can’t speak for the turnaround time of the site acceptance period. If it is similar to TLA, the process should not take too long.

Blogger Control Panel

Once logged in, you are presented with a a list of pending reviews in which you have to decide to accept or deny. You have the power to approve or let loose any review, which helps keep things relevant to your site, which is a good thing, unless you’re simply money-hungry and don’t care about the relevance of a review to your site.

Review Me - Account View

Due to a Reviewme launch promotion, I already had a review sitting in the queue for me to either accept or deny, and what do you know, it happened to be about Reviewme. I figured why not, and accepted it to give the service a try.

Once you activate a review, you receive 48 hours to publish the review. You then have to return to the site and submit the review URL.

Your Sites and Payouts

Reviewme allows a max of 6 sites submitted under one account. My viewing the “Manage My Sites” tab, you can see what Reviewme is currently charging for reviews on each of your sites. Depending on different variables, including traffic, technorati ranking, etc, prices are determine and will fluctuate depending on the growth or decline of a site.

Review Me - Managing My Sites

My initial rate was shown was $100 per review, then the payout price per review – $50. There it was, the kicker that Reviewme did not mention on the homepage, F.A.Q’s, or anywhere else (correct me if I’m wrong, but I did not see it). While I knew there would be a percentage going to RM for hooking you up with advertisers, I wasn’t sure what percentage that would be. Fifty percentage is rather steep, and it distorts the true amount of money you can make per review. (Is it really a max of $100 per review after 50% loss, or $200 if Review Me sells your review post for $400? I’m guessing option one.)

Good or Bad

Review Me also does not guarantee a good review for advertisers. This to me is a double edged sword. As an author, I don’t want to be forced into writing reviews full of lies simply to earn income (which I would refuse to do because I’m about integrity, not pocket cash). But at the same time, do advertisers wish to shove out money to some random site, with the chance their review could hurt them more than it could help? This makes it important for authors to have products, whether it be sites, services, new web applications, etc, in top form before searching for sites to review them. It’s also critical they go with respectable, knowledgeable sites that put together clear and understandable reviews. Going with “Joe’s Big Web Review Site” probably wouldn’t be your best bet, because a bad review would do nothing good for your product or service.

The Friendly Factor

There’s also that little thing I call the “Friendly Factor”. If many large sites begin only writing reviews on a pay-per-post basis, it could spell the end of straight forward, “I liked it so I’m going to let others know” type of reviews. I review sites and services I see because they interest me, not because I’m getting paid to do it. While I’ll remain a member at Review Me, I won’t simply deny review requests unless I’m getting a some cash for it.

For those of you that have signed up for the service, what are your initial thoughts?