Вёрстка для 2.3

[hiop]

дизайн практически отрисован. поэтому представляю варианты. что-то изменится, однако 95% останется как на картинках. дизайн этот адаптивный, то есть будет несколько версий. представляю для ознакомления главную страницу и карточку.

 

 

 

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

[sitecreator]

представляю для ознакомления главную страницу и карточку.

 

отчего только в одном разрешении?

Покажите варианты главной для 4...5 разрешений как полагается.

 

Или адаптивность нужно придумывать уже верстальщику?

Я, конечно, и так тоже умею.  Но работы добавляется много.

 

Сделать можно. Дорого. У вас 5 -колоночный вариант расположения товаров на главной.  Значит сетки бутстрапа не будет.

На главной наблюдается достаточное количество нестандартных моментов.

 

думаю, что вам нужен магазин под ключ, а не просто верстка. нарисованный функционал ведь нужно будет реализовывать?

 

Верстку делаю любую.  На выходе получаете готовый шаблон магазина = готовый магазин. И никаких промежуточных HTML. только готовый продукт.

 

от 30 000 р. вероятнее всего. может быть и все 50 000 выйдет, учитывая функционал. А может быть и еще дороже. тут ТЗ видеть нужно.

[localhost]

 Значит сетки бутстрапа не будет.

 

...все возможно... :oops:  вот fix на 5 колонок... может пригодится....

 

CSS

.col15-md-3, .col15-sm-6 {position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;}
@media (min-width: 768px) {
.col15-sm-6 {float: left;}
.col15-sm-6 {width: 50%;}
}
@media (min-width: 992px) {
.col15-md-3 {float: left;}
.col15-md-3 {width: 20%;}
}

HTML

<!-- 5col -->
<div class="container">
<div class="row">
<div class="col15-md-3 col-sm-6">1</div>
<div class="col15-md-3 col-sm-6">2</div>
<div class="col15-md-3 col-sm-6">3</div>
<div class="col15-md-3 col-sm-6">4</div>
<div class="col15-md-3 col-sm-6">5</div>
<div class="col15-md-3 col-sm-6">1</div>
<div class="col15-md-3 col-sm-6">2</div>
<div class="col15-md-3 col-sm-6">3</div>
<div class="col15-md-3 col-sm-6">4</div>
<div class="col15-md-3 col-sm-6">5</div>
</div>
</div>
<!-- 5col -->

пример

Змінено 15 жовтня 2016 користувачем localhost

[hiop]

отчего только в одном разрешении?

Покажите варианты главной для 4...5 разрешений как полагается.

 

Или адаптивность нужно придумывать уже верстальщику?

Я, конечно, и так тоже умею.  Но работы добавляется много.

 

Сделать можно. Дорого. У вас 5 -колоночный вариант расположения товаров на главной.  Значит сетки бутстрапа не будет.

На главной наблюдается достаточное количество нестандартных моментов.

 

думаю, что вам нужен магазин под ключ, а не просто верстка. нарисованный функционал ведь нужно будет реализовывать?

 

Верстку делаю любую.  На выходе получаете готовый шаблон магазина = готовый магазин. И никаких промежуточных HTML. только готовый продукт.

 

от 30 000 р. вероятнее всего. может быть и все 50 000 выйдет, учитывая функционал. А может быть и еще дороже. тут ТЗ видеть нужно.

 

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

 

в других вариантах адаптивности колонок конечно меньше будет.

 

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

 

тз по дизайну и функционалу находится тут https://docs.google.com/document/d/1R7PwbI1_Z2kLagj_OX9ZTcYmisar2hYowjmNbYHrnbg/

[hiop]

актуально. вот и адаптивные версии дизайна подоспели https://drive.google.com/drive/folders/0B3NdytRoa9WdaHlkdjlnaHE3QXM

[sitecreator]

вот и адаптивные версии дизайна подоспели

 

возникает вопрос:  а на какую сетку вы ориентировались в разработке этих макетов?

 

что за разрешения у вас такие вроде 1920?  Это же ни в одной адаптивное сетке не используется.

В случае бутстрапа есть точка перехода в 1200 пкс.  в случае большего экрана сайт будет отображаться точно так же как в случае ширины 1200 пкс.

 

и почему у вас макет для 1200 (вверху) имеет такую же ширину, что и макет для 1920 (внизу)?

 

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

 

вот данные по бутстрапу:

 

 

 

 

 

данные по вашей сетке есть? Вы же понимаете, что "от балды " сетку нельзя рисовать. Точнее, рисовать то можно, что угодно, вот только насколько это гармонично будет потом выглядеть на устройствах....

 

 

 

 

 

 

 

 

 

 

 

 

 

Ниже фрагмент вашего макета для 900 пкс. Почему 900? к какой сетке это привязано?

Сам макет у вас намного шире чем 900.

 

Многие элементы на макете далеко за пределами ширины в 900 пкс.  Можете пояснить, что это тогда за макет?

 

 

 

 

Я отметил область, стандартной ширины для бутстрап в 992пкс.  И нанес ее на ваш макет для 900 пкс. Можете пояснить как ваш макет соотносится с сеткой бутстрап?

 

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

 

 

[sitecreator]

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

картинки есть, а где ТЗ по функционалу?

 

У вас, например, корзина на макете одновременно и сверху и снизу есть.  А где описание данного нестандартного функционала?

[hiop]

https://yadi.sk/i/ZJYYsz2Vx2uCV

[sitecreator]

И что должна пояснить эта картинка?

Сами параметры сетки будут как здесь?:

 

 

 

я вижу ширину блока в 296 пкс.  5 блоков: 5 * 296 = 1480

 

и что это за сетка?

 

пожалуйста, дайте таблицу для разных разрешений.

 

у вас уникальная своя сетка будет?

 

 

[hiop]

я в этом не очень-то разбираюсь. не могу ответить на эти вопросы

[sitecreator]

я в этом не очень-то разбираюсь. не могу ответить на эти вопросы

 

переадресуйте дизайнеру.

до момента отрисовывания дизайн-макетов рисуется (или держится в голове) адаптивная сетка.

потом делается дизайн, но не наоборот.

 

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

 

Если такой таблицы нет, то это лишний геморрой для верстальщика. Поскольку многие моменты не были продуманы, то возможны всякие накладки.

Сделать можно, с определенными отступлениями и оговорками.

 

Ваш дизайнер ведь может читать наш форум? Пусть ответит тогда на заданные вопросы здесь.

Змінено 20 жовтня 2016 користувачем sitecreator

[hiop]

дизайнер ответил

 

да 5 блоков: 5 * 296 = 1480

 

вот для примера похожее решение на битриксе http://v2.dw-deluxe.ru/

[hiop]

обычная сетка колоночная https://yadi.sk/i/_o-odJsMxGDeV с уменьшением разрешения уменьшается кол-во колонок https://yadi.sk/i/kD7zOUXZxGDiZ + к этому сами колонки могут быть резиновыми и тянутся по ширине на некоторых маленьких разрешениях пример на том же сайте примере пусть посмотрит https://yadi.sk/i/nGKaV3BAxGECe

[HyperLabTeam]

обычная сетка колоночная https://yadi.sk/i/_o-odJsMxGDeV с уменьшением разрешения уменьшается кол-во колонок https://yadi.sk/i/kD7zOUXZxGDiZ + к этому сами колонки могут быть резиновыми и тянутся по ширине на некоторых маленьких разрешениях пример на том же сайте примере пусть посмотрит https://yadi.sk/i/nGKaV3BAxGECe

пишите сайткриэтеру в ЛС и там обсуждайте.

Он своё дело знает.

а то ша все свои наработки оплаченные дизайнеру раздадите нам))

[pantagruel964]

Да какая разница сколько колонок, что вообще за моду взяли к бутстрапу привязываться. Если бюджет позволяет, лучше вообще про него забыть. Как, кстати, с бюджетом? Я б тыщ за 100 +/- заверстал

[HyperLabTeam]

Да какая разница сколько колонок, что вообще за моду взяли к бутстрапу привязываться. Если бюджет позволяет, лучше вообще про него забыть. Как, кстати, с бюджетом? Я б тыщ за 100 +/- заверстал

че так много то?

я за 99 999р99к +\- сверстаю.

 

Змінено 20 жовтня 2016 користувачем AWARO

[hiop]

Да какая разница сколько колонок, что вообще за моду взяли к бутстрапу привязываться. Если бюджет позволяет, лучше вообще про него забыть. Как, кстати, с бюджетом? Я б тыщ за 100 +/- заверстал

о бюджете только в личке) ну 100к это слишком конечно ) 

[sitecreator]

Да какая разница сколько колонок, что вообще за моду взяли к бутстрапу привязываться. Если бюджет позволяет, лучше вообще про него забыть.

 

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

 

все упирается в бюджет!

хотите недорого и некрасиво - тогда бутстрап.

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

 

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

[sitecreator]

ну 100к это слишком конечно )

 

за верстку, возможно.  Но за воплощение с нестандартным функционалом, коего у вас достаточно - это даже скромно.

В итоге ведь вам нужен готовый магазин, не так ли?

 

и никакой промежуточной верстки в html, натяжки и прочих этапов не будет. Результат сразу в виде готового шаблона, что равно демонстрации готового магазина. Я работаю именно так.

[sitecreator]

да 5 блоков: 5 * 296 = 1480 вот для примера похожее решение на битриксе http://v2.dw-deluxe.ru/

 

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

 

 

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

 

@media all and (max-width: 1920px)

@media all and (max-width: 1600px)

@media all and (max-width: 1500px)

@media all and (max-width: 1400px)

@media all and (max-width: 1366px)

@media all and (max-width: 1300px)

@media all and (max-width: 1280px)

@media all and (max-width: 1200px)

@media all and (max-width: 1100px)

@media all and (max-width: 1100px) and (min-width: 900px)

@media all and (max-width: 1024px)

@media all and (max-width: 850px)

@media all and (max-width: 800px)

@media all and (max-width: 700px)

@media all and (max-width: 660px)

@media all and (max-width: 500px)

@media all and (max-width: 486px)

@media all and (max-width: 480px)

@media all and (max-width: 450px)

@media all and (max-width: 400px)

@media all and (max-width: 360px)

@media all and (max-width: 300px)

 

 

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

 

 

У вас же сетка имеет не 4 точки перехода, а намного больше, пусть будет 18 если убрать промежуточные.  даже если 10 - это уже очень много, т. к. сложность возрастает не в линейной пропорции по сравнению с увеличением количества переходных точек.  И стоимость возрастает нелинейно.

 

т. е. значительное удорожание.  изменили кол-во переходных точек с 4-х до 6-ти, то считайте, что стоимость верстки увеличилась вдвое.  и так далее

 

 

так что суммы назвали вполне вам реальные.  конечно если для вас важно качество готового результата.

[HyperLabTeam]

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

[sitecreator]

обычная сетка колоночная https://yadi.sk/i/_o-odJsMxGDeV с уменьшением разрешения уменьшается кол-во колонок https://yadi.sk/i/kD7zOUXZxGDiZ + к этому сами колонки могут быть резиновыми и тянутся по ширине на некоторых маленьких разрешениях

 

вы мне пытаетесь показать очевидные вещи. вопрос был не в этом.

сетки не бывает "обычной".

 

есть стандартные сетки, такие как бутстрап, "960 Grid System" и т. д.

 

Если вы делаете бюджетный сайт, то и дизайн должен подстраиваться под стандартные сетки.

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

 

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

 

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

 

обычная сетка колоночная

 

пишите ее параметры в виде таблицы.  Пример приводил выше.

Или не пишите, можете отдать этот момент на усмотрение верстальщика.

 

----------

у вас вообще масса непонятных моментов.

 

 

 

 

 

Куда делся четвертый товар (категория) при изменении ширины?  Его просто не показываем и все?

Как должен работать поиск когда нет поля для ввода?  Наверняка что-то должно произойти благодаря JS/jQuery и это поле появится? В каком месте? Это все на откуп и фантазию верстальщика/программиста отдается?

 

Как должен выглядеть каталог товаров? Понятно, что он выпадающий. а как выглядит при раскрытии?  У вас нет его в макетах для больших разрешений.

 

возможно, что должен выглядеть как на макете для 320 пикс

 

 

вот только непонятно что произойдет когда нажмем на символ лупы (поиск)?  где появится поле для ввода? в каком месте?

[HyperLabTeam]

@sitecreator,
переходи в лс
а то ша налетят клоуны за два рубля и ТС поведётся
потом вернётся со сморшенным бюджетом и будет просить залечить раны подорожником сидя в песках сахары

[sitecreator]

да норм тема бутстрап, чего вы налетели на него то?

когда бюджет скромный, то самое то.

стандартно, простенько, а потому не шибко дорого.

и что мешало сделать дизайн, опираясь на стандартные 12 колонок?

Когда хочется Юлмарта и есть на это средства, то можно рисовать что угодно и без оглядки на стандартные сетки

Реализую ваши нестандартные дизайн-макеты. Но не забывайте про стоимость.

[hiop]

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

 

пункт меню не просто пропадает конечно, а прячется в раскрывающемся меню.

 

выпадающие пункты меню да очевидно должны выглядеть как для версии 320

 

поле поиска появится на всей строке где лупа, либо откроется новая строка под лупой. 

 

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