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

10 способов адаптации вашего сайта под мобильные устройства

Ваш веб-сайт уже оптимизирован под мобильные устройства? Если еще нет — это не конец света. Современные браузеры содержат такие нововведения, как пинч-зум и автоматическая регулировка размера шрифта.

Если у вас нет времени или денег, чтобы оптимизировать ваш сайт под мобильную среду — вот десять простых вещей, которые вы можете сделать прямо сейчас, чтобы у « мобильных » посетителей сайт выглядел прилично.

1. Установите правильные атрибуты полей форм

Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize :

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “ Erwan ”, на что-то вроде “ Erevan ”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “ Ken burns ” станет “ Ken Burns ”):

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

2. Задайте подходящую для мобильных устройств ширину

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

Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head :

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

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

3. Установите ширину картинок в 100%

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

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

4. Установите ширину полей ввода в 100%

При просмотре сайта с мобильного устройства этот параметр не даст полям input выйти за пределы экрана.

5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм

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

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

Во время входящего звонка браузер мобильного устройства закроется. И далее ситуация с заблокированной кнопкой подтверждения повторится. Пользователь не сможет отправить уже заполненную форму.

И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.

6. В длинных строках используйте word-wrap

Иногда бывает необходимо отобразить длинные строки, такие как примеры кода, ссылки, номера банковских счетов. Если ваш сайт окажется узким для того, чтобы целиком показать строку, она может « уехать » за пределы экрана мобильного устройства:

7. Будьте осторожны, используя пробелы

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

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

Дабы избежать подобных ситуаций, вместо пробелов между группами символов используйте отступы:

Как видите, « пробелы » между символами остаются, но с тем отличием, что при копировании-вставке нет нужды что-то удалять. Как минимум, это удобно и экономит время!

8. Преимущества медиа-запросов

Вы можете создать пользовательские стили, которые будут работать только при просмотре сайта с мобильных устройств (или же отображаться в маленьком окне браузера), а на настольном компьютере сработает обычный вариант веб-страницы. Используйте для этого целевые стили внутри медиа-запросов как в примере ниже:

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

9. Избегайте fixed позиционирования

Когда вы делаете разметку подобным образом, ваш заголовок будет увеличиваться вместе со страницей и, возможно, займет все пространство экрана:

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

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

10. Используйте стандартные шрифты

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

Как правило, объем подобных файлов достаточно велик. На мобильном устройстве этот процесс может занять большое количество времени. В это время на экране мы видим незаполненное пространство вместо текста:

В случае использования Google Font Loader для загрузки шрифтов вы сможете отобразить текст с помощью стандартного шрифта, пока грузится пользовательский. Затем вы генерируете страницу заново, и отображается нужный вам шрифт.

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

Заключение

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

Источник

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

В этой заметке я не буду на каком-то профессиональном языке что-то там объяснять. Сам не профи. Просто сделаю своего рода запоминалку и возможно она пригодиться еще кому-нибудь.

Недавно на глаза мне попались ролики на ютюбе по адаптивной верстке и это не спроста. Просто на моём втором блоге шаблон (бесплатный из паблика) уже адаптирован под мобильные устройства: когда зайти с планшета, или телефона, то он красиво подстраивается под размер экрана. А на этом блоге seodnevnik.ru дела плохи. И я решил тоже в этом шаблоне что-нибудь подправить.

CSS-стили под разное разрешение экрана и устройство

В общем, суть в том, что в стилях css можно использовать медиа-запросы. Я этого раньше никогда не делал, поэтому для меня это информация была новой.

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

То есть, для телефона не обязательно показывать сайдбар — его можно убрать вниз, а контент по ширине вытянуть на 100%. Для планшета сделать сайдбар тоже снизу, но по-красивее. Можно еще чего-нибудь намудрить в стилях и показывать тот или иной вид шаблона в зависимости от устройства с которого заходит пользователь.

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

Посмотреть, как выглядит ваш сайт на разных устройствах, можно в браузере Chrome, или Яндекс Браузере, с помощью расширения «Window Resizer». А также можно использовать стандартную «фишку» — нажав клавишу F12, кликните по значку телефона (как показано на скриншоте ниже) и вы попадете в такую среду:

Пример в Яндекс Браузере (при нажатии на F12):

Для чего нужна адаптация? Дело в том, что если пользователю неудобно находиться на сайте с мобильного устройства, то он быстро закроет страничку и уйдет. Соответственно, уменьшается время нахождения, просмотры, или проще говоря — ухудшаются поведенческие факторы. А также и CTR рекламных объявлений, если они тоже как-то криво показываются на планшетах и телефонах.

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».

Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

Источник

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

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

А пока мы советуем нашим клиентам и читателям задуматься об адаптации своих сайтов под мобильные устройства и предлагаем несколько способов сделать это быстро.

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение — статья для вас:

Адаптивный дизайн

В каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

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

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

Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.

Что мы получим?

Сайт, который будет доступен со всех устройств, дизайн будет узнаваем на всех этих устройствах, только элементы будут сдвигаться по вертикали. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) либо будут отображаться в более компактном виде.

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

Отдельный шаблон для мобильных устройств на основном домене

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

Как реализовать?

Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

Также в настройках этих плагинов есть возможность установить, какие блоки будут отображаться в мобильной версии сайта, а какие нет. Есть возможность добавлять свой логотип, что помогает пользователям, зашедшим на ваш сайт с мобильного устройства, идентифицировать ваш сайт.

Плюсы: В случае с плагинами — очень быстрый и простой способ реализации, быстрее, чем адаптивная верстка. В случае создания отдельного шаблона для сайта — возможность упростить дизайн сайта, уменьшить количество активных элементов, т. е. сделать сайт «легче».

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.

Что мы получим?

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

Рассмотрим пример сайта с установленным плагином, который адаптирует его под мобильные устройства.

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

Мобильная версия сайта на поддомене

В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.

Как реализовать?

Этот вариант похож на предыдущий, также достаточно трудоемкий в плане реализации. Но для больших интернет-магазинов с огромным ассортиментом – единственный выход.

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google.

Пришла с небольшими знаниями в настройке, установке и принципах работы нескольких CMS. С тех пор «обросла» знаниями и опытом в разработке сайтов на следующих CMS, PHP и JS/CSS-фреймворках: WordPress, Joomla, Bitrix, MODx, Drupal, Codeigniter, Laravel, Bootstrap.

Разрабатывает, дорабатывает, перерабатывает и адаптирует сайты.

Девиз: если очень захотеть, можно в космос полететь

Источник

Как сделать адаптивный сайт

Адаптивность сайта — это возможность его правильного отображения на устройствах с разными техническими характеристиками. Как сделать сайт адаптивным, что стоит учесть и как проверить правильность отображения сервера? Об этом далее.

Как сделать сайт адаптивным на все экраны?

Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о HTML5, CSS3 и JavaScript. Кроме общих знаний, требуется понимать основные принципы адаптивности.

Только с ними можно начинать делать верстку сайта:

Видео инструкция: Как сделать адаптивный сайт в фотошопе.

Что менять в HTML и CSS коде?

CSS код используется для создания каскадных таблиц, в то время как HTML нужен для указания расположения конкретных элементов, то есть, чтобы сделать разметку страницы. Классы объектов, созданных первым кодом, указываются в тегах для подстраивания выводимых объектов под разрешение.

Адаптивную верстку начинают с создания контейнера для упаковки картинки. Выглядит это следующим образом:

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

При этом созданное изображение может терять свое качество, сужаясь или растягиваясь. Чтобы это исправить, в CSS коде нужно изменить ширину для максимума и минимума в разрешении, прописав следующую структуру:

В целом получаем готовый шаблон для одной картинки на сайт. Чтобы сделать мини-галерею прописываем следующие коды в HTML структуру:

Так загрузили четыре картинки на сайт. В следующем шаблоне придадим картинкам адаптивность с небольшим отступом:

Таким образом, сделали миниатюрную галерею на сайт. Точно так же можно поступать с текстом. Главное – задавать параметры загружаемых файлов под максимальное и минимальное разрешение.

Адаптивное меню

Чтобы сделать адаптивное меню, вначале нужно добавить мега тег meta viewport в раздел шапки. Этот тег нужен, чтобы меню корректно отображалось на любом экране.

Затем добавляем структуру меню по образцу ниже.

Дополнительная седьмая ссылка меню нужна для адаптации сайта под любое мобильное устройство. Далее добавляются стили в body. Это только для декоративных целей. Цвет можно использовать любой. Для примера возьмем бежевое меню. Под body добавляется тег nav. Он позволит сделать навигацию сайта. В этом теге размещаем основные ссылки меню.

Поскольку основных ссылок – 6 штук, то контейнер будет обладать шириной в 600 пикселей, а каждая ссылка – по 100 пикселей. Смотрите ниже.

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

Когда экран станет меньше (при открытии сайта через смартфон), меню будет показано вертикально сверху вниз. В целом, адаптивность готова. Остается только сделать эффект показа меню при нажатии на ссылку. Сделать его можно, прописав следующее body:

Адаптивная шапка сайта

Создать адаптивную шапку на сайт достаточно сложно. До прихода CSS технологии, приходилось использовать обтекание с другими трюками для грамотной верстки страницы. Сегодня все делается просто. Вначале нужно прописать следующий код шапки, состоящий из трех блоков div html кода:

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

В конце нужно сделать созданную шапку сайта адаптивной. Для этого нужно применить свойства justify-content со значением space-between.

В целом, работа окончена. Проверить итог работы можно через удобный сервис Google Mobile Friendly.

Гибкие изображения и видео

Сделать изображения с видео гибкими и адаптивными можно с помощью разных способов. Чтобы не использовать сложный атрибут srcset, рассмотрим примеры настройки картинок и видео через CSS. Для базового расположения одиночных картинок с записями или видео, нужно прописать следующую html и css структуру. Здесь элемент обозначения картинки уже будет адаптивным.

Если нужно собрать на сайте макет из изображений или видео в несколько колонок, то прописываем следующую структуру кодов:

Что касается трехколоночного макета, структура кодов остается такой же. Следует только выбрать ширину сформированного базового контейнера не трех изображениях или видео. Для этого нужно поставить показатели ширины картинок примерно 1/3 ширины контейнера:

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

Чтобы реализовать задуманное, нужно только расставить в body медиа-запросы и указать тип носителя, для которого будут они применяться. Выглядит все следующим образом:

Последний шаблон позволяет сделать широкоформатные адаптивные картинки и видео, заполняющие всю поверхность окна. Реализовать идею можно удалением свойства максимальной ширины контейнера и установки ширины в 100%.

Как сделать адаптивный фон

Чтобы установить адаптивный фон, следует проделать ряд простых шагов:

Адаптивный сайт на Тильде

Адаптивность можно придать сайту с помощью специального конструктора. Одним из самых лучших является Тильда. Он самостоятельно расставляет информационные и графические блоки в нужные места. Однако для начала работы с ним потребуется заплатить порядка 1200 рублей. Особых навыков для работы не требуется.

Подробнее про адаптивность и отзывчивость дизайна сайта.

Преимущества Тильды заключаются в следующем:

Также через Тильду можно добавить на сайт прелоадер (устройство, которое уберет шрифты во время загрузки страницы), эффект печатной машинки, эффект презентации и типографа. Единственный минус – с помощью нее нельзя сделать сайт с более 500 страницами.

Работа с Adobe Muse

Как и Тильда, Adobe Muse является еще одним удобным и современным конструктором начинающего и опытного вебмастера. Он позволяет сэкономить много времени на адаптивности. Все, что требуется от вебмастера, – поработать в редакторе с интерфейсом, а коды сгенерирует система.

Преимущества работы с Adobe Muse следующие:

Обучиться работе с конструктором просто. Для этого есть сотни обучающих видео и книг, рассказывающих о базовом функционале утилиты.

Проверка адаптивности сайта

Чтобы проверить настройку адаптивности сайта и его правильного отображения на всех устройствах, можно воспользоваться браузером или специальным сервисом Google Mobile Friendly (Google Search Console).

Через сервис Google можно проверить адаптивность по ссылке https://search.google.com/test/mobile-friendly.

В целом, сделать адаптивным сайт несложно. Главное – понимать принципы адаптивности и уметь правильно выставлять базовые интернет-настройки для ее создания.

Источник