Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема. О том и поговорим. Поскольку вопросы оптимизации ...
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т. е. должно это выглядеть вот так: Алеаединица, в первом приближении, ...
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек. 1) Читайте блоги специалистов в данной сфере. Хотя уже и не так ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Комментарии (87)
Что-то поздно как-то Вы заметили актуальность то, уважаемый автор.
Эту тему одним из первых (по кр. мере с 2001 года) ведет exs. cc — единственный разработчик не просто плав. сайтов, а генераторов плав. сайтов.
Это просто к слову об актуальности.
Справедливости ради должен заметить действительную тенденцию — рост популярности div, а не table верстки во всем мире начиная с середины 2006 года.
Так Дерзать !
Fyodor, я считаю, что для каждого актуальность проявляется в разное время, все зависит от опыта верстки. А до этого нужно «созреть», дорасти. Я верстаю с 2003-го года, а к дивам пришел только в конце 2006-го, когда верстка стала моим основным родом деятельности.
Поэтому актуальность темы я заметил не поздно, а своевременно. Конечно же, ИМХО.
Дмитрий, а теперь у вас какой основной вид деятельности?
Верстка, уже год как.
Коллег, мне кажется «уменьшение объемов кода в 2−3 раза», «снижение нагрузки на сервер»и т. п. — это все правильно в теории, но на практике — лабуда. Давайте разберемся. Есть у меня портал realto.ru. Вес заглавной страницы в коде — 136 Кб с контентом. Если выкинуть контент, то, примерно 70 Кб (это с учетом меню, всяких счетчиков и прочей служебной инфы). При этом, когда страница загружается, то передается до 800 Кб данных (картинки, файлы js-скриптов, css и прочее, что кешируется на клиенте и при повторной загрузке происходит передача порядка 250−300Кб).
Сокращаем исходный текст страницы в 2 раза за счет дивовой верстки и получаем 70/2 = 35 кб. При этом количество графики и контента осталось прежней. И клиент, зайдя страницу портала в первый раз не заметит особой разницы (да, на модемном соединении 35 Кб — это порядка 5 секунд, но я не думаю, что «модемники» — основные посетители сайтов :)). Все равно соотношения контент/код будет всегда с большиииим отрывом в сторону контента. Поэтому, да, код сокращается, но клиентам это абсолютно фиолетово.
Теперь давайте разберемся с «нагрузкой на сервер». Воспользуемся открытой статистикой и посмотрим на посещаемость сайта: за прошедшую полную неделю у нас было 375 429 просмотров. За один просмотр мы уменьшили передаваемых данных на 35 Кб. Значит, за неделю у нас сократился трафик 13 мегабайт с копейками. Значит, за день мы имее выигрыш чуть меньше 2 Мб. Мне кажется, эта цифра абсолютна несерьезная по нынешним меркам. Особенно, если учесть, что общий ежедневный исходящий трафик нашего сайта около 7 ГБ в сутки! Выигрыш составит 0.03%.
А теперь давайте о негативных сторонах. Первая и самая страшная — отсутствие кроссбраузерности. Все эти шаманские трюки во-первых, затрудняют разработку, а во-вторых, делают ее более дорогой — и специалист по див-верстке дороже стоит, и времени на одну и ту же страницу будет уходить больше. В итоге мы получаем чистый убыток :) Я уже не говорю о том, что переделать с таблиц на дивы — это тоже время, которое деньги.
Вобщем, увы и ах. На данный момент применять данную технологию в промышленных масштабах нерентабельно. Но это не значит, что надо забыть о ней и отказаться. Нет, развивать это направление нужно. Но не нужно слепо бросаться делать именно так :)
С наилучшими пожеланиями :)
Согласен, что снижение объема (с технической точки зрения) и прочего этого несерьезный аргумент в защиту семантической вертки, что переделывать существующие сайты на дивы тоже далеко не всегда оправдано, но чем оправдать сейчас верстку нового проекта на таблицах я не знаю, разве что только ленью верстальщика.
VolCh — отличный ответ! Особенно про порядки понравилось :). А про лень тоже прямо в точку. В этом случае лень не выступает в качестве двигателя прогресса, скорее наоборот.
хаки как раз в помощь. недавно перешел на безтабл верстку. Поначалу долго матерился ;) css штука мощная — но почему каждый бровзер ее понимает по своему? И тогда какой бровзер наиболее близок к стандарту?
Потому что производители браузеров разные, и каждый сам решает, какие из технологий поддерживать, а какие нет.
Safari/Google Chrome, Opera 9.5, FireFox 3.
Не конструктивно, но: «А дизайнеры потом разгребают все несостыки. Кто как может.»
вобщем правильная статья.
1. насчет уменьшения кода. да, пусть оно по современным меркам мизерное. но блин, самому ж приятнее! приятнее и сам факт осознавать, и смотерть на код, и раздуплять его. я свои «табличные» хтмлы, сравнительно небольшие, написанные когда-то давно, с трудом раздупляю. а если надо чёто понять в чужом коде, то там черт ногу сломит. посмотрите на сайты, которые предлагает ucoz.ru. их верстать — одно удовольствие:
вот тебе и вся страница.
2. Михаил, насчет css молчал бы. как будто css не используется при табличной вёрстке, ага. не верю!
3. а ну-ка, противники divовой верстки сделайте мне таблицами вот это:
код тут. а это, господа, ход, который открывает очень широкие возможности для дизайна. так что думайте.
вован, спасибо за поддержку ;) Я уже вообще отказал от табличной верстки, верстаю теперь принципиально только на дивах.
Dimox, ну дык преимущества, как говорится, налицо. я смотрю что любители
зы: жалко картинки не вставляются в каменты, там по ссылочке хороший примерчик ;)
вован, а что ты хочешь увидеть? Первый пример решается точно так же, только вместо дивов используем классы у таблиц. Да, кода больше, но решаемо так же легко. Второй пример решается тоже очень легко, объем кода — такой же, как и с дивами.
Я считаю, что это крайности — использовать ТОЛЬКО таблицы или ТОЛЬКО дивы. Нужно совмещать.
Никитин Максим, первый пример. ессно можно. ессно точно также через стили в css. но тут-то как раз спор идёт между дивы+css и таблицы без css. улавливаешь?
насчет второго — полностью согласен. «золотые слова, венедикт абрамович!» я ни в коем случае не призываю полностью отказываться от таблиц. кесарю — кесарево. нужно умело орудовать всем что есть в html. и при этом не недооценивать тег div
Я бы так не сказал. Я очень быстро освоился в блочной верстке. Сложностей никаких нет, все упирается в знание технологии CSS. До этого я несколько лет верстал таблицами, и привычка мне нисколько не помешала. Тут, ИМХО, зависит от стремления оптимизировать код и верстать по последним стандартам.
Никитин Максим, таблицы придуманы для того, чтобы выводить на странице табличные данные, а не для разметки страницы, поэтому должно быть «ТОЛЬКО дивы» и никаких крайностей =)
Dimox,
ну, судя по каментам, тут далеко не всем по зубам такой «подвиг» :D
Грамадное спасибо за правила, которые определяют только тот или иной браузер. Это круто. Раньше не знал об этом!
**Пошел шаблоны переделывать, которые давно не получались.**
WebMast, лучше эту статью посмотрите, там более свежая информация по хакам.
Dimox, вечный прей за http://blog.html.it/layoutgala/ ^^