Skip to content

Commit

Permalink
Run prettier --write
Browse files Browse the repository at this point in the history
  • Loading branch information
colinrotherham committed Sep 28, 2023
1 parent 1c00522 commit 530b8ef
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 47 deletions.
10 changes: 7 additions & 3 deletions docs/contributing/adding-images-to-the-wesite.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
# Adding images to the design system website

If you are adding or amending guidance on the design system website and need to include an image, you must consider the impact on the user. If used improperly, images can have implications for web performance and accessibility.

Before reading this guidance you should also consult our [image guidance](https://design-system.service.gov.uk/styles/images/) for details on when it's appropriate to use images and how best to use them.

## Decide if your content needs images

We always try to avoid adding new images to our content. You should only add images if they are the only way to convey information.

In styles, components and patterns, use code examples to convey what our styles, components and patterns will look like. Avoid using screenshots of styles, components and patterns wherever possible.

## Use an SVG file if possible

Use an SVG file when you’re adding a simple graphic or table to the design system website (rather than a photo or screenshot). An SVG file is usually the best format as it allows the image to scale without loss of detail across different screen sizes and is less likely to impact page performance.

Keep your graphic or table as simple as possible by limiting the number of elements and shapes. This helps to keep the file size and rendering work from the browser as low as possible. Using a compression service, such as [SVGOMG](https://jakearchibald.github.io/svgomg/), will also help bring that file size down for optimal performance.

## Ensure your image is an appropriate file size

When it is not possible to use an SVG file for your image, and you're using a raster file type, such as PNG or JPEG, make sure the file size is not too large to avoid impacting the performance of the website.

The simplest way to avoid this is to compress your images. There are numerous compression tools such as [ImageOptim](https://imageoptim.com/mac) which can handle this for you.

Another good practice is to make sure your image has the appropriate dimensions to stop any blurring or pixelating, which would make an image hard to interpret. As a general guide, you should make your image's intrinsic size (its 'actual' size) double that of it's maximum width on the page.

For example, you know the:
For example, you know the:

- image is in a width container or column on a page
- maximum size of your image (taking into account different screen sizes) is 500 pixels
- 500 pixel image will need a width of 1000px
- 500 pixel image will need a width of 1000px

This increase in pixels will help stop any blurriness when using HiDPI (High Dots Per Inch) displays, such as retina display macs. There are numerous tools for resizing images, such as within macOS's own image viewer.

While both of these techniques are important, you should be aware that a properly compressed image that's too wide will be better than a poorly compressed image that's the "correct" width.

## Make sure your image has the correct markup to improve web performance

If you have direct control over the markup of your image, for example you can directly edit the `img` tag which is rendering your image, consider including the following:

- [Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading): For images that would not be in the viewport when the page loads, lazy loading will let the browser defer their loading when actually needed.
- [The `figure` tag around your image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
- [Responsive image features such as the `srcset` and `sizes` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images): For images whose width vary a lot with viewport size (full width images or those in the main column of content), providing versions of the image at different width and using the `srcset` (possibly complemented by the`sizes` attribute) will let browsers load smaller files. This requires generating each size of the image, though.
- [The `picture` tag for providing multiple formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture): For images where a more modern format (eg. WEBP) has a smaller file size then its original one (eg. JPEG) you can provide both sources to the browser with the `<picture>` element, which will download the newer one if it supports it. This requires generating both version of the image, though.

84 changes: 42 additions & 42 deletions src/code-of-conduct.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,70 +5,70 @@ layout: layout-single-page-prose.njk
---

<span class="govuk-caption-xl">Design System Day 2023</span>

<h1 class="govuk-heading-xl">Code of Conduct</h1>

In order to establish and maintain an inclusive environment we ask attendees, volunteers, speakers, facilitators and organisers to agree to the following code of conduct.

* Have respect for all fellow participants. We should all create a harassment-free event for everyone regardless of gender, age, sexual identity, disability, physical appearance, body size, race, ethnicity, religion or belief. Harassment will not be tolerated in any form.
- Have respect for all fellow participants. We should all create a harassment-free event for everyone regardless of gender, age, sexual identity, disability, physical appearance, body size, race, ethnicity, religion or belief. Harassment will not be tolerated in any form.

* Expect people to prefer different ways of communicating on a video conference, such as turning off their video or using chat instead of speaking.
- Expect people to prefer different ways of communicating on a video conference, such as turning off their video or using chat instead of speaking.

* Help create a safe and welcoming environment. We can do this by being open to diverse points of view, by inviting other people to join and by keeping things people share confidential if they specify it.
- Help create a safe and welcoming environment. We can do this by being open to diverse points of view, by inviting other people to join and by keeping things people share confidential if they specify it.

* Do not assume everyone has the same context. Encourage questions.
- Do not assume everyone has the same context. Encourage questions.

* Listen to others, and ensure that all activities are respectful, participatory, and productive.
- Listen to others, and ensure that all activities are respectful, participatory, and productive.

* Consider your environment and minimise loud noises. Have empathy for others in different situations who may not be able to control their environment. Please mute your microphone when entering a session unless you want to contribute.
- Consider your environment and minimise loud noises. Have empathy for others in different situations who may not be able to control their environment. Please mute your microphone when entering a session unless you want to contribute.

* Provide constructive, helpful feedback rather than criticising. You can [download a poster on giving feedback](https://github.com/alphagov/govdesign/blob/master/Poster_GivingAskingReceivingFeedback.pdf) for tips.
- Provide constructive, helpful feedback rather than criticising. You can [download a poster on giving feedback](https://github.com/alphagov/govdesign/blob/master/Poster_GivingAskingReceivingFeedback.pdf) for tips.

* Stay on topic as we only have a limited amount of time. If a conversation goes off topic we may ask you to hold off on the conversation until a more suitable time.
- Stay on topic as we only have a limited amount of time. If a conversation goes off topic we may ask you to hold off on the conversation until a more suitable time.

* Be present – please try to make the most of the event. Engage with discussions and workshops as much as you feel comfortable. We want everyone to learn from others and meet people working on similar challenges. If you’re unable to attend, please cancel your ticket as soon as possible so people on the waitlist can attend.
- Be present – please try to make the most of the event. Engage with discussions and workshops as much as you feel comfortable. We want everyone to learn from others and meet people working on similar challenges. If you’re unable to attend, please cancel your ticket as soon as possible so people on the waitlist can attend.

* Attendees should not record video or take photographs of sessions run unless specified by session runners. You can take screenshots of presentation slides for personal use or shared within a government context unless stated otherwise by the session runners.
- Attendees should not record video or take photographs of sessions run unless specified by session runners. You can take screenshots of presentation slides for personal use or shared within a government context unless stated otherwise by the session runners.

* Be considerate of what you share on social media. Do not share any content, insights or links from sessions without the explicit permission of the session runners.
- Be considerate of what you share on social media. Do not share any content, insights or links from sessions without the explicit permission of the session runners.

The event organisers reserve the right to ask anyone in violation of these policies to not participate in further activities.
The event organisers reserve the right to ask anyone in violation of these policies to not participate in further activities.

Organisers will reinforce this code throughout event engagements. If you have any concerns, contact any of our organisers immediately. Organisers can be contacted:
Organisers will reinforce this code throughout event engagements. If you have any concerns, contact any of our organisers immediately. Organisers can be contacted:

* in person on day 1; they will be wearing a Design System Day t-shirt
* by direct message in Hopin on day 2; they will have Organiser or Moderator next to their name
- in person on day 1; they will be wearing a Design System Day t-shirt
- by direct message in Hopin on day 2; they will have Organiser or Moderator next to their name

Alternatively you can [email the Design System Day inbox](mailto:design-system-day-enquiries@digital.cabinet-office.gov.uk) and a member of the team will get back to you.
Alternatively you can [email the Design System Day inbox](mailto:design-system-day-enquiries@digital.cabinet-office.gov.uk) and a member of the team will get back to you.

List of organisers:
List of organisers:

* Antoni Devlin
* Bee Butler
* Brett Kyle
* Calvin Lau
* Charlotte Downs
* Chris Ballantine-Thomas
* Ciandelle Hughes
* Claire Ashworth
* David Cox
* Dinesh Gnanachchelvam
* Imran Hussain
* Izabela Podralska
* Kara Kane
* Katrina Birch
* Kelly Lee
* Kim 'beeps' Grey
* Mia Allers
* Nora Brodian
* Oliver Byford
* Owen Jones
* Romaric Pascal
* Steve Messer
* Tallulah Jackson-Marriott
- Antoni Devlin
- Bee Butler
- Brett Kyle
- Calvin Lau
- Charlotte Downs
- Chris Ballantine-Thomas
- Ciandelle Hughes
- Claire Ashworth
- David Cox
- Dinesh Gnanachchelvam
- Imran Hussain
- Izabela Podralska
- Kara Kane
- Katrina Birch
- Kelly Lee
- Kim 'beeps' Grey
- Mia Allers
- Nora Brodian
- Oliver Byford
- Owen Jones
- Romaric Pascal
- Steve Messer
- Tallulah Jackson-Marriott

(These guidelines are adapted from the [Practical Service Design](http://www.practicalservicedesign.com/getting-started-on-slack/) community guidelines, [Afrotech Fest](https://www.afrotechfest.co.uk/coc/), [Code for America](http://www.cvent.com/events/code-for-america-summit-2018/custom-40-e12d85b157b94d69b80d8911cc641d36.aspx), [UKGovcamp](https://www.ukgovcamp.com/code-of-conduct/), and [Services Week 2021](https://docs.google.com/document/d/1vQchJh-s6Fu6F4bN8UFM4lvRChe8ERgsE5whf9pUfjA/edit?usp=sharing) codes of conduct.)


---

Last updated: 21 September 2023
Last updated: 21 September 2023
2 changes: 1 addition & 1 deletion src/community/call-for-speakers-2023/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ layout: layout-archived.njk
ignoreInSitemap: true
---

To find out more about Design System Day, see the [Design System Day](/community/design-system-day/) page.
To find out more about Design System Day, see the [Design System Day](/community/design-system-day/) page.
2 changes: 1 addition & 1 deletion src/community/design-system-day/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ We'll also be hosting get-togethers and after-parties for people attending the E

The first day will be hosted in Dynamic Earth, Edinburgh. The second day will be online-only.

As ever, we want the conference to be a community-driven event, so all talks, workshops and sessions have been suggested by the community.
As ever, we want the conference to be a community-driven event, so all talks, workshops and sessions have been suggested by the community.

We'll be covering topics such as

Expand Down

0 comments on commit 530b8ef

Please sign in to comment.