<p>The <a href="https://www.openstreetmap.org/help" rel="nofollow">Getting Help</a> page is currently rather unappealing.</p>
<p>Back in 2014 <a href="https://github.com/openstreetmap/openstreetmap-website/pull/728" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/728/hovercard">we had a PR from @danstowell</a> with suggestions for improvement. Unfortunately the PR had some unresolved questions around the images, and since then more links have been added to the page and the PR is no longer mergeable.</p>
<p>However, I feel like the basic suggestion of moving to what <a href="https://getbootstrap.com/docs/4.3/components/card/" rel="nofollow">Bootstrap describes as "cards"</a> is a valid idea. To test it out further, without having to recreate everything that bootstrap offers, <a href="https://github.com/gravitystorm/openstreetmap-website/commit/d4cf08f837965cde30ee741355cf8c491b921ec3">I crowbarred Bootstrap 4 into the site, and made some mockups</a>.</p>
<h1>Basic cards</h1>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/61391868-f25d5900-a8bd-11e9-8a26-283ded81203e.png"><img src="https://user-images.githubusercontent.com/360803/61391868-f25d5900-a8bd-11e9-8a26-283ded81203e.png" alt="Screenshot from 2019-07-17 17-53-53" style="max-width:100%;"></a></p>
<h1>Cards with URL footers</h1>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/61391870-f25d5900-a8bd-11e9-9ab8-906045de9d83.png"><img src="https://user-images.githubusercontent.com/360803/61391870-f25d5900-a8bd-11e9-9ab8-906045de9d83.png" alt="Screenshot from 2019-07-17 17-54-12" style="max-width:100%;"></a></p>
<h1>Cards with images (and URL footers)</h1>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/61391871-f25d5900-a8bd-11e9-9770-2d3973b1bfba.png"><img src="https://user-images.githubusercontent.com/360803/61391871-f25d5900-a8bd-11e9-9770-2d3973b1bfba.png" alt="Screenshot from 2019-07-17 17-55-18" style="max-width:100%;"></a></p>
<p>I think the overall approach of cards (or something similar) works well. I also experimented with regular lists, and definition lists, without much success.</p>
<p>For the implementation details, we could simply duplicate all the CSS rules from Bootstrap 4 related to the cards. Or we could come up with our own CSS rules that do similar things, but that's outside my own wheelhouse. My preference would be to switch to Bootstrap entirely, and get this kind of thing for free, but that's a much larger topic. So suggestions and advice around this are requested.</p>
<p>Alternatively, other people might have better ideas for sprucing up this page that take a different approach entirely! Again, alternative suggestions would be welcome.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/2321?email_source=notifications&email_token=AAK2OLOXRZ23W7PY446KOYTP75BO5A5CNFSM4IESF7I2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7ZHGVQ">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKW4N4ZFVORDP7SNX3P75BO5ANCNFSM4IESF7IQ">mute the thread</a>.<img src="https://github.com/notifications/beacon/AAK2OLNYWQ5NCARHV6O7DQDP75BO5A5CNFSM4IESF7I2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7ZHGVQ.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/2321?email_source=notifications\u0026email_token=AAK2OLOXRZ23W7PY446KOYTP75BO5A5CNFSM4IESF7I2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7ZHGVQ",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/2321?email_source=notifications\u0026email_token=AAK2OLOXRZ23W7PY446KOYTP75BO5A5CNFSM4IESF7I2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7ZHGVQ",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>