Особенности при создании веб-страниц

Перед тем, как начать создавать первую веб-страничку, поговорим о том, какими особенностями обладает создаваемый нами продукт по сравнению с обычной страничкой в текстовом редакторе.

Документ, создаваемый в текстовом редакторе, предназначен для вывода на бумагу, а она имеет стандартные размеры, обычно, А4. А вот веб-странички будут просматриваться на самых разных экранах, с разным разрешением и с разными пропорциями ширина/высота. То есть ваш сайт будет выглядеть по разному на разных экранах, и нужно умудриться сделать его так, чтобы на всевозможных экранах он выглядел прилично. Это достигается только опытом, для начала - несколько рекомендаций:

  • на экране 1280 пикселя в ширину не должно быть горизонтального скроллинга (на сегодняшний день это минимальный размер среди распространённых экранов;

  • если у вас широкий экран, разверните окошко редактора на ширину 1280 пкс, редактор показывает внизу справа этот размер;

  • делайте таблицы, используемые для макетирования текста, фиксированной (не относительной, в %%) ширины;

  • постарайтесь просмотреть созданные вами страницы на экранах разного размера.

Помимо разных экранов, есть ещё одна проблема: разные браузеры читают код страницы немного по-разному. Во-первых, у них разная система принятых умолчаний. Например, в одном браузере приняты по умолчанию поля определённого размера, а в другом по умолчанию полей нет, их надо задавать явно. Во-вторых, существуют различные расширения языка HTML, в разных браузерах допустимы разные расширения - так сложилось исторически. Глубоко вникать в этот вопрос смысла особого нет, проще всё это контролировать эмпирически. Нужно установить у себя несколько браузеров и проверять, как выглядят ваши страницы в каждом из них. Если где-то что-то глючит, нужно это переделать.

Распространённые браузеры (по статистике сайта http://ucrazy.ru  20.11.2017 c числом посещений 30-40 тысяч в сутки, http://www.tbex.ru/browsers/ucrazy.ru/ ):

Браузер                         Доля пользователей
Chrome                          75.23%
Firefox                            9.50%
Safari                             8.87%
MSIE                             3.31%
Opera                            1.97%
Другой                          1.00%
 

Оттуда же самые распространённые экраны (www.tbex.ru/screen/ucrazy.ru), последняя цифра - битовая глубина цвета:


Разрешение экрана           Доля пользователей
360x640x32                        23.76%
1920x1080x24                    12.40%
1366x768x24                      10.72%
1280x1024x24                     7.86%
1600x900x24                       3.65%
320x568x32 2.                     42%
320x570x32 2.                     15%
1680x1050x24                      2.11%
1440x900x24                        2.08%
320x534x32                         1.96%
375x667x32                         1.74%
1280x800x32                       1.49%
1536x864x24                       1.40%
1280x800x24                       1.23%
768x1024x32                       1.22%

Низкое разрешение говорит о том, что на сайт заходят с телефонов/дешёвых смартфонов. Многие сайты (в том числе и http://ucrazy.ru) имеют мобильную версию, на которую переадресуется пользователь, если он заходит с телефона. Мы же будем рассчитывать на обычные компьютеры, поэтому экраны менее 1280х1024 можно не учитывать.

Впрочем, описанные здесь тонкости - для тех, кто хочет пополнить ряды создателей сайтов. Если вам нужен только зачёт, этот раздел можно было и не читать.