Adenosine Triphosphate Overview draft V 0.1

This is a scroll driven introduction to Adenosine triphosphate (ATP) as the energy molecule of the cell. The illustration is completely scroll driven. As the user scrolls down the page small annotations are added to the diagram of the molecule, laying out important feature of the molecule and how these features allow ATP to act as the primary energy transfer molecule in living cells

The illustration focuses on the fact that the proximity of the negatively charged oxygen atoms on each phosphate group make removing the phosphates energetically favorable and how this is the way that the molecule is used to store and transfer energy within the cell.

Status V 0.1

• The ball and stick diagram of an ATP molecule is the center of the illustration
• As the viewer scrolls information about ATP is provided
• Annotations of the diagram appear and disappear in sync with the scrolling text.
• The molecule is rendered as a fully scalable svg
• The molecule stays at the top of the content area - or at the top of the window if the top of the content area is off screen. This works well but some of the transitions are choppy on mobile because there are quite a few SVG elements being rendered in the molecule
• The layout of the illustration varies based on the width of the device. If the width of the window is below a certain threshold the layout will change. This allows the content to be viewed on desktop, tablet and phone.
• On the phone the content is designed to be viewable on both landscape and portrait orientation but, Scaling is not working for landscape orientation on small devices
• The page will reload if it senses an orientation change (portrait to landscape or vice versa.
• Viewers on desktop can screw up the layout by changing the width of their browser window because the illustration is not listening for changes in width. I might add that

Next Steps

• Consider changing the way the molecule renders - ie not svg - to make the movement smoother on scrolling. This is not an issue for desktop viewers, but mobile viewers will notice that the movement of the molecule is choppy in some scroll positions.
• Work on the wording
• Consider adding a listener to reload the page if the width changes. Not an issue for mobile viewers, but right now people on desktop can mess up the layout by resizing the window. An edge use case but one worth thinking about.
• Extend the illustration further by discussing the process of breaking the bonds and the value of the energy associated with different numbers of phosphates bound to the nucleotide.