Responsive web design и другие животные
Jul. 26th, 2012 06:40 amПо результатам опроса и прочей критики, я седлал видео играющим только по требованию, теперь ничего не звучит само.
Кроме того, я наконец сообразил как переделать мою CMS под конецпцию "responsive web design", которая на ходу перекомпонует сайт для размеров экрана любого девайса, меняя стили слоев и размеры шрифтов, вместо выдачи отдельного мобильного сайта, который все равно не заточен под все доступные девайсы сразу. Теперь есть как-бы три варианта: для десктопа как было, для экранов 800 и менее пикселей в ширину (некоторые планшеты, телефоны в горизонтальном положении) - сайт плавно сжимается, часть элементов убирается, и для экранов 480 и менее пикселей (телефон в вертикальном положении) - минимум элементов, меню сжато до одной кнопки, добавлены чисто телефонные функции. При этом контент страниц тот же на всех версиях.
Главная загвоздка была с флэшем, который при этой концепции не используется (я не смог ни одного найти). Теперь флэш грузится только для экранов больше 800 пикселей в ширину.
Если теперь сужать окно браузера, видно что сайт сужается под экран и постепенно изчезают второстепенные об'екты, шапка ужимается, и в самой узкой версии под телефоны в вертикальном положении возникает телефонное меню с кнопками меню,"call" (сразу звонит мне) и т.п. Если просто сужать окно браузера, начиная с широкого, то будет ужиматься и флэш, но не идеально. Но в случае с девайсом он изначально не загрузится (сделайте рефреш с уже узким окном) и будет просто картинка.
"Десктоп" на экране в шапке я поменял: как мне напомнили он был похож на устаревшую "Висту". Теперь он скорее напоминает, но не повторяет Windows 7 и более обобщающ (если есть такое слово). И лого мое на нем читается лучше.
Просьба: посмотрите на своих планшетах и телефонах, как оно выглядит.
Кнопка "vcard" на андроиде не работает (он не умеет заносить .vcf в адреса и их не понимает), поэтому кто-нибудь с айфоном - попробуйте нажать, предлагает ли после открытия занести в адресную книгу?
Покрутите телефон - в вертикальном положении увидите кнопки и самый простой стиль, в горизонтальном - уже более похоже на десктоп. Флэш может загрузится или нет, в зависимости от экрана и девайса. Скорее нет чем да, что для мобильных сайтов правильно - включится может только если экран больше 800 пикселей в ширину.
В телефонном варианте, при нажатии на кнопку "play" должно пойти видео (только если девайс поддерживает flash).
Если заметите где какие косяки - дайте знать! Спасибо!