1. 1 Выбор правильного подхода
2. Базовый вариант: используйте CMS, которая делает это за вас
3. Темы Wordpress:
4. Или, для пользователей не Wordpress:
5. 2
6. Организация контента
7. Разработка мобильного сайта Second
8. Универсальный Мобильный Дизайн Концерны
9. Размерные вариации смартфонов
10. Проектирование для Touch
11. Проектирование для адаптивных сайтов
12. Изменение размера сайтов - пример
13. Сокращение контента (все элементы)
14. Реорганизация контента (текст на баннере)
15. Реорганизация контента (левая навигация)
16. Удаление контента (правая навигация)
17. Перемещение содержимого в макет из одного столбца
18. Разработка для отдельного мобильного сайта или сайта с динамическим обслуживанием
19. Включить большую часть контента с основного сайта
20. Примечание о таблетках:
21. Подробнее - Войдите или зарегистрируйтесь - это бесплатно!

1

Выбор правильного подхода

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

• Отзывчивый: страница - URL, HTML, изображения, все остальное - остается тем же самым, но CSS дает различные правила, основанные на ширине браузера.
• RESS / Adaptive / Dynamic Serving: URL остается тем же, но сервер отправляет разные HTML и CSS в зависимости от того, какой тип устройства запрашивает страницу.
• Отдельный мобильный сайт: обычно размещается на поддомене (например, m.domain.com ) или иногда в подпапках (например, www.domain.com/mobile ), но он также может использовать те же URL-адреса, что и сайт рабочего стола, и просто обслуживать другой HTML (называемый динамическим обслуживанием) для пользователей настольных и мобильных устройств на основе пользовательского агента.
  Если мобильный сайт использует разные URL-адреса, они часто держатся параллельно со своими коллегами на рабочем столе (например, www.domain.com/first-page и m.domain.com/first-page ), что позволяет осуществлять плавные перенаправления на основе пользовательского агента. Но так как это отдельный набор страниц, варианты не ограничены. Вы можете выбрать совершенно другую структуру сайта, и в этом случае мобильные URL-адреса могут обязательно отличаться.

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

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

Базовый вариант: используйте CMS, которая делает это за вас

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

Вот некоторые из наших рекомендаций для хороших адаптивных тем Wordpress и других сервисов CMS. Есть много других доступных вариантов.

Темы Wordpress:

• Элегантные Темы есть несколько адаптивных тем, по цене ~ $ 69 / год. Они предоставляют обновления и полную поддержку. Вы можете продлевать на ежегодной основе.
• PressCoders : Мы рекомендуем Designfolio Тема, которую вы можете скачать бесплатно (с некоторыми ограничениями) или приобрести полную лицензию за 79 долларов. Платная версия включает в себя полную поддержку.
• WooThemes сделать отличные темы Wordpress премиум. Некоторые из них бесплатны, большинство стоят от 80 до 140 долларов, все они готовы для мобильного использования и легко настраиваются.
• отзывчивый Тема от CyberChimps - отличный вариант, особенно для базового сайта, такого как персональный сайт или блог. И это бесплатно.

Или, для пользователей не Wordpress:

• Squarespace вероятно, является одним из лучших решений для мобильного дизайна WYSIWYG («Что видишь, то и получаешь») на данный момент по цене от 8 долларов в месяц (для самых базовых услуг).
• Wix это еще одна услуга WYSIWYG, и по очень разумной цене, около 17 долларов в месяц.

Но если вы готовы и можете сделать это сами, давайте начнем!

2

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

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

Организация контента

• Рекомендуется: Mobile First

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

• Разработка мобильного сайта Second

  Если дизайн Mobile First не подходит, ваша задача будет более сложной, но не невозможной.

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

  • Вы можете собирать пользовательские данные с помощью стандартных инструментов веб-аналитики, таких как пользовательские CrazyEgg и UX-тестирование. Задавать вопросы:
    1. Какой контент важен для посетителей?
    2. Что игнорируется?
    3. Каков типичный путь посетителей?
  • Ищи внутренне тоже. Если вам нужна реклама для поддержки вашего сайта, вы, очевидно, не собираетесь удалять их только потому, что обнаружили, что они были проигнорированы в ваших пользовательских тестах. С другой стороны, если ваш сайт в основном работает по подписке, но содержит рекламу с чуть большей прибылью, вы можете удалить их из мобильной версии сайта, чтобы ускорить загрузку страницы и оптимизировать взаимодействие с пользователем.
  • Запустить некоторые тесты скорости определить элементы, которые требуют времени для загрузки. Узнайте:
    1. Они важны для содержания страницы?
    2. Можно ли их свести к минимуму?

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

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

  • Facebook : Конечно, они король мобильных телефонов. Настольная версия сайта имеет три столбца: боковая навигация, основной список контента и вторичный список трендов и рекламы. Мобильная версия перемещает всю навигацию вверх страницы и просто показывает основной столбец.
  • Amazon : вероятно, лучший пример мобильного сайта электронной коммерции. На страницах его мобильных продуктов отображаются фрагменты всей информации, имеющейся в версии для настольных компьютеров, что ограничивает объем контента, который приходится загружать на телефоны, но при этом дает посетителям доступ ко всей информации, которую они ожидают. Контент имеет приоритет для быстрой покупки, поместив кнопку «Купить» вверху, затем информацию о продукте, затем отзывы.
    

    [Amazon мобильный сайт]

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

    [Мобильный сайт Nordstrom]

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

Универсальный Мобильный Дизайн Концерны

• Навигация на маленьком экране

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

• Размерные вариации смартфонов

  Большинство смартфонов отображают от 320 до 400 пикселей , (в CSS-пиксели , что имеет значение для дизайна), хотя старые iPhone имеют только 240 пикселей в ширину. Если они перевернуты по бокам, их ширина может достигать 640 пикселей. Планшеты имеют ширину от 480 до 800 пикселей, когда их держат, как книгу, но их, скорее всего, держат как телевизор, и их максимальные пиксели составляют 1280 пикселей.

  
  
  

  Это дает вам довольно широкую вариацию для дизайна: от 320 до 1280 пикселей. Вместо того, чтобы обслуживать всех , узнайте, какие размеры экрана обычно используют люди на вашем сайте. Если вы используете аналитическое программное обеспечение, такое как Google Analytics, вы сможете легко найти эти данные (в GA это в мобильном отчете). Это скриншот из отчета Mobile> Devices, в котором «Разрешение экрана» установлено в качестве вторичного измерения:

  

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

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

• Проектирование для Touch

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

  1. Дайте пальцу достаточно места: пальцы не такие точные, как мыши. Пальцы скрывают то, что они касаются, вы не можете дать никаких указаний на то, что они наводят курсор на нужный вариант, прежде чем коснуться, и они касаются большей части экрана, чем мышь. Убедитесь, что у вас всегда есть место по крайней мере 28 х 28 пикселей вокруг ссылки на вашем сайте для неуклюжих пальцев.
  2. Оставляйте отзывы при прикосновении к экрану: при медленном или нарушенном соединении многим посетителям придется немного подождать, чтобы перейти на следующую страницу, когда они нажмут на ссылку или кнопку. Сообщите им, что телефон записал, что они нажали кнопку, показывая отступ кнопки или выделив связанный блок. В противном случае ваши посетители будут яростно стучать по своим экранам и могут оказаться не в том месте.
  3. Используйте кнопки: кнопки четко определяют, где пользователи могут или не могут нажать, чтобы активировать ссылку. Поскольку, в отличие от настольного дисплея, вы не можете использовать какие-либо сигналы, чтобы сообщить им, что их мышь находится над правой областью, более важно определить пространство для щелчка.
  4. Перепроектируйте раскрывающиеся меню: они по-прежнему работают на мобильных устройствах и могут быть отличным способом скрыть информацию до тех пор, пока она не будет запрошена, но они часто открываются только при наведении на них курсора мыши. Мобильные выпадающие списки должны быть активированы одним касанием, и меню должно показывать четкое разделение между параметрами. BridgestoneTire.com делает это хорошо:
  
  5. Минимизируйте ввод текста. На мобильном телефоне ввод текста происходит медленнее и требует экранной клавиатуры, что делает видимый экран вдвое большим. Вырежьте ввод, который не является абсолютно необходимым. Разбейте формы на несколько страниц, которые занимают только половину экрана, с четкой кнопкой «Далее», чтобы посетителям не приходилось прокручивать.
  6. Используйте функции для мобильных устройств . Различие между основными сайтами и мобильными сайтами добавляет новые возможности: например, вы можете сделайте все свои номера телефонов звонящими по телефону и превратить ваш адрес в ссылку для навигации.

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

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

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

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

Изменение размера сайтов - пример

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

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

Сокращение контента (все элементы)

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

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

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

Реорганизация контента (текст на баннере)

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

Реорганизация контента (левая навигация)

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

Удаление контента (правая навигация)

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

Если ответ «нет», вы можете настроить его на отображение: ни один, если ширина экрана слишком мала, чтобы вместить его.

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

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

Перемещение содержимого в макет из одного столбца

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

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

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

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

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

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

Включить большую часть контента с основного сайта

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

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

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

Примечание о таблетках:

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

Подробнее - Войдите или зарегистрируйтесь - это бесплатно!

Как то, что вы прочитали до сих пор?
Зарегистрируйтесь сейчас бесплатно, чтобы прочитать остальные главы:

1. Вопросы развития
2. Техническая поисковая оптимизация
3. Настройка и использование аналитики
4. Будущее мобильной сети