Как сделать сайт для телефона и компьютера

Обновлено: 05.07.2024

Создать сайт с телефона можно! И не важно Android у вас или IPhone. Не важно телефон у вас или планшет.

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

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

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

Нет ограничений по функционалу, все гибко настраивается. Wordpress легко обновляется. Чтобы с ним работать не нужно быть программистом. Достаточно установить пару приложений, установить красивые темы — ваш сайт будет отлично выглядеть.

Большой плюс движка, что с ним можно работать, как с телефона, так и с компьютера.

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

Создание на телефоне

Теперь можем создавать.

Сначала нужно зарегистрироваться в хостинге Timeweb. Ссылка есть на Youtube-канале под видео. Тут же можно создать и сайт. Зайти в раздел «каталог CMS Wordpress».

После создания нажимаете «Перейти на сайт». Все готово. Можно зайти теперь в админку сайта.

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

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

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

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

Строка с 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.

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

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

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

Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.

Mobile Friendly сегодня — это не просто забота о посетителях, а непременное условие продвижения.

Когда сайт создается с нуля, применяют подход Mobile First. Но у большинства в наличии старые рабочие проекты. Главный вопрос, который в таких ситуациях вызывает мобильная версия сайта — как сделать ее, не испортив имеющийся шаблон?

Есть три подхода:

Для владельцев старых проектов оптимальный выбор — использование адаптивной верстки. Как это сделать своими руками и без использования небезопасных плагинов, рассмотрим пошагово.

Мобильная версия сайта: как сделать правильно

Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.

Шаг 1. Снимаем ограничения

Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.

Width — ищем в коде крупные участки с жестко заданным отображением. Если параметр указан в пикселях или пунктах — нужно сменить его значение на проценты, em и прочие единицы, восприимчивые к окружению. Часто главный контейнер или область контента имеет фиксированный width — в большинстве случаев ограничения снимаются его заменой на max-width.

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

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

Обтекания — задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.

Блоки встали друг над другом. Добавление обтекания убирает переводы строк, выставляет элементы в линию на все доступное пространство.

Шаг 2. Планирование реорганизации контента.

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

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

Шаг 3. Удобство.

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

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

Сенсоры: пальцы не так точны, как мышка, оставьте им достаточно места. Пространство вокруг ссылок и иных активных элементов должно составлять не менее 28 х 28 пикселей.

Помогайте своим посетителям определить активное пространство — отступы, выделения, смена цвета и прочие вещи, которые можно задать для касаний, прописывайте псевдокласс hover для ссылок и кнопок.

Реализация Media Queries с примерами

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

Media queries — логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.

Медиа запросы можно назначать по параметрам:

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

Актуальный список аргументов доступен в официальной спецификации.

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

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

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

Для исправления убираем фиксированные рамки, прописав в стили шаблона:

@media only screen and (max-width: 1000px)

Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.

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

Дописываем в тот же самый медиаквери:

Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку — fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент — 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.

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

Переходим к заданию отображения на экранах с меньшим разрешением:

@media only screen and (max-width: 600px)

margin: 1em auto;

Если экран менее 600 px, то наши блоки должны встать в одну колонку — убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.

Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.

Продемонстрируем возможности на примере смены цветов и отображений.

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

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

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

Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.

Мобильная версия сайта: как сделать и на что обратить внимание

Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.

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

Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:

header, nav, section, article, aside, footer

Сразу же затронем вопрос — как сделать, чтобы некоторые скрипты отображались лишь при заданных параметрах экрана. Если стоит jquery, в код шаблона потребуется добавить простенький скрипт. Цифры меняются на необходимые. Читается так: если ширина окна превышает 980 пикселей, к странице применяется скрипт, указанный в пути. Можно задать несколько, синтаксис пишется по аналогии через точку с запятой внутри фигурных скобок.

if ($( document ).width() > 980)

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

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

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

В Яндексе это выглядит подробно, а Google просто сообщит, что проблемы отсутствуют.

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

Она способна поднять активность и конверсию всего лишь одним своим появлением.

Что такое мобильная версия сайта и как ее сделать?

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

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

А есть мобильная версия сайта. Она открывается только у пользователей телефонов, планшетов и айфонов.

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

Благодаря чему человеку не придётся искать маленькие кнопочки или увеличивать нужную информацию.

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

Ещё одна важная причина создания мобильной версии – полновесные сайты не всегда правильно отображаются на телефонах.

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

Да, можно выйти из ситуации, собрав всё важное в центр, но это ударит уже по версии для компьютеров.

Мобильная версия может отличаться от обычного сайта даже своим визуальным оформлением.

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

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

В первую очередь стоит обратиться к специалистам.

Если вы хотите сделать качественную мобильную версию, то стоит поискать программистов-умельцев.

Если же вы всё-таки решите самостоятельно делать версию, то можете воспользоваться сервисами, которые предлагает Google.

Например, есть «Адаптивный дизайн». Гугл рекомендует воспользоваться им.

Главный недостаток такого метода – размер страницы. Она будет весить больше, а значит грузить её интернет будет дольше.

А главное преимущество в том, что не нужно будет переживать о размере.

В таком случае вёрстка с компьютера автоматически подстроиться под телефонную версию. Благодаря чему вам не нужно будет тратить лишнее время на настройку.

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

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

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

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

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

А много значков = мелкие значки. А это очень неудобно.

Мобильная версия сайта Ютуб и Вк

Если вы хотите посмотреть образец, то берите пример с Ютуба или Вконтакте.

Оба оригинала в компьютерной версии все важные кнопки расположили сбоку. Это удобно для владельцев ПК.

А вот на телефонной все необходимые плашки находятся снизу.

Из этого можно вывести простое правило – там, где больше места, там его и обрезайте.

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

Но это ожидаемо, ведь функций много, а места мало.

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

Ещё ВК и Ютуб настраивают обложки и баннеры под устройство.

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

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

А вот что было не так очевидно, так это настройка мелких объектов.

То есть, название видео на Ютубе и список друзей в ВК отличаются с компьютера и с телефона.

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

Просто для того, чтобы они красиво помещались в телефоне, заполняя всё отведённое пространство.

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

Заключение

Мобильная версия сайта должна быть, если вы хотите развиваться.

Пользователи заходят не только с компьютера, но и с телефонов. Причём в последнее время всё чаще второе.

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

При разработке учитывайте размер страницы (не более 200 килобайт), а также отталкивайтесь от удобства.

Лучше не добавлять много функций, хватит и только самых важных.

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

P.S. А еще мы предоставляем услуги по продвижению ваших аккаунтов и групп в социальных сетях. Ознакомиться с ними вы сможете на этой странице

P.S.S. Чтобы написать данную статью, было потрачено много сил и времени. И если она принесла пользу вам, то возможно она принесет пользу и вашим друзьям.

Для этого нажмите и поделитесь с друзьями в социальных сетях. А для нас это будет лучшей благодарностью и мотивацией на будущее!

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