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

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

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через GPRS. Мне это удалось прочувствовать однажды, когда я был далеко в Краснодарском крае, в какой-то глубинке, где телефон по непонятным причинам более-менее (40-50%) ловил только на кладбище. С такой связью можно звонить, но вот Интернет был совершенно некудышным. Поэтому когда мне пришлось там загружать страницы размеров 200-300 КБ, из которых 90% — это ненужная графика, я проклинал создателей этого сайта.

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

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

Что касается ширины страницы, то рекомендую поставить max-width: 620px; у самого верхнего контейнера. Сильнее растягивать не требуется.

Мобильную версию сайта лучше сделать на отдельном поддомене, например, на m.mysite.ru.

Когда Ваш отдельный сайт для мобильных устройств будет готов, надо подумать, как перенаправлять пользователей с мобильными устройствами с сайта mysite.ru на m.mysite.ru. Код для определения браузера можно скачать здесь: http://detectmobilebrowsers.com/.

Скачиваете, например, для PHP. Далее вставляете в index-файл этот код и заменяете там адрес в header() на адрес Вашей мобильной версии сайта.

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

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

Это всё, что требуется сделать для того, чтобы была мобильная версия Вашего сайта.

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

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

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

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

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

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

Правильная маршрутизация на веб-сервере, который вы используете.
Лучше всего создать отдельный проект, если вы хотите сделать полностью отличную стилизацию от «родительского сайта».
Продумать дизайн мобильной версии
Собрать проект.
Настроить все редиректы, если веб-сервер обнаруживает что это мобильное устройство, к примеру, вы заходите с телефона на сайт vk.com , установленный и правильно настроенный веб-сервер перенаправляет вас на мобильную версию(ваш поддомен) m.vk.com , на desktop такого происходить не должно.

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

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

— Смотрите! Мы берем обычный айфон. Заходим на ваш сайт. И что видим? Обычный сайт? Это же ужасно. Смотрите, как это работает у банка N. У них открывается специально разработанная мобильная версия! Из трех кнопок!

— Мари-Изабель, подпишите контракт с молодыми людьми.

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

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

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

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

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Один из способов включения стилей для мобильного устройства — это использование User Agent, которую получает сервер от клиента.
Этому может помочь набор скриптов: code.google.com/p/mobileesp, а также сервис от яндекса api.yandex.ru/detector
При работе с User Agent только одна проблема — это постоянно появляющиеся новые User Agent.

На стороне клиента

Раньше использовался такой подход:

Строка с media=«screen» соотвествует обычному компьютеру, media=«handheld» — это мобильное устройство. Новые устройства отказываются от такого подхода и необходимо использовать запросы внутри атрибута media.

Например для устройств с шириной экрана 480px и меньше будем использовать код:

Комбинируя оба способа можно написать:

Выбор пользователя

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

Что писать в стилях

1. Избавьтесь от многоколоночной разметки
2. Поставьте display: none; на неважных элементах
3. Уменьшите поля вокруг элементов
4. Уменьшите использование картинок, особенно больших фоновых
5. Повысьте читаемость текста увеличив размер мелкого текста.
6. Выкиньте плавающие элементы
7. Учитывайте, что события mouseover не работают.

Что кроме стилей

Многие мобильные устройства понимают такую запись номера телефона:

Некоторые устройства уже поддерживают HTML5, поэтому можно использовать, например, такие теги:

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

Размеры и ориентация

Современные мобильные устройства обычно масштабируют страницу, чтобы она вся отображалась на экране.
Это не всегда удобно. Чтобы изменить данное поведение браузера, нужно использовать тег meta с атрибутом viewport. Например:

Данное определение означает, что 320 пикселей страницы будет видно на устройстве.
Также можно запретить масштабирование:

Также можно добавить стили на основе ориентации устройства:

Как вы поняли, файл portrait.css будет использован при портретной ориентации, а landscape.css при альбомной.

Определение ориентации поддерживается не всеми устройствами, использование max-width более надежно для определения ширины экрана.

Специальные замечания по iPhone

1. На iPhone нет поддержки Adobe Flash
2. Не поддерживается тег , поскольку нет доступа к файловой структуре.
3. Кэшируются файлы размером не более 25 Kb
4. Есть проблемы с @font-face — использованием загрузки внешних шрифтов. См. также статью насчет шрифтов.

Но вы можете использовать JavaScript библиотеки, которые можно использовать для доступа к специальным функциям iPhone. Обратите внимание на Sencha Touch, jQTouch и iui. Эти библиотеки также работают и с Android. Дополнительно ожидается появление production-релиза jQuery Mobile.

Также можно создать свою иконку для сайта, используя следующий синтаксис:

Иконка должна быть 57×57 пикселов в формате png. Android также понимает такие иконки.

Building a Mobile App using HTML, CSS, and JavaScript

So you have seen the title, and you are wondering how you can pull off building an actual mobile application by just using the knowledge of basic web technologies without the need to learn Android or IOS development? This is made possible by converting your regular web applications to work as a standard mobile application that can be installed on multiple platforms. By doing this, we will achieve a type of application referred to as Progressive Web Apps (PWAs).

In this article, we will learn how to leverage the power of HTML, CSS, and Javascript to build a simple mobile app. We will not be using frameworks like Ionic or React Native. This is because this tutorial focuses on showing how a basic web app can be made to feel and behave like a native mobile application that can be installed and run on mobile devices using the most straightforward method with the least abstraction.

To proceed, let us have a brief introduction to PWAs.

What are Progressive Web Apps?

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features combined with progressive enhancement to give users an experience on par with native apps.

In simple terms, they are basically websites styled like apps that can be run either inside a website browser or installed directly on a mobile device and accessed like a native app.

There are three key components of a PWA;

Service Worker: The service worker transforms the website into an app by allowing it to download and cache files on a device.
Web Manifest: This JSON file provides the basic meta-information about the app, such as the app icon, background color, etc.
Secure HTTPS: HTTPS is mandatory and makes PWAs more secure than regular web apps.

PWAs have pros and cons. Among the former:

Cheap and Fast Development: PWAs are less expensive, quicker, and easier to create than native apps. Native app development from the ground up necessitates particular technologies for both platforms. HTML, CSS, and JavaScript are all that are required for a PWA.
Cross-Platform Availability: One of the promising advantages of PWAs is that they can be installed and run on multiple devices across various operating systems.
Offline Functionality: Having bad or no internet at all won’t stop users from using your app as it can cache data for offline viewing using service workers.
Performance: Compared to native mobile apps, PWAs are much lighter, don’t take as much memory space, and have a faster load time.

On the negative side:

High Battery Usage: Because PWAs are built-in high-level web code, phones have to work harder to read the code; they use more battery than native apps.
Mobile hardware access: PWAs cannot access various hardware features like the device’s Bluetooth, proximity sensors, etc.
Distribution Since PWAs are not distributed through the app store, you may miss out on users who mainly browse the app store.

You should consider using/building Progressive Web Apps if you meet the following criteria:

You don’t have the budget to build a full-fledged app.
You need to push to your target audience faster.
Having cross-platform compatibility is essential to your business.

We’ll be building a “Todo List” mobile app using HTML, CSS, and Javascript. We will first build out a web app while using IndexedDB for our database, workbox to make it work offline, and web manifest to make it installable across devices. The final result will be as follows:

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