Converting a fixed pixel design into a fluid proportional layout
Graphic composites, or comps, as they are often called, exported from a program such as Photoshop, Illustrator, Figma, or Sketch all have fixed pixel dimensions. At some point, the designs need to be converted into proportional dimensions when recreating the design as a fluid layout for the browser.
There is a beautifully simple formula for making this conversion that the father of responsive web design, Ethan Marcotte, set down in his 2009 article, Fluid Grids (https://alistapart.com/article/FLUIDGRIDS):
target / context = result
Put another way, divide the units of the thing you want by the thing it lives in. Let’s put that into practice. Understanding it will enable you to convert any fixed dimension layouts into responsive/fluid equivalents.
Consider a very basic page layout intended for desktop. In an ideal world, we would always be moving to a desktop layout from a smaller screen layout;...