ID: 253

Релиз новой адаптивной версии сайтов

251
Это картинка
Встречайте, третье поколение движка сайтов, которое принесло полную поддержку мобильных устройств, автоматического выбора темы в зависимости от установленной темы в браузере и многое другое!
Категории: updates
Дата редактирования: 2023-02-26 17:18:56
Данный переход принёс огромное количество изменений:

1. Была значительно улучшена адаптивность сайта. Если прошлый вариант шаблона поддерживал диапазон основного поля контента от 640 до 1280 пикселей, новая версия теперь поддерживает от 320 до 1980 пикселей (в большую сторону граница может легко увеличена). Боковые колонки теперь тоже адаптивной ширины, а не фиксированной как было ранее.
2. Дизайн сайта от фиксированного двухколоночного шаблона перешел к поддержке одноколоночного, двухколоночного и трехколоночного шаблона с легкой настройкой через конфиг сайта.
3. Сайт стал более интерактивным, было добавлено переключение между колонками сайта на телефонах и планшетах, меню теперь может раскрываться и скрываться с сохранением положения при перезагрузке страниц сайта.
4. Темы оформления теперь задаются через куки, а не сессии (был исправлен неверный подход со снижением нагрузки на сервер).
5. Был доработан дефолтный выбор темы оформления сайта, теперь если у пользователя в браузере или ОС активен темный режим, сайт изначально будет открываться с тёмной темой оформления. Ранее всегда открывалась дефолтная тема.
6. Была доработана форма поиска на сайте и отображение в ней текста. Теперь форма запоминает ранее введённый запрос и не надо его повторно вводить.
7. Рекомендации у статей подгружаются через ajax, что ускоряет загрузку основной страницы.
8. Был доработан процесс подсчета просмотров у статей.
9. Теперь все колонки могут прокручиваться и залипать к низу и верху страницы. Глюки их движения были исправлены вместе с переходом на другой ответственный js скрипт.
10. Шаблон теперь содержит больше специфичных html5 тегов, которые требуют поисковики для более корректного индексирования страниц.
11. Реклама и метрики теперь могут легко включаться или отображаться через конфиг, для более комфортного процесса отладки сайтов.
12. Была переработана структура файлов сайта.
13. Было уделено внимание множеству других элементов бекенда и фронтенда, которые долго перечислять.

Ну а теперь сравнение вида старой и новой версии в наиболее распространённых разрешениях экрана на примере Архива о ЖД:





Рисунок 1. Отображение второй версии на экранах 2560 на 1440 пикселей.





Рисунок 2. Отображение третьей версии на экранах 2560 на 1440 пикселей.





Рисунок 3. Отображение второй версии на экранах 1920 на 1080 пикселей.





Рисунок 4. Отображение третьей версии на экранах 1920 на 1080 пикселей.





Рисунок 5. Отображение второй версии на экранах 1366 на 768 пикселей.





Рисунок 6. Отображение третьей версии на экранах 1366 на 768 пикселей.





Рисунок 7. Отображение второй версии на усреднённом планшете с шириной экрана в 720 пикселей.





Рисунок 8. Отображение третьей версии на усреднённом планшете с шириной экрана в 720 пикселей.





Рисунок 9. Отображение второй версии на экранах смартфонов (за референс взят Redmi Note 8PRO) device-width: 393px.





Рисунок 10. Отображение третьей версии на экранах смартфонов (за референс взят Redmi Note 8PRO) device-width: 393px.





Движок (или шаблон) сайтов написан в Notepad++ с нуля без использования сторнних cms с помощью технологий HTML5, CSS3, PHP7, JavaScript, JQuery, Ajax, MySQL. В отличие от сайтов на cms, например Wordpress, данный сайт работает быстро, даже на 15-летнем старом hdd (разумеется по функционалу не могут с ними сравниться).

Созданные нами сайты в открытом доступе:
Studio Petukh (SP) - на данный момент работает на ранней второй версии. Планируется переход на актуальную версию.
All Stickers - работает на отдельном шаблоне, который тоже недавно был незначительно доработан для лучшей поддержки мобильных устройств (ну и чтобы гугл с яндексом не ругались).
News Transport - обновлён на третью версию.
Мухосранский Вестник - работает на поздней второй версии с добавлением части нововведений третьей версии. Переход на третью версию не планируется.
Родственные Души - работает на ранней второй версии, сайт несёт исключительно исторический характер.

Ну а сравнение первого и второго поколения можно посмотреть тут.