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 Answer 1

  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.