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

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

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

Тогда возникает вопрос, в основном самый важный для меня сейчас

Как представить другую страницу, если мобильный телефон идет по тому же адресу?

редактировать

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

спасибо, Ричард

Solutions Collecting From Web of "передовая практика для разработки веб-страницы для мобильного телефона"

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

  • Объявите мобильный doctype с вашими документами XHTML и убедитесь, что ваши разметки и таблицы стилей действительны.
  • Держите CSS просто. Нет: наведите указатель мыши, не используйте изображения как часть дизайна, ограничьте использование фиксированных размеров / полей.
  • Эмуляторы не так эффективны для тестирования, как сами фактические устройства. Телефоны, которые делают Wi-Fi / Bluetooth PAN, могут сделать жизнь дешевле, но тестирование сети оператора также поможет вам лучше понять скорость и задержку.
  • Нет «типичного устройства», но если вы можете заставить свой сайт выглядеть действительно хорошо под webkit без использования CSS-аддонов webkit, вы покрыли огромный кусок устройств (Nokia S60, iPhone, Android и т. Д.). Работайте с Opera Mini, и вы расширите этот кусок еще больше.
  • Компактный выход в максимально возможной степени. Конечные пользователи не только ограничиваются ограничением работы экрана и процессора, но, скорее всего, они будут ограничены сетью. Чем быстрее вы сможете вывести свои данные к ним, тем меньше будет ваш веб-сайт.

В List Apart есть отличная статья об условном использовании разных таблиц стилей для мобильных устройств:

http://www.alistapart.com/articles/putyourcontentinmypocket/

Вы также можете проверить Документацию Яблов на проектирование веб-контента для iPhone, хотя это iPhone специфический, он относится к мобильным устройствам в целом:

http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1

Только мои два цента:

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

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

  3. Не используйте изображения, или я говорю – используйте его как можно меньше. Это будет максимально использовать пропускную способность пользователя. Если вы настроите таргетинг на людей под GPRS/EDGE , лучше избегайте изображений еще больше. У людей с 3G есть больше шансов.

  4. Вы можете ознакомиться с мобильным интерфейсом Facebook или Gmail чтобы иметь представление. Мобильный интерфейс Google Reader's также хорош, но все еще не соответствует значению.

  5. Я не знаю, сколько людей согласится со мной – Держите AJAX низким. Большинство телефонов не могут обрабатывать такую ​​нагрузку, если ваша страница сильно ааксифицирована. Помните, что это мобильный, а не компьютер. У этого есть некоторые ограничения. Возможно, телефоны с очень высоким уровнем обслуживания могут отображать его, но чтобы ваша база данных была сильной, свести к минимуму использование.


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

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