Understanding mobile optimization and responsive design

Imagine watching a movie on your television, but the video file is formatted for a movie theatre-sized screen. That would not be a good experience – you’d only be able to see a small part of the film, and the visual meaning would be lost. Similarly, viewing a desktop-sized website on a tiny phone screen would not be a great experience. Enter Mobile Optimization and responsive design. Responsive design and mobile optimization are the methodologies and processes of making a website usable on a variety of screen sizes, from small mobile devices to large desktop monitors.

Admittedly, if I had written this chapter two years ago, it would be much longer than this one will be, and that’s because mobile optimization used to be so much harder than it is now. Squarespace’s Fluid Engine made a huge leap forward with the way it handles mobile optimization and responsive design. While the platform previously...