Разработка мобильного сайта. Когда начать?

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

Мое первоначальное понимание заключается в том, что для покрытия разных телефонов вам нужно создать один сайт, который включен для браузеров с движком webkit (iphone, android и т.д.) и еще одним базовым сайтом для других старых браузеров, верно ли это предположение?

И что именно означает для webkit? Как это отличается от использования javascript/css/html? Это одно и то же, за исключением того, что вы ограничиваете себя функциями webkit и css? Я посмотрел сайт webkit, но он не объяснил это в этих терминах.

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

Ответ 1

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

Webkit - это движок, используемый Safari (мобильным браузером Safari), Chrome и браузером Andriod (мобильный Chrome?), вы можете использовать стандартные Javascript, XHTML и CSS, главное, делает ваш сайт "удобным для пальцев" "поскольку эти устройства управляются сенсорными экранами.

Что я подразумеваю под словом "fat-finger-friendly", так это то, что у вас есть большие ссылки/кнопки, которые легко ударить пальцем, большинство мобильных браузеров хорошо аппроксимируют, какую ссылку вы намеревались прикоснуться, но если у вас есть много из материала, застрявшего вместе, он часто ошибается.

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

Лучшая иллюстрация из этого - от Ars Technica - просмотрите свой сайт в браузере вашего рабочего стола, а затем проверьте свой сайт в своем мобильном браузере. Его очень гладкая версия сайта. (http://www.arstechnica.com/)

Ответ 2

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

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

Посмотрите на question для получения дополнительной информации о том, как создать мобильный сайт.

Ответ 3

Если вы хотите поддерживать старые браузеры, вам необходимо иметь несколько сайтов. Но сначала взгляните на статистику мобильных браузеров, чтобы решить, стоит ли это. Если вы просто хотите, чтобы ваш существующий сайт работал на iPhone/Android или другие телефоны с браузерами A-grade, вы можете настроить его с помощью мобильного CSS (для небольших экранов). Но для получения хорошей производительности на мобильных устройствах на медленных/ненадежных соединениях, вероятно, вам потребуется отдельный разделитель html.

Apple имеет очень хорошее руководство, которое поможет вам оптимизировать ваш сайт для iPhone. Большинство из них также будут работать на современных мобильных браузерах: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Питер Пол Кох провел отличные исследования в различных мобильных браузерах. У него есть несколько статей, но это хороший старт: http://www.quirksmode.org/mobile/browsers.html

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

На данный момент я обнаруживаю события касания (исключая для Chrome). Если это возвращает true, я вставляю сенсорный CSS. Немного противно, но другие варианты хуже:

function() {
    if( /Chrome/i.test(navigator.userAgent) ) {
        return false;
    }
    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

Вы специально спросили сайты для мобильных веб-браузеров, но вы также можете проверить возможности создания мобильного веб-приложения. Похоже, это приложение для iPhone (или Android), но оно построено с помощью HTML5. Вы можете делать симпатичные анимации с CSS3 в изображении webkit, а iPhone также имеет метатеги, чтобы скрыть панели навигации Safari. Затем пользователи могут добавлять закладки на свой домашний экран, и это будет работать так же, как и обычное приложение для iPhone. Конечно, вы ограничены браузером и его производительностью. Но вы можете создавать многоплатформенные приложения:) HTML5 + JS - это единственный язык для мобильных мобильных устройств, одобренный Стива Джобса, и с помощью PhoneGap вы даже можете попасть в AppStore! Если веб-приложение звучит интересно, вы должны проверить jQTouch, jQuery CSS Transition plugin и, конечно, Создание приложений iPhone с помощью HTML, CSS и JavaScript Джонатана Старка.

Ответ 4

Если ваш сайт довольно прост (только доставка контента), я бы предложил такую услугу, как mobify: http://mobify.me/

Многие большие публикации используют его, и я тоже. Фактически, Ars Technica (на что указал Nate Bross в более раннем ответе) использует эту услугу для отображения своего мобильного контента.

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

Ответ 5

Я не согласен с тем, что вам нужно создать несколько версий веб-сайта.

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

Красота последних разработок HTML5 заключается в том, что вы можете использовать новые функции Iphone/Android, такие как Geolocation, а старые браузеры просто игнорируют JS-код, если вы тщательно поместите его в инструкции try catch.

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

Держите его простым, и вам не придется видеть эти фрагментированные и дорогостоящие подходы, зависящие от устройства. Напишите HTML5 вручную и используйте validator. Удачи!