Посмотрите лендинг

[Sabay]

Привет всем!

Лендинг.

Гуглил, читал, особо много инфы о верстке лендинга я не нашел.

1.Со стороны семантики сверстано допустимо?

2.Старался блокам не давать фиксированную высоту??? Например где конкретный фон фотография высотой 600px, надо задавать высоту? Не совсем я понимаю по высоте? Буду рад подсказке).

3.В шаблоне есть фото? Как определить относятся они к контенту или можно сделать из bg? Сделал два варианта, закомментировал, гляньте?

4.Так можно делать спрайты?

Пойду 6  на курсы интенсива в HTML academy, вот, дают такие шаблоны верстать, отвратительно нарисованные в фотошопе, по моему.

Как всегда всем критикам огромное благодарю.

Лендинг первый раз верстал.

 

http://sportclabchel.ru/MARBLE/marble.html

Edited October 18, 2014 by Sabay

[cyklop77]

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

[Sabay]

Дан нет задания есть просто шаблон, молча дали. Приму к сведению, переделаю, а еще?

[Sergik+]

По мне так этот шаблон 100% адаптивный.

[dkudrin]

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

У меня тут есть пример другого лендинга http://xn—--8kcob6ahclng5b8hpc.xn--p1ai/ (там кириллица в названии просто, заходите не бойтесь, сайт про газовые котлы). Кода - как мне на первый взгляд кажется - очень много, яваскрипт один чего стоит. Хотя не профессионал. Ребята которые его сделали предлагают такие сайты вместе с дизайном (!) за 1-2 дня за 3-5тыс рублей. Если они все это пишут руками - вам не кажется, что это очень быстро и дешево. Может используется конструктор, но вроде есть комментарии человеческие прямо в коде. Если есть тут профи - откликнитесь, интересно ваше мнение. Люди так не ценят свой труд или используется какой-то инструмент автоматизации??

[dkudrin]

К топик-стратеру, а можешь свой psd-макет приложить, тоже хочу попробовать сверстать. Я такой-же новичок как ты, хотя наверное еще более зеленый)

[Sabay]

Были и у меня такие мысли, но думаю рановато мне пока адаптивной версткой заниматься

[Sergik+]

Были и у меня такие мысли, но думаю рановато мне пока адаптивной версткой заниматься

Начинайте потихоньку, с бутстрапом думаю за пару вечерков разберетесь.

[Sabay]

Буду пробовать, спасибо

[swandev]

1. Вот это http://joxi.ru/WL21JJKkSJ3bAX  не ссылки, обычная статика, если нужны на иконки ховер эффекты, то достаточно просто поменять курсор, а не оборачивать в  <a>

2. Все фоны должны растягиваться (ну хотя бы до 1920px), если это картинка, то background-size: cover, если это pattern, то background-repeat: repeat;

для лендингов у меня вот такая разметка:

<header> //этот блок 100%, здесь у нас фон   <div class="container"></div> // этот блок общий для всех, центрируется и задается ширина контента, например 960px</header><div class="section">   <div class="container"></div></div>.........<footer>   <div class="container"></div></footer>

3. У лендингов как правило есть основной сайт, я бы логотип сделал ссылкой, даже если ее там не будет, то пусть будет # которая на начало страницы перебрасывает

[pangurban]

1. префикс b- это я так понимаю ты про бем начал читать? Если да, то ты взял из него самое не нужное) имхо

2. зачем амперсанд обернут в спан?

3. в спрайт не нужно закатывать фоны и изображения, являющиеся контентом

4. заголовки плохо расставлены http://cropme.ru/4d980666e3643b43e6d4f49cc7dc0737

Edited October 18, 2014 by pangurban

[Sabay]

1.Обернул в а, так как не понятно ссылки это или просто рисунок, а вот далее не понял что ты пишешь? если поменять курсор и не оборачивать в а, то ссылкой ведь не будет?

2.Бэкграунды на шаблоне шириной 1600px, нарезать и размножить их по ширине не получиться поскольку там структура не будет совпадать, я задал им max-width:1600px; почему должны растягиваться до хотябы 1920px, думаю это не совсем обязательно, ну будет этот шаблон на широком экране не 1920 а 1600 смотреться. Поясни?

3.Разметка в общем в принципе такая же.

Про лого думал, переделаю

))))) нет еще не читал, теперь прочту) это block-footer_wr, например, сократил

[dkudrin]

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

У меня тут есть пример другого лендинга http://xn—--8kcob6ahclng5b8hpc.xn--p1ai/ (там кириллица в названии просто, заходите не бойтесь, сайт про газовые котлы). Кода - как мне на первый взгляд кажется - очень много, яваскрипт один чего стоит. Хотя не профессионал. Ребята которые его сделали предлагают такие сайты вместе с дизайном (!) за 1-2 дня за 3-5тыс рублей. Если они все это пишут руками - вам не кажется, что это очень быстро и дешево. Может используется конструктор, но вроде есть комментарии человеческие прямо в коде. Если есть тут профи - откликнитесь, интересно ваше мнение. Люди так не ценят свой труд или используется какой-то инструмент автоматизации??

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

[swandev]

1.Обернул в а, так как не понятно ссылки это или просто рисунок, а вот далее не понял что ты пишешь? если поменять курсор и не оборачивать в а, то ссылкой ведь не будет?

2.Бэкграунды на шаблоне шириной 1600px, нарезать и размножить их по ширине не получиться поскольку там структура не будет совпадать, я задал им max-width:1600px; почему должны растягиваться до хотябы 1920px, думаю это не совсем обязательно, ну будет этот шаблон на широком экране не 1920 а 1600 смотреться. Поясни?

3.Разметка в общем в принципе такая же.

Про лого думал, переделаю

))))) нет еще не читал, теперь прочту) это block-footer_wr, например, сократил

1. На лендингах в этом блоке пишут как правило какие-то преимущества, и это не ссылки.

2. Зачем нарезать? Центрируете фон и ставите ему background-size: cover, поверьте на широком экране лендинг круче смотрится когда фон на всю ширину, а в футере ничего подгонять не нужно, вырежите квадрат 200х200 и все

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

 

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

Вот тут их сотни http://land-book.com/   посмотрите как их верстают

Edited October 18, 2014 by ALEEX SWN

[Sabay]

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

3.Раньше так и делал. например <div class="content-wrap">  и этот див везде вставлял в разметку, но после критики одной из моих версток указали что много лишнего кода и можно непосредственно диву родителю устанавливать ширину.

Цвета вроде везде поставил где бэкграунды, пересмотрю

[swandev]

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

3.Раньше так и делал. например <div class="content-wrap">  и этот див везде вставлял в разметку, но после критики одной из моих версток указали что много лишнего кода и можно непосредственно диву родителю устанавливать ширину.

Цвета вроде везде поставил где бэкграунды, пересмотрю

1. Это обычный блок с небольшой информацией, визуально оформленный иконкой. Зачем там ссылка? Куда она должна вести? Понимание думаю придёт с опытом

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

[Sabay]

Верстал макет 1день, но не в плотную, что то делал еще, я думаю, что если со свежей головой за 5-6 часов сверстаю, но кто-то скажет это очень долго)))

Написать код для этого шаблона можно за 20-30 минут, он же в голове готов, переноси да и все, вот фотошоп много время отнимает.

Я скажу тебе так)))   Не смотри ты на этих людей кто говорит что один день два, 3-5 рублей и готово. Есть еще пример. Моему другу в Москве сделали похожий лендинг за две недели, уровень шаблона да и верстки примерно одинаков, но там еще цмс была какая то самодельная, ну четко работала, все вместе 40 000 р. Просто верстай и не кого не слушай, всем есть место на этой планете.

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

Вообще тему во флейм, но по моему что то похожее там уже есть.

Как выложить сюда шаблон в псд я не знаю, подскажи

подскажи точнее как бы ты сделал заголовки? <h1>,<h2>,<h3>,<h4>,<h5>??

Edited October 18, 2014 by Sabay

[dkudrin]

Как выложить сюда шаблон в псд я не знаю, подскажи

 

Ок, спасибо, за ответ!  Прикрепить psd как я понимаю можно через кнопочку "Мои файлы" прямо в форме ответа. Но я уже другой шаблон скачал и верстаю))

[Sabay]

ALEEX SWN поделился юзай, хороший сайт http://land-book.com