[Обсуждение] Адаптивная верстка

Блог им. utb /
Мысли про адаптивную верстку.

Предыстория.


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

Например, jnet.kz с моего телефона (galaxy S)



Еще предыстория.


Дома стоит компьютер с 21,5'' широкоформатным монитором. Поэтому сайты, которые отлично выглядят на моем ноутбуке (15''), смотрелись откровенно говоря печально — мелкий шрифт, верстка разъехалась и т.д.

Что делать


Подумав, что таких не мало. (+ я заглянул в статистику сайтов :) )

Поэтому я решил предпринять, что нибудь для удобства, первое, что пришло в голову:
— мобильное приложение;
— резиновый макет для сайта;
— css для разных мониторов; (определяем через скрипт)
— media css3 (тогда я не знал такое понятие :) )

Делать мобильное приложение не выгодно*:
— дорого;
— под каждую ос мобильника + еще дороже (ios, android и т.д.)

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

Делать резиновый макет:
столкнемся с таким безобразием при малых разрешениях экрана
(экран 320*480)



Остается вариант скриптов и мединыйх запросов, либо фреймворки, использующие media.

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

Адаптивная верстка.


В двух словах используем медийные запросы (подробнее), определяем ширину монитора и «подсовываем» необходимый css.
чтобы посмотреть пример взгляните тут.
например, через онлайн ресурс



согласитесь намного приятнее и удобнее в использовании :)

Использование.


Использование несложное.

добавляем мета тег

<meta name="viewport" content="width=device-width, initial-scale=1.0">


можно вынести в отдельные css файлы:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="/youstyle.css" />


или добавить в 1 css файл:

@media only screen and (min-width:600px) { стили }


Можно использовать max и min значения для ширины, сделать варианты «по вкусу» для необходимых разрешений монитора. Да, хоть для каждого пикселя :)
также необходимо учитывать, что современные телефоны можно поворачивать (!)

я решил (пока что изучаю, поэтому примерно) использовать по следующей схеме

— использование % вместо px для ширины основных блоков, резиновый макет для больших мониторов

> 1024 резина
< 1024 обычный css — компьютер
> (768)800 < 1024 планшеты
> 320 < 480 смартфоны

Как итог.


— Экономим деньги и ресурсы, чтобы не использовать мобильное приложение.
— удобство для пользователя (довольные пользователи всегда хорошо :) )
— отпадает необходимости использования pda и wap версий + 1 пункт про экономию
— первые 10 посещаемых сайтов по zero, не используют данную технологию. (и вопрос почему?)

Вот в общем и все, чем хотел поделиться и обсудить.

Что думаете по этому поводу? Что вы используете и как?

с/у начинающий верстальщик

14 комментариев

talgautb
Кстати, про поддержку css media. Все нормальные браузеры поддерживают, а мой любимый ишак версий 7 и 8 требует скрипта :)

Claus
twitter bootstrap responsive проще некуда.
talgautb
не спорю, что фреймворк хорош или плох.
тема — адаптивная верстка, а не фреймворки.

тем более проще добавить немного кода, чем переписать проект под bootstrap, разобраться с less и т.д.
Claus
Вы не в теме похоже.
Почитайте про bootstrap responsive, это и есть адаптивная вёрстка. Переписывать не надо, надо изначально на нём делать ))
Вы спросили что вы используете, я ответил. Зря зашел похоже
talgautb
)) похоже не правильно понял :)
можно ссылку?
з.ы. без обид ;)
Claus
habrahabr.ru/post/156425/ Свежий пост на хабре про сравнение адаптивных CSS фреймфорков
yrnt
Ловите плюс, спасибо за проделанную работу.
Было интересно почитать.
talgautb
спасибо, какие мысли?
yrnt
На фоне последних публикаций на жнете, это как луч света в темном царстве.
szxsanjar
у первой десятки с трафиком наверное проблемы, некогда до клиент-сайда
talgautb
подумал, наверное, им проще все таки сделать мобильную версию типа m.site.kz
так как проекты большие, а не которым и не стоит делать, например, колеса
szxsanjar
а че за сайт на резиновом макете, что правда Joomla уже дошла до 3-ей версии, и уже перевели на казахский? что-то я о нем подзабыл, наверное стоит посмотреть что у них там нового
talgautb
да, правда дошла :) на сколько мне известно перевода еще нет.
RadMax
Как это я ваш пост пропустил. Плюсую +++
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.