нажми для закрытия
программист ищет работу

меню Главная

Пример перевода сайта на адаптивный дизайн

Используемые технологии: HTML, CSS, JavaScript, PHP, MySQL

В настоящее время провожу переделку страниц сайта психологического центра "Адалин" со старого дизайна на новый адаптивный веб-дизайн в соответствии с рекомендациями Google по оптимизации для мобильных устройств. Построение нового дизайна происходит при помощи HTML5 и CSS3.

Разрешение экрана компьютеров и мобильных устройств в наши дни колеблется от 320px до 2560px или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства и смартфоны. Поэтому традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев.

движок для информационного сайта

   

Пример изменения сайта:
Страница сайта ДО и ПОСЛЕ изменения;

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

   

Пример сайта недвижимости на фреймворке Yii2

Пример собственного движка для информационного сайта

Примеры информационных сайтов с адаптивной версткой

Примеры интернет-магазинов с адаптивной версткой

Пример перевода сайта на адаптивный дизайн

Детский сайт с адаптивным дизайном

Примеры использования jQuery и SVG-анимации

программист ищет работу