Как сделать сайт для мобильных устройств | Создать адаптивный дизайн сайта за 10 минут

Автор Andrei Golubev
Как сделать сайт для мобильных устройств | Создать адаптивный дизайн сайта за 10 минут

Привет коллеги.

С вами снова стал собакой. Сегодня поговорим с вами о сайтах для мобильных устройств адаптивный дизайн в наше время крайне важен и сегодня мы с вами разберемся. Как сделать его легко и просто адаптивный дизайн влияет на удержание аудитории на то как комфортно себя чувствовать.

Посетитель на вашем сайте если у вас всё сайт не оптимизирован именно.

Под мобильные устройства обязательно. Задумайтесь об этом. Давайте сегодня на примере моего блога мы попробуем в этом разобраться заходим на блок. Стас быков тору и далее как же посмотреть сайт или нет. Посмотрите сейчас я все действия буду делать в браузере Google Chrome нажимаем на правую кнопку мыши дали. Просмотреть код в открывшемся меню слева вверху сайта мы видим иконку. Нажимаешь на неё и ваш сайт автоматически адаптируется мобильное устройство мы видим. Что изменилось в меню сейчас мы перейдём в какую-нибудь статью я вам покажу как — это всё трансформируется то есть транслироваться помню мы можем нажать ведь она раскрывается дали. Мы видим, что сам текст он тоже адаптировался когда он переходим в нижнюю часть сайта. Мы видим, что правая как она переместилась вниз свете всё удобно то есть ваш сайт состоял из нескольких столбцов и они все встали как бы друг под другом +. Вы можете убрать тестовый которые не хотите использовать в мобильной версии мобильной версии конечно должна быть проще чем компьютерной версии — это сейчас и происходит на моём сайте. То есть вы можете. Зайти на мой сайт с мобильного и сделать вот через такую вот эмулятор и посмотреть как же он выстроил то есть всё должно быть просто навигация тоже должна быть простой. Давай теперь зайдём в метрику посмотрим же какая доля посетителей идёт именно с мобильных устройств для этого нам нужно зайти в отчёты дали мы заходим в технологии и устройства. Это стандартные отчёты. Вы тоже у себя можете найти если у вас ещё. Метрика не подключена обязательно. Включите два урока назад я рассказывал как зарегистрировать свой сайт в вебмастер. Яндекс и. Гугл и как подключить метрику от. Гугла и от. Яндекса обязательно это. Даня здесь вот отчёт технологии переходим в устройство и возьмём промежуток я думаю ну не меньше месяца. Сейчас у меня откроется страница то есть выбираем период. Давайте возьмём с сентября по ноябрь нажимаем применить статистика то есть мы видим, что пока 17000 уникальных посетителей смартфоны 8700 и планшеты 420 даже есть телевизоров. То есть 17.000 — это с компьютера I9000 смартфоны по статистике. Мы видим, что половина от тех кто был с компьютера зашли с мобильных устройств также мы здесь видим удержание. То есть если бы не было мобильной версии сайта то люди заходили на мой сайт и они бы не видели оптимального страницу на своём телефоне и закрывали отказов было бы гораздо больше поэтому очень важно понимать, что мобильная версия адаптивный дизайн необходим для вашего сайта. Как же сделать этот адаптивный дизайн если у нас есть как его переделать сделать наиболее есть несколько способов сейчас все движки все шаблоны они делаются уже с адаптивным дизайном я рассказывала вот всех способов с помощью которых можно создавать себе сайт адаптивным дизайном — это и установка приложений на хостинге. Я не знаю. Каким хостингом вы пользуетесь, но я пользуюсь хостинг макхост поэтому у меня много видеоуроков по данному хостингу. Как там через установку приложений создавать себе сайт если вам интересна эта тема у вас всё не разработан сайт или хотите обновить обязательно посмотрите прошлом уроке. Также можно сделать напрямую загружать на хостинг движки сайтов и также туда же загружать шаблоны которые уже с адаптивным дизайном — это всё можно делать — это просто — это было в прошлом видео уроков на сегодня более подробно покажу как через bootstrap шаблоны создать. Ленин который реально будет 100% адаптирован. Под мобильные устройства всё, что вам нужно сделать это. Зайти в. Яндекс здесь пишите bootstrap шаблоны тут очень много сайт. Где сейчас находятся. Эти шаблоны я вот захожу в самый первый где 813 различных шаблонов. Я выбрал рейтинг вам вас может заинтересовать или магазин портфолио блок и админ панели всё под ваши нужды конечно же смотрите сейчас здесь находится ленгис открываю первый попавшийся здесь можно посмотреть. Дима этого нажимаем смотреть. Дима И сейчас мы видим как он будет работать на вашем хостинге вы просто 10 минуты информацию на свою сейчас тоже покажу как — это всё просто дела. Сейчас закрывается сайт. Мы видим, что здесь открылась главная страница здесь мы можем поместить видео очень удобно кстати для авторов YouTube каналов для своего авторского сайта и рекомендую данный шаблон очень интересный вообще он больше для музыкальной группы, но можно его вот себя имею в виду поменять контактную информацию которая здесь есть то есть ведь и всё уже он создан просто. Нам нужно поменять текст и поменять картинки всё, что нам нужно делать делать теперь — это скачать бесплатно так файлом не скачался я уже его разархивировать у него зайдём далее. Заходим в подпапку и здесь у нас catalog HTML. Вот — это непосредственно сам садись нам просто нужно изменить информацию под себя можно его проверить нажимаем Index HTML открываем в вашем браузере. тоже самое, что что мы сейчас видели именно уже как в демоверсии эти всё есть.

0 комментариев
0

Читайте также