Про оптимизацию сайтов под мобильные устройства

Илья Ландар

Сайты, трафик, маркетинг

Про оптимизацию сайтов под мобильные устройства

оптимизация под мобильные устройства

Автор

Илья Ландар

На чтение

< 1

Просмотров

32 просмотров

Опубликовано

02.05.2020
Время на прочтение: < 1 минуты

На реальных примерах поделюсь как я оптимизирую сайты под мобильные устройства.

Рекомендую просто посмотреть видео в том порядки которые они есть

Типы верстки

  • Статичная(static)
  • Адаптивная(adaptive)
  • Резиновая(responsive)

Статичная(static) верстка

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

Адаптивная(adaptive) верстка

Тип верстки — использующий медиа запросы(media queris) при уменьшения экрана перероспределяет контент и меняет размер с помощью медиа запросов.

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

Резиновая(responsive) верстка

Антагонист статической верстки. Использует респонсив значения например проценты(%) использует резиновые селекторы такие как max — width.

Резиновый текст

Это текст который при изменении ширины экрана занимает определенную статичную часть экрана. Вместо значений в px используем значение vw. Детальней про единицы измерения — читаем тут

Видео про резиновый тескт

Responsive image

Про медиа запросы

Проcто о меди запросах. Дополнительно про медиа запросы можно прочитать тут

Wp медиа запросы

Как правильно подключить файл css с медиа запросами в WordPress

Адаптация

Адаптация и перераспределение контента с помощью javascript на примере BURGER MENU

Илья Ландар

Веб специалист
Здравствуйте. Я веб разраотчик, в свободное время пишу статьи. Если есть вопросы по созданию сайта можете написать мне

Вам так же может понравиться

< 1 мин

3 просмотров

Уменьшаем вес картинок для оптимизации сайта

Время на прочтение: < 1 минуты Для начала нам нужно понять зачем нам уменьшать вес картинок. Связь такая. Меньше вес

< 1 мин

3 просмотров

Wow js анимация при появлении.

Время на прочтение: < 1 минуты Что бы сделать анимацию при появлении нам нужно. Github — для скачивания архив wowjs

2 мин

9 просмотров

Просто о сео. Тех часть.

Время на прочтение: 2 минут(ы) При знакомстве с сео, сразу осознаешь что это целая наука которая полностью не изучена

< 1 мин

18 просмотров

Css центрирование. Просто выравниваем блоки.

Время на прочтение: < 1 минуты В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки