Создание адаптивного сайта | Урок #1 — Начало

Автор Georgiy Dronov
Создание адаптивного сайта | Урок #1 — Начало

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

Я уже подготовил один сайт загрузил его — это немецкий сайт на котором идеально реализована адаптивность. Как видите на данный момент сайт идеально подходит по размерам к моему экрану ничего не выступает за пределы экрана всё в принципе как и должно быть теперь если начну перечислять изображение например 150% да. Там 200% мы видим, что сайт в принципе адаптируется под размеры то есть опять-таки чего не вылазит за рамки экрана всё идеально как и было так и есть при этом есть начали вот у нас есть была одна огромная статья и 2 маленьких сбоку то теперь при увеличении мы получаем, что все статьи одинакового размера в принципе и опять-таки хорошо выглядит и опять-таки она удобна для просмотра на планшетах мобильниках.

И так дальше если опять буду увеличивать например до 500.

Кб в Google Chrome — это максимум то мы увидим, что все наши статьи они преобразовались в то, что они отображаются по одной статье в линию вот и опять-таки — это будет очень удобно для просмотра на мобильных телефонах. Вот — это полосы она мешает полоса — это конечно мешает, но на мобильных телефонах опять-таки — это будет намного длиннее поэтому — это полоса быть сверху и мы будем видеть много больших адаптивность у этого сайта просто идеальная. Как по мне потому, что в принципе он подстраиваться под любой размер экрана. Но почему же вообще важно адаптивность сайта. Дело в том, что даже Google недавно объявил. Какую информацию, что сайты у которых есть адаптивный дизайн или просто мобильная версия сайта они будут намного выше врать при поиске какой-то информации чем другие сайты у которых нету адаптивной верстке либо же опять-таки мобильной версии сайта. Тут есть некоторые кстати и различие между мобильным и адаптивной версткой дело в том, что адаптивная верстка как вот мы видим с этой картинке — это это — это когда сайт подстраиваться под конкретный размер экрана то есть на одном экране он выглядит. Как полноценный большой сайт на смартфонах например выглядеть как уже маленькая версия этого сайта причём в адаптивной верстке — это всё один и тот же сайт он просто подстраивается если говорить про мобильную версию сайта там обе версии сайта — это дополнительный Site 2 Site который в принципе обычно создается на поддоне не. Например у нас есть зайдём на Google у нас есть например Google и например мобильная версия для Google было бы ну к примеру м.. Ай эм. google.com.ua. Вот то есть как бы наподобие не создается 2 и этот сайт он уже идеально будет подходить сразу под размеры мобильного телефона то есть там будут большие кнопки в принципе там маленькие картинки чтобы быстро всё загружалось их и так далее и конечно же таких сайтах обычно есть ещё кнопка. Перейти на полную версию сайта так как мы можем — это сделать. То есть с. Ну в данном случае схема google.com.ua перейти на просто google.com.ua то есть на главную и вот при адаптивной верстке мы не можем такую ссылку поставить. Так — это у нас один и тот же сайт. Например если бы на примере этого сайта будем разбирать здесь невозможно поставить ссылку на главный сайт то есть на полную версию потому, что вы когда зайдёте с мобильника вы увидите, что этот сайт будет именно вот таким вот и на мобильнике вы не сможете его там уменьшить перевести. Да вот такой вот размера вот поэтому — это является одним из минусов, что нельзя на мобильных. Элита планшетах просматривать полную версию сайта и по поводу Google. Как я ещё начал вначале Google. Он теперь учитывает является ли сайт адаптивным. Под мобильные мобильник либо планшет. То есть если сайт будет адаптивным вас больше шансов, что он попадет в рейтинге, что он будет в рейтинги выше нежели другие сайты например вы ваш сайт о том как продать дом если пользователь напишет в Google. Как как продать дом дом то в принципе сайты если — это пользователь будет заходить с мобильника у каждого из этих сайтов будет он здесь где-то сбоку написано, что есть мобильная версия или нету мобильной версии поэтому. Пользуйтесь уже может сам выбирать. Заходите на сайт без мобильной версии или нет в принципе опять-таки адаптивная верстка очень сильно помогает даже в плане секса. Вот и теперь. Попова по поводу нашего курса, что мы будем делать. Мы создадим вот такой вот веб-сайте на нём зацикливаться вообще не будем особо то есть — это самый обычный тест веб-сайт на нём ничего нету нету никакого PHP есть немножко джаваскрипта для того чтобы прикрепить вот — это вот менюшку чтобы она вот прямо так вот прикрепилась к нашему экрану. А здесь наоборот australes обратно вот. Ну в принципе у нас не будет никаких здесь особых скрипта вот единственный скрипт — это вот этот вот будет. Скрипник для менюшки одна страничка у нас будет эта страничка будет адаптироваться под различные размеры экрана на данный момент — это страничка. Не адаптируется под вот немножечко на адаптируется всё-таки ничего опять-таки не вылазит вроде бы, но всё-таки надеюсь мы будем ещё увеличивать сайт то в принципе как невидимо здесь уже особо не красиво.

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

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