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


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

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

Хьюстон, у нас проблема

Самый простой способ проверить адаптацию сайта под мобильные устройства – открыть его на этих самых мобильных (смартфон, планшет). Явные признаки проблем:

Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:

Всё слишком мелкое, не получается с первого раза попасть пальцем в кнопку или ссылку:

Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:

Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:

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

1. Mobile Friendly от Google: https://search.google.com/test/mobile-friendly

Вбиваем адрес сайта, жмем «Проверить», видим результат:

2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)

Выбираем адрес сайта, жмем «Проверить», видим результат:

3. Проверка в браузере в Инструментах разработчика

Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:

Ключ на старт

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

Для разработки макета сайта для мобильных можно обратиться:

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

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

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

Поехали!

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

Шаг 1. Указываем тег Viewport

Нам нужно сообщить браузеру, что контент нашего сайта будет подстраиваться под ширину устройства (обычного компьютера, планшета или смартфона) и должен показываться в оригинальном масштабе. Для этого добавляем мета-тег viewport в секцию <head> в коде сайта (можно поставить перед тегом title):

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>

Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).

Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза. Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.

Шаг 2. Обновляем стили сайта

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

/*
  ... стандартные правила CSS ...
  например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
  /*
    ... правила для планшетов ...
    выводим карточки товаров по 2 в ряд
  */
}
@media (max-width:320px) {
  /*
    ... правила для смартфонов ...
    выводим карточки товаров по 1 в ряд
  */
}

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

Что чаще всего делают дополнительные стили:

– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров). Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.

– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.

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

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

Шаг 3. Дорабатываем дизайн сайта

Для некоторых элементов сайта понадобится более серьезная проработка для показа на мобильных. Как правило, это шапка сайта, меню и фильтры в каталоге товаров.

– Шапка сайта и меню. Если просто переместить все строчки в шапке сайта друг под друга (чтобы поместилось в ширину), то на телефоне такая шапка займет весь экран. Переходя по страницам сайта, человек будет вынужден раз за разом пролистывать экран с этой шапкой. Добавьте сюда 5-6 пунктов меню – и пользователь никогда не долистает до контента.

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

– Фильтры. В большинстве случаев фильтр по каталогу товаров располагают в левой части страницы. То есть в коде сайта сначала идет фильтр, а потом список товаров. Из-за этого на мобильных устройствах блок со списком товаров «переезжает» под блок с фильтром – и пользователь сайта рискует вообще не понять, что список товаров на этой странице есть (если фильтров много). Решается проблема просто – скрываем фильтр на мобильных под кнопку «Фильтр». Нажав ее, пользователь развернет необходимые фильтры. А по умолчанию список товаров будет виден сразу в первом экране.

Шаг 4. Сокращаем количество рекламы и всплывающих окон

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

Аналогично и для всплывающих окон. Если спустя какое-то время после загрузки сайта «всплывает» окно с подпиской, спецпредложением и т.п. и при этом занимает более 50% экрана – либо уменьшите это окно до четверти экрана, либо вообще откажитесь от него. Во-первых, на телефонах такие окна раздражают пользователей гораздо сильнее, чем на обычных компьютерах. Во-вторых, поисковые системы могут понижать позиции сайтов с «назойливой» рекламой.

Шаг 5. Сокращаем количество контента

Если на сайте есть контент, который вы полностью скрываете от мобильных пользователей (не под кнопки «Подробнее», «Фильтр» и прочие, а совсем скрываете), то нет смысла вообще загружать этот контент на мобильное устройство – это дополнительный «вес» страницы, и он будет увеличивать драгоценное время загрузки сайта.

Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств). Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.

Для разграничения контента программист может как написать свой модуль, так и воспользоваться одним из готовых решений по определению типа устройства (например, MobileDetect). Во многие CMS такая функция уже встроена по умолчанию (например, wp_is_mobile в WordPress).

Шаг 6. Проверяем все страницы

Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.

Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).

Итог

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

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

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

Адаптивный дизайн в CSS (thesitewizard.com)

Использование медиа-запросов и области просмотра для мобильного дизайна


Кристофер Хенг, thesitewizard.com

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

Предварительные требования

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

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

Адаптивный веб-дизайн

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

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

Преодоление настроек мобильного устройства по умолчанию: окно просмотра

В целях этой статьи, чтобы избежать необходимости уточнять все, что я говорю, делая вещи еще более многословными, чем нужно, Я буду использовать следующее сокращение. Когда я говорю здесь «настольный» или «компьютер», я имею в виду настольный или портативный компьютер, а не смартфон или планшет (хотя последние два тоже компьютеры). И когда я говорю «мобильное устройство», я имею в виду мобильный телефон, планшет с маленьким экраном и т.п., а не портативный компьютер (хотя последний тоже портативный).Без этого сокращения статью будет еще труднее читать, чем сейчас, с несколькими предложения просто, чтобы объяснить, что я имею в виду, когда говорю эти термины. Я также склонен использовать «смартфон» как синоним «мобильное устройство». здесь, чтобы статья не казалась слишком однообразной.

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно разрабатывались для компьютеров. мониторы. Таким образом, он приспосабливается, делая вид, что веб-сайт имеет экран размером с компьютер, и масштабирует все, чтобы оно соответствовало. в этом.Например, Safari на iPhone 5 делает вид, что у него по умолчанию ширина экрана 980 пикселей, хотя реальный размер - 320 пикселей (в портретном режиме). Итак, если вы разрабатываете веб-сайт с фиксированной шириной (скажем) 730 пикселей, вся его ширина уместится на экране вашего мобильного телефона, даже если последний не такой широкий. Браузер выполняет это за счет уменьшения размера вашего веб-сайта, чтобы все стало очень маленьким. Если пользователю нужно что-то прочитать, им придется увеличивать соответствующие части.Вы можете увидеть этот эффект, перейдя в Демонстрационная страница фиксированной ширины на вашем смартфоне. Эта конкретная страница имеет фиксированную ширину 730 пикселей и специально разработана так, чтобы не адаптироваться к вашему использование мобильного телефона.

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

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

Если вы хотите быть ориентированными на будущее, вам теоретически необходимо добавить эквивалентный код CSS в свою таблицу стилей.

@viewport {
ширина: ширина устройства;
зум: 1,0;
}

Вышеупомянутый метод санкционирован в предлагаемых стандартах CSS (т. Е. Фактически еще не ратифицирован).Поскольку такие вещи, как ширина и способ представления веб-страницы, на самом деле являются правилами стиля, они по праву принадлежат таблица стилей вместо метатега в HTML. К сожалению, в то время, когда я писал это, на самом деле ни один веб-браузер реализует его прямо из коробки. Microsoft и Google имеют в своих браузерах экспериментальный код, который его поддерживает, но он должен быть явно включен конечным пользователем.

Если вы хотите протестировать его в Internet Explorer 10, 11 и Microsoft Edge, потому что вы включили средство в свои предпочтения, вы также должны добавить следующее.(Свойство масштабирования еще не реализовано.)

@ -ms-viewport {
ширина: ширина устройства;
}

Префикс « -something- » (например, « -ms- » для Microsoft, « -webkit- » для Google, " -moz- " для Mozilla и т. Д.) - это метод, используемый поставщиками браузеров для добавления поддержки экспериментальных вещей, которые пока официально не добавлены в стандарты. Они делают это потому, что если они добавят, скажем, @viewport преждевременно, с использованием метода предварительных стандартов, который все еще обсуждается и обсуждается, и окончательный стандарт в конечном итоге заканчивается различное значение для этих свойств, то веб-сайты, которые зависят от предварительного стандарта написания @viewport сломает.Это приводит к нечестивому беспорядку, когда производители браузеров должны решать, как интерпретировать правила на веб-сайте. поскольку некоторые сайты будут полагаться на предстандартную семантику, а другие - на официальную. И веб-мастера не будут могут решить проблему, кодируя вещи так или иначе, поскольку они не могут контролировать, посетители используют браузер до или после стандартов. Поэтому решение состоит в том, чтобы предложить версию с префиксом, и включить только тот, без префикса, когда стандарты будут установлены.

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

Ключ, который открывает адаптивный дизайн в CSS: медиа-запросы

Теперь, когда у нас есть браузер мобильного телефона, чтобы воздерживаться от изменения размеров вещей за нашей спиной, мы должны адаптироваться к его маленький экран вручную.Хотя это кажется шагом назад, на самом деле это позволяет нам более подходящим способом, чем автоматическое устройство телефона: например, мы можем изменить размер вещей, которые могут быть измененный размер (например, изображения), оставляя в покое другие, размер которых не должен изменяться (например, слова). Чтобы освободить для этого место, мы можем отправлять не столь важные элементы в нижнюю часть экрана. Например, если вы прочитаете какой-нибудь в статье на сайте thesitewizard.com, включая эту, на мобильном телефоне, вы обнаружите, что мое меню навигации (т. е. список кнопок), который обычно находится в левом столбце в браузере рабочего стола, располагается внизу страницы. на смартфоне.Я решил, что, поскольку пользователь находится на этой странице, его основная цель - прочитать статья. Поэтому я помещаю статью вверху, чтобы посетители могли сразу к ней перейти.

Чтобы совершить подобную магию, нам нужен способ определения размера экрана. Современные браузеры предоставляют эту возможность в виде «медиа-запроса».

Медиа-запрос в таблице стилей выглядит примерно так:

@media screen и (max-width: 320px) {
/ * CSS для экранов размером 320 пикселей или меньше будут помещены в этот раздел * /
}

Любой CSS, заключенный в фигурные скобки теста « @media screen и (max-width: 320px) », будет применимо только к экранам с максимальной шириной 320 пикселей.Вы, конечно, не ограничены тестированием шириной 320 пикселей. Последнее - просто фигура, которую я выбрал для этого примера. Вы можете протестировать min-width и max-width любого размера. Вы даже можете проверить диапазон размеров, например, в следующем коде.

@media screen и (min-width: 320px) и (max-width: 640px) {
/ * для экранов шириной не менее 320 пикселей, но не более 640 пикселей * /
}

Правила CSS, не заключенные в раздел « @media », применяются ко всем.И код, который прилагается в конкретном разделе « @media » будет использоваться только при выполнении условий запроса. Если у вас есть несколько условий, которые должны выполняться одновременно, соедините их с « и », как в приведенных примерах. У вас может быть несколько блоков медиа-запросов, каждый из которых будет применяться только при выполнении условий для этого блока.

/ * код, который здесь, до первого блока @media, будет применяться к любому размеру экрана * /
#somethingorother {
ширина: 800 пикселей;
}

@media screen и (max-width: 320px) {
/ * вступает в силу для экранов, размер которых меньше или равен 320 пикселей * /
#somethingorother {
width: 120px;
}
}
@media screen и (min-width: 321px) и (max-width: 480px) {
/ * вступает в силу для экранов от 321 до 480 пикселей (включительно) * /
#somethingorother {
width: 320 пикселей;
}
}
@media screen и (min-width: 481px) {
/ * вступает в силу для экранов размером не менее 481 пикселя * /
#somethingorother {
width: 480px;
}
}

/ * приведенный здесь код будет применяться к любому размеру экрана * /

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

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



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

Тестирование портретного и ландшафтного режима с помощью медиа-запросов

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

экран @media и (ориентация: книжная) {
/ * ... * /
}
экран @media и (ориентация: альбомная) {
/ * ... * /
}

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

Другие полезные функции в медиа-запросах

Помимо вышеуказанного, вы также можете вставить тесты для минимальной высоты (т. Е. Минимальной высоты), максимальной высоты (максимальная высота), ширина и высота .

Кроме того, вы можете начать медиа-запрос с « только », как показано в следующем фрагменте:

Только экран @media и (max-width: 480 пикселей) {
/ *... * /
}

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

Если вы хотите использовать CSS для всех ситуаций, кроме случаев, когда выполняются определенные условия, вы можете использовать " not " перед вашим условием, как в следующем примере.

@media not (max-width: 639px) {
/ * Правила CSS для любого устройства, ширина которого превышает 639 пикселей * /
}

(Обратите внимание, что, поскольку я не указал « экран » в приведенном выше примере, это подразумевает « все » что означает все устройства.)

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

Разрешение / ширина экрана мобильного устройства

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

  • 240 пикселей (старый портретный режим Android)
  • 320 пикселей (iPhone 3-5 и iPhone SE в портретном режиме)
  • 375 пикселей (iPhone 6, 6s, 7, 8 и X портрет)
  • 384 пикселя (Android Nexus портрет)
  • 414 пикселей (iPhone 6 Plus, 6s Plus, 7 Plus и 8 Plus, портретная ориентация)
  • 480 пикселей (iPhone 3 и 4 альбомный режим)
  • 568 пикселей (iPhone 5 и iPhone SE в горизонтальной ориентации)
  • 600 пикселей (Android Nexus в альбомной ориентации, Kindle в портретной ориентации)
  • 667 пикселей (iPhone 6, 7 и 8, альбомная ориентация)
  • 736 пикселей (iPhone 6 Plus, 7 Plus и 8 Plus в альбомной ориентации)
  • 768 пикселей (iPad портрет)
  • 812 пикселей (iPhone X, альбомная ориентация)
  • 1024 пикселей (iPad, альбомная ориентация)

На сайте мастера.com, я рассматриваю всю ширину экрана выше 629 пикселей как достаточную для моей двухколоночной схемы. Приведенные ниже разрешения получают один столбец, при этом столбец навигации (левый столбец) сдвинут вниз. экрана. Вы можете увидеть эффект моих мобильных правил CSS, даже если вы находитесь на рабочем столе: просто измените размер вашего в окне браузера находится именно эта статья, которую вы читаете. Если вы уменьшите ширину меньше 629 пикселей, вы получите единственный столбец, который видят мобильные пользователи.

Обратите внимание, что вам не обязательно следовать моей системе разделения CSS на 629 пикселей.Это просто цифра, которую я использовал потому что, похоже, он отлично работает с контентом thesitewizard.com. На самом деле, если я правильно помню, я видел сайт, переключился на мобильный макет только на 480 пикселей, а другой переключился на разные макеты в зависимости от того, Экран имел 940, 640 или 520 пикселей по горизонтальной оси. Я рекомендую вам не слепо следить за размером других сайтов условия: используйте номер, соответствующий вашему содержанию, протестируйте и измените его соответствующим образом.

Совместимость с веб-браузерами

Средство медиа-запросов, которое позволяет нам тестировать размер экрана, появилось позже на сцене веб-браузера.То есть CSS существовал уже много лет, прежде чем в стандарт были включены средства условного применять определенные правила к определенным размерам экрана. Таким образом, очень старые браузеры не поддерживают эти функции.

Что касается смартфонов, насколько мне известно, медиа-запросы поддерживаются только в браузерах Android, начиная с с версией 2.1, на iPhone Safari 3.2 и новее, Blackberry 7 и новее, Opera Mobile 12 и новее, Opera Mini 8, и Internet Explorer («IE») для мобильных устройств 10 и более поздних версий.

Что касается браузеров для настольных ПК / ноутбуков, поддержка, похоже, началась с IE 9, Firefox 3.5, Safari 4 и Chrome 4. Поскольку Microsoft Edge изначально был основан на коде IE 11, он всегда имел поддержку медиа-запросов.

Учитывая вышесказанное, насколько безопасно использовать медиа-запросы на вашем сайте?

  • Многое зависит от демографии вашего сайта. Например, если на вашем сайте много люди, использующие телефоны с IE mobile 9 и более ранними версиями, вероятно, захотят поддержать их.

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

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

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

Следующая глава

В следующей главе рассматриваются некоторые способы изменения макета из двух столбцов, чтобы он был готов для мобильных устройств. Если ваш сайт представляет собой сайт с одной колонкой, пожалуйста, прочитайте, как сделать одну колонку Вместо этого сайт оптимизирован для мобильных устройств (HTML / CSS).

Авторские права © 2016-2020 Christopher Heng. Все права защищены.
Получите больше бесплатных советов и подобных статей, по веб-дизайну, продвижению, доходам и написанию сценариев с https://www.thesitewizard.com/.

.

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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

.

Как сделать веб-сайт более удобным для мобильных устройств

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

Для владельцев веб-сайтов это означает, что настало время, чтобы ваш веб-сайт был удобен для мобильных устройств.

В 2016 году использование мобильного Интернета впервые превысило использование компьютеров.И с тех пор эта тенденция только усилилась. Более половины всего трафика веб-сайтов во всем мире сейчас приходится на смартфоны.

Хотя распределение посещаемости веб-сайтов для отдельных веб-сайтов будет различным, примерно половина всех ваших посетителей, вероятно, будут просматривать ваш веб-сайт на маленьком экране телефона. Иметь удобный для мобильных устройств веб-сайт больше не обязательно. Если посетители с мобильных устройств не очень довольны вашим сайтом, вы отгоните огромную часть трафика (и тем самым ухудшите рейтинг в поисковых системах).

Вы уже слышали это раньше, но мы повторяем это снова: ваш веб-сайт должен быть адаптирован для мобильных устройств.

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

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

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

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

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

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

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

1. Сделайте ваш сайт адаптивным.

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

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

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

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

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

2. Сделайте так, чтобы людям было легче найти информацию.

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

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

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

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

3. Откажитесь от рекламы и всплывающих окон с блокировкой текста.

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

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

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

4. Сделайте скорость веб-сайта своим приоритетом.

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

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

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

  • Используйте AMP (ускоренные мобильные страницы) AMP - это структура, которую Google поощряет для ускорения загрузки веб-страниц на мобильных устройствах. Если у вас есть веб-сайт WordPress, вы можете начать работу с плагином AMP.
  • Сжимайте изображения и CSS - Медленнее всего загружаются те части веб-страницы, которые имеют большой размер и занимают много места, например изображения с высоким разрешением и CSS.Вы можете ускорить загрузку веб-сайта, сжав размеры файлов изображений, чтобы они загружались быстрее, не влияя отрицательно на качество того, что люди видят на сайте.
  • Проверьте свой план веб-хостинга - Если ваш веб-сайт перерос план веб-хостинга, с которого вы начали, или если вы выбрали менее уважаемого хостинг-провайдера, одним из негативных последствий может быть более медленное время загрузки. Вы можете ускорить процесс, перейдя на план веб-хостинга, который соответствует вашим текущим потребностям.

5. Сохраняйте простой веб-дизайн.

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

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

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

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

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

Лучший способ избавить посетителей от этого разочарования - использовать кнопки большего размера. И подумайте, где именно на экране вы их разместите. Эксперт по пользовательскому интерфейсу Джош Кларк пишет, : «Хотя большой палец может охватить большую часть экрана на всех телефонах, кроме самых негабаритных, только треть экрана - это действительно легкая территория: внизу, на стороне напротив большого пальца.”

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

7. Используйте шрифт большого размера.

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

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

8. Не используйте Flash.

Использование вспышки на вашем сайте - ошибка SEO. Это может замедлить загрузку страницы, а во многих браузерах и устройствах это просто не работает. Ни устройства Android, ни iOS не поддерживают flash, поэтому, если вы создаете веб-сайт, который каким-либо образом зависит от опыта флэш-анимации, ваши мобильные пользователи останутся в стороне.

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

9. Включите метатег видового экрана.

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

Добавить это в свой html довольно просто. Просто вставьте это в html для каждой страницы:

10. Отключите автозамену для форм.

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

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

В поле ввода убедитесь, что вы включили autocorrect = off в html.

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

11. Дайте возможность переключиться на вид рабочего стола.

Некоторые из ваших мобильных посетителей могут фактически предпочесть версию вашего веб-сайта для ПК вместо мобильной (особенно если вы используете мобильную версию своего веб-сайта, а не адаптивный сайт).

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

12. Регулярно проводите мобильное тестирование.

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

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

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

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

Кристен Хикс - внештатный писатель из Остина, постоянный ученик и постоянное любопытство к новым знаниям. Она использует это любопытство в сочетании с ее опытом работы в качестве внештатного владельца бизнеса, чтобы писать в блоге HostGator о предметах, ценных для владельцев малого бизнеса. Вы можете найти ее в Твиттере по адресу @atxcopywriter.

Связанные

.

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

Большинство из нас просматривают Интернет, делают покупки в Интернете и даже оплачивают счета с помощью наших мобильных устройств, потому что они удобны и легко доступны. Согласно исследованию Forrester «Цифровой бизнес-императив», 43% клиентов банковского сектора в США использовали мобильные телефоны для выполнения банковских операций в течение трех месяцев.

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

Веб-страницы обычно состоят из одного или нескольких из следующих компонентов: верхнего и нижнего колонтитула, основного содержимого (текста), изображений, форм, видео и таблиц. Устройства различаются по таким функциям, как размер экрана (длина x ширина), разрешение экрана (плотность пикселей), вычислительная мощность (процессор и память) и операционная система (iOS, Android, Windows и т. Д.)). Эти различия существенно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще одним важным фактором является то, что мобильные пользователи не всегда могут быть подключены к высокоскоростной сети, поэтому веб-страницы должны быть тщательно спроектированы для эффективной работы в соединениях с низкой пропускной способностью.

Самые неприятные проблемы на мобильных платформах

Вот некоторые из наиболее распространенных проблем, которые могут повлиять на производительность и масштабируемость веб-сайтов на разных устройствах:

  • Сайты не адаптируются автоматически к разным размерам экрана. Некоторые веб-сайты предназначены для форматирования экрана переменного размера, но их элементы могут не масштабироваться автоматически. Это приведет к тому, что сайт будет автоматически настраиваться для различных размеров экрана, но элементы сайта могут выглядеть слишком большими на небольших устройствах. Некоторые сайты могут быть не предназначены для настройки экрана переменного размера, в результате чего элементы выглядят очень маленькими на устройствах с меньшими экранами.
  • На сайтах слишком много контента для мобильных устройств. Некоторые веб-сайты загружаются с контентом, чтобы заполнить пустое место на экране рабочего стола.Веб-сайты, разработанные без учета мобильных пользователей, обычно подпадают под эту категорию. Этим сайтам требуется больше времени и пропускной способности для загрузки, и если страницы не предназначены для мобильных устройств, часть контента может даже не отображаться.
  • Сайты загружают изображения слишком долго. Веб-сайты со слишком большим количеством изображений или тяжелыми файлами изображений, вероятно, будут долго загружаться, особенно если изображения не были оптимизированы на этапе разработки.
  • Данные в таблицах выглядят сложными и загружаются слишком долго. Многие веб-сайты представляют данные в виде таблиц (например, сравнение конкурирующих продуктов, данные о стоимости авиабилетов с разных сайтов путешествий, расписания рейсов и т. Д.), А на мобильных устройствах эти таблицы могут быть медленными и трудными для понимания.
  • На веб-сайтах размещены видео, которые не воспроизводятся на некоторых устройствах. Не все мобильные устройства поддерживают все форматы видео. На некоторых веб-сайтах размещены медиафайлы, требующие лицензии, Adobe Flash или другие проигрыватели, которые могут не поддерживаться некоторыми мобильными устройствами.Это вызывает разочарование и плохое взаимодействие с пользователем.

Создавайте свои сайты для адаптации к различным устройствам

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

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

  • Адаптация к любому размеру экрана . Как минимум, веб-страницу необходимо масштабировать под размер экрана любого мобильного устройства. Сегодняшние мобильные устройства имеют очень высокое разрешение экрана. Плотность пикселей на мобильных устройствах намного выше, чем на экранах настольных компьютеров, поэтому важно отформатировать страницы так, чтобы они соответствовали ширине экрана мобильного устройства в пикселях, не зависящих от устройства.Тег «meta viewport», включенный в документ HTML, отвечает этому требованию.

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

  • «Контент - это король». Контент должен определять дизайн веб-сайта, а не наоборот. Веб-сайты со слишком большим количеством элементов, таких как таблицы, формы, диаграммы и т. Д., Становятся сложными, когда их нужно масштабировать на мобильных устройствах. Разработчики в конечном итоге скрывают контент для мобильных пользователей, и настольная и мобильная версии становятся несовместимыми.Дизайн должен быть сосредоточен на основной структуре и содержании, а не на декоративных элементах. Методология, ориентированная на мобильные устройства, обеспечивает единую версию контента как для настольных, так и для мобильных пользователей, поэтому веб-дизайнеры должны тщательно продумывать, создавать и оптимизировать контент, чтобы он не только отвечал бизнес-целям, но и нравился пользователям мобильных устройств. Контент, который не отображается в мобильной версии, может даже не отображаться в версии для ПК.
  • Адаптивные изображения . При проектировании следует учитывать небольшие портативные устройства, работающие в зонах с низким уровнем сигнала.Большие фотографии и сложная графика не подходят для мобильных устройств, работающих в таких условиях. Убедитесь, что все изображения оптимизированы для разных размеров окон просмотра и плотности пикселей. Рекомендуемый подход - переключение разрешения, которое позволяет браузеру выбрать файл изображения подходящего размера в зависимости от размера экрана устройства. Переключение разрешения использует два атрибута - srcset и , размеры (показаны во фрагменте кода, показанном ниже), которые позволяют браузеру использовать ширину устройства для выбора наиболее подходящего состояния носителя, представленного в списке размеров, выберите размер слота на основе при этом условии и загрузите изображение, указанное в srcset , которое наиболее точно соответствует выбранному размеру слота.

Например, если устройство с окном просмотра 320 пикселей загружает страницу, условие мультимедиа (max-width: 320 пикселей) в списке размеров будет истинным, и будет выбран соответствующий слот 280 пикселей. Ширина первого изображения, указанного в srcset (elephant-320w.jpg), ближе всего к этому слоту. Браузеры, которые не поддерживают переключение разрешения, отображают изображение, указанное в атрибуте src, как изображение по умолчанию. Этот подход не только выбирает правильное изображение для области просмотра вашего устройства, но также предотвращает загрузку излишне больших изображений, которые потребляют значительную полосу пропускания.

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

    К счастью, есть несколько способов создания адаптивных таблиц. Вот один из самых эффективных:

    • Столбцы таблицы переставлены в строки. Размер каждого столбца равен ширине экрана, что исключает необходимость горизонтальной прокрутки. Использование цвета помогает пользователям четко различать каждую отдельную строку данных.В этом случае для каждой «ячейки» должно использоваться содержимое (: before) , созданное CSS, чтобы применить метку, чтобы можно было четко идентифицировать каждую часть данных.
    • Другой подход - отображать данные в одном из двух форматов в зависимости от ширины экрана: в формате диаграммы (для узких экранов) или в формате полной таблицы (для более широких экранов). Если пользователь хочет щелкнуть диаграмму, чтобы увидеть полную таблицу, можно использовать описанный выше подход для отображения данных в табличной форме. (: До)
    • Третий подход - показать мини-графику на узком экране, чтобы указать наличие таблицы.Пользователь может щелкнуть изображение, чтобы развернуть и отобразить таблицу.
  • Видео, которые всегда воспроизводятся. Видеофайлы обычно не воспроизводятся на мобильных устройствах, если их форматы не поддерживаются или для них требуется проприетарный видеопроигрыватель. Рекомендуемый подход - использовать стандартные теги HTML5 для видео и анимации. Элемент видео в HTML5 можно использовать для загрузки, декодирования и воспроизведения видео на вашем веб-сайте. Создавайте видео в нескольких форматах для разных мобильных платформ и убедитесь, что размер видео выбран правильно, чтобы они воспроизводились в своих контейнерах.

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

Свойства videoWidth и videoHeight элемента video помогают определить размер закодированного видео.Размеры видео можно контролировать с помощью JavaScript или CSS. max-width: 100% помогает подобрать размер видео по размеру экрана. Медиа-запросы CSS можно использовать для установки размера на основе размеров области просмотра. Также существует несколько библиотек и плагинов JavaScript, которые могут поддерживать соотношение сторон и размер видео.

С учетом всех обстоятельств…

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

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

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

Список литературы

Что читать дальше

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий