Есть дизайн сайта.
Скриншот: http://s018.radikal.ru/i513/1409/91/f795629ca239.jpg
Чтобы избежать горизонтальной прокрутки у пользователей, думаю над тем, чтобы дать задание верстальщику сделать сайт "резиновым", т.е. подстраивающимся под разные размеры и разрешения мониторов.
В связи с этим, есть моменты, которые я не до конца представляю.
Подскажите, пожалуйста:
1. С однотонными плашками понятно, что чтобы им подстроится под разные размеры, они просто свой размер меняют. Но как быть с:
1.1. Иллюстрациями, например в шапке. Нужно чтобы верстальщик сделал несколько размеров иллюстраций которые при масштабировании окна браузера будут менять размер?
1.2 Горизонтальное меню. Если оно не уместиться в одной строке, оно должно будет перенестись на 2 строки или поменять уменьшить размер шрифтов?
1.3. Синие квадраты (из шапки на скриншоте), как должны себя вести при масштабировании?
1.4. Другие элементы шапки (вокруг иллюстрации), как должны себя вести при масштабировании окна браузера?
1.5. Боковые сайдбары. Как должны, как должны себя вести при масштабировании окна браузера?
1.6. Центральная часть. Как должна, как должна меняться при масштабировании окна браузера?
1.7 Футер (подвал). Как должна, как должен меняться при масштабировании окна браузера?
2. Резиновый дизайн это адаптивный дизайн? Или это разные понятия?
- 03.09.2014 17:43
- Регистрация: 21.07.2014
- Сообщений: 207
- Репутация: 7
Последний раз редактировалось rownong; 03.09.2014 в 17:49.
- 03.09.2014 18:21
rownong, отдайте на верстку профессионалу, он вам и ответит на все ваши вопросы, т.к. у каждого верстка индивидуальна.
Почитайте литературу, а то что вы спрашиваете - это можно долго обсуждать и спорить, и всё-равно останутся вопросы. - 03.09.2014 18:25
Все вопросы которые вы задали здесь, по хорошему задать бы вашему верстальщику. Если он действительно профессионал, то он вам посоветует всё по существу, а вы в свою очередь его подкорректируете в мелочах. Причина довольно банальна - вам здесь сейчас расскажут десятки того "как мы бы сделали"
Моё мнение по пунктам:
1.1 Да действительно, менять размер. По другому сделать сложно, либо делать под каждое разрешение свою картинку к шапке, что в общем то кроме гемороя ничего не принесёт, к тому же на планшетах изменение масштабов будет не критично.
1.2 Для планшетов в принципе просто уменьшение, хотя в принципе страница на планшете по сути сама примет нужный вид, у вас ширина шаблона небольшая, а насчёт мобильников и смартфонов - лучше перенести каждый пункт меню на новую строку.
1.3 Так же как и пункт 1.2
1.4 Смотрите 1.2, но тут нужно действительно продумывать. Возможно для планшетов всё оставить как есть, то есть немного уменьшить, а вот для мобил даже не представляю как такое сделать, что бы юзабилити не уронить, хотя думается что с мобильников уже мало кто просматривает подобные сайты, скорее со смартфонов, а у них разрешение позволяет всё вписать. Опять же по этому пункту лучше посоветоваться с версальщиком.
1.5 по хорошему при уменьшении логично их отправлять ниже основного блока контента, потому как человеку более полезно прочитать информацию о вашей конторе а не посмотреть сертификат на мизерном разрешении, который по себе знаю (вращаюсь в строительной сфере) не так критичен, и если он будет так необходим заказчику, он зайдёт ещё раз со стационарника.
1.6 Стандартно, перенос строк, при этом желательно выставить минимальную ширину, тут ничего нового не придумать. Полоса прокрутки - не вариант вообще.
1.7 Блоки друг за другом.
2 Адаптивный сайт и резиновый - совершенно разные понятия, которые почему то многие равняют.Спасибо сказали:
rownong(04.09.2014), - 03.09.2014 20:46
- Регистрация: 10.08.2014
- Сообщений: 79
- Репутация: 4
Вообще можно средствами PHP получать значения размеров окна и браузера, а на основе оных подставлять значения... Менять меню и тд. Тут только фантазия. Конечно, это не рашает проблемы изменения размера окна после загрузки. Но с планшетами и мобильными работает.
Последний раз редактировалось pOsy; 03.09.2014 в 21:08.
Спасибо сказали:
rownong(04.09.2014), - 04.09.2014 00:37
pOsy, разрешение экрана средствами PHP узнать НЕЛЬЗЯ.
Резиновый дизайн – тема для некрофилов. Адаптивные дизайн, это не "технологическое чудо", это правило хорошего тона. Сегодня все современные CSS-фреймворки предлагают инструменты для быстрого создания адаптивной верстки (в т.ч. адаптивных изображений). - 04.09.2014 11:12
два момента хочу пояснить, на остальное нет времени, заказы на резиновую верстку поперли!!)))
А) резиновый это конечно прикольно, но увы и ах - это единственный плюс резинового шаблона)))
человек - существо с глазами, имеющими между собой довольно стандартное расстояние и в основной массе своей глаза у человека расположены в одной плоскости, отсюда вывод - предусматривая 100% ширину сайта для 27-дюймового 1920-монитора, вы подвергаете юзера риску свернуть шею, круча головой то влево - выбирая куда нажать на менюшке, то вправо - просматривая баннеры и тд.
мораль - делайте резину умной! т.е. максимальное разрешение ограничьте шириной 1200 пикселей, у вас обыденный магазин сантехники, поверьте, все у вас там поместится, забудьте про манию вывесить все товары-акции-прайсы-банеры на одной странице!! если надо юзеру - он прокрутит вниз, если надо - нажмет на аккордеон, если надо - перейдет на другую страницу и т.д.
Б) картинка в шапке - делается так - ширина примерно 800 - это ваша картинка, остальное заливаем подходящим фоном, или же делаем картинку такой, что и на узком экране было понятно про что речь и на широком, т.е. на широком просто будет видно всю картинку , а на узком - часть, у вас не салон гламурных девочек, у вас задвижки, их можно и вообще частями показывать, а вот девушек - нет, их надо во весь рост и во всю ширь ))))
а все эти смены размеров картинки - ну не надо! она пусть такой и будет всегда. а планшеты сами отмасштабируют
вот гляньте - http://kepkino.ru/ - главный слайдер отлично масштабируется для любого экрана, а на смартфонах просто его отключаем, да, иногда можно и так, а вы не знали?)))
верстальщика вашего - в школу учить основы!Последний раз редактировалось provoloka; 04.09.2014 в 11:15.
Спасибо сказали:
rownong(04.09.2014), - 04.09.2014 12:36
Посмотрите http://getbootstrap.com/ и все вопросы отпадут.
Спасибо сказали:
rownong(04.09.2014), - 05.09.2014 09:52
- Регистрация: 21.07.2014
- Сообщений: 207
- Репутация: 7
Я выступаю в роли заказчика.
Правильно ли я понял, что лучше сделать так.
Сказать верстальщику:
"Сделайте для сайта резиновый дизайн, чтобы на разрешениях экрана то 800x600 до 1600x1200 страницы содержали все элементы и при этом не было горизонтальной прокрутки".
И верстальщик уже сам решит все вопросы с отображением элементов при изменение размеров окна браузера? - 05.09.2014 10:05
rownong, этого будет вполне достаточно. Все дополнительные вопросы задаст Вам верстальщик, непосредственно уже когда будет просматривать макет сайта.
Тэги топика:
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
"Комплексный аудит сайта", "Експресс-аудит сайта", "Разработка Семантического ядра" | Услуги по SEO | 18 | 16.12.2013 18:34 |
"Сателлиты" \ "СДЛ" \ "Под Ключ" \ "Цена = Качество" | Создание сайтов | 22 | 22.01.2013 02:36 |
Шаблон сайта html под платные архивы "Minecraft" (уникальный контент в комплекте) + 18 уникальных статей для сайта тематики "софт" | Прочее | 6 | 11.10.2012 22:18 |
Кнопка "Пожаловаться/задать вопрос" для сайта на Joomla | Joomla | 5 | 20.01.2012 17:33 |
Вопрос для Украинцев: Можно ли вывести WMU на "кредитку" от "ПриватБанк'а" ? | Прочее | 23 | 18.11.2011 18:10 |