I am a self taught designer and learning nowadays from IDF. I have a few doubts about responsive design.

  1. As a designer, while I am designing screens to give to to developers, for what sizes I should design screens? I am considering all devices and all possible resolutions...mobile, laptop (windows, mac), tablet etc.

  2. A good resource or link to understand using columns for creating screens.

  3. How to define fonts for different sizes? I am using Material Design guide for mobile screens, but how for web? For example, if I am using 16px for a paragraph in 1366*768 screen then how large should the font be for 1440, 1920, 3072 (MacBook Pro 16")? I am completely confused in telling font sizes to developers for various screen sizes.

Are there any other important things that can help me in understanding responsive design?

  1. that depends on developers and breaking points they are using ie. if the work with bootstrap thee breaking points will be: // Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

  1. https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

  2. Personally while designing the typography I use modular scale: https://www.modularscale.com/?18&px&1.5 usually for the desktop version good body text is between 16-20px size. The size depends on the content of the website. Ie. if it's a lot of written content like newspapers I would consider a bigger size. If it's a dashboard / data-driven platform I would consider smaller typography.

Not the answer you're looking for? Browse other questions tagged or ask your own question.