В длинных строках используйте word-wrap. Будьте осторожны, используя пробелы

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

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

1. Установите правильные атрибуты полей форм

Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize :

Ваше имя:

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “Erwan ”, на что-то вроде “Erevan ”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “Ken burns ” станет “Ken Burns ”):

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

И не уходя далеко от темы. Если ваш сайт запрашивает email у пользователя — используйте поле email , чтобы посетителю не приходилось вводить символ @ с клавиатуры мобильного устройства:

Ваш email:

2. Задайте подходящую для мобильных устройств ширину

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

Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head :

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

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

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

3. Установите ширину картинок в 100%

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

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

img { max-width: 100% }

Если вы используете изображения в качестве фона не с помощью тега img , просто установите CSS свойство background-size в значение contain . Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:

Header { background: url(header.png) 50% no-repeat; background-size: contain }

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

Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta . Если это не так — пользователь не сможет пользоваться зумом:

4. Установите ширину полей ввода в 100%

После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:

input, textarea { max-width:100% }

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

5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм

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

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

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

И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.

6. В длинных строках используйте word-wrap

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

Избегайте этой ситуации с помощью свойства word-wrap . Так будет выполнен перенос, когда строка достигнет края экрана. Пользователь увидит все необходимое без использования прокрутки:

Ваш пароль: 435143a1b5fc8bb70a3aa9b10f6673a8

7. Будьте осторожны, используя пробелы

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

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

Дабы избежать подобных ситуаций, вместо пробелов между группами символов используйте отступы:

Ваш код: 435143a1b5fc8bb

Как видите, «пробелы » между символами остаются, но с тем отличием, что при копировании-вставке нет нужды что-то удалять. Как минимум, это удобно и экономит время!

8. Преимущества медиа-запросов

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

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

9. Избегайте fixed позиционирования

Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed . Будьте внимательны.

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

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

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

10. Используйте стандартные шрифты

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

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

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

Для этого нужно написать два варианта CSS -правил. Один вариант для использования шрифта по умолчанию, а другой — для применения скачанного шрифта.

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

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

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

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

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

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

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

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

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

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

Стоит однако отметить, что МОБА-игр для мобильников существует немного. Все они разумеется сильно уступают своим конкурентам на ПК, но их преимущество не в графике и количестве возможностей, а в удобстве, которое несёт в себе мобильное устройство, ведь играть с ним можно где-угодно.

Возможно, вас заинтересует так же ТОП 5 игр, похожих на Доту и ТОП 10 игр в жанре MOBA .

А в этом ТОПе перечислена пятёрка лучших на сегодня мобильных игр в жанре MOBA!

5. Legendary Heroes

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

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

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

4. Solstice Arena

Игра, разработанная компанией Зинг Корпорейшн в 2013 году.

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

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

Графика в игре тоже не акти, да и персонажей в игре тоже не шибко много. Поэтому четвёртое место.

3. Vain Glory

Игра, разработанна в 2013 году, имеет довольно неплохую дота-подобную графику и анимацию..

Здесь всего одна карта. Бои так же проводятся 3 на 3. но Vain Glory отличается от всех тем, что в ней есть кракен - огромный моб, за свержение которого игра получает серьёзного товарища, который может переломить ход сражения.

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

Иногда игра не запускается с первого раза даже в оло режиме. Так что третье место.

2. Fight is Forever

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

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

Бои, как водиться в большинстве подобных игрушек, проходят 3 на 3 и никак иначе.

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

1. Heroes of Order & Chaos

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

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

Так что данная игра заслуживает почётное первое место в нашем ТОПе моба игр для планшетов и смартфонов.

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

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

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

То, что сайты будут помечаться информация 100%, остальная информация только предположения.

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

5 бесплатных онлайн сервисов для проверки сайта на мобильных устройствах.

Давайте перечислим все бесплатные сервисы и потом рассмотрим каждый по порядку:

1. Google Webmaster Tools ()

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

1. Google Webmaster Tools (Mobile Friendly Test). Самый лучший сервис поскольку он разработан компанией Google. Хорош он тем, что можно посмотреть не только как отображается сайт на экране, а и получить все необходимые рекомендации для устранения ошибок и правильного отображения. Для того, что бы увидеть все ошибки необходимо перейти в Google Webmaster Tools , в пункте “Поисковый трафик” выбрать “Удобство просмотра на мобильных устройствах”. После перехода на страницу можно увидеть проблемы с удобством просмотра.

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

2. Теперь переходим к остальным сервисам с помощью которых можно проверить сайт на мобильных устройствах.

Все они довольно просты в применении, достаточно ввести в строку адрес сайта и получите все результаты сайта на различных устройствах. Давайте для примера рассмотрим сервис Responsinator . Переходим и вводим адрес и нажимаем «GO «, я ввожу loleknbolek . Результаты получены.

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

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