Redesign learnosm.org

[jueyang]

@wonderchook cc/ @lxbarth

Hi Kate,

I worked with @lxbarth to redesign the layout and information architecture for learnOSM.org. The goals of the redesign are to

• accomodate new content for users at different skill levels
• turn existing workshop information into more versatile learning/teaching materials

Navigation

With the goals in mind, I've introduced new navigations to both the home page and the guides. The home page features more defined navigation buttons for different user scenarios. A search box allows the user to get straight to the guide section that has the answer. As new guides and translations become available, they will be added to the language and "our guides" links.

The "common questions" captures most introductory materials to OSM and will link to the respective sections of the guide in the answers.

Smaller batches of information

I've added a menu to each guide so that information can be easily accessed. Using the existing subtitles as navigation links, the users can expand the menu and navigate to the section to their interest. Each chapter will still be on one page, with the subtitles as anchors. So when users click on the link, they navigate to the anchor within that page.

With a collapsible menu, OSM wiki links can be added to specific sections as "further reading" rather than a general link. Videos can also be attached to their corresponding title.

Branding

The new design emphasizes the connection between learnOSM.org and openstreetmap.org by using

• a new logo for learnOSM.org
• existing color palette, especially the green, from openstreetmap.org

Feedback mechanisms

I've clarified different feedback mechanisms by incorporating email, twitter as well as a "contribute" page in the site.

By clicking "contribute to this site," the users will arrive at a page that includes information to

• add new materials
• improve the site build

Since the site is hosted on github, it will be easy for the user to add all sorts of content.

Next actions

Let's start a conversation. Please feel free to give me some feedback.

[MappingKat]

Looks good. I just have two questions: where would the intermediate and advanced guide links be placed? and where would the guides be available in pdf or e-reader format?

[lxbarth]

Hey @MappingKat - great questions

where would the intermediate and advanced guide links be placed?

We'd add them in the list of guides top right and as large featured buttons. Once intermediate and advanced are there, we should advertise them as three large designed buttons in center, leaving QGis and trainer materials simply referenced in the header.

where would the guides be available in pdf or e-reader format?

On the landing pages of each guide.

[harry-wood]

Looks good guys! A little bit of developmentseed graphics design goes a long way!

I guess kate wanted to make sure the PDF downloads were quite prominent. On the current site design they're big thumbnail links on the right.

Actually a problem with the current design I think, is that a visitor can easily fail to realise that all the content is available as linkable text on the web (if they don't spot the menu drop-downs at the top, and go straight for the PDF downloads)

It looks like you're proposing to relegate the PDFs a little bit. "on the landing pages of each guide". As a compromise maybe they still should be above the fold somewhere though, and still biggish thumbnail images.

[emirhartato]

Hello, I want to add one more thing for the pdf, as you can see, pdf file
on learnosm is big enough (15mb) well maybe not too big for us who has good
internet access. The problem comes from remote area who has limited
bandwidth.

And since most of our partners in Indonesia want more screenshots for
advance and intermediate, I assume the size will be bigger than beginning.
And it will be devastating for people who want to download specific
chapters but they have to download in full size.

So...

1.Is there any idea how to make the pdf in small size but still looks good
when we print it?

1. How about we make a download page and we made them into parts
   (chapters)? plus we would also include the full one for people who has good
   internet. For better advertisement, we can make banner or thumbnails on
   front page.
   On Sep 13, 2012 7:03 AM, "harry-wood" [email protected] wrote:

Looks good guys! A little bit of developmentseed graphics design goes a
long way!

I guess kate wanted to make sure the PDF downloads were quite prominent.
On the current site design they're big thumbnail links on the right.

[image: learnosmscreenshot]https://a248.e.akamai.net/camo.github.com/ccb15adb5331e379c7819d8af8a3ab53092b3a37/687474703a2f2f77696b692e6f70656e7374726565746d61702e6f72672f772f696d616765732f7468756d622f652f65392f4c6561726e4f534d5f73637265656e73686f742e706e672f34303070782d4c6561726e4f534d5f73637265656e73686f742e706e67

Actually a problem with the current design I think, is that a visitor can
easily fail to realise that all the content is available as linkable text
on the web (if they don't spot the menu drop-downs at the top, and go
straight for the PDF downloads)

It looks like you're proposing to relegate the PDFs a little bit. "on the
landing pages of each guide". As a compromise maybe they still should be
above the fold somewhere though, and still biggish thumbnail images.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-8514395.

[mikelmaron]

If the content of the site is all managed through github (will it be?) then that would help solve the problem of how to easily collaborate on improvements to the content. I've been sitting on a few things for a while (http://www.mapkibera.org/blog/2012/04/02/map-kibera-mapping-manuals/)

[lxbarth]

If the content of the site is all managed through github (will it be?)

That's the idea, yes. Details need to be ironed out. E. g. - will the site be Jekyll, and how exactly will translation workflow work?

[lxbarth]

Actually a problem with the current design I think, is that a visitor can easily fail to realise that all the content is available as linkable text on the web (if they don't spot the menu drop-downs at the top, and go straight for the PDF downloads)

It looks like you're proposing to relegate the PDFs a little bit. "on the landing pages of each guide". As a compromise maybe they still should be above the fold somewhere though, and still biggish thumbnail images.

So, I talked to Kate about those PDF's and she's said they're important in the context of specific trainings where specifically at workshops in Indonesia people prefer to have a PDF at hand, printed or otherwise.

Here's what I'm thinking: Exactly to address the problem of the now ambiguous navigation you brought up, we promote only one content format in the navigation: the HTML content. PDF's are available once a user landed on a guide. For instance:

• Nice and prominent on the landing page of a guide with a thumbnail ("This guide is also available as a PDF").
• Smaller on each guide page.

[lxbarth]

Hello, I want to add one more thing for the pdf, as you can see, pdf file
on learnosm is big enough (15mb) well maybe not too big for us who has good
internet access.

We were also thinking of just doing print friendly stylesheets. This way you could easily print chapter by chapter. It's harder though to print entire reports like that (although absolutely possible). Right now I presume you have some serious duplicate work w/ feeding the site and formatting a PDF.

Sequentially, we could launch with existing PDF's and per-chapter print-friendly (quick and cheap to do). Then you can adjust your editorial workflow and go HTML-only with print-friendly - if this makes sense.

[wonderchook]

Design looks great to me!

[MappingKat]

In reviewing the design again, I was wondering how much traffic is expected to be for OSM trainers? Do we think there will be many people using the site for the training materials or will it mainly be new users who want to learn OSM. Does anyone have an idea of what type of traffic it will be?

If it is the latter, then maybe a support link should be one of the main buttons and the trainer material should be off to the side. But, if there will be a large crowd of trainers using the site then it looks good the way it is.

Also, because I love colors I wouldn't mind seeing a faded (very faded) snip-it of OSM in the background. Preferably on the top banner (where the learnOSM logo is).

[lxbarth]

If it is the latter, then maybe a support link should be one of the main buttons and the trainer material should be off to the side. But, if there will be a large crowd of trainers using the site then it looks good the way it is.

I'd say let's run as-is, review later with real traffic numbers. I lean strongly towards keeping the trainer button prominent as it's not just a link of convenience for a to-be-justified portion of visitors but it advertises learnosm.org as training material.

Also, because I love colors I wouldn't mind seeing a faded (very faded) snip-it of OSM in the background.

What's a snip-it of OSM? Like the map?

[wonderchook]

Yeah, I think we should aim it to be training materials. I don't want LearnOSM to be the main source of OSM support. Ideally people should be learning from it. We could maybe point them to help.openstreetmap.org. Or another suggested OSM support venue.

I talked to @MappingKat, don't think the design needs it right now. Good to have lots of whitespace.

[mikelmaron]

LearnOSM could be the best site for documentation about using and teaching OSM. The trainer materials don't need to be as prominent, sure, but I think we should make effort to develop some teaching guides, not only learning guides.

[wonderchook]

@mikelmaron when I say training materials I really mean documentation. Versus us appearing like a support site for OpenStreetMap.

[lxbarth]

Agreed on the learning material focus. LearnOSM.org is the place you go if you're looking for an end to end resource for learning OSM - or teaching it, which is really just the flip side of the same. That's the distinguishing factor to help.osm.org (= support) and wiki.osm.org (= 'documentation').

Good call on linking off to help.openstreetmap.org @jueyang - let's find a neat spot for that, maybe footer.

[mikelmaron]

btw, we could ask for learn.osm.org domain, if desired

Mikel

-------- Original message --------
Subject: Re: [learnosm] Redesign learnosm.org (#1)
From: Alex Barth [email protected]
To: hotosm/learnosm [email protected]
CC: Mikel Maron [email protected]

Agreed on the learning material focus. LearnOSM.org is the place you go if you're looking for an end to end resource for learning OSM - or teaching it, which is really just the flip side of the same. That's the distinguishing factor to help.osm.org (= support) and wiki.osm.org (= 'documentation').

Good call on linking off to help.openstreetmap.org @jueyang - let's find a neat spot for that, maybe footer.

—
Reply to this email directly or view it on GitHub.

[katpatuka]

One could also register a teachosm.org to emphasize teaching purposes.

Roman

Agreed on the learning material focus. LearnOSM.org is the place you go
if you're looking for an end to end resource for learning OSM - or
teaching it, which is really just the flip side of the same. That's the
distinguishing factor to help.osm.org (= support) and wiki.osm.org (=
'documentation').

Good call on linking off to help.openstreetmap.org @jueyang - let's find
a neat spot for that, maybe footer.

[lxbarth]

Quick update: while we are in a bit of a hold up as @jueyang is busy with other work, we are fully planning on moving on this design.

[jueyang]

Hi all,

I've implemented the new site design which is live on gh-pages. Check out http://hotosm.github.com/learnosm

A recap of changes:

Clarified Navigation

• Users can access the guides via the top-right nav as well as the splash buttons on the homepage. FAQ links will link to specific titles in a guide.
• Each guide has a cover page that gives the user an overview of the guide. The link to training guides will appear on each cover page. link
• The contribute-to-the-site "button" is more obvious now.

Linkable titles

• All the existing titles are converted into linkable hashes, making it easy to point to specific sections within a chapter. In this way the user can click on the title, copy the url and share it. It's also easy for the user to print the whole chapter. For example: http://hotosm.github.com/learnosm/en/beginner/gps/#turn-on-the-gps

More readable information hierarchy

• I've made a few css rules to make sure the md files will turn into clear, legible documents. @mvexel You might want to take a look at this since you are taking over the md conversions. Migrate all content to markdown #10
• Please refer to https://github.com/hotosm/learnosm/blob/gh-pages/style.css#L45

Tidy images

I've changed the images into thumbnails (enlarged on click) to keep the layout simple and unified. (Sorry about the bugs. I'll fix them rather soon.)

---

Next actions

For Jue:

• I will continue to refine the graphics through out the site. This includes one image for each of the splash buttons on the frontpage, the image for the training guide box, and the hand.
• I will look into the thumbnail bugs.

Other actions @mvexel @lxbarth (who else?)

Format content

One problem I've noticed is that, in the current documentations paragraphs (no bullet) and lists (bullet points) are being used interchangably in the documentation. It'd be nice if <p> and <li> are distinguished for different types of content.

Image editing (who can take a look over images)

I've noticed a few extra-large images. It'd be great if all the images/screenshots have a width less than 600px.

[lxbarth]

@jueyang - sounds great. Can you capture remaining tasks on issue tracker where appropriate and close here? I will do a review of the current status and open separate tickets.

[jueyang]

Moved all remaining tasks to #12. Closing here

[MappingKat]

Yea, sorry about the format content. Jeff and I should have clarified that
earlier. I think we were too overwhelmed with all of the information... I
think that for steps or directions in the guide we should have numbers.
Bullets should be used for descriptors. It's difficult because in some
cases we bullet points and in others we write paragraphs.

This issue is also true with the slideshows.

Can we get a volunteer to reformat them and check for spelling errors?

I will pay them with gratitude and a shoutout in a blog post... (just
saying that the blog post on Joseph Reeves is no. 2 for the month on HOT's
website... essentially this volunteer would gain world wide domination... I
mean internet fame....)

Cheers,

Katrina E.
On Dec 21, 2012 6:07 AM, "Jue Yang" [email protected] wrote:

Hi all,

I've implemented the new site design which is live on gh-pages. Check out
http://hotosm.github.com/learnosm

A recap of changes:
Clarified Navigation

Users can access the guides via the top-right nav as well as the
splash buttons on the homepage. FAQ links will link to specific titles in a
guide.

Each guide has a cover page that gives the user an overview of the
guide. The link to training guides will appear on each cover page. linkhttp://hotosm.github.com/learnosm/en/beginner/

The contribute-to-the-site "button" is more obvious now.

Linkable titles

• All the existing titles are converted into linkable hashes, making
  it easy to point to specific sections within a chapter. In this way the
  user can click on the title, copy the url and share it. It's also easy for
  the user to print the whole chapter. For example:
  http://hotosm.github.com/learnosm/en/beginner/gps/#turn-on-the-gps

More readable information hierarchy

I've made a few css rules to make sure the md files will turn into
clear, legible documents. @mvexel https://github.com/mvexel You
might want to take a look at this since you are taking over the md
conversions. #10 #10

Please refer to
https://github.com/hotosm/learnosm/blob/gh-pages/style.css#L45

Tidy images

I've changed the images into thumbnails (enlarged on click) to keep the
layout simple and unified. *(Sorry about the bugs. I'll fix them rather

soon.)*

Next actions

For Jue:

I will continue to refine the graphics through out the site. This
includes one image for each of the splash buttons on the frontpage, the
image for the training guide box, and the hand.

I will look into the thumbnail bugs.

Other actions @mvexel https://github.com/mvexel @lxbarthhttps://github.com/lxbarth(who else?)
Format content

One problem I've noticed is that, in the current documentations paragraphs
(no bullet) and lists (bullet points) are being used interchangably in the
documentation. It'd be nice if

and

are distinguished for
different types of content.
Image editing (who can take a look over images)

I've noticed a few extra-large images. It'd be great if all the
images/screenshots have a width less than 600px.

—
Reply to this email directly or view it on GitHubhttps://github.com/Redesign learnosm.org #1#issuecomment-11596322.

[lxbarth]

@MappingKat - just opened a new ticket on content formatting #15