Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
The world that surrounds the topic of Web Design is home to many debates and opinions on best practices or generally how things should and shouldn’t be done. While many of these opinions are accepted and taken on board by everyone, there are some that end up being split into two opposing camps. One camp will provide an expert opinion for one side of the argument, while the other contradicts with an equally valid argument. Let’s take a look at the five most popular debates; the ones that often end up developing into digital riots with opinions flying like arrows across the vast no-man’s land known as the comments section.
Should links open in a new window?
Camp one says:
Links to external sites should always open in new windows. There’s nothing more annoying than browsing a website, clicking a link and being whisked off to a totally new site, losing the page you wanted to revisit. Internal links should maintain the browser session in the current page, but anything that leaves the site should open in a new tab or window.
Camp two says:
As web designers we shouldn’t take the control away from the user. Whether a link needs opening in a new window is their choice. There’s nothing more annoying than a website taking control of my browser and opening a new tab or window for a link without my permission; if I wanted to open it in a new window, I’d do so! The problem only gets worse with inexperienced computer users, new windows break their trusty ‘back button’.
The mediator says:
In general, opening a new window should be avoided, but is recommended for some situations such as opening a help link in a shopping cart or opening a non-html document such as a PDF. To further aid the usability of your site, use a small icon to identify links that do open in a new window, or provide an options panel that’s configured with Javascript.
Further reading:
Should links use the words ‘Click here’?
Camp one says:
‘Click here’ has been proven to provide a higher click through ratio than descriptive anchor text. ‘Click here’ is a call to action people associate with the web, so it should be used on links to achieve the highest click through results.
Camp two says:
Using the words ‘Click here’ hinders the usability of a site. Instead of being able to see where the link goes and what it does, the user has to read the surrounding text to gain an idea of what’s going to happen. Quality guidelines suggest that anchor text should explain what a link offers.
The mediator says:
A descriptive link should always be used to help increase your site’s usability, accessibility, and optimization for search engines. It is interesting to hear that ‘Click here’ performs better on banner ads, but I’d imagine that bounce rates would also be in favor of descriptive links.
Further reading:
Camp one says:
If your aim is to make a word bold, use the <b> tag. It’s not correct to use the <strong> tag if the word doesn’t have any extra value or importance. Screen readers pronounce the <b> and <i> tags differently, and they are also included in the HTML5 specification.
Camp two says:
Bold and italic tags are often used to make text appear bold or italic, so semantically anything that is being used for visual aesthetics should be reserved for the CSS stylesheet, and not included in the HTML markup. If an element has of specific importance or requires emphasis, the <strong> or <em> tags helps identify it with meaning.
The mediator says:
<b> and <i> tags shouldn’t be used to make text appear bold and italic for the sake of it being bold or italic, this visual styling should be left to the CSS. If a word or passage of text is of high importance, either the <strong> or <em> element would be the best use. The <b> and <i> can and should be used when no other tags fit the situation (eg: <cite>, <var>, <dfn>). An example might be text in another language.
Further reading:
- Semantic Use of Bold and Italic Elements
- A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)
Should a logo be enclosed in a <h1> element?
Camp one says:
Logos shouldn’t be wrapped in a header one, the <h1> element should include a description or title of that particular web page. This is the best approach for SEO, otherwise, the primary header for every page would be the same – the company name.
Camp two says:
The main identifier of what website you’re on is the logo. With the <h1> being the largest level of headers, it’s natural to place the logo and site title inside a <h1>. This way, when the page is viewed without CSS, it still holds the same visual structure and hierarchy.
The mediator says:
The definitive use for a <h1> is to describe the subsequent content. Therefore if a particular website has a title or heading that describes the content and appears in the design, this should be placed in the <h1>, otherwise the next highest structural and descriptive item would be the logo.
A site should be viewable in older IE versions
Camp one says:
Internet Explorer / Edge make up just 4% of the market share, but it’s still crucial that a website is made to work in older IE versions, as well as newer browsers. There lots of major corporations who have large networks running older IE versions, as well as lots of computer users who don’t know how to upgrade.
Camp two says:
Outdated Internet Explorer is considerably out of date and doesn’t support the technologies that are present in web design today. It poses a risk to the user’s online security and is the never ending nightmare for all designers. Large companies including YouTube are phasing out support, so should you! With just 4% universal usage, IE is not something you should worry about.
The mediator says:
Older IE version usage is definitely on the decline, and its death will be quicker with large websites dropping support. Whether you support Internet Explorer depends on your own user statistics. Alternatively, consider offering more basic page styling to older IE version users rather than fixing complicated layout and CSS problems.
Great article and nice debate also.
JavaScript Doesn’t knows about your browser and tabs vs windows, so it is really up to the browser to decide how to open a new window
I personally feel that links should open in a new tab. It’s so annoying when you click on a link and the whole website redirects.
Very good Points.
The two most important issues are Should links open in a new window? and Should links use the words ‘Click here’? According to me yes the lists should be open in new window. and regarding to “Click Here” this is more valuable if we use proper anchor text. this will help user to understand about the link topic.
Opening Link in New tab is always preferable as user less friendly to the system shall always know the point they came from.. in case they require to go back
Yes, It’s true, “As web designers, we shouldn’t take the control away from the user”, So We always follow the user’s requirements. But, After reading your post, its feel like easy. Thank you for it.
Wow great post, Much helpful to understand about html tag with reference sources. Thanks for sharing huge stuff blog.
Thanks for the posting this article.
title & description is use in Search engine result pages.
According to me logo should not be enclosed in h1 tag rather than this we can update title in H1 tag that will help us to improve SERP.
I didn’t really understand what is the difference between the B tag and the Strong tag, both do the same is it not?
Great Post.
Great post. I got annoyed at the first point, then laughed at myself.
Great article can see both sides apart from the IE6 I understand it but bloody hate it :p
Uhuu ! Very Nice !
Hulk like tables
Regarding to "Should links open in a new window?", well, it also depends on the culture of the visitor. Most chinese visitors would like to open new window for any clicks.
I also don't know why, but they just like it.
Thanks for the great article. It's good to read about two different solutions to the same problem. I'm sure I will use some of your tips in my next website.
I feel that if links are external to your site then they should open in a new window
Great article!
IE6 Support depends on the project and client customers for me. But if supported, its not more than a base support. Layout and important functions have to work – not more…
Greetings from germany :)
I think the user should have the choice to open a new window, I think its maybe the users you have to think about, what sort of users do you have, will they understand a new window has opened ?
This might sound a bit silly but I definitely think its worth thinking about.
I personally think the user should have the choice.
As for "click here", Again depended on the users knowledge and how well your css has styled links ?
I personally think if the css is done right it should be obvious for the user and give some sort of description of where the links going.
"<strong> or <em> tags helps identify it with meaning. " very true I agree.
I've always put the logo in <h1> even before I knew why lolz…
I have dropped support for old IE versions and I've got a sneaky suspicion that most designers will do the same (if they haven't already) and with big companies beginning to follow suite and drop support I don't see outdated Internet Explorer versions being around for too much longer,and thank god to be honest, I've lost far too much sleep over fixing bugs for old IE versions :(
Great post by the way Chris really beginning to become part of my routine reading your blog :) great work.
The debate between web design and content is a never ending one. While many feel that content is the main part of a website, others are of the view that it is the design which holds more importance. The answer is that both are needed for a successful website.
Thanks.
For the life of me, I cannot figure out why if people want a link to open in a new window, *they* don't open it in a new window. It will take two seconds to learn how to do it (right click, middle click, control click, etc) and then we wouldn't even be having this conversation. =)
I understand the marketing perspective. I guess I'd just rather educate folks how to open a link in a new window than irritate the folks who do know how by taking away their ability to make their own decision. Keeping someone on your site longer won't make them buy something, in my opinion, especially if you are irritating them in the process.
Great! I love how simple yet so creative these are.
Hey Chris
Great concept. Beautifully executed
I find this discussion regarding outdated Internet Explorder fascinating. Yes, developing for it is annoying. Yes, users should upgrade and it's annoying that they don't. I work for a very large e-Commerce concern and our conversion rate in outdated IE versions is around 7%. Not a large percentage, but 7% of sales is a significant amount of revenue to just ignore because it's difficult to support the browser that our customers are using.
Links should never open a new window, unless the user is in checkout or opening a PDF file. That's the whole point of navigating the web. A user may want to have a stream of sites that they visit and be able to use the back button. By forcing new windows, we are controlling how they browse. Clients like to open a new window on external links because they want to keep users their own site.
The works "click here" should only be used on sites created in 1995.
great points, thanks for sharing.
Good article. I appreciate the insight.
the article is great, nice
I despise links that use javascript to open a new window and don't have the URL in the href. THAT takes control away from the user completely.
On the other hand, just having the anchor's target set to open a new window allows the user to have their browser settings make it do what they want. If they want a new window, new tab, or just use the same window, it's the user's choice.
For usability's sake, though, external sites should always default to opening in a new window if the user hasn't told their browser to override it. This is the kindest solution for the non-savvy.
IE6 support is definitely a business decision. If it's a personal site, I don't bother with it. If it's a site that expects sales, it's still pretty necessary.
The links opening in a new window debate is killer. I frequently find myself having to tell others that it really should be up to the user, but then again it does have it's benefits to link other websites to new tabs.
Great article, Chris. I will refer people to this article every time they want to start one of these debates :P
I'd have thought the fluid vs fixed layout debat was has more than bold vs strong.
I used to be a frequent installer of older Windows OS, so I was always thankful for websites that worked in the default installed browser. Windows 2000 comes with IE5.0 and cannot upgrade beyond IE6.0, Windows XP likely comes with IE6.0. If I'm trying to download drivers so that I *can* upgrade to a better browser, I'm going to be a little upset when I get a "fuck you, upgrade your shit" message instead of giving me access to the things I need.
Yes, Win2k is considered an "expired" OS, but Microsoft has extended support on it multiple times (I think it is still in extended support, as in you can still get service packs, etc.). I have heard that there are a fair number of businesses and/or government agencies still using Win2k because it can work on cheap, elderly machines without difficulty.
Certainly make it functional, make it usable in older IE versions, but don't lock people out.
I think opening external links in a new window is the best way to go. It’s definitely more intuitive for the user, because they are leaving the construct of the current site and viewing another. Sure, there will be a “back” button problem for some, but I think most people are used to this way of thinking and will merely close the new window or tab when they’re done viewing the external link.
As for old IE versions, I started the beginning of the year by informing all my new clients that I would no longer be supporting it. Down with outdated Internet Explorer, I say! ;-)
Very original article! Glad to see you were thinking outside of the box on this one …
How Flash use is not on this list can cause a riot in itself…
I enjoyed this! I’m a new follower and new fan. I agree with most of the comments back as well, its nice to be reassured that what you have been doing is the way others are doing it too.
Great article Chris, I cannot wait until IE is completely dead!
Why do we, as web designers\developers, feel the need to recreate the browser's functionality? First it was the back button, then the zoom/enlarge function, now its the open in new window option. The browsers already have a back button, zoom feature and for new windows users can click with middle button or right click and select open in new tab/window. My opinion is that all links should open in the same window, and let the user decide otherwise.
As for IE6 support, I charge extra if a client wants it, explaining the reasons for that.
Love the article, and it is a strong debate but on old IE versions, I fully agree that it needs less support for it. As less browser support comes for it, people will just have to get a newer version and browse with that.
As for h1, yes I think it should be an image. it goes without question.
Very good read and I would recommend it to a lot of people. :D
I know this list could have been endless, but I think “do designers need to be able to code their designs” would have been in my top 5 :)
I was recently surprised to see, in a quick twitter poll I did, how many people like external links to open in a new window/tab when browsing.
Great post Chris, I don’t know where you steal the time from!
Should links open in a new window? – Is exactly why the middle mouse button was invented :p
And outdated IE, well that can drown :D
B.T.W – You need Jquery installed in order for the above to work.
Thanks for sharing this great article.
I tend to use this script to open new windows, works well with wordpress too!
$(function(){ $('a.new-window').click(function(){ window.open(this.href); return false; }); });
Once you add the class "new-window" to a link, it will open as a pop up window.
I hope you find this handy!
Cheers!
great article, external links should always open in a new window!
Very important points you’ve mentioned there, they really help out.
Thanks :)
Nice article Chris.
I’d only open links in a new window if they were to an external site, I like to use something like fancybox as it’s like a new window but it keeps the user on the site so it’s better for usability, plus it looks pretty cool.
I’m not the biggest fan of using click here as a call to action as I think people can tell if a link is a link or not – that said I do get told by the powers that be that it needs it, so I give in.
I’ve always been told to use <strong> tags as that is beneficial for SEO. Likewise putting an image in the seems like a waste, the h1 is vital for SEO thus it should contain your most important keyword.
Like you said i think we’re all in Camp two when it comes to outdated IE versions, even if we keep it quiet ;) I support older IE versions like I support the England football team, when it works I’m happy – when it’s not then all hell breaks loose!
Good article. I am really looking forward to IE6 disappearing.
Great article Chris, and i must admit i have had the whole <b>, <i>, <strong> etc debate before.
With regards to IE, i stopped supporting it about 3-4 months ago now, and i use an IF statement that displays a small yellow bar at the top with links to all the main browsers. As someone said if we don’t stop supporting it, it will never go away. That being said large companies like BT are still on outdated Internet Explorer versions.
For the open links in new tab or window cases, just let users choose the proper way. With the descriptive warning for the open in external links option, surely.
Awesome article. Ive often asked myself the same questions. I will defenitively put this in the back of my head in my new project.
Very interesting. I’ve definitely been on both sides of each of these arguments before. I used to be on the support IE6 side, but recently dropped support for it. If Microsoft isn’t going to support their own product, why should I?
Nice article.
I tend to go with a new window for external links, but not for internal. But I’m letting my personal preference dictate that, which I probably shouldn’t.
Click here is not semantically correct, and it’s bad SEO (unless you’re selling clicks on the next page).
I always use strong and em.
The logo should be enclosed in an H1 on the home page only.
You have to support IE at a basic level. Lots of irony in the fact that designers who argue over whether or not we should open links in new windows feel like they can dictate what browser someone should use. So the site has to be attractive and fully functional in IE (and previous versions), but that’s it. And no enhancements or new features for old IE users, either.
I’m not sure that its dictation – more like education. Its important that the percentage of internet users still using IE6, (the more casual of which, often don’t even know what browser they’re running) to see the light and upgrade. This in turn is going to improve their online experience regardless of making designers lives a whole lot easier.
Great article Chris! I cannot wait until ie6 is dead!
Interesting post for sure, thanks for that.
With regards support for old Internet Explorer, personally I think that websites should support previous versions, even if the experience offered is slightly different from other, more modern browsers.
You could also add another one: Should a website work with JavaScript turned off?
Should websites work with Javascript turned off is a good one. It’s probably quite widely accepted as a best practice, but I always wonder how many users actually have it turned off.
I guess there’s some large corporations that have it turned off on their employee’s workstations, along with the ball and chain around their ankles.
Two reasons the site should work with JS turned off.
One, it’s the right thing to do. Screen readers don’t do JavaScript, and accessibility is important.
And two, search engines don’t really do JavaScript either. I’d say most sites get a lot more visits from spiders than from blind people, but you design for both the same way.
Screenreaders even don’t do HTML ;-)
But I totally agree with you that important information should not be presented/added by JS. Progressive enhancement and graceful degradation are the way to go. And thanks to ARIA even users depending on assistive technologies can start to “use” javascript-driven websites without any drawback.
I think the statistics show that only 4% of people have JS switched off, i think it was on the W3C site i seen it.
A site should *function* in any browser, but I don't think it has to look perfect, or even pretty in older browsers.
There should never be a question of whether or not a site works without JavaScript, the correct answer is always YES, it should work! I have had to turn off JavaScript on a good number of sites because it was so poorly written that it actually hinders my ability to use the site.
As usual Chris a well written and thought provoking article.
I had been a bit ambivalent about use of H1, until I read (Andy Clarke possibly) that using H1 for site name/logo meant that it had no distinction between all the pages on the site.
I look at it this way: The site name is like the title of a book, and H1 is for primary chapter headings. You would not call the book title a chapter, so you should not call the site name/logo an H1 element.
ymmv of course….
Really nice article Chris. More like this.
Awesome post. I find myself in this flamewar on occasion and both sides have valid arguments. Good stuff.
One correction, in the section about ‘<b> and <i> there’s a typo in the first line of the mediator section.
Instead of ‘<b> and <b>’ it should read ‘<b> and <i>’.
Whoops, didn’t realize html was enabled in here. What I meant to say was:
‘<b> and <b>’ should instead read: <b> and <i>
Thanks Randall, just gone in a fixed that. I think the next job is to disable HTML in comments!
Great post. These are things I always go back and forth about when designing web pages.
Thanks!
Thank you, Chris. I already knew all that answers and I always had a big battle with my boss about those questions, especially about the last one. Now at least I know, that I’m not the one, who thinks and feels the same.
At last the war with IE is almost over. I actually think, that Microsoft has to be the killer of older IE versions. They born it and they will have to kill it. Maybe they have to make some kind of update, that will terminate outdated IE versions and then everybody, who still uses them (I really want to beat them with my keyboard) will need to install new browser :D
Anyway, very good article and very good “food for brains” for amateur designers who want to raise the usability of their websites.
Thanks Roland
I enjoyed writing this one from both sides, and coming up with the middle ground area. It helped give me some insight into the opposite arguments to my personal preferences.
…Although for outdated IE versions I think everyone is secretly in Camp Two!
It’s funny, I’ve been debating for the last couple of weeks whether or not I should links that open up in new windows altogether.
But the thing that I’ve grown to learn about “click here” is its failure to contribute to SEO, and in a world where you only get places if you put yourself out there–everything counts :)
Good article, definitely worth raising the point that there is still debate about some of these issues, even if most people will come down clearly on one side or the other.
I always think the “Click here” argument is easily resolved, however. There’s nothing to stop you combining both “click here” and informative text within the same link, e.g. “click here to view our portfolio”.
Nice Read Chris.
I open external sites in a new window and I use a Strict DOCTYPE so I use the following simple script inside the anchor tag, which validates:
onclick=”window.open(this.href); return false;”
I still test in IE6 primarily because some potential clients may still be using it and I wouldn’t want my designs to render improperly giving them the wrong impression of my expertise.
Really good article here, Chris. I pretty much agree your points on most of them area.
I think opening links to external websites is pretty much essential if you don’t want the user to be whisked away from your site reading the article they were on – I hate it when I’m taken away from what I was reading.
And I definitely think IE6 should be phased out now. I’m all for progressive enhancement. Recently, I actually did a few type based posters on my blog about progressive enhancement to vent some frustration. :-)
What if I, the user, want to be “whisked away” from your site? I’m clicking a link, after all; that’s what I’d expect. If I REALLY want your site to remain open, I’ll open the link in a new tab. That approach gives control to the user. Your approach, however, makes it impossible for me to browse the way I want to.
BTW, reports have shown that, far from ‘keeping users on your site’, opening links in new tabs actually have the opposite effect. If you want to keep people on your site, don’t open links in new windows!
Its great that big websites like YouTube are leading the way for the demise of IE6.
There are Javascript plugins you can use on your sites that detect whether a user is running an ‘out of date’ browser and will prompt them to upgrade.
Definitely, the more large sites that drop support the quicker it will fade out.
I guess the range of ‘upgrade notices’ could be an argument in itself, there’s some that give you a subtle notice, some that prevent you from seeing the site and some that are styled up like a Windows update notice…
Very nice read.
Some interesting points here.
For external links: I mostly open it in a new tab for the users. mainly because the clients ask us to.
On click here: I’ve been thought not to use those words as they describe what the user will see very badly.
I always use strong and em since they are valid and easy to use.
I have never decided about putting your logo in the H1 tag. I use different methods and they all seem to work fine.
On the IE6 support. I grew tired of fixing everything for IE6 so I dropped support a while ago, someone has to do it, right?
Thanks for this article Chris!
Thanks Gaya,
What do you think about the opposing argument on new windows? Where it’s seen as going beyond the user’s control and opens it without their permission?
I personally prefer to use the middle mouse button to open windows that I want separate. I’ve also seen novice users get confused when their back button breaks after a new window has opened.
Great summary of some common web design debates.
I think in the end everybody has to decide how he wants to handle certain things on its own.
Here are my 5 Cents on the different debates:
External links should open in new windows/tabs, internal wants not.
Links should always use descriptive text, especially for screen readers, etc.
We should use <strong> and <em> (when do we ever make a text bold without it having any importance?)
Even though I put the logo in the h1-tag up until now I have to go with the other side of the argument. The word or sentence that describes the content of the specific page should be in the h1 tag (e.g. the title of a post).
And I’m completley against IE6 support. If no one ever starts dropping the support we’ll never get rid of it…
Sorry, I used the strong and em tag in the text above and wordpress misinterpreted it as actual html tags…
No problem ximi, just edited your post. I should really make some adjustments to the comments section to disallow HTML tags to avoid such problems!
Great additions too. As for the <strong> <em>, I learnt recently that <b> and <i> have their place in some scenarios, but for the most part <strong> <em> are the way forward.
Now THIS was a very interesting read – hands down for that. Very well written too.
About opening in new pages: target=”_blank” isn’t valid XHTML strict too :) .
Thanks Marco!
I wonder what the ‘proper’ method of opening in a new window is, Javascript maybe?
You can use rel=”external” in your anchor and then use the following Javascript:
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(“a”);
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
Much better than any popup window script!
There is no proper way – W3C also thinks HTML doesn’t effect the browsers behavior.
There are indeed a couple of JavaScript workarounds, but no real HTML solution.
This is also because HTML is only intended to be presentational – now how it should behave.
if you’re already using jQuery on your site, then you don’t even need to add the rel attribute. Just drop this into your document.ready block:
$(‘a[href^=”http”]’).click(function(e){
// stop the default action
e.preventDefault();
window.open(link);
});
It looks for any link which begins with an http in the href attribute. Nice and tidy, although I personally think it’s a little silly to have to go to that trouble to open a link in a new window when the target attribute is already there.
The proper method:
Right Click -> Open in New Window
;)
Hit the nail on the head der or maybe ctrl + click on firefox