Hongkiat.com: Digging into the Secrets of Pinterest: How (and Why) It Works

Digging into the Secrets of Pinterest: How (and Why) It Works

Posted: 01 May 2012 09:01 AM PDT

It’s not hard for me to say, or prove, that women dominate Pinterest; the hard part is figuring out why. The statistics to show that the realm built from the simple act of Pinning is dominated by the fairer sex are all over the place. But no matter what the numbers show, it’s not really clear why women are attracted to Pinterest like a moth to a flame.

pinterest Digging into the Secrets of Pinterest: How (and Why) It Works

Sure it’s simple, clean and fuss free and it may be just a digital arts and crafts bulletin board piggybacking off a social phenomenon but while others have good reason to believe that it doesn’t matter which sex dominates the pinning arena, sometimes when you gotta know, you just gotta know.

Getting into Pinterest

The assignment was to dip my toes into the Pinterest pool and test the waters of one of the latest social networks to hit the social media spotlight. The good news is you don’t need an account to view the stuff in Pinterest. But to get your own boards and to start pinning the stuff you like, you need to request for an invite from Pinterest itself or by someone who is already with Pinterest. From the get-go, you get an account to place all your boards, a few suggestions of who to follow, and a "Pin It" button you put on your favourite browser.

this is pin Digging into the Secrets of Pinterest: How (and Why) It Works

Then the pinning begins. Oh, and you don’t even have to be in Pinterest to pin things, which I believe is the beauty and the secret behind the image-hoarding obsession that fuels the pinning passion of millions of Pinners out there. Just use the pinmarklet to pin anything you like seeing on any other site, and it will be showcased on your board. It’s a social media site where you don’t have to stay on your profile page all day long. I find that a very refreshing change.

Pinboards or Virtual Scrapbooks?

As I continued pinning, I realized that there was something familiar with the whole idea behind Pinterest. Something innate, something I have been doing and somehow am redoing. And then it hit me: Pinterest is very much like those magazines you subscribed to when you were a teenager, or maybe even now. You would find Pinterest to exhibit the same type of allure (and more, but we’ll get to that) that you find with topics regularly covered by magazines: wedding gowns, cars, interior décor, parenting, fitness, arts and crafts, gardening, fashion… and the list goes on. And what are the winning qualities of top-selling magazines? The content; more precisely, the images that have to be eye-catching, beautiful, and top-quality to help keep these magazines selling.

pinterest wedding inspiration Digging into the Secrets of Pinterest: How (and Why) It Works
(Image source: Pinterest)

To add on to the theory, together with the shift of print magazines to online subscription models went one of our favourite pastimes – the collection of favourite photos and images from these monthly publications. The snipped pictures would then proceed to fill a fashion tips scrapbook, an album that features our favourite things or when nothing else can do it justice, a spot on the bedroom wall. Admit it, you would plaster your bedroom walls with anything your mom would let you get away with. Some things never go away. They just take another form, like how snipping becomes pinning and scrapbooks became pinboards.

The potential in Pinterest

Pinterest does have its perks, which was what the rest of the Web was interested in from the start. While it has the hallmarks of a social networking site (Likes, Repins and Followers galore), it does boast of a faster pick up in subscribers than its counterparts. More importantly, it drives traffic to sites that bank on visuals to sell its products and its services. Rather than spend time coaxing or coercing people to drop by their site, all the site owners need to do is focus their time and effort into producing highly appealing images that will encourage people to pin the pictures to their boards.

After that, all they to do was wait while the images make their way from one board to the next, penetrating the circles of networks, riding on the most effective marketing channel there is: common interest.

pinterest marketing Digging into the Secrets of Pinterest: How (and Why) It Works

Birds of a feather flock together speaks true of the people who make up the bulk of Pinterest users. If your business caters to moms and teachers, then Pinterest is a dream come true for you. They are already there, all you need to do is to make sure your product images get pinned and shared into their networks. The site also works great for doting parents and/or pet owners, ladies with a passion for style and fashion trends, wannabe and seasoned chefs, mix-and-match hipsters and designers, and luxury item collectors.

not testosterone territory

To answer the question as to why most Pinners are women, it’s not that men aren’t inclined to spend time on Pinterest. It’s just that when they do, like in Manteresting, or Board of Man, the things that turn up pinned are photos of men with smouldering looks or beggar-ish beards, cars, tools, women showing too much skin etc i.e. they bear the marks of the rest of the Internet outside of Pinterest. Why limit yourself to just one social networking site? Besides, take that part out and you get the remainder yet defining pieces of the women-dominated site, Pinterest. Lucky for Pinterest, this takes up about 80% of the site and gives the brand value.

Will Pinterest Stay?

Fine, numbers can rise and fall but there is already a core group communing within the white picket fences of Pinterest, lock and loaded with an extremely large buying power. Modea has a much referred infographic with telling stats: half of all Pinterest users are parents; 68.2% of the total users are women; half of the users fall within the age group of 25 to 44; and a third of the users earn an annual household income of more than 100k.

PinterestUsagebySex Digging into the Secrets of Pinterest: How (and Why) It Works
(Image source: 60secondmarketer)

If I were a retailer and I need to establish an online presence to stay relevant to my potential buyers, or depend on viral marketing to put my product in the market, Pinterest would be my best bet.

Conclusion

It’s a treasure trove for fashion, baking recipes, gardening tips, cosmetics, holiday gifts, endearing snapshots of children, curtain designs and homemade crafts etc – if there is a reason for mothers to join a social networking site, this would be it. I believe we are entering a period when people are tired of being in that weird part of Youtube and finding reality shows that depict the terrible side of life. Having a place that is inspirational, beautiful, fun, and full of potential is a viable alternative many look forward to. Legality issues aside (something every rising social media giant has to deal with sooner or later), if Pinterest can provide that, then by all means, let it flourish and grow.

9 Tricks to Design The Perfect HTML Newsletter

Posted: 26 Apr 2012 01:45 AM PDT

An e-mail newsletter is the perfect way to stay in touch with your clients or followers. Often your company or website will have numerous product updates, or possibly upcoming events you’d like to share. It’s always possible to post new information to your blog or social media streams, but your audience can only go so far to reach you. In this case, e-mail is certainly not dead technology, merely untapped potential.

design perfect newsletter 9 Tricks to Design The Perfect HTML Newsletter

The process of creating and sending out a newsletter is a lot easier than one may think, but to design a custom template and build your own code — this can take a bit longer.

We have compiled some fantastic tips to get you designing high-quality HTML newsletters like never before. Even if you’re a newbie to the subject you’ll surely find some invaluable information to get you started in the e-mail marketing process.

Goals of a Newsletter

Before getting into the design aspects we should clarify your purpose for building a newsletter. Depending on the type of website you run, the information contained in your newsletter may vary dramatically from others, but the core purpose of a newsletter is to deliver convenient updates right to your reader’s Inbox.

Heavy Internet users are likely to check their e-mail more than twice a day. Even those who are constantly busy will take the time to go through their messages at least once a day. This is the perfect time to capture attention even without requiring visits to your site. Even if nobody is clicking through your links, the information is still received, which is great for building a brand name.

Consider some of the topics you would need to offer in your design. Are you including links to signup for your service; possibly blog links, or most recently published articles on your site? The layout of your newsletter will reflect how you wish for your readers to respond, but ultimately you are looking to drum up interest and pass around some interesting tidbits of information to the masses.

1. Utilize Tables in your Layouts

This may seem a bit contradictory towards today’s modern web standards, but e-mails are still archaic in their rendering engines, thus you have to build towards older models. Unfortunately tables are the easiest way to get everything working properly among the various e-mail clients. Depending on your knowledge of building table-based layouts, this might actually come as good news!

You may also wonder why div and other block elements are not such a good idea. Most e-mail clients are built to strip away any extraneous CSS content. This means you won’t be able to use much of anything except for inline CSS (and even full support is shoddy). Clients such as Microsoft Outlook 2007 and Google’s Gmail have very poor support for floated elements and direct positioning.

The best solution would be to nest multiple tables inside each other. Padding and margins are not set to a particular scale between many e-mail clients. This is a reason to stick to using width="value" on all of your table cell elements. These will always display the same width no matter which e-mail client your readers are using, so it’s a lot safer and more consistent to set padding and margins using empty table cells.

2. Fixed-Width Positioning

You have a few options when building the drafts of your newsletter layout, however the best option to follow is to set fixed widths for your containing table. There are many varying monitor resolutions — you won’t be able to please everybody. If you don’t have particular elements with static widths, you could always use width="100%" on your containing table. This will allow your content to fill the entire width of all e-mail clients.

However, for many this method is a little too lax. Constructive newsletters will require a fixed width in most cases, especially if you’ll be using banners and images set to a particular size. I recommend working with 500px – 600px maximum document width. The horizontal screen size of the iPhone and some BlackBerry models are limited to 320px, so even at 500px your e-mail template will be scaled down to fit properly.

Considering that many mobile users choose to view e-mail without HTML anyways, this shouldn’t be a huge problem. Users of desktop and webmail clients will likely experience a similar setup regardless of the Operating System they use. When in doubt create a few template designs and choose the ones you like best!

3. Pixel Units

Unless you’ll be using fluid elements in your newsletter it’s likely that you’ll need to size a few things. Try to keep it in pixels (px) rather than in another type of unit. Percentages can easily get mixed up with the many webmail clients and software windows. With fewer page elements, fluid layouts can come out unscathed, albeit with a few bugs.

But pixels are always a sure thing. Working within the 600px max width limit, you can actually fit a lot of content inside. Exposure is easier if you split your layouts into two or three columns, and always write your sizes in pixels. The only exception may be to font sizes where ems can support your readers better, but em sizing will differ in a similar way percentages would – so for simplicity’s sake, stick to pixel-based alignments.

4. The Possibilities with CSS

It may seem like e-mail design is out to destroy the use of CSS styles. Although there are a lot of unsupported features, CSS is still perfectly acceptable in many cases. Campaign Monitor has a beautiful table of supported CSS properties listed by e-mail client. All will support the basics like font-family and font-style, so you can skip over the <font> tag if you wish.

possibilities with css 9 Tricks to Design The Perfect HTML Newsletter

Be cautious about your font styles as to not push the boundaries too far. If you do feel uncomfortable with inline styles, it’s always possible to use the HTML font tag even though it’s been deprecated. If you’re a CSS designer, you don’t need to quit the system, but any shorthand CSS coding may result in buggy designs. As an example the font: 12px/14px Arial,sans-serif; shorthand can help save a lot of space, but it isn’t fully accepted for e-mail design, even when it’s used with inline styles.

Even your color choices should be written out longhand. Hex colors such as #ccc or #e3f must be written in full as #cccccc or #ee33ff, respectively. If you can build what you need without CSS I would recommend that path, but don’t completely shy away from CSS in e-mail designs because contrary to popular belief it is supported in most cases.

5. Anchor Links Best Practices

You’ll surely want to include some links into your newsletter. These could be outbound links to other pages around the web, or maybe links leading to the most popular pages on your website. Additionally most footers will contain an unsubscribe link for your readers to opt out of the e-mail process, but how should you handle all of these links in your design?

Well it should be noted first that e-mail clients are very finicky with their designs. Many will choose to overwrite your link styles, even with inline CSS. A neat trick is to include both inline color and an additional span tag within the anchor element. If the color and styling of your links are important to the overall design you’ll want to take the extra precaution. I’ve added a small code example below:

<a href="http://www.google.com" style="color:#3147ca;"><span style="color:#3147ca;">some link text</span></a>

Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail, but personally I don’t see much benefit in the partial user experience, since the anchor selectors aren’t heavily supported I recommend just offering 2-3 link colors to use throughout your design.

As a presumption users will also expect your links to open in a new tab or window. Ideally the target="_blank" attribute should be enough for all browsers to recognize this functionality, and the inclusion of this attribute on your anchor links shouldn’t negatively effect e-mail software such as Lotus Notes, or Outlook either.

6. Test in All Major Clients

A recent study of most popular e-mail clients (done by Campaign Monitor) shows ten of the most popular e-mail clients in the past year. It may seem a bit tedious but designers should get into the habit of checking their newsletters on all major e-mail clients, at the very least on some of the more common clients such as Gmail, Hotmail or Yahoo! Mail.

testing in major browsers 9 Tricks to Design The Perfect HTML Newsletter

This doesn’t include webmail solely, but also operating software on both Mac OS X and Windows. Also according to their diagram iOS Mail and Android have both rocketed into the top 10 list over the past few years. In fact iPhone, iPod Touch, and iPad Mail ranks the #2 most popular right under Outlook! Unfortunately there isn’t a way to test these without owning one of the devices — so you’ll have to settle with other options.

One bug with the mobile support comes in many iPhone and Android models. Mobile e-mail rendering will often resize the text inside your template. This may not affect your design very much, but it can be annoying to some readers. Using the CSS -webkit-text-size-adjust: none;, will ensure an even default text size throughout all parsing engines without needing to test it.

If you know any friends or colleagues who use alternative software, you may wish to ask for their help on testing the newsletter. You can either send them a copy of the e-mail to check on their device or borrow the device to actively clear out coding bugs. Luckily Outlook does offer a Mac install version so you won’t need to track down a Windows user for those optimizations, but when it comes to Lotus Notes or Windows Mail, you may be out of luck.

The alternative is to pay for a solution such as Preview my E-mail, unfortunately they do not provide any free demo accounts, but their service is well renowned for offering terrific previews of your design. E-mail on Acid is a similar service which does offer a free account but does not let you test on all clients, which kind of defeats the purpose. Online rendering services should be useful if you need to test many newsletter templates over the long run without the use of alternate computers, however they are not fundamental, so don’t stress if you can’t test them all!

7. Always Offer Web-Based Views

Readers won’t always be able (or be willing) to view your e-mail natively. Offering another version somewhere on the Web will give a sense of ease and compatibility. This process can’t be completely automated unless you’re looking to include a plain text version.

This way, you would strip all HTML tags from the newsletter layout. You wouldn’t be able to include links or styles for anything. All content would simply be laid out as a plain text file for readers without the rendering capabilities. This is certainly a good alternative, but when you offer a full Web version of the same newsletter it takes away the damage done by any rendering bug. Most readers will be running an up-to-date Web browser which you can style and build your newsletter on and to perfection.

How you set up the page is entirely your choice. Some websites will dedicate an entire blog post to duplicating the e-mail’s content, maybe with some additional information. Others will create a separate page off the main website without any direct links in the navigation. This method can be beneficial since readers won’t be distracted by your main website template or sidebar content.

8. Adding Image Content

Images are another reason to offer your readers a web-based solution. By default, e-mail clients are set to strip images out of the content. If your address is added to a safe list, all images will be displayed by default, but the user has to accept this setup so it’s certainly not a guarantee. Just make sure images aren’t required as part of the main content, but included as an extra topping for page aesthetics.

Once you get to exporting graphics there are a few tips to building images specifically for e-mail. You’ll want to always set both width and height attributes on your img tags. Without these specifications in order, some clients will distort the image content. An alt tag will also prove useful, so visitors will know what the image content contains before it’s loaded.

As mentioned before, positioning the images in your e-mail can get tricky. Avoid using floats at all costs! The image align="left" attribute will work much better, or alternatively map out exact table cells to fit your images along the top, left, or right side of your newsletter. You won’t be able to get a perfect match-up with so many clients out there (especially mobile clients), but optimize your images and keep file sizes small for best results.

As for image storage, it’s recommended that you keep all files in your own Web server. This is the better option instead of using another image host, or by uploading the files to an online newsletter service. Additionally you should separate the content for your newsletters away from the rest of your images in a folder structure like so /img/email or /img/email/2011.

9. Avoid the Spam Folder!

This can be difficult to hear, but not all e-mail clients are friendly towards newsletters. There are billions of e-mails sent every day and the majority contain spam or malicious content, thus having these security measures built into the Inbox is clearly for safety precautions.

However when it comes to Internet marketing, you can easily be discouraged to see your latest newsletter end up with the junk. To reduce the chances of this happening you should clean up your design for simplicity. Don’t make annoying images or blow up your title text with hundreds of keywords.

There is certainly a solution for every issue, for instance, this handy spam checker processes your e-mails for any misguided errors. You’ll receive a report outlining the possible issues your newsletter may face in the many inboxes it’ll land in.

Also try to keep your content brief and on-topic. You don’t need to include full content for all of your articles or pages. Try adding a sentence or two with an alternate link out to your website in place of a long listing. The more brief your e-mail looks, the more likely it’ll pass spam inspection.

Newsletter Design Gallery

What fun would an e-mail newsletter article be without some fantastic examples? There are tons of e-mail newsletter designs and templates to check out in Google. HTML E-mail Gallery is a very popular source for inspiration.

Below I’ve included screenshots from the many newsletters in Campaign Monitor’s gallery. Hopefully these terrific layouts can provide you with some great ideas for your own designs.