заработок в интернете, работа на дому, как создать свой сайт, как заработать в интернете, заработок в интернет, заработок в сети, интернет реклама, интернет бизнес, интернет деньги, контекстная реклама

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

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

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

Применяйте CSS вместо <font> и других встроенных элементов HTML.
Если вы видите страницу, область которой выходит за границы экрана, это, вероятно, вызвано каким-то широким элементом HTML. Следует использовать элементы HTML с CSS, которые позволяют создавать всплывающие элементы, способные изменять свой размер в зависимости от типа устройств.

Удалите все размеры, указанные в пикселях (например, <table width=600>), и замените их относительной шириной (например, <table width=«80%»>), максимальной (<table style=«max-width:600px;»>) или установите адаптивный показатель ширины, который зависит от запроса.

Добавьте img { max-width:100% } в таблицу стилей. Это простой способ справиться с широкими изображениями, чтобы масштабировать их в пределах ширины устройства.

Избегайте использования <table> при планировке страницы. Используйте <table> только для уже сверстанных таблиц. Если такой тег уже есть, во-первых, преобразуйте его в div + CSS floats/inline блоки для правильного размещения на экране. После этого добавьте медиа-запросы.

Избегайте широких таблиц (с 3-4 колонками и более); они не могут вписаться в мобильные экраны. Если вы уже используете такие таблицы на вашем сайте, мы рекомендуем вам изменить их (например, перенести таблицу) или преобразовать код в стиль без таблицы (например, <dl>).

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

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


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

1. Мета-тег Viewport

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

Ниже приведен пример того, каким образом можно использовать мета-тег Viewport в «head» вашего документа.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Вы также можете добавить его в таблицу стилей следующим образом:
@-viewport {
width: device-width;
}
Мета-тег Viewport – это незаменимый тег (вкупе с media queries), если вы хотите создать полностью адаптивный веб-сайт. Тем не менее, вы технически имеете возможность устанавливать данный мета-тег и для неадаптивных веб-сайтов.

2. Media Queries

Media Queries позволяет вам переключать стили вашего веб-сайта и устанавливать точки преломления шаблона (так называемые брейкпоинты). Ведь не все элементы из обычного шаблона вашего сайта смогут уместиться на столь небольшом экране мобильного устройства.
Используя Media Queries, вы можете добавить определенные правила для отдельных размеров экранов. Мы также можем применять стили на основе ориентации экрана и уровня плотности отображения экрана.
Вы можете встроить media queries либо напрямую в ссылку ссылку на документ таблиц стилей:
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" />
Либо в сам документ таблиц стилей (этот метод наиболее широко распространен среди разработчиков):
@media screen and (max-width: 960px) {
/** Style Rules here **/
}

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

Откройте ваш сайт в браузере вашего компьютера и уменьшайте ширину окна программы до тех пор, пока не сможете что-либо прочитать в нем.
Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head:
<meta name=viewport content="width=700">
В следующий раз, когда ваш сайт будет открыт на мобильном устройстве, будет автоматически установлена указанная вами ширина. Посетителю сайта не придется пользоваться зумом:
Если же ваш сайт построен на основе резиновой верстки и работает со всеми размерами экрана, ваша задача становится еще проще. Нужно экспериментировать с шириной, при которой вид сайта на мобильном устройстве становится приятным и читабельным, и установить это значение в теге meta.

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

Теперь, когда ваш сайт имеет определенную ширину, некоторые изображения станут очень широкими. Этого не случалось ранее, потому как разрешения десктопных мониторов довольно широки и большинство картинок помещаются по ширине:
Чтобы этого избежать, установите значение максимальной ширины ваших изображений в 100%. Таким образом, изображения будут автоматически менять размер в случаях, когда они окажутся слишком велики для экрана мобильного устройства. Добавьте код, приведенный ниже, в CSS-стили вашего сайта:
img { max-width: 100% }
Если вы используете изображения в качестве фона не с помощью тега img, просто установите CSS свойство background-size в значение contain. Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:
.header { background: url(header.png) 50% no-repeat; background-size: contain }
Если вы переживаете, что изображение станет менее четким, то вы зря волнуетесь. На современных мобильных устройствах такого не произойдет.
Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta. Если это не так - пользователь не сможет пользоваться зумом:
<!-- ТАК ДЕЛАТЬ НЕ СТОИТ! --> <meta name=viewport content="user-scalable=no">


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

После того, как ширина изображений установлена через свойство max-width, сделайте похожий трюк с полями input. Просто добавьте в файл CSS – файл вашего сайта:
input, textarea { max-width:100% }
При просмотре сайта с мобильного устройства этот параметр не даст полям input выйти за пределы экрана.
8. Преимущества медиа-запросов
Вы можете создать пользовательские стили, которые будут работать только при просмотре сайта с мобильных устройств (или же отображаться в маленьком окне браузера), а на настольном компьютере сработает обычный вариант веб-страницы. Используйте для этого целевые стили внутри медиа-запросов как в примере ниже:
<style> /* regular css */ .tabs { padding: 10px 2em } @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */ .tabs { padding: 3px 1em } } </style>

http://quirktools.com/screenfly/ - как выглядит

1. Посмотреть отказы на каких размерах

Отдельного упоминания заслуживают два преимущества адаптивного дизайна перед мобильной версией сайта. Во-первых, сам Google рекомендует использовать адаптивную верстку. Во-вторых, этот способ адаптации под мобильный трафик позволяет сохранить единый дизайн сайта при отображении на экране любого гаджета.
Шаг 2: замените ссылки на «тапабельные» кнопки
Ориентируйтесь на следующие рекомендации:
• Apple рекомендует разработчикам интерфейсов для смартфонов создавать кнопки и навигационные элементы с минимальными размерами 44 на 44 пикселя.
• Nokia считает минимально допустимым размером элемента управления 48 на 48 пикселей или 0,7 на 0,7 см.
• Microsoft считает оптимальным размером кнопки 34 на 34 пикселя.

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




Что ещё почитать:

 

 

Заработок в интернете - Как заработать в интернете - Работа на дому - Как создать свой сайт - Интернет реклама


2017 © zirnet.ru