Реинкарнация webplanet.ru

08 Sep, 2005

Выдались скучные выходные...
Вспомнил своё старое хобби. Вобщем без лишних фраз - беcтабличная переделка webplanet.ru

Сухие цифры

  Старый код Новый код
Размер CSS файла ~2 KB ~7 KB
Размер HTML файла ~57 KB ~20 KB( 18Kb+2Kb баннеров..)
Общая Экономия(На HTML) - ~37Kb
Честно скажу, я выбрал именно этот сайт совершенно случайно. Тут лежит переделка. Код проходит валидацию.

Разница почти 10 секунд для диалапщиков. Много это или мало? Я думаю много.
И разница эта ощутима в первую очередь для пользователей - вряд ли цена на трафик для этого сайта играет какую-то серьезную роль...

Отличия

Копия конечно не точная - я выбрал наиболее приближенный вариант с фиксированными боковыми колонками и резиновой средней(с контентом). (для этого был на скорую руку передран пример со статьи Creating Liquid Layouts with Negative Margins ) Для более точной копии нужно уже прилагать кой-какие усилия..

В некоторых броузерах, типа ИЕ могут быть поползновения - но я оставил их даже умышленно. Все они в основном мелкие и если вдруг настанет день, когда это будет верстаться за деньги, будут без труда устранены.

Цель

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

Не последней целью так же было...убить несколько часов за интересным занятием. Ну нравится мне это делать. :)

Заключение

Думаю, что цель достигнута - судите сами по размерам файла. Ваше(Да! Именно твоё!) мнение и оценка мне интересны. Критика по делу и размышления на смежные темы принимаются с радостью.

Предмет разговора

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

36 комментариев к “Реинкарнация webplanet.ru”

1.akella | 09 Sep, 2005
2Medwoodu:Да там был косяк - именно в ИЕ и именно при сжатии - сорри спешка - уже все поправлено. Черный блок что я добавил в последний момент не давал резине быть полноценной. Теперь все ок. Но я считаю это minor bug. Уж очень быстро я все это сделал... Но все равно виноват. Спасение простое - реализовать min-width - но я не хотел так сильно заморачиваться. Может на днях... Так что при каком то сжатии в ИЕ оно все равно будет сползать. Такова се ля ви. На 800x600 не сползает. Но я очень не хочу чтобы этот пост вызвал такую реакцию - акцент я ставлю на том, как это просто... Таблицы совсем не обязательны - или min-width или чуть чуть JS и все будет в ажуре - однако это вышло бы за рамки моего выходного... 2darken: теперь указал :) 2Denny:в точку! - зарабатывают, но уже стали забывать на ком - слава богу мои клиенты помнят :) 2Ganges:На CSS де то 2 часа(ну может 3-3.5) и дето стока же на написание HTML - пока выудил всю инфу... плата за скорость - вышеуказанный бок + и мелкие отличия. Однако я не хотел быть точным - я во главу угла ставил показать как это просто... Насчет 70% - на укр.нет где то так и есть как это ни грустно :(. А в рунете я думаю главное сделать это модным - что мне кажется не замедлит скоро случиться. СЕО+быстрая загрузка и т д рано или поздно скажутся.. ИМХО Я на это надеюсь очень. Собственно только ради этого все и затеял...
2.Denny | 08 Sep, 2005
Да потому что солидным сайтам в России не до пользователей. Главное бобов заработать, а пользователи - лишь средство... Аналогия - был опыт обращения в один крупный банк. Провёл там 4 часа, никто, практически, не обращал на меня внимания. Все заняты своим делом. Деньги зарабатывают. Только вот за счёт кого? ;-)
3.ganges | 09 Sep, 2005
Да каких "бобов", я вас умоляю :)) Большинство этих проектов (если не все) - авторские. И у большинства этих авторов единственная цель - подпитка своего эго. Именно этим интернет контент (имхо, конечно) отличается от журнально-газетного - он (интернет контент) практически ничего не стоит. Для того, чтобы питать свое его - не надо быть квалифицированным разработчиком. 2Akella 2 часа? Ну ты мооонстр :)
4.Medwoodu | 09 Sep, 2005
Такую верстку не публикуют, т.к. она косячит, попробуйте уменьшить окно браузера ИЕ(более 70% пользователей) и увидите что получится. А вот о способах устранения поподробнее :) Я лично их не нашел для ИЕ 6. Единственная панацея от езды- таблицы(не везде но хотя бы местами).
5.ganges | 09 Sep, 2005
Э, простите, но чушь. Такую верстку "не публикуют" в рунете просто потому что не умеют. Точка. Вопрос - откуда статистика о 70% пользователей IE с уменьшенным окном браузера? И самое главное. "Косяки" убираются за деньги и в этом Акелла молодец. А то, что бестабличная верстка делает доступным контент не только для пользователей ИЕ, но и для буквально ВСЕХ, в том числе мобильных пользователей и скринридеров - делает такую верстку куда более эффективной. Я уже молчу о том. что действительно уважающий себя разработчик не пишет таблицами. 21 век однако
6.darken | 09 Sep, 2005
Забыл цвет фона указать :)
7.Aph1na | 09 Sep, 2005
Относительно того, почему серьёзные фирмы не могут сделать себе нормальных сайтов. Ну, чисто с моей точки зрения, тут есть два варианта: первый - согласна с Denny. Действительно, многие не заботятся о посетителях, у них и без этого куча денег, и сайт - ну это так, потому что принято как бы. А второй - да потому что многие мастера просто так привыкли. Мне например всю жизнь расказывали, что сайты нужно делать исключительно таблицами, и только таким способом можно достичь "правильной разметки". А css - это так, размеры шрифтов и цвета указать...
8.ganges | 09 Sep, 2005
:) Контрреволюция блин прямо какая-то "Привыкли". Это (верстать сайты таблицами) уже глупо, а учиться - лень. "Рыба ищет где глубже, а человек - где легче" Первой причины - нет. Гендиректор или маркетинг - вообще не обязан уметь делать сайты и знать об аудитории - это обязаны уметь разработчики, которых руководство нанимает решать свои проблемы. Причиной медленной адаптации CSS верстки в рунете и уанете является исключительно некомпетентная политика менеджеров по "развитию бизнеса" (если такие имеются) в так называемых "ведущих" вебдевелоперских компаниях. Закончится это либо когда таких разработчиков как Акелла будет 100 в Украние :), либо когда в одном из городов миллионников появится хотя бы одна действительно, по настоящему, РЕАЛЬНО профессиональная команда. Это уже скоро :)
9.akella | 10 Sep, 2005
А мне все еще кажется что рынок наш не созрел для "РЕАЛЬНО профессиональной команды", как это ни грустно, есть лишь считанные клиенты которые осознают ЧТО они на самом деле смогут получить. Так что мне кажется нужно тихо и качественно делать своё дело - а все остальное само свалится. И еще ответ Medwoodu: такую верстку все-таки публикуют, просто она доводится до ума за деньги ( http://www.ukr.net/ и http://pravda.com.ua/).
10.akella | 14 Oct, 2005
На тот момент поддержка ЦСС была слишком плохой для того чтобы использовать CSS-p поэтому и использовали таблицы. Позиционирование имхо ничем им не обязано - просто на тот момент это был единственный вариант. Но - проехали - это было позавчера. Первый драфт кстати появился 1994. Вообще же я не берусь судить о роли таблиц и т д в то время - потому как меня в вебе тогда не было. Насчет ошибок валидации спасибо. Я уже забыл когда использовал валидатор... Насчет твоего сайта - трудность создать 2 колонки с фиксированной шириной? Возьми за основу хоть бы и этот самый сайт(cssing) - тоже две колонки и тоже фиксированной ширины. Удали лишнее, поменяй ширину, и будет то что ты хочешь...
11.DenD | 15 Sep, 2005
Offtop Прошу всех, кто знаком с CSS поучаствовать в наполнении соответствующего раздела на Wikipedia http://ru.wikipedia.org/wiki/Css
12.unutranyholas | 29 Sep, 2005
Табличная верстка надёжнее.
13.Максим | 11 Oct, 2005
Не делают ибо не хотят потерять 5% пользователей у которых такой сайт будет нечитаем. Про экономию трафика пользователей не надо. Серьезные сайты контент в gzip/deflate сжатии выдают, там 10 Кб выйгрыша сожмется до 1 Кб, на фоне 100Кб баннеров это несерьезно.
14.akella | 11 Oct, 2005
Нужно ли мне повторять что второй и третий сайты по посещаемости в моей стране - сделаны БЕЗ таблиц. И практически никаких жалоб не поступает. Потому как читаемы они везде. ukr.net pravda.com.ua Гзип не всегда бывает доступен. А вот на читаемость и используемость кода еще никто не жаловался. К тому же версии для всех устройств и тд и тп. Устал рассказывать.... ( Читай пост про укр.нет и правду.ком.юа. на этом блоге В россии, имхо, завтыкали немного. Так мне видится этот вопрос. Не люди конечно - а большие сайты.
15.ganges | 11 Oct, 2005
Про 5 процентов пользователй - бред. В почившем в Бозе NN4.x весь контент будет доступен как текст на белом фоне. Как раз чтобы не потерять эти самые 5 процентов и переходят на CSS позиционирование - скринридеры, текстовые браузеры и мобильные телефоны. Так что Вы скорее всего не представляете о чем говорите, имхо. Насчет десятикратного gzip'a тоже ерунда, НЕТ ТАКОГО уменьшения, я использую gzip handler уже 4 года Экономия трафика в любом случае достигается НИКАК НЕ ЗА СЧЕТ GZIP'a а за счет того, что CSS кэшируется, один- пять файлов на весь сайт. Все преимущества, выгоды и, если хотите, тотальное технологическое превосходство CSS позиционирования стопроцентно доказано ведущими специалистами. Об этом говорить уже лень. Другое дело, что "надежную" CSS верстку надо уметь писать, а для этого надо учиться и практиковать. P.S. Да завтыкали внатуре, хоть и не все :))
16.Vladson | 12 Oct, 2005
Я вот не могу понять почему таблицы это плохо, у меня 2 сайта и один с таблицами (точнее с одной таблицей) другой без, и я не вижу серьёзных недостатков в таблицах, может это конечно потому что я недостаточно опытен в CSS но всё-же...
17.akella | 13 Oct, 2005
Почему плохо? Просто у них есть своё предназначение. Никак не пересекающееся с поизиционированием колонок в дизайне и т д. Для переходного веба они бесспорно подходят. То есть когда другими способами просто нельзя сделать нормально лэйаут. Но как я думаю эти времена прошли уже. Уже 5 лет как практикуются CSS layout'ы, мне кажется что уже давно можно не использовать таблицы для дизайна. Негатив того что они несут другой смысл, заключается вот в чем: в дальнейшем если тебе например надо будет поменять колонки местами - прийдется лезть в код. Даже если сайт на темплейтах их может быть больше 10. Дальше сам продолжишь. При семантичной разметке мы от этого уходим. Хоть пока броузеры и пытаются нас тянуть обратно...
18.Vladson | 13 Oct, 2005
Почему никак не пересекающееся, именно таблицы и ввели в оборот такое понятие как поизиционирование а CSS появился намного позднее (причём долгое время к нему относились с недоверием) во времена IE-3 многие сайты были даже без фона... (как будто их в WordPad делали) Согласен, это всё вчерашний день и надо двигаться вперёд, как браузеры так и учителя в вузах ещё долго будут тянуть нас назад и это неизбежность... До сих пор даже в художественных академиях где учат web-дизайнеров можно встретить учителей которые обучают смеси HTML3.2 и HTML4.0 причём не то что без CSS а даже не знающих что такое Doctype. Кстати у тебя глюк на странице проверь валидатором (в некоторых местах сдвоенные закрывающие теги "а" и пропущено пару "tr") Но что-то я совсем отклонился от темы, (как я понимаю ты видел ту страничку в которой я не могу избавиться от таблицы) и вот возник такой вопрос, а ты мог бы сделать точную копию той страницы без таблиц ? (ни в коем случае не прошу у тебя это делать) Просто скажи мог бы и если да то скажи что посоветуешь почитать на эту тему. Я просто учусь управляться с CSS не особо долго, и хорошие статьи на эту тему (с обилием примеров) видел пока только на твоём сайте.
19.Vladson | 14 Oct, 2005
В том то и дело что труднось у меня заключается не с фиксированной шириной а с высотой, две разные колонки должны быть одинаковой высоты, причём высота не является постоянной величиной иногда одна из них должна подстроиться под вторую а иногда наоборот... (помню пытался делать что-то типа height:100% но всё стало ещё хуже, причём в разных браузерах по разному) Ещё тоже выводит (даже пугает) то что разные браузеры по разному реагируют на margin, padding и border, в общем мне до твоего уровня ещё учиться, учиться и учиться...
20.Vladson | 14 Oct, 2005
Кстати у тебя ещё глючит двиг >>> WordPress database error: [No database selected]
21.akella | 14 Oct, 2005
http://cssing.iatp.org.ua/2004/09/10/flex-faux/ Такой же прием на сайте ukr.net - колонки якобы одинаковой высоты - это лишь иллюзия. Просто повторяешь картинку по вертикали для обертывающего блока и все.
22.Vladson | 14 Oct, 2005
Вспомнился анекдот (сейчас в интернете лежит его множество аналогов, но я его услышал в 90-м году когда интернета у меня ещё небыло) В 70-х годах пришёл на вызов телемастер стукнул кулаком по телевизору и он заработал. Его спросили сколько он возмёт денег за вызов, он и отвечает 5руб. Хозяева в шоке такие бабки за что ? за то что стукнул ? Нет (поясняет телемастер) 1 руб за то что стукнул, а 4 за то что знал куда стукнуть... Это я к тому что прием на сайте ukr.net не такой и сложный, но вот почему то я о таком не подумал...
23.akella | 14 Oct, 2005
Рад что смог помочь :)
24.Maler | 28 Oct, 2005
..смотрю и понять не могу, откуда в старом варианте 59кб? Ну 20-30 я бы еще понял, но 59.. А нечему тут удивляться, в коде огромное количество пустых строк лишних пробелов и параметров которые моглибыть прописаны в css. Больше чем уверен, что если все это оптимизировать, получаться те же 30кб что и при бестаблисной верстке. Считаю что большой разницы нет, таблично или бестаблично верстать, просто все надо делать с подключая оба полушария мозга.. На сегодня, мои страницы весят в среднем 15кб, правда я не делаю таких мега порталов, но больше чем уверен, что больше 30 ри таком раскладе, как в приведенном примере не будет. Про мобильники.. Господа, мыслите реальней, нам до этого далеко.
25.akella | 28 Oct, 2005
Конечно можно и таблицы использовать разумно и тогда разница не была бы такой разительной, но лишь в размере файла. Надо помнить что главное здесь - разделение дизайна и информации, что дает массу преимуществ. С таблицами такого не будет. Мне кажется что когда человек включит все полушария ему станет ясно что без таблиц, как минимум, удобнее разработчику. ИМХО. "Про мобильники" - когда уже люди перестанут обращать внимание на частные случаи - речь идет об общей доступности страничек с любого устройства - первое это принтер - затем разумеется мобильники - совсем не так нереально как вам кажется - все зависит от аудитории разумеется. А к будущему надо готовиться уже сейчас - тем более что эти преимущества мы получаем бесплатно. Нужно лишь отказаться от таблиц...
26.Maler | 28 Oct, 2005
По поводу удобства разаработчики.. А на что шаблоны?! :) Я не говрю, что надо делать только таблицы, я за "лечение гемороя" любыми доступными средствами. “Про мобильники” хорошо сказал! :)
27.mourner | 30 Oct, 2005
Maler, если ты соизволишь потратить часть своего свободного времени на изучение бестабличной XHTML/CSS-вёрстки, различных техник, приемов, бесчисленных идей по этой теме, после этого сам будешь смеяться с того, про что сейчас пишешь. Пользоваться табличной вёрсткой - всё равно что в наше время добывать пищу в лесу с дубиной и есть ее руками вместо того, чтобы покупать продукты в магазинах, готовить на плите и есть с тарелки вилкой или ложкой. Каменный век. Целиком и полностью поддерживаю Юру.
28.akella | 29 Nov, 2005
Не вижу никакой принципиальной разницы в разьезжаемости сайтов - пускай их размеры в пикселях процентах или ЕМах. Нет особой разницы. Всегда есть min-width, overflow, white-space и множество других вариантов избежать "сьезда". Кроме того с position:absolute сьезжание вообще невозможно в принципе. Да и для некоторых дизайнов с флоатами оно также не случается. Страницы действительно одни и те же - и не вижу тут причин для иронии. Вот так выглядит мой сайт - который я часто просматриваю когда за компом не сижу. Очень ужасно и вообще нечитабельно.... ;) да? Если я все же неправильно расценил вашу иронию или неполно ответил - поясните...
29.Medwoodu | 29 Nov, 2005
Реанимируя тему: круто что приведенные сайты не разъезжаются, особенно если учесть что они постоянного размера и не растягиваются, резиновая верстка:)) akella у Вас одни и те же страницы и для мобилы и для компа? ;)
30.c0nst | 01 Dec, 2005
2Vladson (post N19): на счет колонок разной высоты. Для того чтоб они подстраивались друг под друга, нужно использовать JavaScript. По-другому - никак (99,9%). Сделай какое-то событие перед отображением страницы, чтоб считало длину каждой колонки и делало длины такими, какими нужно.
31.Medwoodu | 01 Dec, 2005
akella, простите я не понимаю. Покажите мне сайт(хотя бы 1), растягивающийся на весь экран который бы не разьезжался (пока вы такого не показали), вот тогда я действительно признаю, что неправ. А так можно сколько угодно говорить, что это круто, но это пустой разговор. Замечу что я не говорю, что дивы это плохо, в определенных ситуациях это намного лучше чем таблицы, но я лишь опровергаю вашу позицию, что дивы могут заменить таблицы всегда. Насчет одинаковых-разных мобильных-сайтовых страниц, в т.ч. wap и т.д. все зависит от кол-ва и вида информации.
32.akella | 01 Dec, 2005
akella, простите я не понимаю
Если бы ты сказал что именно ты не понимаешь я бы пояснил. Сайты? - да вот навскидку http://wired.com/ http://ru.id-as.com/ Да и эта самая вебпланета на всех нормальных разрешениях тоже не разлезается, только меньше 800 на 600 - это да - но как я уже сказал можно реализовать минимальную ширину и все будет как надо - просто делать я этого принципиально не буду. Потому как подобное может продолжаться вечно... И считаю "разлезание" сайта при ширине экрана 600 пикселов спорным - скорее жертвой во благо читабельности. http://webplanet.ru/ - на 800 на 600 вообще не помещается... ну а насчет мобильных то ты понял надеюсь? то что у меня одна страница для мобильных и ПК...
33.Vladi | 30 May, 2006
пока без хаков DIVные дизайны не будут смотреться во всех браузерах одинаково - это шаманство не достойное коммерческого применения. Дивы удобны и круты, но хоронить таблицы рано. Надо комбинировать дивы и таблицы. Подобное мнение разделают почти все адекватные люди.
34.Vladson | 30 May, 2006
Дивы как раз нормально и смотрятся, а хаки в большенстве своём нужны для исправленмя совсем других "глюков"
35.Anton | 14 Nov, 2006
У меня IE 5.0 Идет со стандартной поставкой Windows 2000 service pack 4. Я не вижу сайтов с дивами. Рассказы о том, что верстка дивами как раз призвана обеспечить доступ к сайтам 5ти процентам людей вроде меня - оставьте при себе. То правая колонка уедет под основной текст, то вообще после шапки идет пустое место страниц на двадцать, а потом основной текст (и это в стандартном шаблоне blogger.com!), причем если попытаться выделить мышкой что-то в тексте, то он уезжает еще на столько же вниз - скроллер справа превращается в маааленькую такую полосочку. Да блин, я всех глюков даже и не перечислю. Зайдите на гугл и посмотрите, какая там верстка. Они не заботятся о своих пользователях? Не экономят траффик (даже переменные в яваскрипте называть по одной-две буквы!)? Не обращают внимания на мобильные устройства? Найдите человека, у которого гугл неправильно отображается.
36.akella | 14 Nov, 2006
То о чем вы говорите - поддержка Ие5 в верстке - зависит сугубо от верстальщика и решений компании. Так что всякий раз когда у вас что то ломается - знайте - либо компания приняла решение не поддерживать этот старый дырявый броузер - которому больше 6 лет кстати уже. либо это была лень-халтура верстальщика. Одним словом вы пали жертвой одного из этих двух решений. И пенять на верстку здесь ни к чему. Она всегда может быть оптимизирована. Однако следует сказать что одинаковое отображение во всех броузерах - утопия по определению. Эти все сайты пытаются вам сказать что пора обновить Ваш броузер :) Потому как ходить в нем по сети попросту опасно. не понял о каких рассказах о доступности вы говорите, повторюсь - когда это нужно хоть кому то - верстка может быть оптимизирована, а контент как раз всегда остается доступен.