Difficulty finding the unsubscribe link

I can understand the mentality that goes through people’s minds with this problem but that doesn’t mean to say that their thinking is correct. Businesses seem to believe that if I can’t find an unsubscribe link then I simply won’t bother. This may be true but there’s nothing from stopping me simply marking it as spam in my email client to prevent me from receiving the newsletter. If enough people do this, there’s the likelihood that all emails from the domain will be blacklisted and future email to all users will simply end up in their junk/spam folder.

Therefore, it’s vitally important that despite the negative impact it may have on the quantity of newsletter subscribers, that an unsubscribe link is easy to find. Most newsletters include this as a text link at the footer of the newsletter which is a perfectly fine convention to follow. However, some newsletters don’t underline the text, make it small or make it very difficult to find in amongst other terms and conditions text at the bottom of the page.

All unsubscribe links should be easy to find within a few second of opening an email. The focus of an email newsletter isn’t to make it difficult to unsubscribe but should instead be focused on providing clear and interesting content that the user won’t want to unsubscribe from in the first place.

Forcing users to login to unsubscribe

This was probably my biggest niggle when trying to unsubscribe from newsletters. A lot of the newsletters may have been subscribed to when I bought a product from them years ago and registered an account with them. I may not have bought from them since and certainly don’t remember what password I used. Therefore in order to unsubscribe, I have to go through the whole process of resetting my password just so that I can login and unsubscribe from their newsletter.

There’s no need for a company to make things that difficult for me as they already have my email address so just clicking on a link in an email should be enough to sufficiently authenticate that I’m the user who wants to unsubscribe.

Delay in processing the unsubscribe request

There may be a technical reason why this is the case but I spent an hour one evening unsubscribing from all the emails that I no longer wanted to receive. I thought I may have missed a few so as I received a few more over the next couple of days I also unsubscribed from them. So, you can imagine my confusion when I received the message saying “you’ve already unsubscribed from this newsletter”. Apparently this particular newsletter takes up to 4 working days to process an unsubscribe request and in the meantime, continues to send more unwanted newsletters.

I don’t personally hit the spam/junk button unless absolutely necessary but am sure that many people do in this scenario and I can’t see a reason why a company would do this.

Allow user to adjust delivery frequency

When a user hits the unsubscribe button, all is not lost and there are a couple of things you can try to do in order to keep them subscribed. It may be that a business is simply sending out too many emails so why not offer the user a way of unsubscribing but also the ability to adjust how often they receive emails instead.

Sending out a daily email may be good for some people but others may prefer a weekly summary of the most important information or even monthly. Allowing a user the option to choose how often they receive an email may prevent a company from losing this customer altogether.

Allow users to only receive specific newsletter topics

Another option may be to offer the user the ability to choose which topics they receive. An online retailer may sell DVDs, Blurays, Music and Video Games but the customer may only be interested in buying Blurays so wouldn’t it make most sense to allow them to just receive emails that were tailored to them?

This may not work in all circumstances but having newsletter lists that are specific to the type of content tends to retain newsletter subscribers but also tends to convert into more sales as the content is much less generic and is highly optimised with products and information for that particular person.

Get feedback

If a user is absolutely determined to unsubscribe then a simple form asking them for a reason why they’re unsubscribing usually won’t hurt. If there’s a pattern and all users say it’s no longer relevant or they receive too many then you can hopefully address the problem in future.

Offer alternatives

When a user is unsubscribing, make it easy but also provide them with information that tells them how else they can keep in touch. This may be Twitter or an RSS feed as it may just be that the user receives information via a different means than when they originally subscribed to the newsletter.

Summary

Hopefully, these few tips and problems that I encountered while unsubscribing to newsletters will give newsletter designers and marketing managers a few ideas on how better to manage their campaigns in future and help prevent other users experiencing the same problems that I experienced.

The block solution

The easiest thing to do is to use display: block; and most elements will play ball:

#element { display: block; margin: 10px; padding: 10px; border: 1px solid #ccc; }


By using display: block; this element will fill the total width available after taking into consideration the margin, padding and borders.

However, that doesn’t solve all problems.

100% width textarea with padding and borders

The biggest problem I’ve come across is when dealing with the textarea element. We may want to style it so that it has a 1px border and has a set amount of padding. However, by setting display: block; on a textarea, this solution doesn’t work.

The solution to this is to use CSS3 box-sizing:

textarea { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding: 10px; border: 1px solid #ccc; }


By setting the box-sizing as border-box, this tells the browser to use the width declared as the total value and to place any padding and borders inside the box.

Summary

This isn’t such a problem when dealing with fixed layouts but when dealing with fluid layouts where you aren’t sure what width a column is, this can be a huge headache.

When I first found this solution it was like a eureka moment. Unfortunately this doesn’t work in IE7 but you should be able to create a solution which degrades gracefully with some fixed widths and min-widths whilst using box-sizing for all other browsers including IE8 and upwards.

Previously if we wanted to include some placeholder text in an input field we’d have to either use the value attribute or inject it using JavaScript, neither of which are the most accessible.

With HTML5 though, we can now use a new placeholder attribute to add text to the input field using the following:

<input type="email" id="input-email" placeholder="Enter your email address">

Placeholder Attribute Browser Support

The latest versions of Firefox, Safari, Google Chrome and Opera all support the placeholder attribute. However, IE9 and below have no support for the placeholder text so it’s important to consider how input fields will appear on those IE browsers.

I’d fully expect IE10 to support the placeholder attribute but for now and for the foreseeable future while older versions of IE are being phased out, we’ll need to implement a fallback.

Using the Label Element

Regardless of the HTML5 spec not requiring a label element to be associated with an input element, I still think it’s a good idea for accessibility purposes to include a label so it’s clear and easy to see what the form field does.

<label for="input-email">Email Address</label>
<input type="email" id="input-email" placeholder="Enter your email address">

jQuery Placeholder Attribute

As well as using the label element to clearly identify what the input does, I’d also consider using a jQuery solution so that anyone using IE that has JavaScript available will also see the placeholder text.

Daniel Stocks has written an excellent jQuery placeholder plugin which you can download from Github here:

• jQuery Placeholder Plugin

All you need to do, is download the plugin (either the uncompressed or minified version) and include the following lines of HTML and JavaScript, making sure that the jQuery plugin has the correct path.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>

Summary

And there you have it, a consistent appearance for the placeholder element across all browsers.

The Spec

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

How to use the article element

For standard content pages the <article> element is fairly self explanatory. You’d simply wrap the <article> element around your main content like the following example:

<article>
<header>
<h1>Heading</h1>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!</p>
<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer</h1>
</article>


That’s pretty straight forward but there are more subtle times that you’d use the <article> element. In order to determine when you should use it, I like to think of whether the article would make sense independently of the current site that it sits within. Would it make sense if it was published on its own as an RSS feed within someone’s feedreader for example? If it does then it should probably be an <article> if not then it’s more likely that you’ll need a <section>, <aside> or <div> depending on the type of content (I’ll cover these elements in another blog post).

Other uses for the article element

Another example of using this element would be to nest them within blog post comments as these could be treated as articles in there own right. For example:

<article>
<header>
<h1>Heading</h1>
<p>Published: <time pubdate datetime="20011-01-15">15th January 2011</time></p>
</header>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur...</p>
<section>
<h2>Comments</h2>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-17">17th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
<article>
<header>
<h3>I like your article</h3>
<p><time pubdate datetime="20011-01-18">18th January 2011</time></p>
</header>
<p>Odio lundium nec, non scelerisque, velit lacus, sed dignissim aliquam tortor</p>
</article>
</section>
</article>


Here you can see that everything is wrapped within the main <article> element but then the comments are wrapped with a <section> and within that are another couple of <article>’s for each of the blog comments.

Things like widgets and forum posts can also be handled in the same way. Just think that if you read the article independently of anything else on the page would it still make sense?

Further reading

There’s a couple of great articles on this subject available here:

• The Article Element by HTML5Doctor
• HTML5 articles and sections: what’s the difference?

Now before everyone jumps to the comments section, I’m fully aware that there are other solutions including @font-face, Cufon and sIFR but they create their own problems with regards to font licensing. But there is a solution for certain situations and that’s to use more intelligent CSS font stacks.

What is a CSS font stack?

Anyone that is used to creating CSS will be familiar with a font stack:

body { font-family: helvetica, arial, sans-serif; }

The browser will use helvetica if it’s available (usually Mac’s), if it’s not available then it will use Arial (most PC’s) and then if neither of those fonts exist it will use the system’s sans-serif font. This is a fairly common concept and is used all over the web and most designers will stick to using a combination of Andale, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

However, as mentioned earlier, these fonts were bundled with Windows XP. We now have many users on more modern versions of Windows and common software (like Microsoft Office) which comes bundled with other fonts which are now common to many more machines.

So we can use any font?

Not exactly.

But what we can do is use a font that isn’t included in the web safe font list and provide alternative similar fonts for users who don’t have that font installed on their machine.

For example:

p { Baskerville, "Times New Roman", Times, serif; }

Nathan Ford created an excellent article on CSS font stacks which has some great examples of using fonts by selecting your fonts using the following criteria:

font-family: ideal, alternative, common, generic

He also includes some great examples of good font stacks near the bottom of his post.

For more information on the use of certain typeface on different operating systems, codestyle.org/css/font-family/ has a ton of information and statistics on the subject.

A word of warning

Using font stacks isn’t just a case of picking fonts that look similar in style as letter spacing and sizing can vary significantly between certain fonts so it is always worth testing out how each of the fonts will look in practice. If in doubt then Nathan Ford’s list at the link above is a great starting point.

Also make sure that you set a client’s expectation right from the beginning. A lot of clients will be used to the way that print design works and therefore when you show the design using one font and the functional website uses a slightly different font due to the “ideal” font not being available on their machine, it can create some interesting and unwanted debate at the end of the project so I’d always advise any designer who is planning on using this method to be upfront right from the start and make sure that the client understands that the web is interactive and not all users will have exactly the same experience.

Nav Element Specification

The HTML5 specification defines the <nav> element as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

How to use the <nav> element?

The <nav> element should surround blocks of content that act as links to other parts of the site:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Where to use the <nav> element?

The spec hasn’t completely been defined at the moment but my understanding is that you should use the <nav> element anywhere that you would consider to be the main way that a user navigates thoughout your site, these might include.

• Primary navigation
• Secondary navigation (or navigation that supplements the current content)
• Breadcrumbs
• Pagination (previous/next buttons)

At the moment it is a little open to how the author of the HTML document interprets the specification and I’m sure over the next year or so it will become common practice to use the <nav> element in a specific way. Maybe using the <nav> element for site wide navigation will become the default method for using this element but for now I’ll be using it wherever there are large chunks of navigation present within a document.

If you’re new to HTML5 then you might want to start at the following link which will give you an overview and a simple template to get you started: HTML5 Tutorial.

Header element as the page header

The first place that I use the HTML5 <header> element is for the page header which might contain a  logo, navigation and any other consistent elements that might be considered the page header:

<header>
<a href="/" class="logo"><img src="images/graphic-logo.gif" alt="Company Name"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>


Note: I’ve also included the HTML5 <nav> element within this example which I’ll cover in another article.

Header element as the article header

When using the <header> element you aren’t limited to the number of times you can use it so I’d also use it to markup the header for the actual document content.

<header>
<h1>Article heading</h1>
<p class="date">Posted on 3rd December 2010</p>
<p class="author">By Dave Woods</p>
</header>

The hgroup element

Currently in the HTML5 draft specification, the hgroup is mentioned and can be used to group a number of heading elements:

<header>
<hgroup>
<h1>Article heading</h1>
<h2>The sub heading for this article</h2>
</hgroup>
</header>

Personally, I’m not sure why we would really need this extra hgroup element for the rare cases that two headings follow on from each other directly in the source code or what extra semantic value this could add to the document? I have a feeling this will probably get dropped before the final specification for HTML5 is released.

Styling the header element

It’s important to remember that browsers don’t currently implement any display information via CSS for the new HTML5 elements so for any element that should display as a block element, you’ll need to specify it as such.

header { display: block; }

Personally, I take it one step further as demonstrated in the HTML5 CSS Reset article and use that to specify the display for these new elements straight away before I start using:

article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; }

You can either use that and apply it to your own CSS reset file or simply download the one that’s available at the above link and use that stylesheet.

• Download HTML5 Reset.css

HTML5 Reset

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

If you’ve used Eric Meyer’s reset file then you’ll be familiar with a lot of what is included above as I used that as a starting point when I first started out with CSS and have adapted this file over the years to match my style.

Remove Firefox Scrollbar Jump

html { overflow-y: scroll; }

This is optional and won’t validate with a CSS2.1 validator, however it’s perfectly valid in CSS3 and I use it to force the vertical scrollbar to appear all the time in Firefox. Without it you may notice that shorter pages appear to jump when you navigate from a page that requires a scrollbar and one that doesn’t so I tend to include this within all my site.

Remove Bullet Points

ol, ul { list-style: none; }

This simply removes the bullet points from ordered and unordered lists. Some people do this on an individual basis where they require it but personally I prefer to take them off and then just add them back in where I want them. You might be able to do this on a more global level by applying a styling for all lists within the article section of the page for example.

Line Through the Del Element

del { text-decoration: line-through; }

The del element is used to show when part of a document has been changed and whilst nearly all browsers display this as a line-through by default it’s good practice to include this just to be double sure.

Reset Tables

table { border-collapse: collapse; border-spacing: 0; }

This bit of CSS removes the border spacing and makes sure that the space between the table cells is completely removed by collapsing the borders.

ABBR and DFN Elements

abbr[title], dfn[title] { border-bottom: 1px dotted; }

For the abbr and dfn reset I used the method used by HTML5doctor.com…

This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use abbr regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the abbr element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.

HR element

hr { display: block; height: 1px; border-top: 1px solid #ccc; margin:1em 0; }

This simply creates a consistent style for the horizontal rule element.

Form Fields

input, select { vertical-align: middle; }

This sets the form inputs so that they display nicely when inline. I’m also in the process of writing a form master CSS file to lay out forms in numerous different ways so that will be coming soon too.

HTML5 Elements as Block Elements

article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section { display: block; }

Although modern browsers recognise the new HTML5 elements, they don’t display them as block elements which can cause a lot of problems when trying to style them unless you specifically apply block individually to these elements. Including this section within your CSS file solves this problem although in the future I suspect that browsers will display these elements as blocks anyway but at least for the time being you’ll need this.

Resetting Fonts

body, select, input, textarea { font: 0.625em/1 "Helvetica Neue", Arial, Helvetica, sans-serif; }
body { color: #fff; background: #252525; }

This section is probably open for discussion as technically it probably shouldn’t be included within the reset.css file as you’d want to change it depending on the project whereas a reset.css file should probably be a standard file that you can just drop in and include within any project. However, I like to just reset the fonts to 10px here and set the body background colour, font colour and font so that it’s consistent across the sites.

Summary

This is just a starting point for your HTML5 CSS so once you’re happy that this all makes sense you might want to take a look at the Getting Started with HTML5 tutorial that I wrote some time ago. It doesn’t go into too much detail but explains how you can start using HTML5 today using progressive enhancement with JavaScript to style HTML5 elements in older browsers.

Next up, I’ll be going into much more depth regarding each HTML5 element and explain how and where to use there new elements.

Some designers have argued that IE6 is such an old browser now that we should drop support for it and completely disregard any testing or bug fixing to ensure that IE6 users are actually able to use the website. These designers have taken the assumption that if the page doesn’t display correctly then they’ll automatically realise that they need to upgrade and will happily start using IE8, Firefox or Google Chrome.

In an ideal world this would be the solution and we could all go on creating websites without bug fixing for IE6 and start using HTML5 and CSS3 without considering older browsers but sadly this isn’t the case and probably never will be.

Can we force people to upgrade?

Some designers have suggested that a message could be placed on the site which informs users that they need to upgrade in order to use the site but as this video shows, many people don’t even know what a web browser is and presumably see the “e” icon on their desktop as the internet.

If you run a site like Google, Facebook, Ebay or Youtube then you might get away with this kind of strategy but if you’re not lucky enough to be in this position then all you’ll end up doing is sending these users to your competition who have taken the time to fully support IE6.

Why are people still using IE6?

There’s a couple of reasons why people are still using IE6. The first is that people who bought PC’s and laptops until 2007 would have already had IE6 installed on their machine with Windows XP and as they don’t know any better will keep using it until they upgrade their PC which will presumably come with Windows 7 and IE8.

The other set of people are employees of corporate companies who don’t have the opportunity to choose what software they use while they’re at work. These companies control the software on a network level and force their employees to use IE6, usually because they know that their internal applications will continue to work whereas there’s an element of risk in them using more modern browsers especially when their applications have been built without web standards in mind and in some cases predate IE6.

How many people use IE6?

This is the question that doesn’t quite have a black and white answer as the number of IE6 users in the world is actually irrelevant when it comes to building websites. What does matter though is how many people are visiting your website using IE6.

You’ll tend to find that technology based websites have a lot less IE6 users than more mainstream websites. For example, this website has around 2% of visitors using IE6 whereas most of my other websites which are targeted at none technical people receive around 5%.

If your website is targeted at a non-technical audience or corporate employees then you’ll probably find that this number is even higher so the number of visitors to your website using IE6 is probably somewhere within the region of 1%-10%. This is why it’s important to use an analytics package like Google Analytics so that you understand your audience.

Should you still be supporting IE6?

As frustrating as it is, in my personal opinion web designers should still be supporting IE6 while the number of visitors is substantial.

I also take the attitude that even though your client may not know about IE6, what happens when they proudly show one of their relatives their new website only to find out it appears broken to them? Where does this leave your reputation?

How do you build a website for IE6?

Once you get used to catering for IE6 then it really doesn’t take all that much longer to ensure that a website works in IE6. It can be troublesome at times but once you understand IE6′s bugs and fixes then you can implement the most common fixes as you’re working.

I’m also a fan of Progressive enhancement so as long as the site is usable and content doesn’t appear out of place in IE6 then I wouldn’t worry too much about the site being pixel perfect as long as it is accessible and usable then you’ve achieved your objective.

Summary

A lot of designers in the community have already dropped support for IE6 and are refusing to develop for the old browser but personally I think it’s too early and a little irresponsible to disregard it completely without even considering the target audience of a website.

If a web designer doesn’t have any idea how many people will be visiting a website using IE6 how is it possible that they can blindly decide that they won’t support it? If there is evidence that by dropping support for IE6 that your client won’t lose business then that is perfectly acceptable but if that’s not the case then I’d always suggest supporting IE6.

What do you think? Are you still supporting IE6 when building websites or has the time come that you no longer even bother to test how your pages render in Internet Explorer 6 and if so why?

I’m not sure at this stage how many users they’ve rolled the latest version out to. I know plenty of people who are still seeing the old version so for the benefit of everyone, here’s a screenshot.

Design

The one thing that I initially wanted to see was how much of the redesign is a reaction to Microsoft launching Bing.com last year? I headed over to the Bing.com search results and was a little shocked at how much of a rip off Google had done of the Bing search results.

I’m neither anti-Google or anti-Microsoft so this point isn’t at all politically motivated but Google have pretty much replicated the format of Bing.com and if the boot was on the other foot I’m sure people would be making a big deal of it.

Maybe as a designer, I’m being a bit overly sensitive and most people won’t notice but the links in the top left, top right, logo placement, search box, filters and search results are all in exactly the same positions. I would have expected Google to have come up with something a bit more ground-breaking and original. It’s entirely possible that both companies invested heavily in usability testing and this was the design that both came up independently of each other and it’s just a huge coincidence that they look the same?

However, after the initial disappointment of there not being anything new in terms of the design, I was pleasantly impressed by the new Google interface…

Search Results Layout

The search results format is the usual tried and tested method of sponsored results at the top with organic’s underneath and further sponsored links down the right. Google obviously saw no reason to change what is obviously proving to be a successful method of presenting search results.

Location Specific

Google have introduced a new “Auto-detect Location” feature below the search box which should default to your current location but is also easy to customise by entering a postcode or other location which is a nice feature if you’re looking for local search results.

Filters

The big improvement from Google though which none of their current competition can rival is the filters in the left column. Now it couldn’t be easier to view blogs, images, books, news, videos, maps, social media updates and discussions. But not only that, you can now also view results that are time specific so viewing results from the past 24 hours, week, month or year is easy if you’re looking for information that can easily date.

How will the new Google design effect SEO?

It’s probably safe to say that the Google algorithm itself hasn’t changed all that much so continue to write good, original content and market it in the same way that you always have for the search engines. However, there is definitely more emphasis now on new content so it’s probably never been more important to make sure that you keep providing fresh and useful content for your website to ensure that you’re at the forefront of any time dependent search.

What do you think to the new Google search results?