Бизнесовый макет из 2009 года

[advokatua]

Увидел макет, скачал, заценил уровень криворукости и полнейшей пофиговости того кто его рисовал, и решил провести пару дней садо-мазо над собой.

 

Какой плюс может дать верстка ужасного и кривого макета? Как мне кажется - опыт работы с криворукими дизами и закалка мозга от неожиданного батхерта. Если все время верстать хорошие макеты, где каждый слой лежит в своей папочке, и каждая такая папочка еще и раскрашена, где все сделано по сеточке пиксель в пиксель, где нету одинаковых абзацев текста, у которых разные отступы интерлиньяжы и тому подобное, где 2 подряд идущих абзаца не имеют разных отступов со любых сторон, где почти все значения целые или хотя бы четные, а не что-то типа 173, 169, 19.5, в таком случае это похоже на шоколадную жизнь. А такого, как мы знаем, не бывает.   

 

Верстка полностью фиксированная под ие8+, но и на ие7 все довольно не плохо. Также пытался сохранить все извращения диза, потому в коде полным полно сдвигов с садо-мазо числами. То что на глаз кажется одинаковым, например черточка нижнего подчеркивания одинаково отступает у заголовков, на самом же деле там разброс в 1-3 пикселя. Если все прижимается к левой стороне, все равно находится блок, который вылазит на 3-4 пикселя за границы. В общем весело было. 

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

 

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

 

картинка макета - http://webdevelop.zz.mu/business-1/business-1.jpg

сайт - http://webdevelop.zz.mu/business-1/

Edited November 2, 2013 by advokatua

[Zverushka]

<nav class="main-nav">
<a href="#" class="main-nav-item">Home</a>
В общем не нужен класс для ссылки внутри, итак понятно, что любой тег будет иметь это же оформление, что и .main-nav-item
.main-nav a {} без лишних классов.
И честно говоря непонятно, зачем задавать относительные размеры шрифтов. Это раньше при фиксированном размере шрифта пользователь не мог увеличить шрифт в настройках браузера, сейчас браузер увеличивает все пропорционально, любую страницу, не зависимо, что в параметрах шрифта указано. А вот если в каком-то браузере стоит шрифт большой, то вся верстка может поехать при большом шрифте.

<article class="article">					<h1><span>Veroeros</span> sed dolor</h1>					<div class="underline"> </div>					<section class="article-text">						<div class="article-photo">							<img src="i/article/china-1.jpg"  alt="chinesez-1">						</div>						<p><strong>Fusce nec eros augue</strong> hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed consequat.</p>						<p>Sed fermentum dui in bibendum tempus, est orci iaculis dolor vel gravida varius, dui est <a href="#">tincidunt augue vel</a> facilisis mauris turpis ac mauris. Etiam elementum odio ac erat convallis sit <a href="#">amet porttitor libero</a> sed vestibulum.</p>					</section>				</article>

Какой секшин для текста внутри артикл, что это. Так бывает, но не в этом же случае и не для текста статьи.

<div class="underline sub"> </div>					<h3><time pubdate="2009-09-15">09.15.2009</time><a href="">Tempor dolor aliquet vel donec</a></h3>					<h3><time pubdate="2009-09-12">09.12.2009</time><a href="">Odio magna suscipit bibendum eget</a></h3>					<h3><time pubdate="2009-09-09">09.09.2009</time><a href="">Nulla sed dolor nibh aenean lorem</a></h3>					<h3><time pubdate="2009-09-05">09.05.2009</time><a href="">Tellus fermentum imperdiet sed</a></h3>					<h3><time pubdate="2009-09-02">09.02.2009</time><a href="">Justo maecenas erat neque iaculis</a></h3>					<h3><time pubdate="2009-09-30">09.30.2009</time><a href="">Euismod sit amet cursus et ante </a></h3>

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

 

<h2><span>Blandit</span> lorem et dolor</h2>   <div class="underline sub"> </div>

Элемент оформления в разметке - удалить и сделать через css.

 

<label for="search-input"> Такого id Нету, поэтому и не работает, как я вижу. Да и в чем смысл - я нажму на надпись search и курсор перескочит, зачем.

Многие картинки обернуты в слой, а зачем. Сделать их block и задать им разметку, зачем плодить лишние обертки. Также картинкам необходимо ограничить размеры через css, вдруг вставят огромную и что будет?

Edited November 3, 2013 by Zverushka

[advokatua]

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

Это уже обговаривалось как-то. Западенских книг начитался + сайтов насмотрелся. Минуса тут точно никакого не вижу, возможно для некоторых покажется, что меньше кода = лучше, но с таким же успехом можно тогда и в других местах отказаться от классов, а в CSS городить каскадирование что-то типа .article-list > li > ul > li  или похожее. Для меня это больше привычка.

 

И честно говоря непонятно, зачем задавать относительные размеры шрифтов

Это где? В body? В body это стандартный мув сходу ставить 100%. А в остальном я везде в px задавал, насколько помню. (Проверил, ничего не едет, т.к. все переопределено.) 

 

 

Какой секшин для текста внутри артикл, что это. Так бывает, но не в этом же случае и не для текста статьи.

А то и не статья, а хрен пойми что с заголовком, я латынью не владею. ) В любом случае, это еще один мегахоливар, ничем не отличающийся от использования nav, или когда у нас есть типа article c 1-им заголовком и мы его оборачиваем в hgroup. 

 

 

Какой-то сомнительный ряд h3 заголовков. 

Так и есть. Это побольшей части к СЕО относится. Если это анонс новостей, то я хочу чтобы он имел определенный вес на странице, а не висел как какой-то никому не нужный набор ссылок на внутренние части сайта. Правда, по СЕО части давно ничего толкового не читал, может сейчас роботы уже и не обращают внимание на количество разного типа заголовков (сомневаюсь). Делая этот блок списком или дивами или ссылками мы не придаем этому блоку никакой важности, а это нехорошо (особенно если подобный блок действительно важный).

 

 

Элемент оформления в разметке - удалить и сделать через css.

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

 

 

<label for="search-input"> Такого id Нету, поэтому и не работает,

Косяк, да. Класс на id не сменил 

 

 

Многие картинки обернуты в слой, а зачем.

Клик по картинке и глянь класс class="article-photo" и отключи в дебаггере overflow:hidden.

Там все не так просто как кажется. Если вставят большую картинку, она обрежется. Собственно этот момент вообще решаться должен через CMS, потому в CSS  я больше ради собственного интереса лепил. 

Тут дизу опять большой превед.   

 

Спасибо!

Edited November 3, 2013 by advokatua

[Zverushka]

а в CSS городить каскадирование что-то типа .article-list > li

 
Да, именно так и писать, а что в списке еще может быть? li он и есть ли и не нужны ему подклассы.

 

Это где? В body? В body это стандартный мув сходу ставить 100%

 

Так удобнее задать же в пикселях сразу нужное значение для стандартного текста на странице и уже ничего не переопределять, им и пользоваться. Захочешь увеличить - в боди меняешь и везде меняется, удобно

А то и не статья, а хрен пойми что с заголовком, я латынью не владею. )

http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fwebdevelop.zz.mu%2Fbusiness-1%2F%3F%23

Видишь внутри статьи появился новый оутлайн документа - он же там не нужен. Значит в принципе неверно секшин использован

Этот элемент вверху и внизу страницы имеет разные отступы от заголовка (подкласс sub), потому пришлось лепить его отдельно.

Через всевдоэлемент залепить думаю в любом случае можно - задать ширину поменьше и бодер указать.

Клик по картинке и глянь класс class="article-photo" и отключи в дебаггере overflow:hidden.

Так это в каждом 2м дизайне встречается, наверное, там обычно большая картинка слинкована с обрезающим слоем - вобщем надо было в фотошопе обрезать и задать ограничения по размеру в css 

[advokatua]

 

Да, именно так и писать, а что в списке еще может быть? li он и есть ли и не нужны ему подклассы.

Почитай про проблемы каскадирования и длинных селекторов. По спеке вообще больше 3-ех вложенностей не рекомендуется. Элемент имеющий класс или id обрабатывается быстрее всего, т.к. не нужно тратить время на поиск вложенностей. Тут, как я понял, примерно та же проблема, что и в универсальном селекторе *

 

Так это в каждом 2м дизайне встречается, наверное, там обычно большая картинка слинкована с обрезающим слоем - В общем надо было в фотошопе обрезать и задать ограничения по размеру в css

Это да, но фотошопом неспортивно )

Edited November 3, 2013 by advokatua

[Zverushka]

Это да, но фотошопом неспортивно )

 

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

 

По селекторам.

Ха, я тащусь. Решила почитать на эту тему и наткнулась 

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=%23id&body=background%3A+%23CFD≠=1000

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class&body=background%3A+%23CFD≠=1000

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+div+div+div+div+div+a&body=background%3A+%23CFD≠=1000

У меня грузится одинакого).

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

Возможно это где-то на крупном и при этом специфическом проекте будет полезно... но и то как исключение...

http://frontender.info/writing-efficient-css-selectors/

Edited November 3, 2013 by Zverushka

[advokatua]

 

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

Я имел ввиду, что чисто для макета и тренировок мне интереснее было в CSS покопаться.

 

 

Про скорость обработки какая-то надуманная проблема) 

Я говорил не о скорости между id и class, а о скорости между id ИЛИ class и каким-нибудь .menu ul > li > ul > li a span

К тому же там какая-то фигня происходит. Он одно и тоже рендерит как за 1000ms, так и за 300ms и 200ms

 

Я разницы в скорости и при каком-нибудь таком селекторе не вижу: * { margin: 0; padding: 0; }

Но ведь это вовсе не значит, что стоит применять эти динозавровские методы, за которые сегодня можно и работу не получить, если на собеседовании скажешь, что-то типа:"Это все фигня, разницы нет и не было. Универсальный селектор форева."

 

10 лет назад у меня инет был 32 кбит/с, но это не значит, что раз сегодня 100Мбит, то значит можно и сайты такие делать будто и у каждого минимум сотка, минимум 4ГБ оперативной памяти и процессор минимум core I3.

Edited November 3, 2013 by advokatua

[Zverushka]

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

В общем подобная конструкция div div div div div div a > a div .x a ul li a у меня также как #id создается за 60 мс. Наверное в верстке сайтов надо еще стараться не остаться в прошлом, стараясь угодить всем и при этом применяя ненужные паттерны, которые уже не дают выигрыша, зато ухудшают читабельность кода.

Edited November 3, 2013 by Zverushka

[advokatua]

 

 

создается за 60 мс

там фигня какая-то с конструкциями в разделе create your own

Напиши свою конструкцию нажми пуск и затем правой кнопкой по любому созданному пункту - я что-то не увидел там тех тегов которые я налепил. 

Да и 60мс это ни о чем. Чтобы нормально протестировать надо поставить дабы оно считало секунд 20 не меньше. В JS та же фигня. Можно взять две сортировки до 200 строк и каждая сортировка будет считать почти одинаково. Затем ставишь 5000 строк и разница уже выплывает в несколько раз.

 

Согласен не согласен тут не имеет значения. Значение имеет только то, что есть тонна мест где инет очень хреновый и им лишние 100КБ на вес золота будут. Причем данная аудитория гораздо шире, чем даже те кто юзает древние ИЕ6-7.

 

И не надо далеко ходить. У меня есть живой пример. Примерно в 2008-2009 друзья в Киеве купили 3G модем, который типа до 2МБит должен был давать скорости. Интернета в общаге у нас тогда нормального не было, была только сетка. Так вот, эти 2Мбит были разве что только на бумаге и в рекламе этого провайдера. У меня диал-ап модем быстрее и стабильнее работал в 2003, чем эта фиговина за 40 баксов. Я еще никогда не видел более бесцельно использованных 40-ка баксов, чем эти. Полная печаль однако была.

Edited November 3, 2013 by advokatua

[Zverushka]

@advokatua, Ты знаешь, когда у меня был лимитный интернет (2,5 рубля мбайт) и очень хреновый инет, который еле закачивал 10 мегабайт в час - у меня картинки, флешки и прочее - все было отключено, чтобы минимизировать траффик.

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

Edited November 4, 2013 by Zverushka

[advokatua]

аналогично, только я сидел с телефона не за 2.5 рубля, а за 1.5 бакса за МБ ) Редко, но бывало.