Иногда происходят случаи, что у вас появилась радость от того что появился свой сайт, что там есть всё необходимое и т.д. Но люди говорят регулярно, что «я с мобильника, поэтому не могу посмотреть» или «Что-то твой сайт не открывается».

Так вот, решением этих вопросов занимается человек по адаптивности дизайна. Он может как настроить сайт под различное устройство, так и настроить для прочтения его с различных браузеров.

Как всем известно, что любому фрилансеру необходимо предоставить ТЗ, чтобы заранее до выполнения задания устранить конфликтные ситуации. Об остальных аспектах ТЗ было рассмотрено в одной из предыдущих статей

Что значит «адаптивность сайта»?

Адаптивность сайта подразумевает активная его работоспособность на различных платформах, девайсах и типов размеров их экранов. То есть данный сайт хорошо заточен почти под любое устройство.

Платформы бывают:

  • Для мобильных
    • Android
    • iOS
    • Windows Phone
  • Для ПК:
    • Windows
    • MacOS
    • Linux
  • Браузерные
    • Mozilla Firefox
    • Google Chrome
    • Safari
    • Opera
    • IE (Internet Explorer)
    • Различные браузеры, базирующиеся на ядрах браузеров, перечисленных выше

Девайсы бывают:

  • Стационарные ПК
  • Переносное ПК
  • Планшеты
  • Телефоны, поддерживающий просмотр страниц браузера

Размеры экрана зависят от различного вида девайсов. Тут уж каждый сам понимает, с какого момента начинается мобильное устройство, а с какого — полноценное ПК.

Основные моменты в ТЗ

ТЗ оформляется не строго по пунктам, а произвольно, как заказчику удобно. Но нужно учесть, что чем больше пунктов, тем лучше, ведь ожидания и реальность по-максимуму совпадут.

Поэтому предлагается примерный шаблон, по которому можно ориентироваться при заполнении настоящего ТЗ. Если у вас есть опыт — поощряется добавление дополнительных для себя пунктов.

  • Браузеры или кроссплатформенность. Не только наименования, но и версии браузеров. Для справки: есть определённые скрипты, которые удобны в использовании верстальщику или человеку, который адаптирует сайт, но они заточены под конкретные версии браузеров.  Возможно, в работающей теме эти скрипты используются, но не поддерживаются некоторыми версиями браузеров.
  • Макеты сайтов под различные устройства. То есть как будет выглядеть сайт на различных девайсах. Раз уж сайт готовый, можно написать либо размеры окон для «привычного для него» мобильных или планшетных гаджетах, либо написать некоторые вариации CSS-сеток для сайта. Фрилансер поймёт, о чём идёт речь.

verstka_sajta

  • Адаптивность сайта под различные версии мобильных/планшетных устройств. В принципе, они хорошо работают. Тут дело укладывается в скриптах, которые не всеми браузерами поддерживается.
  • Удалить или масштабировать. Это по поводу перехода из ПК в мобильные устройства. Тут чисто от CSS-языка зависит и от сетки, которую вы либо сами выбрали, либо сами их указали в пикселях. Просто вместо пикселей в виджетах будет написан процент от ширины боковой панели. Можно эти панели удалить, если они не нуждаются в мобильных версиях. В макете можно это показать.

Это основные моменты в ТЗ. Пользуйтесь для своих проектов, и уверен, что ваши работы можно читать в любое время в любом месте.

Читайте ещё: