Best Practices for Web Maps

These are notes about design guidelines, search enginge optimization (SEO) and best practices (Javascript) for webpages at Geometa Lab.

General Design Guidelines for Geometa Lab Web Pages

Graphic Design Elements

• For page elements use the “official” HSR Colours found here: https://www.hsr.ch/Farben.7715.0.html
• Is a HSR logo in the header of the page it should link to http://www.hsr.ch/Informatik.1155.0.html
• Generally use following font family:

"Helvetica Neue", Arial, Helvetica, sans-serif;

Homepage and Sections

This is a checklist for websites about projects, which are rather about (open and/or crowdsourced) data and services:

• Homepage with buttons to:
  • Github repo
  • Share on Twitter(, Facebook, ...) (Consider two-clicks-share-buttons jQuery code for social share privacy so that we don't give more data to G* & Co. than needed).
  • Feedback
  • Contact
• News Blog(s) page or section
• Terms and Conditions page or section
• Credits, Data and Sources
• FAQ
• About

Design Guidelines for Web Maps

• Switch to OSM!
  • Use e.g. embedded UMap or OSM (iframe).
  • or use Mapbox Maps; (see example here).
• Add a Geographic Name Search

Credentials bei Verwendung von OSM-Karte(n) und -Daten:

• Ev. Version anzeigen: "v0.1" (ohne Anführungszeichen)
• Falls OSM-Daten verwendet werden: "Project data © ODbL" (man beachte den Weblink)
• Falls OSM-Basiskarten verwendet werden: "Map © OpenStreetMap contributors" (man beachte den Weblink)
• "Improve this map" Alternative: "Fix the map" (man beachte den Permalink mit lat/lon/zoom!)
• Etwaige andere Weblink unterdrücken, wie etwa "Leaflet".

Beispiel:

HTML and CSS

Header elements

• Favicon (png can have any name), icon that will be displayed in the browser tabs: an favicon.ico in root is enough. Else use

  <link rel="icon" type="image/png" href="favicon.png"/>

  .
• Sometimes a current IE version is installed, but system settings force it to use legacy document modes. Add following line to your head to make IE use the most current available mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

• With a manifest file you can add properties to your page when it gets “installed” using Chrome on Android, for example a custom home screen icon or displaying the page in full screen mode.

<link rel="manifest" href="manifest.json">

• manifest.json example:

{
  "short_name": "MyPage",
  "name": "My amazing page",

  "icons": [
    {
      "src": "favicon.png",
      "sizes": "144x144",
      "type": "image/png"
    }
    ],

  "start_url": "index.html",
  "display": "standalone"
}

Metadata for Social Media

The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.

• Open Graph protocol (Facebook etc.)

<meta property="og:image" content="http://mypage.com/images/facebook_share.png"/>
<meta property="og:title" content="Do stuff with My App"/>
<meta property="og:url" content="http://MyApp.com/"/>
<meta property="og:site_name" content="My App"/>
<meta property="og:type" content="website"/>

• Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Do stuff with My App">
<meta name="twitter:description" content="You can do lots of fun things with My App">
<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">
<meta name=”twitter:creator" content="@MyTwitterHandle">

Example: http://osm2vectortiles.org/

• Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.