Верстка сайта для мобильных устройств: Делаем мобильнуб версию сайта

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

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

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

Эта цитата принадлежит Эрнсту Шумахеру, мыслителю, влияющему на умы, экономисту и автору труда «Малое – прекрасно: экономика, в которой люди имеют значение». В рейтинге The Times эта книга входит в 100 самых влиятельных книг, выпущенных после Второй Мировой Войны.

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Использование Wireframe’ов

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

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

Никогда не приступайте к этапу создание wireframe’а без конкретного списка того контента, который будет в финальном дизайне. А также не забывайте экспериментировать с несколькими макетами.

Улучшайте и Упрощайте (или упрощайте пока не сломается)

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

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Опциональные ограничения

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Для сети

Старайтесь ограничиться 3-4-мя пунктами меню. Такой подход не собьет пользователя и облегчит работу с макетом на будущее.

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Элементы Умного Дизайна

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

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Шаблоны и цвета

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

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

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

Для сети

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

Для мобильных устройств

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

Ни для сети, ни для мобильных устройств

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

Заключение

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

Автор: Gabrielle Gosha

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

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

Руководитель проектов продвижения ЭкоSEO

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

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

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

Мобильная версия сайта — это копия сайта, адаптированная под размер мобильного устройства, на поддомене (m.site.ru) или папке (site.ru/m). Самый распространенный способ — отдельная мобильная версия на поддомене.

Плюсы мобильной версии сайта

1. Более низкая стоимость.

Разработка мобильной версии обойдется намного дешевле, чем адаптивная верстка. Фактически, это копия сайта, сверстанная с учетом размера экрана мобильного устройства.

2. Высокая скорость загрузки.

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

3. Возможность независимого управления контентом.

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

Минусы мобильной версии

1. Продвижение двух версий сайта.

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

2. Сложности продвижения двух версий.

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

Но этого можно избежать, если следовать рекомендациям поисковиков: чтобы не допустить дублирование контента, необходимо на всех страницах мобильной версии указать каноническую ссылку на соответствующую страницу основного домена сайта с помощью тега rel=«canonical».

На основном же домене следует разместить ссылку на альтернативную версию страницы для пользователей мобильных устройств при помощи тега rel=»alternate».

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

3. Отдельное доменное имя.

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

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

Адаптивная верстка сайтов — это оптимизация меню и дизайна сайта под разные типы устройства. Контент сайта не меняется в зависимости от устройства, и поисковый робот видит одинаковый html-код как на смартфоне, так и настольном компьютере. Но, вместе с этим, определяет, что контент помещается на любом экране.

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

1. Все на одном домене.

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

• Во-первых, пользователям не придется запоминать отдельное доменное имя или искать ссылку на мобильную версию;




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




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

2. Оптимизация под все устройства.

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

Минусы адаптивной верстки

1. Медленная загрузка сайта.

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

2. Один и тот же контент для разных устройств.

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

3. Более высокая стоимость.

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

Вывод

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

Адаптивная верстка

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

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

Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

Пример адаптивной верстки — сайт domportretov.ru,
где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:

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

1. просто менять размер экрана браузера,
2. расположить справа панель инспектора компонентов и менять ее ширину,
3. использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.

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

Метатег viewport

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

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

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

Пример

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Основные свойства метатега <viewport>

Контент шире экрана – часто возникающая проблема, как только задан viewport.

Это происходит, если каким-то элементам задана большая фиксированная ширина.

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

Пример

.content {
    width: 100%;
    max-width: 1200px;
}

Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.

Медиа-запрос начинается с правила @media, после которого следует условие применения стилей,
состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).

Типы носителей

Логические операторы

Основные медиа-функции

Пример

Задан размер заголовка:

h2 {
    font-size: 72px;
}

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

@media all and (max-width: 360px) {
    h2 {
        font-size: 42px;
    }
}

Новые единицы размеров (vw, vh, rem)

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример

body {
    min-height: 100vh;
}

Размер шрифта при адаптивной верстке удобно задавать в rem (root em).
Эта единица измерения вычисляется на основе размера шрифта корневого элемента <html>.
По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример

html {
    font-size: 10px;
}
body {
    font-size: 1.6rem;
}
h2 {
    font-size: 7.2rem;
}
@media all and (max-width: 360px) {
    body {
        font-size: 1.4rem;
    }
    h2 {
        font-size: 4.2rem;
    }
}

Flexbox

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

Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали,
распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример

ul.flex {
    display: flex; /* flex-контейнер */
    flex-wrap: wrap; /* многострочный режим */
    justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */
}
li.flex {
    display: inline-block;
    flex-basis: 260px; /* базовая ширина элемента */
    flex-grow: 1; /* все элементы одинаковой ширины */
    max-width: 300px;
    padding: 8px;
}

В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

На узком экране список станет вертикальным:

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

Адаптивная верстка таблиц

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

1. Таблица с горизонтальной прокруткой. Самый простой метод.
   Надо задать для ячеек таблицы white-space: nowrap; и поместить таблицу в блок с overflow-x: scroll.
2. Таблица с невидимыми столбцами. Суть метода заключается в том, что на экране с маленькой шириной
   скрываются менее важные столбцы.
3. Перевернутая таблица. Таблица транспонируется, т.е. столбцы превращаются с строки за счет применения display: inline-block.
   Таким образом, <thead> таблицы становится первым столбцом, а для <tbody> используется {overflow-x: auto; white-space: nowrap;}
4. Больше не таблица. Метод основан на использовании data-атрибутов.

Читать дальше: @media screen для мобильных устройств

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

На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу Firefox OS. Возможно вас также интересует подробная информация о  Firefox для Android.

Статья разбита на два раздела: разработка под мобильные устройства и кросс-браузерная совместимость.
См. также руководство от Jason Grlicky по дружелюбность-к-мобильным для веб-разработчиков.

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

Работа с  маленькими экранами

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

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

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

Работа с сенсорными экранами

Для использования сенсорного экрана вам понадобится работать с DOM Touch events. Вы не сможете использовать псевдо класс CSS :hover, а при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Дополнительные материалы в статье проектирование под сенсорные экраны.

Вы можете использовать медиа-запрос -moz-touch-enabled, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.

Оптимизация изображений

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

Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа gradients и shadows без использования изображений.

API для мобильных устройств

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

Пишите кросс-браузерный код

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

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

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

Смотрите этот список Gecko-специфических свойств, и этот список WebKit-специфических свойств, и таблицу вендор-специфических свойств от Peter Beverloo.

Использование инструментов, наподобие CSS Lint может помочь обнаружить подобные проблемы в коде, а такие препроцессоры, как SASS и LESS могут помочь вам создавать кросс-браузерный код.

Позаботьтесь об анализе user agent

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

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

Проверяйте на многих браузерах

Проверяйте ваш веб-сайт на многих браузерах. Это означает тестирование на многих платформах — по крайней мере на iOS и Android.

15 образцовых примеров мобильного веб-дизайна

Сегодня многие компании уделяют созданию качественных мобильных ресурсов гораздо больше внимания, ведь по последним данным 80% интернет-пользователей применяют портативные устройства для поиска необходимой информации. Более того, маркетологи готовятся к большим изменениям в Google-алгоритме, которые вступили в силу 21 апреля 2015 года. В официальном блоге компании сказано, что теперь качество мобильной оптимизации ресурса будет во многом определять его позицию в поисковой выдаче.

Грядущий апдейт окажет на систему ранжирования гораздо больше влияния, чем те же Panda или Penguin, и именно поэтому совершенствование мобильного опыта должно стать вашим приоритетным направлением на ближайшее будущее. Согласно статье от Search Engine Land, посвященной данному обновлению, все сайты будут подвержены жесткой проверке на адаптивность к мобильным устройствам.

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

1. Shutterfly

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

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

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

2. Google Maps

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

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

3. Etsy

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

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

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

4. Elf on the Shelf

Elf on the Shelf — относительно новая рождественская традиция, базирующаяся на детской книге. Ее основной посыл заключается в следующем: книга повествует историю об эльфах Санты, которые присматривают за детьми по всему миру и докладывают об их поведении. Наряду с книгой, родители могут приобрести статуэтку эльфа и разместить ее где-нибудь в поле зрения своих детишек. Каждую ночь, по мере приближения к Рождеству, заботливые мамы и папы переставляют фигурку эльфа, чтобы убедить малышей в существовании этих праздничных дозорных и тем самым повлиять на поведение.

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

5. BuzzFeed

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

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

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

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

6. Evernote

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

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

7. Lenta.ru

Новостной ресурс Lenta.ru доносит до пользователей информацию о любых интересных событиях, будь то политическая, развлекательная или техническая тематика. Мобильный веб-сайт предоставляет посетителям доступ к наиболее актуальным сведениям в двух удобных для чтения разделах.

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

8. Express

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

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

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

9. Nationwide Insurance

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

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

10. Zappos

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

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

А здесь изображен футер:

11. ABC

ABC — это весьма известная телевизионная компания, которая обрела популярность благодаря шоу «Танцы со Звездами», «Современная семья» и «Скандал». Десктопная версия сайта порадует пользователей множеством разнообразных опций: посетители могут проверить текущее телевизионное расписание, узнать о лауреатах премии Оскар, посмотреть свои любимые телепередачи и даже взглянуть на развлекательные новости, касающиеся этих шоу.

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

12. Lean Labs

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

Взгляните, как при помощи цветовой палитры и различных масштабов выделяет определенные фрагменты своей главной страницы бренда:

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

13. Pharmacy Development Services

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

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

14. SAP

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

15. KISSmetrics

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

Высоких вам конверсий!

По материалам: blog.hubspot.com 

05-05-2015

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

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

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

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

Начнем с самого простого и, пожалуй, самого эффективного способа сделать сайт на WordPress дружественным для мобильных устройств. Набор инструментов JetPack позволяет решить эту задачу нажатием всего 1 кнопки. Более того: он наверняка уже у вас установлен в числе других базовых плагинов. Если да – то просто кликните по ссылке «JetPack» в меню администратора сайта и перейдите на страницу модулей. Там надо активировать «Mobile Theme» — и всё готово.

2. WPtouch

Следующий по своей эффективности в списке бесплатных инструментов — плагин WPtouch. Его скачали уже более 4,3 млн раз. Он позволяет сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

3. WP Mobile Detector

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

Основные возможности:

• Автоматическое определение устройства на основе базы из более чем 5 тыс различных мобильников и смартфонов.
• Умение отличать стандартные «звонилки» и продвинутые мобильные гаджеты.
• Сбор статистики по мобильным пользователям, включая число уникальных посещений, поисковый трафик и т.д.

4. WordPress Mobile Pack

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

Также плагин включает:

• переключатель между мобильной и классической настольной темой;
• набор поддерживаемых и распознаваемых устройств, включая темы для Nokia и браузеров на WebKit;
• настройку цветовой палитры по темам с поддержкой твиков в CSS;
• автоматическую адаптацию картинок и разбиение постов и страниц;
• мобильную панель администратора;
• виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
• мобильную аналитику;
• виджет для добавления бар-кодов на сайт, чтобы быстро добавлять сайт в закладки на мобильном устройстве при просмотре сайта на большом экране настольного ПК.

5. WP Mobile Edition

По сути перед вами — брат-близнец предыдущего плагина. У него есть все те же фишки и опции, но есть еще поддержка системы комментирования Disqus и мобильная карта XML с собственным генератором для сайтов, что хорошо скажется на поисковой оптимизации. Также этот плагин создает мобильную версию на поддомене вида m.facebook.com, что хорошо для ускоренного кэширования и реализации поддержки мобильных cookie.

6. Wapple Architect Mobile Plugin

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

7. MobilePress

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

8. Duda Mobile Website Builder

Плагин-конструктор Duda Mobile помог создать мобильные версии сайтов в том числе для таких проектов и изданий как Forbes, Huffington Post, NY Times. Он очень простой и быстро превращает ваш обычный сайт в мобильный. Работает со всеми темами оформления для движка WordPress и автоматически синхронизируется с вашим основным сайтом.

Источник: WPLift.com

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

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Создание веб-сайтов для мобильных устройств с помощью Adobe Muse

7. Щелкните за пределами диалогового окна «Ссылки», чтобы закрыть его.

Затем вы добавите содержимое страницы для страницы раздела 03.

1. Щелкните вкладку Scratch (Рабочий стол), чтобы вернуться на страницу Scratch. Выберите белый закругленный фоновый прямоугольник, фиолетовый круг 03, текстовый фрейм Раздел 03, контактную форму и кнопку отправки. Скопируйте выбранные элементы.
2. Нажмите Command + J (Mac) или Control + J (Windows) и введите первые несколько букв раздела 03.Нажмите клавишу со стрелкой вниз, чтобы выбрать страницу телефона Раздел 03, а затем нажмите клавишу Return / Enter, чтобы открыть ее в представлении «Дизайн».
3. Вставьте элементы, скопированные на шаге 1, на страницу Раздел 03 макета телефона. Используйте инструмент «Выделение», чтобы центрировать их на странице с помощью направляющих. Стили, примененные к виджету контактной формы рабочего стола, сохраняются при копировании в макет телефона. Единственное изменение, сделанное для подготовки формы к мобильному макету, — это изменение размера формы и элементов формы, чтобы они поместились на меньшем экране.

Страница Раздел 03 содержит виджет контактной формы, который использует серверные сценарии и базу данных Business Catalyst для обработки отправленных данных формы. Когда вы нажимаете «Опубликовать» и загружаете файлы сайта из Muse, форма работает автоматически.

Примечание: Хотя вы можете использовать других поставщиков услуг для размещения вашего готового веб-сайта Muse, имейте в виду, что вам потребуется выполнить дополнительное кодирование, чтобы контактные формы работали, если они не размещены на серверах Business Catalyst. .

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

Страница Раздела 03 завершена. Нет необходимости добавлять ссылку на кнопку «Отправить», поскольку кнопка уже настроена как часть виджета «Контактная форма».

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

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

1. Щелкните вкладку Scratch (Рабочий стол), чтобы вернуться на страницу Scratch. Выберите белый длинный прямоугольник фона, красный круг 04, виджет «Слайд-шоу» и текстовый фрейм Раздел 04. Вы можете использовать инструмент «Выделение», чтобы щелкнуть и перетащить все элементы, чтобы выбрать их сразу. Скопируйте выбранные элементы.
2. Нажмите Command + J (Mac) или Control + J (Windows) и введите первые несколько букв раздела 04.Щелкните клавишу со стрелкой вниз, чтобы выбрать страницу телефона Раздел 04, а затем нажмите клавишу Return / Enter, чтобы открыть ее в представлении «Дизайн».
3. Вставьте элементы, скопированные на шаге 1, на страницу Раздел 03 макета телефона. Используйте инструмент «Выделение», чтобы центрировать их на странице с помощью направляющих. Стили, примененные к виджету контактной формы рабочего стола, сохраняются при копировании в макет телефона. Единственное изменение, сделанное для подготовки формы к мобильному макету, — это изменение размера формы и элементов формы, чтобы они поместились на меньшем экране.Когда вы добавляете виджеты с интерактивными функциями (например, виджеты слайд-шоу) в мобильные макеты, создаваемые в Muse, вы заметите, что на панели «Параметры» есть параметр: «Включить пролистывание». Этот параметр включен по умолчанию, поэтому любые виджеты, которые вы добавляете в свой мобильный дизайн, автоматически настраиваются так, чтобы посетители могли касаться и использовать жесты на сенсорных экранах. Страница Раздел 04 содержит виджет слайд-шоу, который отображает соответствующее изображение при нажатии миниатюры . Слайд-шоу настроено на использование горизонтального перехода для переключения между изображениями в галерее.В этом примере для отображения фотографий требуется взаимодействие с пользователем, хотя, если вы выберете, вы можете настроить виджет «Слайд-шоу» на автовоспроизведение, чтобы он автоматически переключался между изображениями при загрузке страницы.

Примечание: Если вы настраиваете виджеты слайд-шоу для использования переходов «Затухание», «Горизонтальный» или «Вертикальный», код в Muse автоматически активирует жест «Смахивание пальцем», позволяющий посетителям проводить пальцем по сенсорному экрану для перелистывания изображений слайд-шоу.

В следующем разделе «Создание макетов для мобильных устройств в Muse» вы узнаете, как легко обновить ресурсы на всех мобильных платформах и как опубликовать сайт Muse для каждого мобильного макета.

XML макета начального экрана для мобильных выпусков Windows 10 (Windows 10) — настройка Windows

• 27.07.2017
• 10 минут на чтение

В этой статье

Относится к

Ищете информацию для потребителей? См. Раздел Настройка меню «Пуск»

В Windows 10 Mobile можно использовать макет на основе XML, чтобы изменить начальный экран и обеспечить наиболее надежную и полную настройку начального экрана.

В Windows 10 Mobile настраиваемый Пуск работает по:

• Windows 10 выполняет проверки для определения правильной базовой компоновки по умолчанию. Проверки включают мобильную версию, наличие в устройстве двух SIM-карт, ширину столбца и поддержку Cortana для страны / региона.
• Windows 10 гарантирует, что он не перезапишет установленный вами макет, а также упорядочит проверки уровня и прочитает макет файла, чтобы любые многовариантные настройки, которые вы установили, не перезаписывались.
• Windows 10 считывает файл LayoutModification.xml и добавляет группу на начальный экран.

Макеты запуска по умолчанию

На следующих схемах показаны макеты начального экрана Windows 10 версии 1607 по умолчанию для устройств с одной и двумя SIM-картами с поддержкой Кортаны, а также для устройств с одной и двумя SIM-картами без поддержки Кортаны.

На схемах показано:

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

Макет Модификация XML

ИТ-администраторы могут подготовить макет начального экрана, создав файл LayoutModification.xml. Этот файл поддерживает несколько механизмов для изменения или замены макета начального экрана по умолчанию и его плиток.

Примечание

Чтобы убедиться, что синтаксический анализатор XML начального макета правильно обрабатывает ваш файл, следуйте этим рекомендациям при написании файла LayoutModification.xml:

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

В следующей таблице перечислены поддерживаемые элементы и атрибуты для LayoutModification.xml файл.

начало: Группа

начало: Теги группы определяют группу плиток, которые будут добавлены к началу.Вы можете установить атрибут Name , чтобы указать имя для группы Start.

Примечание

Windows 10 Mobile поддерживает только одну начальную группу.

Для Windows 10 Mobile, start: Теги группы могут содержать следующие теги или элементы:

• начало: Плитка
• начало: SecondaryTile
• начало: PhoneLegacyTile
• начало: Папка

Укажите начальные плитки

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

Размер плитки и координаты

Для всех типов плиток требуются атрибуты размера ( Размер, ) и координат (, строка, и , столбец, ), независимо от типа плитки, который вы используете при предварительной настройке элементов для запуска.

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

Например, плитка с Size = «2×2», Row = «2» и Column = «2» дает плитку, расположенную в (2,2), где (0,0) — верхний левый угол. угол группы.

начало: Плитка

Тег start: Tile можно использовать для закрепления универсального приложения Windows на начальном экране.

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

В следующем примере показано, как закрепить универсальное приложение Microsoft Edge для Windows:

  <начало: Плитка
          AppUserModelID = "Microsoft.MicrosoftEdge_8wekyb3d8bbwe! MicrosoftEdge"
          Размер = "2x2"
          Строка = "0"
          Столбец = "0" />
  

начало: SecondaryTile

Тег start: SecondaryTile можно использовать для закрепления веб-ссылки через дополнительную плитку Microsoft Edge.

В следующем примере показано, как создать плитку URL-адреса веб-сайта с помощью дополнительной плитки Microsoft Edge:

  <начало: SecondaryTile
          AppUserModelID = "Microsoft.MicrosoftEdge_8wekyb3d8bbwe! MicrosoftEdge"
          TileID = "MyWeblinkTile"
          Аргументы = "http://msn.com"
          DisplayName = "Мой сайт"
          Square150x150LogoUri = "ms-appx: ///Assets/MicrosoftEdgeSquare150x150.png"
          Wide310x150LogoUri = "ms-appx: /// Assets / MicrosoftEdgeWide310x150.png "
          ShowNameOnSquare150x150Logo = "истина"
          ShowNameOnWide310x150Logo = "ложь"
          BackgroundColor = "# FF112233"
          Размер = "2x2"
          Строка = "0"
          Столбец = "4" />
  

В следующей таблице описаны другие атрибуты, которые можно использовать с тегом start: SecondaryTile в дополнение к Size , Row и Column .

Вторичные плитки Microsoft Edge имеют тот же размер и поведение, что и универсальное приложение для Windows.

начало: PhoneLegacyTile

Тег start: PhoneLegacyTile можно использовать для добавления мобильного приложения с допустимым ProductID, который можно найти в файле манифеста приложения.Для атрибута ProductID должен быть установлен GUID приложения.

В следующем примере показано, как добавить мобильное приложение с допустимым ProductID, используя тег start: PhoneLegacyTile:

  <начало: PhoneLegacyTile
          ProductID = "{00000000-0000-0000-0000-000000000000}"
          Размер = "2x2"
          Строка = "0"
          Столбец = "2" />
  

начало: Папка

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

Вы должны установить следующие атрибуты, чтобы указать размер и расположение папки: Размер , Строка и Столбец .

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

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

• Плитка — используется для закрепления универсального приложения Windows на начальном экране.
• SecondaryTile — используется для закрепления веб-ссылки через дополнительную плитку Microsoft Edge.
• PhoneLegacyTile — используется для закрепления мобильного приложения с допустимым ProductID.

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

  <начало: Папка
          Name = "Приложения Contoso"
          Размер = "2x2"
          Строка = "0"
          Столбец = "2">
          <начало: Плитка
                 AppUserModelID = "Microsoft.BingMaps_8wekyb3d8bbwe! ApplicationID"
                 Размер = "2x2"
                 Строка = "0"
                 Столбец = "0" />
          <начало: PhoneLegacyTile
                 ProductID = "{00000000-0000-0000-0000-000000000000}"
                 Размер = "1x1"
                 Строка = "0"
                 Столбец = "2" />
          
  

RequiredStartTiles

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

Примечание

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

Для Windows 10 Mobile теги RequiredStartTiles могут содержать следующие теги или элементы. Они похожи на плитки, поддерживаемые в start: Group .

• Плитка — используется для закрепления универсального приложения Windows на начальном экране.
• SecondaryTile — используется для закрепления веб-ссылки через дополнительную плитку Microsoft Edge.
• PhoneLegacyTile — используется для закрепления мобильного приложения с допустимым ProductID.
• Папка — используется для закрепления папки на начальном экране мобильного устройства.

Плитки, указанные в теге RequiredStartTiles , имеют следующее поведение:

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

Отсутствие дублирования относится только к закрепленным приложениям. Закрепленные веб-ссылки могут дублироваться.

• Если партнеры предварительно настроили папки для начального экрана, Windows 10 обрабатывает эти папки так же, как добавленные приложения на начальном экране. Повторяющиеся папки будут удалены.
• Все партнерские плитки, добавленные в нижнюю часть восстановленного пользователем начального экрана, будут среднего размера. В добавленном макете стартового экрана партнера не будет пробелов. Windows 10 будет сдвигать плитки соответствующим образом, чтобы избежать пропусков.

Пример LayoutModification.xml

В следующем примере LayoutModification.xml показано, как настроить макет начального экрана для устройств под управлением Windows 10 Mobile:

  

    
      
            
              <начало: Группа
                Name = "Первая группа">
                  <начало: Плитка
                    AppUserModelID = "Microsoft.BingFinance_8wekyb3d8bbwe! ApplicationID "
                    Размер = "2x2"
                    Строка = "0"
                    Столбец = "0" />
                  <начало: Плитка
                    AppUserModelID = "Microsoft.BingMaps_8wekyb3d8bbwe! ApplicationID"
                    Размер = "1x1"
                    Строка = "0"
                    Столбец = "2" />
              
            
      
    
    
         
         
         
         <Плитка AppUserModelID = "Microsoft.MicrosoftFeedback_8wekyb3d8bbwe! ApplicationID "/>
    

  

Использовать многовариантную поддержку Windows Provisioning

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

Механизм подготовки выбирает правильный файл настройки на основе целевых условий, которые были выполнены, добавляет файл в расположение, указанное для параметра, а затем использует этот файл для настройки запуска. Чтобы различать макеты, вы можете добавить модификаторы в LayoutModification.xml, например «LayoutCustomization1». Независимо от используемого модификатора, механизм проверки всегда будет выводить «LayoutCustomization.xml», чтобы у ОС было согласованное имя файла для запроса.

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

1. Создайте определенный файл настройки макета и назовите его LayoutCustomization1.xml.
2. Включите файл как часть пакета подготовки.
3. Создайте многовариантную цель и укажите XML-файл в рамках целевого условия в основном XML-файле настройки.

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

  

  
     {6aaa4dfa-00d7-4aaa-8adf-73c6a7e2501e} 
     Мой пакет подготовки 
    <Версия> 1.0 
     OEM 
     50 
  
  <Настройки xmlns = "urn: schemas-microsoft-com: windows-provisioning">
    <Настройки>
      <Цели>
        <Цель>
          
            
            
          
        
        <Цель>
          
          
            
            
          
          
        
      
      <Обычный>
        <Настройки>
          <Политики>
             1 
             1 
             1 
          
          <Горячая точка>
             1 
          
        
      
      <Вариант>
        
          
        
        <Настройки>
           c: \ users \  \ appdata \ local \ Microsoft \ Windows \ Shell \ LayoutCustomization1.XML 
          <Горячая точка>
             1 
          
        
      
    
  

  

Когда условие выполнено, механизм подготовки берет XML-файл и помещает его в место, установленное Windows 10, а затем подсистема «Пуск» считывает файл и применяет конкретный настроенный макет.

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

Добавьте файл LayoutModification.xml к изображению

После создания файла LayoutModification.xml для настройки устройств, работающих под управлением Windows 10 Mobile, вы можете использовать Windows ICD для добавления файла XML на устройство:

1. На панели «Доступные настройки » разверните Параметры времени выполнения , выберите Start и затем щелкните параметр StartLayout .
2. На средней панели щелкните Обзор , чтобы открыть проводник.
3. В окне проводника перейдите в папку, в которой вы сохранили файл LayoutModification.xml.
4. Выберите файл и нажмите Открыть .

Это должно установить значение StartLayout . Параметр отображается на панели Выбранные настройки .

мобильных приложений и сайтов с ASP.NET

• 28.01.2011
• 2 минуты на чтение

В этой статье

Разработка мобильных приложений

Мобильные приложения, подключенные к облаку

, часть 1. Создание веб-службы с веб-приложениями Azure и веб-заданиями

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

Часть 2 — Создание приложения Xamarin с аутентификацией и автономной поддержкой

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

Вызов веб-API из приложения Windows Phone 8

В этом сквозном руководстве показано, как создать приложение веб-API ASP.NET, которое предоставляет данные приложению Windows Phone 8.

Начало работы с мобильными службами Azure

Начните использовать мобильные службы Azure с веб-API ASP.NET. В этом руководстве показано, как создать приложение для мобильных служб на портале управления Azure.

Аутентификация в мобильных службах Azure

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

Использование push-уведомлений в мобильных службах Azure

Используйте мобильные службы Azure для отправки push-уведомлений на мобильное устройство.

Разработка мобильных сайтов

Развертывание мобильного приложения ASP.NET MVC 5 на веб-сайтах Windows Azure

Это руководство научит вас основам развертывания приложения MVC 5 на веб-сайте Windows Azure и создания удобных для мобильных устройств представлений с помощью адаптивного дизайна Bootstrap.

Добавьте мобильные страницы в приложение ASP.NET Web Forms / MVC

Это руководство описывает различные способы обслуживания страниц, оптимизированных для мобильных устройств, из вашего ASP.NET Web Forms / MVC и предлагает проблемы архитектуры и дизайна, которые следует учитывать при нацеливании на широкий спектр устройств.

Обнаружение новейших мобильных устройств с помощью 51degrees.mobi Foundation

51degrees.mobi Foundation — это сторонний проект с открытым исходным кодом, который расширяет API-интерфейс ASP.NET Request.Browser, чтобы вы могли легко обнаруживать недавно выпущенные мобильные устройства, включая Windows Phone 7, Android и Apple iPad.

Мобильные веб-сайты с ASP.NET MVC и файлом определения мобильного браузера

В этом докладе, представленном на конференции Microsoft MIX, Скотт Хансельман обсуждает, как с помощью ASP можно создавать веб-сайты, удобные для мобильных устройств.NET MVC.

Разработка приложений для iPhone с помощью ASP.NET

ComponentOne Studio для iPhone — это набор элементов управления ASP.NET, которые имитируют внешний вид пользовательских интерфейсов iPhone и iPod touch при визуализации в Mobile Safari.

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

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

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

Как создать мобильный сайт за 3 шага

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

Начните с трех простых шагов:

1.Выберите, как вы создадите свой мобильный сайт

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

Ваши варианты включают:

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

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

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

2. Выберите создателя веб-сайта, дизайнера или агентство

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

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

Независимо от того, какой из них вы выберете, обязательно сравните свои варианты.

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

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

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

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

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

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

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

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

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

3. Начните создавать свой мобильный сайт

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

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

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

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

Однако после тестирования и подготовки вы можете запустить функциональный и удачный веб-сайт!

4 примера мобильного веб-дизайна

Нужны примеры мобильного веб-дизайна перед созданием мобильного сайта? Посмотрите эти четыре примера:

1. Youtube
2. CNN
3. Ясный путь
4. Юма Дентал

[Слайд-шоу] Как создать мобильный сайт для вашего бизнеса

Мы понимаем, что вы завязли в ведении бизнеса или организации отдела маркетинга.

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

Почему так важны мобильные веб-сайты?

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

Как никогда раньше, покупатели обращаются к своим мобильным устройствам, чтобы просматривать веб-страницы и совершать транзакции. Фактически, в 2014 году на мобильную электронную торговлю было потрачено 350 миллиардов долларов, и эта цифра продолжает расти. К 2020 году объем мобильной электронной коммерции должен достичь 625 миллиардов долларов.

Кроме того, в 2015 году мобильная коммерция достигла 30% всей электронной торговли США.

Убедили ли мы вас, что мобильный сайт еще важен?

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

МЫ ХОЧЕМ ВАМ ПОКАЗАТЬ

Мы построили более

1000

Веб-сайты в таких отраслях, как ваша

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

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

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

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

Предварительный просмотр веб-сайтов WordPress на мобильных устройствах

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

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

1. Screenfly

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

2. Ответчик

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

Мы рекомендуем использовать Chrome в OSX 10.7+ с полосой прокрутки, установленной на «при прокрутке» (Системные настройки ›Общие› Показывать полосы прокрутки ›« при прокрутке »). Это означает, что полосы прокрутки не влияют на ширину устройства.

Профессиональный совет: добавьте & scroll = ext , чтобы переместить полосы прокрутки за пределы рамки устройства.

3. BrowserStack

Используйте BrowserStack для интерактивного кроссбраузерного тестирования через Интернет .BrowserStack обеспечивает тестирование адаптивного дизайна в мобильных и настольных браузерах — iOS, Android, OS X, Windows. Адаптивный инструмент для создания снимков экрана, позволяющий проверить, как дизайн вашего веб-сайта, макеты, HTML и CSS отображаются на реальных размерах устройства и в разных разрешениях. Установите размер монитора в настройках «Размер монитора» (верхний правый угол экрана), чтобы просматривать устройства в их реальном размере.

4. Эмулятор мобильного телефона

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

Раздельные сайты для мобильных и настольных компьютеров — веб-технологии для разработчиков

Подход «отдельных сайтов» к мобильной веб-разработке предполагает создание разных сайтов для мобильных и настольных веб-пользователей. У этого подхода есть положительные и отрицательные стороны.

Хорошее

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

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

Плохой

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

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

Когда правильно выбрать этот вариант

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

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

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

Примеры

Большинство основных веб-приложений, которые вы видите в природе, выбрали этот путь, включая Facebook, YouTube, Digg и Flickr.Фактически, Mozilla выбрала эту стратегию для мобильных версий addons.mozilla.org (AMO) и support.mozilla.org (SUMO). Если вы хотите увидеть исходный код, стоящий за примером этого подхода в действии, не стесняйтесь проверить репозиторий github для AMO или SUMO.