0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

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

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


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

И не уходя далеко от темы. Если ваш сайт запрашивает email у пользователя — используйте поле email , чтобы посетителю не приходилось вводить символ @ с клавиатуры мобильного устройства:

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

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

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

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


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


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

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

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

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


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

Если вы используете изображения в качестве фона не с помощью тега img , просто установите CSS свойство background-size в значение contain . Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:

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

Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta . Если это не так — пользователь не сможет пользоваться зумом:

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

После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:

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

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

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

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

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

Читать еще:  Нужна ли математика программисту

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

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

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


Избегайте этой ситуации с помощью свойства word-wrap . Так будет выполнен перенос, когда строка достигнет края экрана. Пользователь увидит все необходимое без использования прокрутки:

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

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

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

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

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

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

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

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

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

Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed . Будьте внимательны.

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


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

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

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

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

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


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

Для этого нужно написать два варианта CSS -правил. Один вариант для использования шрифта по умолчанию, а другой — для применения скачанного шрифта.

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

Обратите внимание, что селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader’ом , но только после того, как шрифт загружен.

Заключение

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

Данная публикация представляет собой перевод статьи « 10 Ways to Make Your Website More Mobile Friendly » , подготовленной дружной командой проекта Интернет-технологии.ру

Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

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

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

Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.

Читать еще:  Сколько километров от Луны до Марса

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам

Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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

Рис. 2. Пример адаптивной верстки

1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню

3. Блок с кратким содержанием статьи

Анонс статей обернём элементом :

4. Боковая колонка

5. Нижний колонтитул

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

6. Общие CSS-стили

Общие стили, сброс стилей браузера по умолчанию:

7. Стили для шапки и её содержимого

8. Стили для блока с основным содержимым

9. Стили для боковой колонки

10. Стили для нижнего колонтитула

Подвал сайта разделим на три равных столбца:

11. Медиа-запросы

12. Скрипт для мобильного меню

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом

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

Добрый день!
Столкнулся с проблемой, при написании сайта.

На jQuery, разбирал скрипт «растяжки» блоков с контентом, под ширину экрана. Какой бы ни была ширина/масштаб страницы — столбик с контентом не был статичен, и подстраивался под ширину.
Первая миссия была выполнена. Однако, задался ещё одним вопросом.
Когда масштаб страницы увеличивается, то контент сайта позиционируется в левом верхнем углу, и при открытии сайта, к примеру на мобилках, то со стандартным пользовательским масштабированием, виднеется лишь левый верхний угол. после этого необходимо «вручную», скроллингом менять масштаб, что бы увидеть всё.
Вопрос. Знаю, такое не очень любят на форумах. Но нет ли готового скрипта, решения, подсказки, как реализовать при открытии сайта, что бы масштаб выставлялся, относительно видимости?
Поясню.
Ширина шапки сайта(как и колонки со всем контентом) — 1238px
Если, у пользователя ширина его вида в браузере отображает >= 1238px, тогда, не масштабировать. иначе, применить масштабирование с коэффициентом 1238/(ширина вида пользователя)
Каким образом можно корректно реализовать это?

Пробовал через параметры тега meta и viewport, однако из-за указаний статичной ширины блока в px, подстройка не реагирует.

Нахождение ряда js скриптов, так же не привели ни к чему хорошему.
Подстройка блоков, и настройка адаптивного дизайна не подходит. «Резиновые» параметы, такие как % vw или vh, так же не могут быть использованы, ввиду сложнозависимых подсистем.

Заранее, большое спасибо за понимание и ваши ответы!

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

Читать еще:  Какой город является столицей Чили

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

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

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

Кривая адаптация под мобильные устройства
Добрый день! Сначала открываю сайт в браузере в вертикальном положении, затем ставлю телефон в.

Не знаю может окажись сильно не прав. Но не проще ли замутить адаптивную верстку через

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

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

Вообще, возможно ли управлять масштабированием? К примеру, применить условие, что если ширина вида в браузере меньше 1238px, то масштаб(ctrl и +/-) = 50% А иначе = 100%.

Решение

Итак, структура сайта:
Как обычно, начинаем с
Продолжаем с .
Затем, у нас идёт блок под всю ширину страницы width:100% и с высотой, под всю высоту экрана устройства height:device-height; Назовём этот блок #fons. Зачем он нужен? Затем, что бы при изменении масштаба страницы, блок с контентом, всегда центрировался. Ведь так и красиво и удобно, в сравнении с привязкой к левому-верхнему углу.
в CSS — файлике, задаём параметр для блока:

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

1 способ — автор Fedor92
1) Самое важное, но то, что я не понял, это добавить правила для html и body

Хотя. это вполне логично. нам нужно растянуть контент по ширине вида. Затем, к блокам, что унаследуют значения родителя, будет применен данный параметр «растяжки» и всё растянется под указанную ширину и высоту. Логично. но, не понятно

2) Затем, внутрь тега пишем:

Где, мы имеем ввиду, что при открытии сайта, сделать ширину вида в браузере, равной 1238px.

Получилось? Вид отображается корректно и шапочка сайта красуется по всей ширине? Какая прелесть! Поздравляем!

Нет? Не работает? В таком случае пробуем решить проблему способом №2.

2 способ
А поможет нам в решении этой проблемы великий и могучий, скромный и тихий, таинственный и весёлый — JavaScript. НО! В начале, определим ход действий.
Нам необходимо, что бы на мобильных устройствах, с шириной окна меньше чем 1238px(да, да, это и 1024, и 512, и 320, и даже 128 пикселей в ширине. ) умещался целиком контент с 1238px. Что? Выстраивать всё в столбик, меняя позиции? неее, не красиво. да и работы много. А если использовать ширину под 100%. Хм. в таком случае, это грозит вам вычислять пропорциональные зависимости для всех блоков вашего сайта. Но есть, кое-что ещё. Скажите, если картинка слишком большая, на устройстве, что вы делаете? Прааавильно, пальчиками сдвигаете картинку и меняете масштаб. А что, если менять масштаб, при открытии страницы? А ещё лучше — менять масштаб не только при открытии сайта, но и при смене ориентации экрана с портретной(portland) на горизонтальную(landscape)!
Но как узнать, какое значение масштабирования использовать? По-умолчанию, 1.0 = 100% вида. А так как, на мобильных гаджетах, все приложения открываются во весь экран(не считая виджетов, и да, речь идёт в основном о iOS и Android), то значит, 100% — это вовсе не 1236px. а ширина/высота девайса.
Чтож. возьмём за основу данные, по разрешению экрана устройства. И, включим логику программистов :з
Если ориентация портретная, то ширина = высоте разрешения экрана устройства. Иначе, если ориентация лендскейпная, тогда, ширина = ширине разрешения экрана устройства.
Как вычислить масштаб? Это очень просто. Необходимо ширину(высоту) девайса разделить на необходимую ширину(в нашем случае — 1236px).
Как же всё это закодить?
Оказалось, очень просто:

Источники:

http://www.internet-technologies.ru/articles/10-sposobov-adaptacii-vashego-sayta-pod-mobilnye-ustroystva.html
http://html5book.ru/adaptivnaya-vyorstka-sayta/
http://www.cyberforum.ru/html/thread1784167.html

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector