Как узнать полную версию windows server

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

Не знаете, как сделать свой веб-сайт удобным для мобильных устройств? Не изобретайте велосипед и взгляните на это Руководство — он подготовил для вас список основных стратегий «мобилизации», их преимущества, недостатки и несколько советов, которые вы оцените не только при разработке мобильных веб-сайтов.

Наклейки:

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

Нетрудно догадаться, почему люди хотят сделать свои сайты «удобными для мобильных устройств»: согласно исследованию Gartner, в 2013 году мобильные устройства превзойдут ПК как наиболее распространенное устройство доступа в Интернет. И не забывайте о других посещениях с таких устройств, как Nintendo Wii, DSi, телевизоров с доступом в Интернет, автомобильных браузеров и т. д.

Многие клиенты уже используют мобильные устройства в качестве основного способа доступа в Интернет, особенно на развивающихся рынках. Статистический отчет о развитии Интернета в Китае за июль 2009 г. показывает, что доля людей, количество устройств значительно увеличилось с 39,5% в конце 2008 г. до 46% в июне 2009 г., в то время как доля настольных компьютеров и ноутбуков снизилась. Это процентное изменение, выраженное в абсолютных цифрах, означает 150 миллионов человек. В развитых странах у многих людей есть мобильные устройства в качестве второго средства доступа, когда они находятся вдали от дома.

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

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

Сложности кроссплатформенного дизайна

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

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

Кроме того, существует огромное разнообразие устройств и браузеров, работающих на этих устройствах. Смартфоны могут иметь полноценные браузеры, такие как Opera Mobile или Safari/iPhone, в то время как в развивающемся мире мы видим больше недорогих телефонов, на которых нет операционной системы, но если они могут запускать Java, они могут использовать Opera Mini (a тонкого клиента к прокси-системе, которая сжимает страницы примерно до 10 % от их исходного размера перед отправкой для обработки на телефоне — см. наше сравнение Opera Mobile и Opera Mini). Ежемесячный отчет о состояниимобильного веб-сайта Opera предоставляет полезную информацию о различных телефонах, используемых в мире.

Вы должны помнить об этом…

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

Мобильные пользователи ориентированы на задачу. Но это все!

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

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

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

Стратегия 1. Пишите хорошо и для мобильных устройствне делайте ничего особенного для пользователя

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

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

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

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

Полезную перекрестную ссылку между передовыми практиками для мобильных устройств и рекомендациями по доступности см. в разделе Связь между передовыми практиками для мобильного Интернета (MWBP) и рекомендациями по обеспечению доступности веб-контента (WCAG).

Полезны и другие передовые методы разработки настольных компьютеров.побочные эффекты для кроссплатформенной веб-разработки. Например. Спрайты CSS были разработаны, чтобы обойти необходимость использования JavaScript для предварительной загрузки фоновых изображений, что само по себе было обходным путем для проблемы мерцания изображения при загрузке. В мобильном мире каждый запрос по сети занимает непредсказуемо много времени, а CSS-спрайты позволяют сократить количество HTTP-запросов; это ускоряет взаимодействие и ускоряет отклик веб-сайта.

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

Стратегия № 2. Создайте специальный «мобильный» сайт

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

Мобильный сайт обычно имеет форму m.example.com и, как правило, имеет ту же структуру, что и полноценный сайт. Этого можно легко добиться с помощью любой хоть сколько-нибудь приличной CMS.

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

Мы не можем рекомендовать какой-либо конкретный код обнаружения браузера, поскольку то, что работает сегодня, может очень легко устареть, если его активно не поддерживать. Например, строка User Agent (UA) для семейства браузеров Opera 10.говорится «Опера / 9.80». Это потому, что в бета-версии была указана «Opera/10», но это выявило проблему — сайты обнаружения браузера блокировали доступ, потому что они ошибочно определяли браузер как Opera 1, потому что их авторы не учитывали двузначные числа. Так что будьте осторожны: если вы используете определение браузера, будьте готовы постоянно переписывать и развертывать новые версии скриптов на каждом сайте.

Например, фрагмент UA строки «Mobi» является полезным идентификатором для Opera Mobile; фрагмент строки «Mini» является полезным идентификатором для Opera Mini. Опера также может быть идентифицирована с помощью JavaScript, путем проверки наличия объекта window.opera.

.

Более сложным методом обнаружения браузера является универсальный файл ресурсов беспроводной сети (WURFL); который представляет собой XML-файл, содержащий информацию о возможностях и функциях многих мобильных устройств. Это позволяет тестировать функции, но требует, чтобы абсолютно каждый телефон на планете был в базе данных с правильно идентифицированными функциями. И, конечно же, необходимо постоянно поддерживать его в актуальном состоянии.

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

Создание шаблона

Вам потребуется разработать упрощённый шаблон с простой фирменной символикой, без веб-шрифтов и т. д. для CMS, в которую вы будете помещать свой контент.

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

.

метатег окна просмотра

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

Opera Mobile по умолчанию предполагает, что ширина страницы составляет 850 пикселей, и при предварительном просмотре с уменьшенным масштабом эти значения масштабируются соответствующим образом, чтобы соответствовать размеру экрана устройства. С помощью метатега области просмотра в заголовке страницы вы можете переопределить эту ширину по умолчанию и вместо этого установить любые значения в пикселях, такие как 320, 480 и т. д. Для совместимости между устройствами мы рекомендуем установить ширину на ширину устройства :

Это регулирует ширину страницы, чтобы использовать всю ширину экрана, или, другими словами, делает один пиксель CSS одним пикселем на экране.

Стратегия 3. Создавайте адаптивные веб-сайты для мобильных устройств

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

Основой этого метода являются медиа-запросы CSS (см. Руководство веб-дизайнера по CSS3: Медиа-запросы ), который поддерживает Opera Desktop, Opera Mini и Opera Mobile, Safari (настольный ПК и iPhone/iPad), Chrome, Firefox и Internet Explorer 9.

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

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

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

Одна таблица стилей содержит несколько различных требований:

Обратите внимание на отношение к ширине области просмотра браузера: когда страница загружается в настольном браузере, ширина области просмотра равна ширине окна браузера; при загрузке в Opera Mobile 10 ширина окна просмотра по умолчанию равна 850 пикселям, если это не переопределено с помощью метатега окна просмотра.

Вы можете попробовать сами, попробовав наш пример Media Queries + viewport в Opera Desktop, а затем в Opera Mobile 10, эмуляторе Opera Mobile на своем ПК илив Опера Мини. На рабочем столе мы получаем макет с тремя столбцами для ширины браузера более 800 пикселей — страница получает другой макет, когда вы изменяете размер окна браузера. В Opera Mobile 10, работающем на устройствах с физической шириной экрана менее 400 пикселей (например, Nokia 5800 в портретном режиме имеет ширину 360 пикселей), метатег окна просмотра с шириной, установленной на ширину = ширина устройства, активирует экран @media и (макс. ширина: 400 пикселей) < . >и страница с тремя столбцами превращается в страницу с одним столбцом.

Существует три основных момента, которые необходимо понять о медиа-запросах:

1. Этот метод не тестирует отдельные устройства или браузеры, а только возможности, поэтому он по своей сути является «защищенным от будущего», то есть защищенным от изменений в будущем
2. Здесь не используется перенаправление на другие страницы; это одна страница для всего
3. Media Query проверяется перед загрузкой. Таким образом, если что-то проверяется как false , оно не загружается, что экономит трафик и ускоряет рендеринг.

Вот еще один пример CSS Media Queries и окна просмотра. Вы можете посмотреть скринкаст о методах мобильной веб-разработки Андреаса Бовенса .

Использование медиазапросов для отключения потребляющего ресурсы CSS

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

Поскольку CSS — это чисто стилистический вопрос, вы можете решить, что лучше отключить подобные эффекты в мобильной версии.

Другие полезные методы для мобильных устройств

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

Объединяйте файлы и уменьшайте количество запросов по сети

Как упоминалось ранее, самым медленным элементом любого мобильного веб-интерфейса является сеть. Каждое изображение, файл CSS, файл JavaScript, фоновое изображение и т. д. вызывается по сети, и каждый из этих HTTP-запросов занимает непредсказуемо много времени. Мы уже упоминали спрайты CSS, но следуют и другие полезные приемы:

• Объедините как можно больше скриптов в один файл (например,utilities.js)
• Объедините как можно больше таблиц стилей в один файл
• Минимизируйте файлы .js и .css
• Убедитесь, что ваш сервер использует gzip для сжатия всех отправляемых файлов
• Рассмотрите возможность использования URI данных (см. справку по URL-адресам данных для небольших файлов) для изображений и фоновых изображений CSS. Таким образом, вы можете включать данные непосредственно в веб-страницы. Например:

При этом на страницу будет вставлена ​​красная точка, но с сервера не будет запрошено изображение, поскольку оно закодировано непосредственно в этой строке букв и цифр. У Яна Хиксона есть утилита кодирования Data URI (исходный код утилиты). Этот метод может увеличить размер файла, но зачастую это лучше, чем ждать в сети загрузки внешнего файла изображения.

Используйте SVG (масштабируемую векторную графику)

для изображений

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

Браузер отобразит его следующим образом:

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

Размер SVG-файла обычно составляет часть эквивалента растрового изображения. Если вы используете тип документа XHTML и передаете его браузеру в виде XML, вы можете просто вставить код SVG непосредственно в разметку, избавив вас от сетевого запроса на загрузку этого изображения. В ближайшем будущем вы сможете сделать то же самое с HTML5.

Файлы SVG также работают с CSS/Media Queries — вот фрагмент файла SVG, который рисует круг и заполняет его разными цветами в зависимости от его диаметра (см. демонстрацию цветного круга SVG/Media Queries):

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

Логика содержится в самом файле SVG, поэтому после написания ее можно встроить куда угодно и не требует написания сценариев.

Размещайте элементы скрипта в исходном коде как можно ниже

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

(HTML5 определяет способ для браузеров загружать и выполнять скрипты без блокировки, используя атрибуты defer и async, но поддержка еще не завершена, и спецификация может быть изменена.)

Укажите размеры изображений в HTML

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

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

Познакомьтесь с HTML5

В HTML5 есть много аспектов, которые могут упростить разработку для устройств. Например, вы можете хранить информацию в браузере, используя локальное хранилище или хранилище сеанса (см. Руководство веб-дизайнера по HTML5: WebStorage) и не полагаться на файлы cookie.

HTML5 обеспечивает встроенную проверку в браузере для определенных универсальных типов форм; вы можете проверить, является ли определенный элемент числом в определенном диапазоне или соответствует определенному регулярному выражению, заполнено ли обязательное поле и т. д. без использования JavaScript. Попробуйте демонстрацию форм HTML5 в Opera и посмотрите, как она работает. Кроме того, некоторые мобильные браузеры со своими встроенными клавиатурами (например, WebKit на iPhone) предлагают настраиваемую клавиатуру в зависимости от того, установлен ли тип формы: электронная почта, номер, телефон и т. д.

Использовать прогрессивное улучшение

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

Не рассчитывайте на поддержкусценариев или Ajax. Например, Opera Mini отображает страницы на сервере и отправляет снимок страницы на устройство, поэтому страница не изменяется до тех пор, пока пользователь не сделает что-то на ней, и сценарии не могут работать в фоновом режиме. Пользователь должен сделать что-то, чтобы заставить Mini вызвать сервер, чтобы возобновить выполнение JavaScript. В результате вы не можете ожидать, что такие вещи, как анимация JavaScript или синхронизированные обновления ajax, будут работать в фоновом режиме, как в настольном браузере.

Точно так же не следует делать никаких предположений о возможностях анимации (холст, анимация SVG, анимированные GIF-файлы), шрифтах, цветах и т. д.

Разработка для Opera Mini подробно описана в статье Opera Mini: рекомендации по созданию веб-контента.

Геолокация

Геолокация есть не только в мобильных телефонах (она есть и в современных настольных браузерах), но поскольку большинство телефонов высокого класса оснащены устройствами GPS и телефоны находятся в движении, когда они используются, существует большой потенциал для использования геолокации W3C. API (см. геолокацию в браузере) для полезных приложений.

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

Хорошим примером прогрессивного улучшения является owlsnearyou.com, сайт со списком наблюдений сов в вашем регионе. Если вы посетите этот сайт с помощью браузера, поддерживающего геолокацию, и подтвердите, что хотите поделиться своим местоположением, API предварительно заполнит поле поиска местоположением, которое он определяет как ваше текущее местоположение. Если это не так (или если вы находитесь в Лондоне и хотите проверить наблюдение за совами в Шотландии),вы можете просто ввести новый пункт назначения в поле поиска.

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

Тестирование, тестирование, раз, два, три…

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

Тестирование в Opera Mobile и Opera Mini

Эмулятор Opera Mobile можно установить на рабочий стол и использовать для проверки любых файлов, находящихся на локальном компьютере или в сети, перед их запуском. Это полноценный продукт с той же кодовой базой , поэтому вы можете быть уверены, что он точен. Эмулятор Opera Mobile позволяет изменить строку UA, чтобы вы могли эмулировать версии браузера Nokia/S60, Windows Mobile и Android, отлаживать виджеты Opera и использовать Opera Dragonfly для отладки.

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

Тестирование на других телефонах и в других браузерах

Мы объединились с компанией Perfecto Mobile, которая запускает службу, позволяющую удаленно тестировать различные телефоны. Пользователи Opera могут подписаться на семичасовую бесплатную пробную версию. Кроме того, такие компании, как Apple и Palm, предлагают эмуляторы для тестирования своих продуктов.

Отладка устройства с помощью Opera Dragonfly

Как и в более ранних версияхOpera Mobile, Opera Dragonfly позволяет удаленно отлаживать веб-страницы, отображаемые на вашем мобильном телефоне, с рабочего стола. Для отладки страниц в Opera Mobile 10 откройте Opera Dragonfly в Opera Desktop ( Сайт > Инструменты разработчика > Opera Dragonfly ) и следуйте инструкциям в нашей статье об удаленной отладке (есть также видео (YouTube).)

Сводка

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

Источники

Ян Билек

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