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

[werd2077]

Добрый день форумчане. Есть cайт, который  создан с помощью HTML и CSS, как правильно сделать для него мобильную версию? С ув.

[Старый]

Варианта 2:
1. Адаптивный дизайн.
2. Скрипт определяющий устройство и/или разрешение и переадресующий на вторую версию.

[Андрей88]

От себя добавлю, что в адаптивности есть свои плюсы и минусы:
++++++ Адаптивной верстки +++++++
Вам не нужно на каждую версию заливать и дублировать контент
При правильной разработке на 99% устройств будет отображаться идеально
Править дизайн не придется на 2 или 3 версиях сайта, если возникнет такая необходимость.
--------- Адаптивной верстки -----------
Нет возможности убирать лишнее с мобильной версии (тяжелые картинки, часть дизайна и т.д.)
Не всегда можно предугадать реальное отображение на всевозможных экранах просмотра
Для подгона под "Mobile-Friendly" иногда приходится идти в ущерб запланированного дизайна.

Вот как-то так...

[wassulmaier]

Добрый день форумчане. Есть cайт, который  создан с помощью HTML и CSS, как правильно сделать для него мобильную версию? С ув.

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

Изображения и видео - тоже. Чтобы убедится самому просто добавьте эти строчки в ваш CSS:

1) В Head добавляете строчку:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2) В CSS:

img {max-width:100%;height: auto;}  // все изображения станут резиновыми
embed, object, iframe {max-width: 100%;max-height: 500px;} // видео, а также видео с Ютуба и Вимео тоже.

Тоже в CSS:Основной блок (Враппер или врап, в котором весь контент).

@media screen (max-width: 1024px) { .wrapper {width: 100%;}}  // к примеру, так нужно проделать со всеми основными блоками, то есть переделать их длину в проценты. Далее:
@media screen (max-width: 854px) { }
@media screen (max-width: 603px) { }
@media screen and (max-width:480px)  { }
Добавлено: 17-04-2015, 10:33:40

Проверяется мобильная версия сайта путем уменьшения размера браузера.

[werd2077]

Большое спасибо, вечером буду экспериментировать.
Добавлено: 17-04-2015, 20:05:09

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

Изображения и видео - тоже. Чтобы убедится самому просто добавьте эти строчки в ваш CSS:

1) В Head добавляете строчку:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2) В CSS:

img {max-width:100%;height: auto;}  // все изображения станут резиновыми
embed, object, iframe {max-width: 100%;max-height: 500px;} // видео, а также видео с Ютуба и Вимео тоже.

Тоже в CSS:Основной блок (Враппер или врап, в котором весь контент).

@media screen (max-width: 1024px) { .wrapper {width: 100%;}}  // к примеру, так нужно проделать со всеми основными блоками, то есть переделать их длину в проценты. Далее:
@media screen (max-width: 854px) { }
@media screen (max-width: 603px) { }
@media screen and (max-width:480px)  { }
Добавлено: 17-04-2015, 10:33:40

Проверяется мобильная версия сайта путем уменьшения размера браузера.


Я так понял, это адаптивный дизайн?

Добавлено: 17-04-2015, 20:05:45

Я так понял, это адаптивный дизайн?

[geekwolf]

Адаптивный дизайн+Node.js+Python
Как вы догадываетесь есть решения выдающие обе версии по загрузке с того или иного устройства.

[Krokodilchik]

Для видео мне кажется лучше использовать такую конструкцию

Код Выделить Развернуть

<style>
.video {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.video iframe, .video object, .video embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video">
    <iframe src="https://www.youtube.com/embed/kWou4mzLTTQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

[Shiot]

Вам нужна адаптивная верстка. Почитайте или посмотрите видео как это реализовать