777

Адаптивность и кроссбраузерность для сайта landing-order.ru

  • 789

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по адаптивности и кроссбраузерности для сайта landing-order.ru.

Адаптивность и кроссбраузерность для сайта landing-order.ru

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

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

Применительно к нашему примеру, нужно в файл functions.js добавить код, который бы не создавал белого поля возле меню после изменения ширины экрана:

Кроссбраузерность

Проверять имеет смысл только в самых популярных браузерах:

  1. Google Chrome
  2. Firefox
  3. Opera
  4. Microsoft Explorer

Далее открываем наш сайт в перечисленных браузерах и тестируем все элементы сайта. Также тестируем на разной ширине экрана.

В следующий раз мы переходим к программированию клиентской части и займемся созданием базы данных (БД) — не пропустите!

777

Подключение анимации и верстка страницы благодарности для сайта landing-order.ru

  • 793

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по добавлению анимации на сайт landing-order.ru.

Подключение анимации для сайта landing-order.ru

Для работы нам понадобится расширение WOW, которое нужно скачать по этой ссылке и распаковать 2 файла:

  1. animate.css — в папку styles на хостинге;
  2. wow.js (или wow.min.js) — в папку js.

Затем в файле index.php подключаем эти 2 файла.

Для того, чтобы подключить анимацию, нужно блоку присвоить класс «wow» и, через пробел, само действие (которое можно посмотреть по этой ссылке)

Кроме того, в файле functions.js нужно инициализировать данное расширение:

Читать запись полностью... »

777

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке всплывающих изображений (fancybox) и создание быстрых ссылок для сайта landing-order.ru.

Верстка всплывающих изображений для сайта landing-order.ru fancybox

Скачиваем плагин fancybox по этой ссылке и, распаковав архив, копируем папку Source в папку fancybox на сервере.

Затем нужно подключить 2 файла: jquery.fancybox.css и jquery.fancybox.js (либо сжатую версию —  jquery.fancybox.pack.js)

В данном случае, мы затрагиваем только файл functions.js и потому заносим в него следующий код: Читать запись полностью... »

777

Верстка формы заказа для сайта landing-order.ru

  • 822

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке формы заказа сайта landing-order.ru.

Первым делом, вырезаем фоновую картинку и сохраняем в папку с картинками:

Верстка формы заказа для сайта landing-order.ru

В файл index.html заносим такой код:

Читать запись полностью... »

777

Верстка блока Гарантия и Подвал сайта landing-order.ru

  • 793

Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке блока «Гарантия и Подвал» сайта landing-order.ru.

Первым делом, вырезаем фоновую картинку и сохраняем в папку с картинками:

Верстка блока Гарантия и Подвал сайта landing-order.ru

В файл index.html заносим такой код:

Читать запись полностью... »

Страница 1 из 5012345...102030...Последняя »