Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve layout of contacts content #283

Merged
merged 5 commits into from Mar 8, 2017
Merged

Improve layout of contacts content #283

merged 5 commits into from Mar 8, 2017

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Mar 8, 2017

Make contacts more like contacts frontend:

  • Only render phone headings when there are multiple numbers
  • Render telephone numbers in bold so they can be found easily

General improvements:

  • Move description of phone number above the number, this is consistent with postal addresses and works well with existing content. eg Description says when you should use number and what things you'll need when you make the call

On contacts, when many phone numbers are listed, these are presented using h3 titles (h2: Phone, h3: Type of number). Within this “Opening times” and “Best time to call” are presented as h4s.
In a list of numbers the distinction between phone numbers and these h4 headings was being lost, making the list hard to scan.

  • Reduce the visual importance of specific h4s by making them a normal
    font weight. This corrects the visual hierarchy of the content while
    preserving semantics.
  • Add colons to headings to make them more clearly headings, this
    matches contacts-frontend

Screenshots

Live Old frontend New frontend
contact-1-old contact-1-old-gov contact-1-new
contact-2-old No screenshot – errors contact-2-new
contact-3-old contact-3-old-gov contact-3-new
fofr added 5 commits Mar 7, 2017
More info fields are optional and nullable. The field may not exist or
it may be set to null. Handle these gracefully rather than erroring.

See:
https://github.com/alphagov/govuk-content-schemas/blob/master/formats/co
ntact/publisher/details.json
When there is only one number, then the content heading is sufficient
to describe it.
* More closely match contacts-frontend current rendering
* Telephone numbers are often the most searched for info on page
The description, when present, explains what you should use the
telephone number for. It is often short and informative. It tells you
if you have found the right number.

Example for Bereavement helpline: “Call HMRC for help with tax after
someone dies.”
Our standard govspeak styles render h3s and h4s at the same font size,
their only difference is the margin around them.

On contacts, when many phone numbers are listed, these are presented
using h3 titles (h2: Phone, h3: Type of number). Within this “Opening
times” and “Best time to call” are presented as h4s.
In a list of numbers the distinction between phone numbers and these h4
headings is lost, making the list hard to scan.

* Reduce the visual importance of  specific h4s by making them a normal
font weight. This corrects the visual hierarchy of the content while
preserving semantics.
* Add colons to headings to make them more clearly headings, this
matches contacts-frontend
@boffbowsh boffbowsh temporarily deployed to government-frontend-pr-283 Mar 8, 2017 Inactive
@fofr fofr force-pushed the contact-copy-tweaks branch from 0007756 to de8f6a0 Mar 8, 2017
@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Mar 8, 2017

With the second example, are we okay with having the 'Find out about call charges' so far at the bottom?

@fofr
Copy link
Contributor Author

@fofr fofr commented Mar 8, 2017

@nickcolley Any suggestions? It does feel too far down, and I reckon the cost of 0300 numbers is relatively unknown.

@nickcolley
Copy link
Contributor

@nickcolley nickcolley commented Mar 8, 2017

We could consider changing them so they're repeated, but an anchor link? Or just the same as they are now?

@mcgoooo
Copy link
Contributor

@mcgoooo mcgoooo commented Mar 8, 2017

@nickcolley @fofr i have split out the call charges movement into a seperate ticket which can be seen here
https://trello.com/c/Z2cJ7IMs/181-look-at-design-of-call-charges

Copy link
Contributor

@mcgoooo mcgoooo left a comment

:shipit:

@mcgoooo
mcgoooo approved these changes Mar 8, 2017
@mcgoooo mcgoooo merged commit 0770b7b into master Mar 8, 2017
2 checks passed
2 checks passed
continuous-integration/jenkins/branch This commit looks good
Details
security/snyk No new vulnerabilities
Details
@mcgoooo mcgoooo deleted the contact-copy-tweaks branch Mar 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.