Размеры веб-дизайна

Я немного прокомментирую ваши шаги, прежде чем пытаться кратко ответить.

Когда я создаю веб-сайты в Photoshop

Дизайн — это не то же самое, что «создание картины». Дизайн — это процесс, в котором вы знаете, что это за процесс. Создание макета — это только часть процесса проектирования.

Обычно я использую следующие настройки:
ширина = 2560, чтобы было удобно просматривать на больших экранах; однако я сохраняю весь текст в сетке содержимого из 12 столбцов (2000 пикселей)

Вы предполагаете, что пиксели - это правильная единица измерения. Это не так, а скорее отправная точка.

разрешение > 300

PPI не имеет ничего общего с веб-дизайном. Но поскольку вы используете Photoshop в качестве отправной точки, установите ppi на 72 или 96.

Основное руководство

Я не понимаю теории, стоящей за этим. Каковы наилучшие методы масштабирования вашего сайта для различных разрешений?

Я бы отделил «лучшие практики» от «основных практик».

Основная теория заключается в том, что веб-дизайн основан не на растровых изображениях, а на пропорциях. Например:

Используйте свое изображение (например, файл jpg) любого размера в пикселях, который вы выберете.

• Пропорциональный процесс НЕ говорит: это большая фотография ХХ пикселей.

• Он говорит: «Это должно быть шириной с ваш экран».

Вот мой совет в посте о том, как можно представить макет: Как вы представляете каркасы и дизайны для длинного одностраничного веб-сайта?

Если вы используете этот код, изображение будет передискретизировано, чтобы соответствовать любому современному размеру экрана.

Это первая основная идея. Оттуда вы начинаете думать о том, как веб-страница должна выглядеть на физическом устройстве. В основном:

• Большой настольный монитор

• Планшет

• Телефон

Но это должно быть более конкретно закодировано в таблице стилей.

Вы заметили, что я еще не упомянул размер в пикселях?

Проблема сетчатки

Особой проблемой являются дисплеи высокой плотности.

Если вы думаете, что можете создать веб-сайт, используя большой монитор, и использовать ту же информацию, что и на маленьком телефоне... Нет. Не имеет значения, имеет ли он те же 1920x1080 пикселей, что и ваш 24-дюймовый монитор.

Опять же, вы думаете о нем как о телефоне или как о большом мониторе, а не о пикселях.

«Сетчатка» — это особый случай, когда вы предоставляете альтернативное изображение, чтобы оно было более четким по сравнению с обычным экраном.

Браузер "декларирует" нормальный размер пикселя для телефона, например 480px, но в то же время "шепчет" веб-сайту "Эй, но пришлите мне изображения с высоким разрешением, которые у вас есть, потому что я могу показать их более четко", так что вы можете получить фотографию в 2 или 3 раза больше.

Кстати, вы начинаете с этого разрешения дисплея Retina, что не всегда так.

Некоторые советы:

• Попробуйте использовать более стандартное разрешение, например ширину 1920 пикселей, но только в качестве отправной точки.

• Используйте код, который я предоставил вам по ссылке, для предварительного просмотра изображения на разных мониторах.

• Вырежьте отверстие в листе бумаги размером с экран планшета и другим размером с экран телефона и представьте содержимое там. Сделайте необходимую адаптацию.

Лучшие практики

• Подумайте о пропорциях. <= (основные практики здесь)

• Начните изучать, что такое медиа-запросы. <= (Стандартные методы здесь)

• Изучите использование фреймворка. <= (Некоторые распространенные методы здесь)

• Глубоко изучите HTML и CSS, дизайн UX, разрешение и т. д. <= (Лучшие практики здесь)

Пиксели не имеют стандартного «размера», связанного с ними. Таким образом, изображение шириной 2000 пикселей на дисплее Retina (с разрешением 2880 на 1800 пикселей) составляет примерно 2/3 ширины экрана. Однако то же самое изображение на экране 1080p (1920 на 1080 пикселей) шире, чем размеры экрана.