When building up a responsive design, the initial layout I think about is what I consider the ‘accessibility’ layout. The idea of this is that no matter the device or capability (crucially, whether or not JavaScript is supported on the device) this layout should work and provide access to the content. It doesn’t need to be the ‘optimum’ visual layout. For example, the chapter lists will need scrolling past before each page’s main content, but it will still be accessible.

Having looked at the design, perhaps we can get away with just three visual breakpoints for the design structure (a ‘breakpoint’ merely being a term used to specify where the layout should change based upon available space in the viewport).