Remove external link styles #293

robinwhittleton · 2016-07-13T14:49:14Z

This removes the styles for external links and their associated icons. It also removes the documentation. Will need discussion before a merge happens.

govuk_frontend_toolkit is potentially removing external link styles in alphagov/govuk_frontend_toolkit#293 . If that happens then we’ll want to remove them from govuk_elements as well.

[govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit) is [potentially removing external link styles](alphagov/govuk_frontend_toolkit#293). If that happens then we’ll want to remove them from govuk_template as well.

joelanman · 2016-07-13T19:23:51Z

I think this issue has two parts:

Is there a user need to know that a link takes them away from gov.uk?
If there is, what is a clear way to meet that need?

I'm not aware of any clear need to know that a link goes away from gov.uk.

In terms of the icon itself, it's ambiguous. The box and arrow icon is commonly used to mean 3 things:

In light of this, the icon is adding noise to the page (cognitive load), and potentially even misleading people as to what will happen. If there really is a need, we need to find a clearer way to meet it.

tombye · 2016-07-14T07:48:48Z

I'd add a few points to that.

do users know they are 'on' www.gov.uk, what does this mean to them and what does leaving it mean?
what information is useful when deciding to click an external link or not and does the visual design provide it?

timpaul · 2016-07-14T07:57:45Z

We should use Hackpad for this discussion: https://designpatterns.hackpad.com/Links-CgBO9L4bF4a

@joelanman - would you take the lead on drafting some guidance? FWIW I think we should at least remove them as a default style, but we need a clear position on linking to external sites to do that.

We'll also need to update the guidance in Elements too

robinwhittleton · 2016-07-14T08:12:33Z

If we remove them as a default style then we’ll want to do the work in static and elements rather than here.

(also the PR in elements does that update @timpaul)

dsingleton · 2016-07-14T10:12:00Z

I think the Content Team will have some good opinions on use and benefit of external links, a lot of external link usage is going to be in managed content.

vipickering · 2016-07-25T11:44:51Z

If it's helpful. Here is a good page with a lot of external links. Removing them would not necessarily be clear to the user they would be navigating away from the website.

https://www.gov.uk/help/browsers

robinwhittleton · 2016-08-09T07:56:16Z

Another example where they aren’t working well inside the design: https://www.gov.uk/government/organisations/rail-accident-investigation-branch#corporate-info has a custom link colour that the icon isn’t matching.

joelanman · 2016-08-23T10:33:01Z

can we merge this? we have no clear user need for them, and they cause formatting issues

edwardhorsford · 2016-08-23T10:42:12Z

I don't think they cause formatting issues, but we have do have bugs relating to them.

If we don't merge this, we should fix the bugs with the display of the icons.

dsingleton · 2016-08-23T11:35:30Z

If we don't merge this, we should fix the bugs with the display of the icons.

Fixing the display bugs is always going to be a case by case thing - or putting in extra complexity to make it work automatically.

From a technical point or view, i'm pro-removing the icons, as it simplifies how we do text in general, and requires less special casing.

To make some progress with this change, how we start by removing it as a default in govuk_template - with a change note explaining how to bring it back if you want it?

It's a much less contentious first change - so doesn't risk people avoiding upgrades - and we can use it to gauge use of external links before removing it entirely?

robinwhittleton · 2016-08-23T12:40:10Z

I’d be happy with that for the time being. Can treat it as a deprecation warning and let it bake for a few months.

Having said that, if design do decide that we just want to drop them completely that’s also fine by me.

edwardhorsford · 2016-08-23T12:42:10Z

If we do depreciate / drop, it would be good if the changelogs put a call out for any services to let us know if this negatively effects them, or if they have any research showing the icons are needed or used.

govuk_frontend_toolkit is potentially removing external link styles in alphagov/govuk_frontend_toolkit#293 . If that happens then we’ll want to remove them from govuk_elements as well.

esr360 · 2016-08-31T13:42:45Z

+1 for removing these - the provided code is not pretty and we always end up using custom implementation of the external link icon anyway.

robinwhittleton · 2016-08-31T15:49:28Z

I’ve just checked the HTML5.1 spec and external isn’t listed as a valid value for rel: https://www.w3.org/TR/html51/links.html#sec-link-types

It appears that we use it to implement the external link microformat, but whether this is actually used by anything that’s not a styling hook is another matter.

NickColley · 2016-08-31T15:57:37Z

robinwhittleton · 2016-09-13T15:17:47Z

A post on digital-service-designers today showed the use of this icon to mean ‘opens in new tab’ (they’d applied it to links in the footer so as not to break flow). Shows they’re sometimes misinterpreted even by designers.

esr360 · 2016-09-15T09:10:38Z

I've always seen this as a "new tab icon". As far as the user is concerned, they probably care more about whether the link they are clicking will take them to a new tab or break their current flow.

robinwhittleton · 2016-09-28T09:46:42Z

This thread on digital-service-design was mostly people +1ing the proposal to remove.

When we went to v2.0.0 of elements a month ago we added a note to the changelog deprecating external links and asking people to get in touch with any findings from user research they’ve taken. As far as I know we haven’t received anything from that.

govuk_frontend_toolkit is potentially removing external link styles in alphagov/govuk_frontend_toolkit#293 . If that happens then we’ll want to remove them from govuk_elements as well.

This release includes two breaking changes: - Removal of external link styles and icons, if you are using the external-link-* mixins you will need to remove them from your codebase ([PR #293](alphagov/govuk_frontend_toolkit#293)) - Correct spelling of the 'accordion' icon, you will need to check for the incorrect spelling 'accordian' and update if you are using this icon ([PR #345](alphagov/govuk_frontend_toolkit#345)) And two minor changes: - Amend GOVUK.StickAtTopWhenScrolling to resize the sticky element and shim when the .js-sticky-resize class is set ([PR #343](alphagov/govuk_frontend_toolkit#343)) - Allow custom options in GOVUK.analytics.trackPageview ([#332](alphagov/govuk_frontend_toolkit#332))

govuk_frontend_toolkit is potentially removing external link styles in alphagov/govuk_frontend_toolkit#293 . If that happens then we’ll want to remove them from govuk_elements as well.

dsingleton · 2016-11-01T12:15:49Z

👏

After static was updated to latest toolkit, the external link image disappeared, breaking the display of external links in apps. * Remove use of mixins no longer provided by toolkit * Remove white external link shim * Remove white external link images Original PR and discussion: alphagov/govuk_frontend_toolkit#293

After static was updated to latest toolkit, the external link styles were removed but some extra styles still remained, breaking the display of external links. alphagov/govuk_frontend_toolkit#293

As part of alphagov/govuk_frontend_toolkit#293 we removed external link icon styles as there is not an obvious user need. However frontend still has spacing with these icons in mind.

- Removed phase-banner scss file as no longer needed Full list of changes: SelectionButtons will add a class to the label with the type of the child input alphagov/govuk_frontend_toolkit#317 Add GOVUK.ShowHideContent JavaScript to support showing and hiding content, toggled by radio buttons and checkboxes alphagov/govuk_frontend_toolkit#315 Fix error in IE - remove trailing comma from shimLinksWithButtonRole JavaScript alphagov/govuk_frontend_toolkit#323 Remove unnecessary print font fallback that causes regression downstream alphagov/govuk_frontend_toolkit#328 Update tooling to use npm script rather than grunt-shell alphagov/govuk_frontend_toolkit#327 For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). alphagov/govuk_frontend_toolkit#329 Lint codebase using standard alphagov/govuk_frontend_toolkit#334 Add semicolons at the start of IIFE's alphagov/govuk_frontend_toolkit#339 Removal of external link styles and icons, if you are using the external-link-* mixins you will need to remove them from your codebase alphagov/govuk_frontend_toolkit#293 Correct spelling of the 'accordion' icon, you will need to check for the incorrect spelling 'accordian' and update if you are using this icon alphagov/govuk_frontend_toolkit#345 Amend GOVUK.StickAtTopWhenScrolling to resize the sticky element and shim when the .js-sticky-resize class is set alphagov/govuk_frontend_toolkit#343 Allow custom options in GOVUK.analytics.trackPageview alphagov/govuk_frontend_toolkit#332 Fix role="button" click shim alphagov/govuk_frontend_toolkit#347 Make font variables lowercase alphagov/govuk_frontend_toolkit#348 Update selection button documentation alphagov/govuk_frontend_toolkit#350 Change colour used in phase tags to govuk-blue alphagov/govuk_frontend_toolkit#353

Having presented the initial version of adding the OS places notice and T&C's to the service, this was then evaluated by the team's content designer and quality analyst. To improve accessibility it was recommended that - 'Terms and Conditions' in the `os_places_terms.html.erb` page was switched from `<p>` to a `<h2>`. To improve the design of the notice it was recommended that - it was moved below the submit button and made visibly distinct from the main content - the text size was reduced - the link to OS places was removed - 'OS' was expanded to 'Ordnance Survey' To improve the design of the terms page it was recommended that - Initial references to Ordinance Survey and Open Government License are postfixed with their acronym (OS) and (OGL) - The link to OS places is removed - 'Terms and Conditions' casing is corrected (lowercase the 'c' in conditions) Finally where we still have links the `rel` attribute was removed along with the use of '(opens in a window)' in the displayed text. GDS have deprecated this behaviour so it is no longer needed here. You can read more at alphagov/govuk_frontend_toolkit#293.

This has been removed from the govuk_frontend_toolkit so it was breaking our imports. Just going to remove them entirely. Removing external links in the govuk_frontend_toolkit: alphagov/govuk_frontend_toolkit#293

The external link icon, and associated mixin, were deprecated in alphagov/govuk_frontend_toolkit#293 This means we can’t and shouldn’t use them any more.

Remove external link styles

5bb4a01

This removes the styles for external links and their associated icons. It also removes the documentation. Will need discussion before a merge happens.

robinwhittleton mentioned this pull request Jul 13, 2016

Remove external link styles alphagov/govuk_elements#274

Merged

robinwhittleton mentioned this pull request Jul 13, 2016

Remove external link styles alphagov/govuk_template#231

Merged

selfthinker mentioned this pull request Aug 31, 2016

External link icon for larger font sizes #90

Closed

robinwhittleton changed the title ~~Remove external link styles [DISCUSS BEFORE MERGE]~~ Remove external link styles Oct 25, 2016

gemmaleigh approved these changes Oct 25, 2016

View reviewed changes

gemmaleigh merged commit a3fe44e into master Oct 25, 2016

robinwhittleton deleted the remove-external-link-styles branch October 25, 2016 09:41

gemmaleigh mentioned this pull request Oct 25, 2016

v5.0.0 #346

Merged

NickColley mentioned this pull request Nov 17, 2016

Remove deprecated rel="external" styling alphagov/frontend#1049

Merged

fofr mentioned this pull request Nov 18, 2016

Remove external link styles alphagov/whitehall#2839

Merged

fofr mentioned this pull request Nov 18, 2016

Remove external link styles alphagov/finder-frontend#260

Merged

Guntrisoft mentioned this pull request Dec 2, 2016

Upgrade frontend toolkit to version 5.0.2 guidance-guarantee-programme/pension_guidance#700

Merged

tombye mentioned this pull request Feb 10, 2017

Amend publish script alphagov/govuk_frontend_toolkit_npm#15

Closed

quis added a commit to alphagov/notifications-admin that referenced this pull request Apr 10, 2017

Remove external link styling

31d03ac

The external link icon, and associated mixin, were deprecated in alphagov/govuk_frontend_toolkit#293 This means we can’t and shouldn’t use them any more.

TheDoubleK mentioned this pull request May 18, 2017

Free trial link in meta section of service page Crown-Commercial-Service/digitalmarketplace-buyer-frontend#510

Merged

thisisdano mentioned this pull request Oct 23, 2017

[External links]: Add documentation for external links uswds/uswds#1322

Closed

puzumaki mentioned this pull request Nov 5, 2019

Perform analysis on external link method and style UMNLibraries/design-system#13

Open

oldLady344 mentioned this pull request Oct 18, 2020

文档站的外部链接支持在后面显示 icon，提示前往外部站点 yikeke/zh-style-guide#6

Closed

emsaiz mentioned this pull request Sep 5, 2024

External Link - Icon & New Tab debate OER-WEB-TEAM/design-system--drupal-theme#73

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove external link styles #293

Remove external link styles #293

robinwhittleton commented Jul 13, 2016

joelanman commented Jul 13, 2016

tombye commented Jul 14, 2016

timpaul commented Jul 14, 2016 •

edited

Loading

robinwhittleton commented Jul 14, 2016

dsingleton commented Jul 14, 2016

vipickering commented Jul 25, 2016 •

edited

Loading

robinwhittleton commented Aug 9, 2016

joelanman commented Aug 23, 2016

edwardhorsford commented Aug 23, 2016

dsingleton commented Aug 23, 2016

robinwhittleton commented Aug 23, 2016

edwardhorsford commented Aug 23, 2016

esr360 commented Aug 31, 2016

robinwhittleton commented Aug 31, 2016 •

edited

Loading

NickColley commented Aug 31, 2016 •

edited

Loading

robinwhittleton commented Sep 13, 2016

esr360 commented Sep 15, 2016

robinwhittleton commented Sep 28, 2016

dsingleton commented Nov 1, 2016

Remove external link styles #293

Remove external link styles #293

Conversation

robinwhittleton commented Jul 13, 2016

joelanman commented Jul 13, 2016

tombye commented Jul 14, 2016

timpaul commented Jul 14, 2016 • edited Loading

robinwhittleton commented Jul 14, 2016

dsingleton commented Jul 14, 2016

vipickering commented Jul 25, 2016 • edited Loading

robinwhittleton commented Aug 9, 2016

joelanman commented Aug 23, 2016

edwardhorsford commented Aug 23, 2016

dsingleton commented Aug 23, 2016

robinwhittleton commented Aug 23, 2016

edwardhorsford commented Aug 23, 2016

esr360 commented Aug 31, 2016

robinwhittleton commented Aug 31, 2016 • edited Loading

NickColley commented Aug 31, 2016 • edited Loading

robinwhittleton commented Sep 13, 2016

esr360 commented Sep 15, 2016

robinwhittleton commented Sep 28, 2016

dsingleton commented Nov 1, 2016

timpaul commented Jul 14, 2016 •

edited

Loading

vipickering commented Jul 25, 2016 •

edited

Loading

robinwhittleton commented Aug 31, 2016 •

edited

Loading

NickColley commented Aug 31, 2016 •

edited

Loading