Как сделать html на телефоне

Обновлено: 05.07.2024

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

Зачем нужна специальная мобильная версия сайта?

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

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

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

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

Согласно исследований Equation Research 46 % пользователей не заходят повторно на сайт, если в предыдущий раз им что-то не понравилось. То есть где-то половина из тех, кто составляет статистику по отказам – это те, кого вы упустили практически навсегда.

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

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

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

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

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

Что дает сайту адаптация под мобильные гаджеты?

Как просмотреть сайт на экранах с разной диагональю без соответствующих гаджетов?

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

● Quirktools – просто введите адрес сайта и выберете интересующие вас устройства;

● Ipadpeek – для проверки отображения на гаджетах компании Apple;

● F12 – нажмите на клавишу, а потом на значок с телефоном. Самый простой и доступный вариант, который не требует захода на специальные сервисы.

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

Как улучшить сайт под мобильные устройства?

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

Задайте правильные атрибуты у полей

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

Для удобства ввода адреса почты:

Удобная ширина экрана для мобильных устройств

Откройте сайт и уменьшайте размер браузера до тех пор, пока контент не станет нечитабельным. Так узнаете минимальную ширину для @viewport.
Пропишите этот тег в head страницы:

Сделайте ширину изображения равной 100 %

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

Для фоновой картинки задайте:

Еще одна рекомендация по картинкам:

Измените ширину полей ввода на 100 %

Для ширины полей input добавьте в CSS-код:

Благодаря этому поля будут по ширине экрана используемого пользователем гаджета.

Используйте word-wrap для длинных строк

Хотите, чтобы посетители вашего сайта под мобильные устройства не сталкивались с подобным? Тогда вам следует использовать word-wrap. Для этого пропишите:

Обратите внимание на пробелы

Выполните замену пробелов отступами при помощи:

Ваш код: 43514 3a1b5 fc8bb

Это сделает удобным копирование информации при посещении сайта с планшета или смартфона.

Специальные стили для мобильной верстки сайта

Задайте целевые стили в медиа-запросах:

Уберите fixed позиционирование

Фиксированное размещение на странице заголовка или сайдбара может навредить, заняв весь экран мобильного устройства:

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^="mailto:"].

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

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.

Номер видно в тексте ссылки.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

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

Android, iOS — откроется звонилка по умолчанию.
Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Как стилизовать

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

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

3 ответа 3

Если вам требуется поменять на мобильном именно верстку, то есть HTML-разметку, то вы можете поместить ее в отдельный блок, например для хедера (аналогично - для прочих крупных блоков, которые будут отличатьтся от десктопной версии). Этот блок будет скрываться на больших разрешениях через свойство display: none, и показываться на мобильных через display: block. Соответственно, блок с десктопной версией также придется обернуть в обертку, скрывать его на мобильных и показывать на десктопе.

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

CSS для мобильных назначаетcя через медиазапросы либо с использованием css-фреймворков вроде Bootstrap.

Наверняка встречали поддомены сайтов, к примеру vk.com , а есть m.vk.com . При переходе на сайт с поддоменом m.vk.com у вас открывается "мобильная версия" сайта. Что вам нужно чтобы реализовать данный функционал:

Ну а если уж нужно как-то отдельно работать через смартфоны, то нужно писать под них приложения, работающие с API ресурса

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.

Оформление ссылки tel

По умолчанию на мобильных телефонах номера телефона распознается автоматически и преобразуются в ссылки.

После:

Чтобы задать нормальные стили на мобильных, нужно писать два правила.

Или по атрибуту:

Отключить распознавание телефонов

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

Оборачивание телефонов ссылками

Замечена одна особенность – на андроид устройствах не всегда срабатывает клик по ссылке если в атрибуте href форматированный номер телефона.

Обвернуть телефон регулярным выражением

Если телефонов много, то лучше автоматизировать замену с помощью регулярного выражения.

Результат:

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

Или сделать на мобильных ссылку с номером телефона, а на десктопе ссылку на форму обратного звонка.

Читайте также: