Сообщений в теме: 25

[Анжей]

Приветствую, Уважаемых Пентаклубовцев!

Обращаюсь к профи сайто-строения и другим не равнодушным к юзабилити посещаемых сайтов.
Решил тут произвести реновацию дизайна сайта своего турагентства и столкнулся с проблемой, не могу посмотреть, как выглядит шапка сайта на мониторах с разрешением от 1620 пиксов, старая была короткой.
На планшетах и нет-ноутбуках проверял, а вот на широкоэкранных сейчас не имею возможности проверить.
Заранее благодарен за скриншоты шапки в IE (1620px, 1920px) поскольку 37% посетителей сайта сидят на "ослике"и скрины с других браузеров.
А так же хотел бы услышать мнения профи по расположению объектов в шапке , ну и советы .

Сообщение отредактировал Анжей: 08 November 2013 - 16:34

[Anatol]

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

[Анжей]

Спасибо за мнение, Уважаемый Anatol!
А как подготовить к отдыху, поднять настроение и расслабить пришедшего на сайт?
Поверьте, я пересмотрел тысячи сайтов турагентов и все они похожи своими фотками известных мест в мире или пляжами.
По поводу общения с дизайнерами: у меня была подобная "шапка" и что я вижу, компания, которая занимается разработкой сайтов для турагентов, выкладывает на продажу подобное решение. Это дало мне стимул, что я на правильном пути ))

Сообщение отредактировал Анжей: 15 October 2013 - 17:02

[№13]

Не вдаваясь в полемику, т.к. не являюсь "профи" IE, монитор 1920х1080

[Анжей]

USSR_ua сказал:

Не вдаваясь в полемику, т.к. не являюсь "профи" IE, монитор 1920х1080

Огромное СПАСИБО! Вы мне очень помогли!

[№13]

Анжей (15 October 2013 - 17:10) писал:

Огромное СПАСИБО! Вы мне очень помогли!

Удачи!

[hoholok]

В соображениях Anatol я есть рациональное зерно -(

[Anatol]

Анжей (15 October 2013 - 16:54) писал:

Это дало мне стимул, что я на правильном пути ))

Для размышления - один пример, на мой взгляд, профессионального и стильного решения дизайна из данной области: http://www.atoll-travel.ru/
Обратите внимание и имейте в виду, что применения "резинового" дизайна (растягивающийся в зависимости от разрешения монитора пользователя) профи старательно избегают.
P.S. Я не дизайнер, но по роду службы, последнее время, был вынужден вникнуть в тему и заниматься подбором исполнителей для сайта фирмы в которой работаю. Оказалось, что это не простая задача

[kiyas]

Anatol (17 October 2013 - 16:42) писал:

что применения "резинового" дизайна (растягивающийся в зависимости от разрешения монитора пользователя) профи старательно избегают.

как раз таки сайт на ссылке не резиновый, если имется в виды elastic design и написано на DTD XHTML 1.0 Transitional
а новая тенденция ( ссылку можно проверить , она будет на всех девайзах размещаться)таково что делать сайт что бы она открывался на разных девайзах по размера их разрешение.Responsive Design and Progressive Enhancements ,называется.

[Doodle]

Anatol (17 October 2013 - 16:42) писал:

Для размышления - один пример, на мой взгляд, профессионального и стильного решения дизайна из данной области: http://www.atoll-travel.ru/
Обратите внимание и имейте в виду, что применения "резинового" дизайна (растягивающийся в зависимости от разрешения монитора пользователя) профи старательно избегают.
P.S. Я не дизайнер, но по роду службы, последнее время, был вынужден вникнуть в тему и заниматься подбором исполнителей для сайта фирмы в которой работаю. Оказалось, что это не простая задача

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

[Schwanz]

Anatol сказал:

применения "резинового" дизайна (растягивающийся в зависимости от разрешения монитора пользователя) профи старательно избегают.

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

kiyas сказал:

новая тенденция

тенденция вовсе не новая. ещё до цсс-медиа-квери нормальные дизайнеры и верстальщики умели делать адаптивную резину.
просто браузеры сейчас слегка облегчили труд : )

[Анжей]

Anatol сказал:

Для размышления - один пример, на мой взгляд, профессионального и стильного решения дизайна из данной области: http://www.atoll-travel.ru/

Спасибо за отклик!
Сайт такого плана у нас был 2 года назад. Просто есть формы, например "подбор круизов", которые в данный дизайн влезают криво и не красиво вписываются в общий вид.
По поводу "шапки" ДА Согласен, переборщил Подарю какой-нибудь детской организации))
Буду искать.

Schwanz сказал:

тенденция вовсе не новая. ещё до цсс-медиа-квери нормальные дизайнеры и верстальщики умели делать адаптивную резину. просто браузеры сейчас слегка облегчили труд : )

Жаль, что пользователи этим пренебрегают по незнанию.
Поэтому хочется сделать так, чтобы сайт отображался на всех дисплеях-мониторах одинаково.
По статистике моего сайта к нам заходят 8% с IE6 , тоже проблема
В общем Спасибо за внимание!
Продолжаю набивать руку и мозг.

[kiyas]

Schwanz (18 October 2013 - 09:21) писал:

ещё до цсс-медиа-квери нормальные дизайнеры и верстальщики умели делать адаптивную резину.

ага, с долгими любовными танцамы с IE.

[Anatol]

StruM (18 October 2013 - 09:10) писал:

Почитайте Артемия Лебедева - о резиновом дизайне.

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

Schwanz (18 October 2013 - 09:21) писал:

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

Пример дайте пожалуйста, иначе утверждение голословно

[kiyas]

Anatol (23 October 2013 - 16:46) писал:

Пример дайте пожалуйста, иначе утверждение голословно

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

Скрытый текст

написанному можно верить потому что изучал я веб не по книжки или через интернет а ходил 2 года в реальный школа и платил 30,000 реальных зеленых

Сообщение отредактировал kiyas: 23 October 2013 - 17:29

[trurl]

Anatol (17 October 2013 - 16:42) писал:

Для размышления - один пример, на мой взгляд, профессионального и стильного решения дизайна из данной области: http://www.atoll-travel.ru/

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

[kiyas]

и картинки там прмяо по туристический

Скрытый текст

а второй называется про нас , about us



сауна какая то

Сообщение отредактировал kiyas: 23 October 2013 - 18:55

[Schwanz]

Anatol сказал:

Пример дайте пожалуйста

поиск в гугле по запросу «best responsive websites»

[Anatol]

Schwanz (24 October 2013 - 00:08) писал:

поиск в гугле по запросу «best responsive websites»

Я не просто так просил Вас дать пример, который, по Вашему мнению, соответствует профессиональному применению "резинового" дизайна.
Во всех этих top-ax размещены достаточно красивые примеры и сама по себе идея не нова, лишь завёрнута красивыми словами и подкреплена облегчениями для писателей сайтов в виде новых конструкций в CSS,html. НО, если Вы посмотрите top-вые сайты внимательно, то проблемы с резинкой Вам станут очевидны. Нет-нет да возникет слово More в меню, картинки становятся, мягко говоря не читаемыми - к чему-бы это? С иллюстрациями в статьях (особенно если на иллюстрациях есть текст) очевидные проблемы - либо их надо убирать, либо масштабировать по самое не могу, что неприемлемо. Я уж не говорю о более сложных случаях вложенных блоков с различным контентом. Про трафик, тормоза и работу в старых браузерах я даже не заикаюсь.
Ну и Вам, наверняка, известно что изображения с max-width или max-height корёжит, когда они упираются в ограничения, соотношение сторон нарушаются и не говорите пожалуйста при этом про js, это уже костыли.
Так что пока больше проблем, соответственно - "резинка" обходится существенно дороже конечному заказчику (я проверил на себе ) и, скорее, это светлое будущее, т.к. пока идёт переходный процесс.

[Schwanz]

Anatol сказал:

Так что пока больше проблем, соответственно - "резинка" обходится существенно дороже конечному заказчику (я проверил на себе ) и, скорее, это светлое будущее, т.к. пока идёт переходный процесс.

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

Anatol сказал:

Про трафик, тормоза и работу в старых браузерах я даже не заикаюсь.

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

[Nanto]

по сабжу - Ctrl зажмите и колёсико мыши крутаните - вам масштаб браузер и изменит. Нюансы может и не покажет, но представление о том "не едет ли вёрстка" получите.
По поводу "резины". Нет сейчас резины как таковой! Слишком уж большой диапазон размеров экранов стал. Покажите мне пример сайта с резиной, на котором контент будет тянуться от 320пикс. до 1920! И при этом дизайн не будет вызывать рвотных позывов.
Поэтому используют либо полу-резину - обычно 1024-1280 (всё что меньше скроллим, всё что больше центруем), либо адаптивный дизайн - но это в разы увеличивает трудозатраты, по сути надо делать несколько вёрсток! Плюс если есть какая-то динамика на js - всякие менюшки выпадающие (а она будет всегда - как минимум ИЕ надо скрамливать эмуляцию медиа-запросов) - ещё и с яваскриптом возни. Надо отслеживать смену размеров окна, и через таймер по-новой перерисовать/реинициализировать. Как минимум потому, что юзер с мобильным девайсом постоянно меняет ориентацию экрана - и на это забивать ни в коем разе нельзя.
Так что, "полу-резина" пока оптимум. а при таких небольших диапазонах (1024-1280) можно и фиксом спокойно обойтись.
P.S. По тесту кину ещё ссылку - http://www.browserstack.com/. Эмулирует практически любой девайс на любой актуальной платформе и умеет туннелировать траффик, т.е. покажет даже локальный хост.

Сообщение отредактировал Nanto: 28 October 2013 - 00:05

[Schwanz]

Nanto сказал:

Нет сейчас резины как таковой!

ага. ню-ню.

Nanto сказал:

И при этом дизайн не будет вызывать рвотных позывов.

пффф. чувствуется эксперт

Nanto сказал:

по сути надо делать несколько вёрсток!

надо делать несколько правил, а не вёрсток

[Nanto]

Schwanz (28 October 2013 - 06:49) писал:

ага. ню-ню.


пффф. чувствуется эксперт


надо делать несколько правил, а не вёрсток

Вот где експерт чувствуется! "Слышал звон, да не знаю где он".
Для начала - "резина" это, когда в лэйауте блоки ставятся через float или inline-block. Адаптивная вёрстка - это "@media screen and (max-width:1000px)".
Разница между этими подходами приниципальная. То что вы пытаетесь очень невнятно объяснить, скорее намёк на медиа-запросы. И таки там реально надо делать несколько вёрсток - работа в разы более трудоёмкая. Не просто правил, поскольку в мобильной версии часть элементов может исчезнуть или видоизмениться, или поменять своё положение на странице и соотвтественно в коде. Поэтому надо постоянно что-то дублировать в html.
А просто резиновый контент при разрешении от 320 до 1920 будет по высоте различаться раз в 5-8! Как при этом на большом разрешении избежать пустот в дизайне - наверное у вас, как у профессионала фронтэнда, надо спросить!
И таки да, я действительно эксперт в этой области!
http://habrahabr.ru/post/173271/

Сообщение отредактировал Nanto: 28 October 2013 - 17:30

[trurl]

Nanto сказал:

Покажите мне пример сайта с резиной, на котором контент будет тянуться от 320пикс. до 1920! И при этом дизайн не будет вызывать рвотных позывов.

Википедия, не?

[Nanto]

trurl (28 October 2013 - 18:05) писал:

Википедия, не?

Да, там фактическая полная "резина", кроме минимальных разрешений. Лень смотреть, но наверное с 960 скроллится. Ну и плюс учтите специфику Википедии - там исключительно текстовый контент (за исключением картинок в правой колонке). Ну и даже там далеко не всё гладко:
http://clip2net.com/...-clip-150kb.png

[Анжей]

Вот поколдовал еще над дизайном. Скажите что не так.
На контент не обращайте внимания, все будет меняться.
Интересует мнение с широкими от 1600 пикс. экранами.
Сайт