1. С полностью адаптивным дизайном как-то не везёт. В данном случае клиент отказался переплачивать так как «я знаю своего клиента и мой клиент через телефончики заходить на сайт не будет». А вообще стараемся вписывать сайт в 960px, чтобы на мобильных, хотя бы, гармонично смотрелся и горизонтальный скролл не появлялся.
2. Бывает, но только при изменении окна экрана и то, тут же на свои места встаёт.
Про адаптив: странно очень, на сайте активно используются компоненты Bootstrap 3, но совсем нет grid classes (.row и .col-*-*). Хотя корневое отличие от Bootstrap 2 это ахуенный responsive grid system. И если использовать это при старте — накладные расходы минимальны.
Тут не bootstrap в полном смысле этого слова. Я расковырял его и вытащил все базовые стили, а все прибамбасы, вроде грида, кнопок, разновидностей таблиц и т.п. убрал. Эдакий расширенный normalize получился. Вот
Это с каких таких пор айпэд по стал 980 в портретке?
*портретный
Всю жизнь он был 980 и в портретке и лэндскейпе. И iPhone тоже. И Android’ов большинство, тех кто старше 3-ей версии, (2йка — 960). Родные значения высоты и ширины он берёт только если указываешь meta viewport с width=device-width. А когда не указано, то 980px при любом повороте.
Купи себе айпэд 🙂
Или +1 руководители не могут позволить себе айпэд?
Несомненно, я ожидал, что найдётся один уникум, который начнет нести херню даже после того, как я выложил ссылку на сравнительную таблицу вьюпортов, но чтобы так много…
Хотя чего ожидать, когда наглый фрилансер в одиночку делает всю техническую часть разработки сайтов лучше, чем 90% всех игроков web-рынка Красноярска.
Включайте мозг, доставайте свои айпадики, нексусы и прочий зоопарк и слушайте урок, мои дражайшие минусовщики. Вот вам линеечка для измерения экрана . Если нажать правой кнопочкой и выбрать просмотр исходного кода страницы, то самые сообразительные из вас увидят, что «» закомментирована. То есть эта страница показывается на мобилках именно так, как показывается любая страничка в интернете, если ей не указать специального поведения. А теперь откройте эту страницу на мобильном устройстве и начинайте поворачивать его и внимательно наблюдать за цифрами. Катастрофически большая часть из вас увидит цифру 980px для ширины или больше. iPad’ы и iPhone’ы точно покажут 980. Меньше этой цифры покажут только устройства на Android версии меньше третьей или редкие исключения — там и 960 и 800 можно встретить без вопросов.
А где же ваши любимые циферки, спросите вы? Те, которые вы читали, выкладывая свои кровные за свеженькие устройства? А вот вам ссылочка ещё — — тут строчка meta viewport вполне активна и вы уже можете увидеть всё то многообразие размеров, которое вам хочется.
+1 руководители могут позволить себе мозг.
наглый фрилансер это Ромка Вагнер?
Да ладно тебе глотку рвать:). Всем известно что сам себя не похвалишь никто не похвалит. Пусть ты хоть один сайт под ключ сделал и организовал заполнение.
Dymio, зарплату кокаином выдали?
Вы про разное говорите, походу ) На 980 в портретке на айфоне мало какие сайты остаются юзабельными. Клик по ссылкам превращается в русскую рулетку, да и тексты хрен прочитаешь.
Павел З
Прекрасная дискуссия. Не просто какие то Web Design BSc, тут целые PhD собрались 🙂
Замечу только, что негоже в статусе PhD толстоту разводить в комментах.
Павел З, во-первых, пфффф, а во-вторых, учёный должен быть хоть немного троллем! )
гыыыыы. Линеечки 🙂 Вот она русская смекалка — и способность все на глаз мерять.
А можно просто открыть доку по viewport на самом apple и все понять.
Ну и как бы сама физика (сами пиксели), которые указываются на коробке и в интернет-магазинах, говорят сами за себя.
причем у самого в комментах на странице написано:
no viewport:
iPad 2 :: 980 x 980
HTC Desire S :: 800 x 800
…..
width=device-width, initial-scale=1.0
iPad 2 :: 1024 x 768
HTC Desire S :: 320 x 533
Это наде же так облажаться то руководителю 🙂 Взять и своим же МОЩНЫМ комментом себя же и опровергнуть. Я даже не знаю зачем я доставал айпэд 🙂
Павел З
kosyag, вот именно, что «пффф»
Сказано же, что респонсива не сделано. И что тут сраться про то, как вьюпорты работают.
martin, страница в браузере отображается в оригинальных размерах устройств только когда указываешь «width=device-width, initial-scale=1.0». Именно тогда:
iPad 2 :: 1024 x 768
HTC Desire S :: 320 x 533
А когда ты его не указываешь, то:
iPad 2 :: 980 x 980
HTC Desire S :: 800 x 800
(здесь первая цифра — ширина экрана в лэнскейпной ориентации, а вторая — в портретной)
Большинство устройств без указания этого viewport’а дают статичную ширину 980px. Старенький HTC дал 800px, так как там android 2.3.
Это я уже в третий раз объясняю в этой ветке. Неужели до сих пор не смог въехать? Или это особенно тупой троллинг?
Дык нахуй зум то путать с пикселями? Я вот тоже щас на обычном компе зажал ctrl и накрутил колесо. И твоя страничка мне показала:
WIDTH: 8533
HEIGHT: 4430
И чо у меня монитор теперь такого разрешения?
Надо же понимать, что если хочешь сделать и под айпад красиво, то надо верстать под оригинальные размеры в пикселях, а на то и дан тебе вьюпорт. Аминь
Может структурно и простой, но я немало крови на нём потерял.
Например, при загрузке картинки в заголовке страницы техники ( самая верхняя картинка, за заголовком) нужно было дать ей верный оттенок. В Фотошопе это типичный gradient map. Я пытался и svg фильтром добиться нужного результата и экспериментальное css свойство «filter» пробовал. В итоге решение нашлось на стороне сервера — imagemagick преобразование. Я даже гист записал —
А левая колонка это вообще flexbox — тут идеальный пример использования с честным fallback’ом.
Так что дьявол, как обычно, в деталях.
Ну есть стандартные решения. А есть нестандартные. Этот сайт стандартная сайт визитка в стиле Категория -запись и Страницы. Поэтому делать работу на фреймворке — только повышать себстоимость разработки и последующей доработки.
Любую мелочевку придется писать руками вместо того чтобы поставить плагин
Я использую шаблон сайта в начале разработки. За 10-20 минут у меня разворачивается сайт со страницами, новостями, настройками и прочим. Можно считать это аналогом CMS, но более гибим к будущим изменениям. За счет этого стоимость разработки не завышена по сравнению с CMS решениями, а гибкость и универсальность фрэймворка сохранена.
Мелочевка в ROR закрывается многообразием гемов, которые являются аналогами плагинов — тут сложности тоже нет — всё что угодно ими решается: от ролей пользователей до реализации всплывающего календарика для инпута.
Если действительно интересно, то я могу в личном разговоре рассказать и показать все удобства Ruby on Rails и сопутствующих инструментов для деплоя, например. Просто дислайки показывают, что на этом сайте не очень любят техническиее подробности в комментариях.
Страницы добавляются в админке, могут иметь древовидную структуру. Страница может быть просто текстовой страницей, как, например или , а может быть редиректором на другую страницу. Все SEO параметры так же как и на странице техники есть.
Есть отдельный раздел для главного меню — там можно добавить пункт и направить его на любую страницу.
Из настроек: название сайта, поля контактных данных, включая указание места на карте, email куда отправлять заявки, поле для вставки кода перед закрывающим body для метрики, аналитики и прочего.
Ну все равно хоть и гемы есть и готовые функции надо конкретно лезть в коды и прописывать в нужное место?
Я вот считаю что для данного вида сайтов лучше использовать WordPress как для разработчика так и для клиента. Интерфейс админки уже есть. и вполне себе удобен для заливки.
Да и денег на зарплату сотрудникам больше останется
Я хорошо знаю WordPress и несколько других PHP CMS и фрэймворков, но выбираю ROR, так как знаю, что с ним я сделаю работу быстрее, удобнее и экономичнее. Временные затраты на то, что мне нужно будет написать чуть больше кода, чем в случае с WordPress, окупаются тем, что тут «встроена» куча удобных инструментов экономии времени, вроде системы деплоя, прекомпиляторов sass, coffescript и пр.
А главное, что при этом сохраняется абсолютная гибкость. Что бы клиент не придумал, нет особой сложности в расширении функционала в любом направлении. Захотел клиент добавить категорию к технике — пожалуйста: поле в БД и строчек 20 кода, скопированных с примера. Захотел добавить еще пару категорий, численных характеристик и сделать фильтр для отбора техники — никаких проблем. В некоторых CMS это привело бы к выпиливанию техники из стандартных объектов CMS и написанию отдельного большого модуля.
Для клиента готова инфраструктура размещения ROR-сайтов, а, лично мне, намного проще посоветовать другого рельс-разработчика, если клиент захочет уйти от нас, чем найти PHP-разработчика или команду, чтобы и нужную cms’ку знали и хорошо работу делали. Повторюсь — это лично моя практика: я за время работы уже несколькими ROR проектами менялся с ребятами, а один Joomla сайт не мог никому передать больше года и, в итоге, его забросили.
ROR не панацея и не религия, а просто инструмент, которым мне пользоваться удобнее и практичнее чем любым другим инструментом создания сайтов — я пришел из PHP уставшим и разочарованным в web-разработке, а с рельсами мне пока не на что жаловаться.
Вместо того чтоб дрочить, иногда полезно попробовать и с бабами.
Это я к тому что, просто потрать вечер, поинтересуйся технологией, там действительно все просто, даже удивишься на сколько. Описал модель — получил админку и в бой. Я бы например тоже писал бы на рубях, еслиб мне синтаксис нравился, а так я за пайтон с джанго.
1. Ожидал responsive, но нет, а компоновка дизайна какбэ намекает. ):
2. Блоки иногда дрожат
1. С полностью адаптивным дизайном как-то не везёт. В данном случае клиент отказался переплачивать так как «я знаю своего клиента и мой клиент через телефончики заходить на сайт не будет». А вообще стараемся вписывать сайт в 960px, чтобы на мобильных, хотя бы, гармонично смотрелся и горизонтальный скролл не появлялся.
2. Бывает, но только при изменении окна экрана и то, тут же на свои места встаёт.
Про адаптив: странно очень, на сайте активно используются компоненты Bootstrap 3, но совсем нет grid classes (.row и .col-*-*). Хотя корневое отличие от Bootstrap 2 это ахуенный responsive grid system. И если использовать это при старте — накладные расходы минимальны.
Тут не bootstrap в полном смысле этого слова. Я расковырял его и вытащил все базовые стили, а все прибамбасы, вроде грида, кнопок, разновидностей таблиц и т.п. убрал. Эдакий расширенный normalize получился. Вот
Тогда используйте хотя бы в 740px, чтобы айпэд в портретной ориентации захватить. С мобилок не заходят, а планшеты наверняка есть.
iPad в портретной — тоже 980px
Это с каких таких пор айпэд по стал 980 в портретке?
*портретный
Всю жизнь он был 980 и в портретке и лэндскейпе. И iPhone тоже. И Android’ов большинство, тех кто старше 3-ей версии, (2йка — 960). Родные значения высоты и ширины он берёт только если указываешь meta viewport с width=device-width. А когда не указано, то 980px при любом повороте.
Купи себе айпэд 🙂
Или +1 руководители не могут позволить себе айпэд?
Несомненно, я ожидал, что найдётся один уникум, который начнет нести херню даже после того, как я выложил ссылку на сравнительную таблицу вьюпортов, но чтобы так много…
Хотя чего ожидать, когда наглый фрилансер в одиночку делает всю техническую часть разработки сайтов лучше, чем 90% всех игроков web-рынка Красноярска.
Включайте мозг, доставайте свои айпадики, нексусы и прочий зоопарк и слушайте урок, мои дражайшие минусовщики. Вот вам линеечка для измерения экрана . Если нажать правой кнопочкой и выбрать просмотр исходного кода страницы, то самые сообразительные из вас увидят, что «» закомментирована. То есть эта страница показывается на мобилках именно так, как показывается любая страничка в интернете, если ей не указать специального поведения. А теперь откройте эту страницу на мобильном устройстве и начинайте поворачивать его и внимательно наблюдать за цифрами. Катастрофически большая часть из вас увидит цифру 980px для ширины или больше. iPad’ы и iPhone’ы точно покажут 980. Меньше этой цифры покажут только устройства на Android версии меньше третьей или редкие исключения — там и 960 и 800 можно встретить без вопросов.
А где же ваши любимые циферки, спросите вы? Те, которые вы читали, выкладывая свои кровные за свеженькие устройства? А вот вам ссылочка ещё — — тут строчка meta viewport вполне активна и вы уже можете увидеть всё то многообразие размеров, которое вам хочется.
+1 руководители могут позволить себе мозг.
наглый фрилансер это Ромка Вагнер?
Да ладно тебе глотку рвать:). Всем известно что сам себя не похвалишь никто не похвалит. Пусть ты хоть один сайт под ключ сделал и организовал заполнение.
Dymio, зарплату кокаином выдали?
Вы про разное говорите, походу ) На 980 в портретке на айфоне мало какие сайты остаются юзабельными. Клик по ссылкам превращается в русскую рулетку, да и тексты хрен прочитаешь.
Прекрасная дискуссия. Не просто какие то Web Design BSc, тут целые PhD собрались 🙂
Замечу только, что негоже в статусе PhD толстоту разводить в комментах.
Павел З, во-первых, пфффф, а во-вторых, учёный должен быть хоть немного троллем! )
гыыыыы. Линеечки 🙂 Вот она русская смекалка — и способность все на глаз мерять.
А можно просто открыть доку по viewport на самом apple и все понять.
Ну и как бы сама физика (сами пиксели), которые указываются на коробке и в интернет-магазинах, говорят сами за себя.
причем у самого в комментах на странице написано:
no viewport:
iPad 2 :: 980 x 980
HTC Desire S :: 800 x 800
…..
width=device-width, initial-scale=1.0
iPad 2 :: 1024 x 768
HTC Desire S :: 320 x 533
Это наде же так облажаться то руководителю 🙂 Взять и своим же МОЩНЫМ комментом себя же и опровергнуть. Я даже не знаю зачем я доставал айпэд 🙂
kosyag, вот именно, что «пффф»
Сказано же, что респонсива не сделано. И что тут сраться про то, как вьюпорты работают.
martin, страница в браузере отображается в оригинальных размерах устройств только когда указываешь «width=device-width, initial-scale=1.0». Именно тогда:
iPad 2 :: 1024 x 768
HTC Desire S :: 320 x 533
А когда ты его не указываешь, то:
iPad 2 :: 980 x 980
HTC Desire S :: 800 x 800
(здесь первая цифра — ширина экрана в лэнскейпной ориентации, а вторая — в портретной)
Большинство устройств без указания этого viewport’а дают статичную ширину 980px. Старенький HTC дал 800px, так как там android 2.3.
Это я уже в третий раз объясняю в этой ветке. Неужели до сих пор не смог въехать? Или это особенно тупой троллинг?
Дык нахуй зум то путать с пикселями? Я вот тоже щас на обычном компе зажал ctrl и накрутил колесо. И твоя страничка мне показала:
WIDTH: 8533
HEIGHT: 4430
И чо у меня монитор теперь такого разрешения?
Надо же понимать, что если хочешь сделать и под айпад красиво, то надо верстать под оригинальные размеры в пикселях, а на то и дан тебе вьюпорт. Аминь
На чем сайт так быстро летает?
Тот самый «медленный» Ruby on Rails. 🙂
А если серьёзно, то тут решает то, что сервер находится в Красноярском пиринге. Мы у itcom.info хостимся.
Да пиринг то тут не причем, сайт сам по себе не плохо генерит. Просто он простой 🙂
Может структурно и простой, но я немало крови на нём потерял.
Например, при загрузке картинки в заголовке страницы техники ( самая верхняя картинка, за заголовком) нужно было дать ей верный оттенок. В Фотошопе это типичный gradient map. Я пытался и svg фильтром добиться нужного результата и экспериментальное css свойство «filter» пробовал. В итоге решение нашлось на стороне сервера — imagemagick преобразование. Я даже гист записал —
А левая колонка это вообще flexbox — тут идеальный пример использования с честным fallback’ом.
Так что дьявол, как обычно, в деталях.
«Месье знает толк в извращениях»(с)
В форме заказа поле для дополнительных пожеланий забыли )
Великий русский бизнес — сдавать в аренду…
п.с. сайт клевый.
А какой высший смысл было делать данный проект на ROR ?
Как там с точки зрения себестоимости и удобства управления и заполнением и админкой? Можешь скрины админки показать?
А почему ты считаешь, что нужен высший смысл, чтобы делать сайты на ROR?
Скрины админки немного позже выложу.
Ну есть стандартные решения. А есть нестандартные. Этот сайт стандартная сайт визитка в стиле Категория -запись и Страницы. Поэтому делать работу на фреймворке — только повышать себстоимость разработки и последующей доработки.
Любую мелочевку придется писать руками вместо того чтобы поставить плагин
Я использую шаблон сайта в начале разработки. За 10-20 минут у меня разворачивается сайт со страницами, новостями, настройками и прочим. Можно считать это аналогом CMS, но более гибим к будущим изменениям. За счет этого стоимость разработки не завышена по сравнению с CMS решениями, а гибкость и универсальность фрэймворка сохранена.
Мелочевка в ROR закрывается многообразием гемов, которые являются аналогами плагинов — тут сложности тоже нет — всё что угодно ими решается: от ролей пользователей до реализации всплывающего календарика для инпута.
Если действительно интересно, то я могу в личном разговоре рассказать и показать все удобства Ruby on Rails и сопутствующих инструментов для деплоя, например. Просто дислайки показывают, что на этом сайте не очень любят техническиее подробности в комментариях.
Чётким пацанам насрать на дислайки.
Скринкаст запили по руби. Я лайков наставлю 🙂
Мне не переплюнуть.
Это список техники в админке.
А почему «порядок» не сделать drag&drop’ом ?
Просто не успел его прикрутить. )
Это редактирование единицы техники.
Как добавляются новые разделы и страницы? Какие настройки доступны пользователю?
Страницы добавляются в админке, могут иметь древовидную структуру. Страница может быть просто текстовой страницей, как, например или , а может быть редиректором на другую страницу. Все SEO параметры так же как и на странице техники есть.
Есть отдельный раздел для главного меню — там можно добавить пункт и направить его на любую страницу.
Из настроек: название сайта, поля контактных данных, включая указание места на карте, email куда отправлять заявки, поле для вставки кода перед закрывающим body для метрики, аналитики и прочего.
Ну все равно хоть и гемы есть и готовые функции надо конкретно лезть в коды и прописывать в нужное место?
Я вот считаю что для данного вида сайтов лучше использовать WordPress как для разработчика так и для клиента. Интерфейс админки уже есть. и вполне себе удобен для заливки.
Да и денег на зарплату сотрудникам больше останется
Я хорошо знаю WordPress и несколько других PHP CMS и фрэймворков, но выбираю ROR, так как знаю, что с ним я сделаю работу быстрее, удобнее и экономичнее. Временные затраты на то, что мне нужно будет написать чуть больше кода, чем в случае с WordPress, окупаются тем, что тут «встроена» куча удобных инструментов экономии времени, вроде системы деплоя, прекомпиляторов sass, coffescript и пр.
А главное, что при этом сохраняется абсолютная гибкость. Что бы клиент не придумал, нет особой сложности в расширении функционала в любом направлении. Захотел клиент добавить категорию к технике — пожалуйста: поле в БД и строчек 20 кода, скопированных с примера. Захотел добавить еще пару категорий, численных характеристик и сделать фильтр для отбора техники — никаких проблем. В некоторых CMS это привело бы к выпиливанию техники из стандартных объектов CMS и написанию отдельного большого модуля.
Для клиента готова инфраструктура размещения ROR-сайтов, а, лично мне, намного проще посоветовать другого рельс-разработчика, если клиент захочет уйти от нас, чем найти PHP-разработчика или команду, чтобы и нужную cms’ку знали и хорошо работу делали. Повторюсь — это лично моя практика: я за время работы уже несколькими ROR проектами менялся с ребятами, а один Joomla сайт не мог никому передать больше года и, в итоге, его забросили.
ROR не панацея и не религия, а просто инструмент, которым мне пользоваться удобнее и практичнее чем любым другим инструментом создания сайтов — я пришел из PHP уставшим и разочарованным в web-разработке, а с рельсами мне пока не на что жаловаться.
Вместо того чтоб дрочить, иногда полезно попробовать и с бабами.
Это я к тому что, просто потрать вечер, поинтересуйся технологией, там действительно все просто, даже удивишься на сколько. Описал модель — получил админку и в бой. Я бы например тоже писал бы на рубях, еслиб мне синтаксис нравился, а так я за пайтон с джанго.
Дрочить еще надо уметь.. это вам не в какую то бабу тыкать