Think mobile first, and don't assume all users have ready access to desktop or laptop computers. Be aware that your users may only have Internet access via phones or other mobile devices. In fact, as of 2013:
"34% of cell internet users go online mostly using their phones, and not using some other device such as a desktop or laptop computer." -Pew Research Center
Keep mobile users in mind when building accessible maps! Consider things like: element sizes, load time, simple look and feel, navigation experience, etc.
In your HTML you can insert a meta name="viewport" tag that changes the view of your website no matter the size of their browser (desktop or mobile).
For example, with Leaflet:
<!DOCTYPE html>
<html>
<head>
<!-- Viewport for all browser sizes, including mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Map Title</title>
<!-- CSS styling -->
<style>
html, body, #map-container {
height: 100%;
width: 100%;
overflow: hidden;
}
#map {
width: auto;
height: 100%;
}
</style>
</head>
<body>
<!-- Map container to ensure the map takes up 100% of the width and height in the browser -->
<div id="map-container">
<!-- The map div, where the map resides -->
<div id="map"></div>
</div>
</body>
</html>Also, don't ever set your map's div to be at 100% width, or mobile users often can't scroll to any content below the map! Especially be careful when using Bootstrap that it doesn't kick the map into a div with 100% width and lock users into "map nav prison".
The @media rule is used to define different style rules for different media types/devices.
For example:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}In this example when the viewport, or screen size, is 480 pixels wide or larger, change the background-color to light green. Otherwise if the viewport is smaller than 480 pixels in width the <body>'s background-color will be unchanged.
At first designing an application to work on mobile devices seems overwhelming, but in time it can be really fun!
You can turn off particular functionality, add in structure/organization, or even change CSS styling to enhance a user's experience while viewing in mobile (Remember the KISS principle)!
For example, check out the leaflet-sidebar GitHub repo, which lets you customize sidebar interactions based on a user's screen size. Using this model, a desktop user would experience the following:
While a mobile user would experience the following:
Return to the Best Practices homepage.