29:null 2a:["$","title",null,{"children":"Responsive notebook design | Tom MacWright | Observable"}] 2f:T664,md`# Responsive notebook design

Let’s review a few best practices for making your notebooks work great on all sorts of media not just desktops. Thankfully, Observable has some conveniences that make cross-platform usability a bit easier, and there are a few other hot tips to follow. The gist is: 1. For images, set \`width:100%;max-width:640px\` (or your desired width) as a style attribute. 2. Use the magical width variable when you can for other visualizations. 3. If you need to set a fixed width for a Canvas or SVG element, add max-width and height rules to it. I’ve also included some bonus tips for responsive images and responsive charts at the end! ## 1. Good image size defaults See the header above for an example: its code is: \`\`\`html

\`\`\` This lets it squeeze down to a smaller size on tiny devices, but occupy a nice slice of screen real estate on big monitors. ## 2. Using width The [Observable standard library](https://beta.observablehq.com/@mbostock/standard-library) includes an incredibly useful variable: width. It’s not just a shortcut for _window_.innerWidth: it’s a reactive variable that updates as the page resizes! Using it is highly recommended if you have a notebook with some variable-width element. For instance, here’s a nice sine wave that adjusts to fit the width of the page. Because it relies on width, it resizes nicely and automatically.`30:T6f0,md`--- _Bonus tips_ ## Responsive images If you really want to go all-out with a responsive notebook, you can make your images responsive, with the [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) attribute, or the picture element. This lets you define multiple sources for an image, depending on screen width and screen pixel density - so, retina images for retina screens, non-retina for old-fashined screens. If you want multiple resolutions of the same image, use srcset - otherwise, use picture. Here’s an example of using a picture element: this will be my drawing of a pink spaceship on big monitors, and an image of a yellow spaceship on monitors less than 640 pixels wide. \`\`\`html

\`\`\`

And here's an example of a srcset: this image will use a large source image on a retina screen, and a smaller one on a non-retina screen: \`\`\`html

\`\`\`

`31:[] 2d:{"id":"e59dba0ac1d1eb2d","slug":"responsive-notebook-design-protips","title":"Responsive notebook design","thumbnail":"e753d97c251dc2a67bb0cdd4c423c70b899ff09de0b6b3f134f5b3083dcf7d76","access_level":"public","create_time":"$D2018-02-13T23:45:01.363Z","update_time":"$D2018-02-14T04:26:51.187Z","view_time":null,"first_public_time":"$D2018-02-14T00:41:15.895Z","has_unpublished_edits":null,"fork":false,"stars":64,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":249,"publish_version":249,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"title":"Responsive notebook design","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const ctx = DOM.context2d(width, 100);\n ctx.strokeStyle = '#459';\n while (true) {\n ctx.clearRect(0, 0, width, 100);\n ctx.beginPath();\n for (let i = 0; i < width; i += 2) {\n ctx[i ? 'lineTo' : 'moveTo'](i, 50 + Math.sin((Date.now() / 2000) + i / 20) * 20);\n }\n ctx.stroke();\n yield ctx.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`If you don’t want something to be full-width, but instead want some _known_ width that has a maximum, use Math.min with width and whatever minimum you want to enforce.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"{\n const myWidth = Math.min(640, width);\n const ctx = DOM.context2d(myWidth, 100);\n ctx.strokeStyle = '#959';\n while (true) {\n ctx.clearRect(0, 0, myWidth, 100);\n ctx.beginPath();\n for (let i = 0; i < myWidth; i += 2) {\n ctx[i ? 'lineTo' : 'moveTo'](i, 50 +\n Math.cos((Date.now() / 2000) - i / 5) *\n Math.cos((Date.now() / 2000) - i / 20) * 20);\n }\n ctx.stroke();\n yield ctx.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## 3. Handling elements with fixed widths\n\nLet’s say you want your element to be some specific fixed width. A lot of times that’s super convenient — that way you can guarantee that it some some property, like it’s a power-of-2 width, or it's the same size as an image you want to draw into it with drawImage. Even in this case, you can make your notebook responsive-by-default by using a suitable style property.\n\nBecause the DOM.svg library method sets the SVG’s [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox), elements inside of an SVG scale smoothly.\n\nThe key lines below are these: setting the max-width & height of the SVG element.\n\n\\`\\`\\`js\n.style('max-width', '100%')\n.style('height', 'auto');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n const height = 500;\n const svg = d3.select(DOM.svg(1024, height))\n .style('max-width', '100%')\n .style('height', 'auto');\n svg.append('rect')\n .attr('fill', '#E93223')\n .attr('transform', 'translate(50, 50)')\n .attr('width', 1024 - 100)\n .attr('height', height - 100);\n svg.append('text')\n .attr('transform', 'translate(100, 315)')\n .style('font-family', 'Futura')\n .style('font-style', 'italic')\n .style('letter-spacing', '-10px')\n .style('font-size', '200px')\n .attr('fill', '#ffffff')\n .text('Supreme');\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## Responsive ticks for d3 charts\n\nIf you're using d3, which a lot of us are, another way to embrace little screens is by making the number of ticks in your scale responsive: this way they don’t crowd together. When you resize the scale below, the number of ticks follows the width of the page, because of the code:\n\n\\`\\`\\`js\n.ticks(width / 80)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"{\n const xAxis = g => g\n .attr(\"transform\", `translate(0,50)`)\n .call(d3.axisBottom(d3.scaleLinear().domain([0, 100]).range([50, width - 50]))\n .ticks(width / 80)\n .tickSizeOuter(0));\n \n const svg = d3.select(DOM.svg(width, 100));\n\n svg.append(\"g\").call(xAxis);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"d3 = require('d3-selection', 'd3-scale', 'd3-axis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"