Понравилось на этой неделе:

1. Интервью с Домиником Лекой, одним из создателей «Спарроу», популярного почтового клиента для Мака («Вёрдж»).
2. “Content” Creep. Что не так со словом «контент» (ключевые тезисы ясно из чтения по диагонали). Перекликается с моим недавним наблюдением о платном чтиве.
3. The myth of the page fold: evidence from user testing. Очередной раз о том, что нет ничего страшного в длинных страницах со скроллингом (но см. также наблюдения тех же авторов в применении к интернет-магазинам, особенно в пункте 5).
4. Why Hasn’t Safari Skyrocketed Like Chrome Has? В статье, кстати, нет ответа на вопрос из заголовка. Кажется, секрет в том, что Сафари просто дико медленно развивается и до непреличия консервативно. Раздельный адрес и поиск — это эпик-фейл. Я хочу пересесть с него на Хром, но вот он не умеет синхронизировать букмарки с Айфоном и Айпадом.
5. Vladimir Putin question and answer session in Russia. Весёлый текст трансляции «Гардиан» путинского «разговора» 15 декабря.
6. Things I Learned Doing Responsive Web Design. Брент Симмонс рассказывает про резиновость и вообще сегодняший веб (с отставанием на 15 от Рунета, западный интернет начинает понимать, что кирпичи сосут).
7. Optimal Form. Стюйвесант Паркер приводит справедливые доводы в защиту Самсунга, который нагло слизывает дизайн у Эпла.

Всякие люди хотят делать сайт «не такой, как у всех». В результате мы видим серую массу сайтов «не таких как у всех». Сайт «не такой, как у всех» легко узнаётся: сразу видно, что это типичный «не такой, как у всех» сайт, коих тысячи.

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

Нет ничего страшного в том, чтобы раздел с адресами-телефонами называть «Контакты».

Теория, что «контакты в радиоприёмнике, а на сайте — контактная информация» основана на непонимании смысла, в котором слово «контакты» употреблено. С тем же успехом можно заявлять, что «телефон на столе, а на визитке — номер телефона». Смысл в не в том, что сами адреса и номера — это некие «контакты», а в том, что с помощью всего этого контакт можно установить.

По такому же принципу можно писать, скажем, «Жалобы: abuse@site.ru». Это не значит, что перед нами жалобы, это просто краткое выражение мысли «отправляйте жалобы на адрес abuse@site.ru». Оставлено одно слово с максимальной смысловой плотностью.

«Контактная информация» — это такое тошнотворное бюрократическое словосочетание, как «водительское удостоверение» (вместо «прав») или «телевизионный приёмник» (вместо «телевизора»), ему не место на приличных сайтах. При этом слово «информация» особенно бессмысленно, ведь у нас везде информация. «Информация об услугах», «информация о компании», «информация о партнёрах» — это же бред.

Все религиозные противоречия легко снимаются, если назвать страницу по-людски: «Адреса и телефоны».

На дверях не пишут: «Чтобы пообщаться с Абрамом Моисеевичем, зайдите в этот кабинет».
Или «Зав. терапевтическим отделением:». Или: «Посетите туалет».

На дверях пишут: «Иванов Абрам Моисеевич», «Зав. терапевтическим отделением»,



Лейбл на форме — это просто подпись, табличка, наименование. Она не должна ни призывать воспользоваться контролом, ни учить это делать. Двоеточие после лейбла обычно не нужно — просто потому, что для постановки знака препинания необходима какая-то причина.

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



Помню, как готовил самую первую версию этой таблицы в Матвеевском в 2007 году, за вот этим столом.

Что-то Яндексовский олимпийский сайт меня убивает. Я вообще его не понимаю. Вчера я охренел от того, что нигде невозможно было понять, когда открытие. Снизу какой-то Хоккей с «Беларусей» на первом месте. Какой нахрен хоккей?

Сегодня открываю и вижу: у нас одна бронзовая медаль есть. Но тыкнуть на неё и узнать, в каком виде спорта, нельзя. Что за бред? На два очевидных вопроса сайт не даёт ответа. Зато какие-то фотографии с флагами, блин, показывают.

Захожу ещё раз, в надежде врубиться. Нахожу отдельную рубрику «Призёры» с конструкцией «3 Конькобежный спорт. 5000 м. Мужчины. 6.18,05 Иван Скобрев (Россия)». Доходит, что 3 — это место! Бронза обозначена зелёным цветом — это гениально. Дальше ссылкой является «Конькобежный спорт» и «Иван Скобрев». Куда из этого жать, чтобы прочитать или увидеть хоть что-то именно про этот забег, где он победил?

Какая-то жесть вообще. Яндекс, ты чего?

В результате небольшого исследованьица, которое я помог Артёму провести в среду, у меня поменялся текст копирайта в подвале. Было: © 2002...2009 Илья Бирман. Стало: © Илья Бирман, 2002...2009. В будущих проектах мы будем использовать именно такую, стандартную для России последовательность данных после знака охраны авторского права. Исправьте у себя на сайтах, и призовите своих читателей сделать то же самое, но не забудьте, что в английской версии должно остаться по-старому.

И заодно: мне всё больше нравится форма записи номера телефона, когда +7 берётся в скобки вместе с кодом города, то есть не +7 (495) 080-79-59, а (+7 495) 080-79-59. Надо бы попробовать научить Айфон форматировать номера именно так, чтобы понять, насколько быстро можно к ней привыкнуть. Да, я по-прежнему не считаю допустимым использование цифры 8 вместо +7.

Курсор в виде руки с указательным пальцем, насколько я понимаю, впервые появился в браузере. Подчёркнутый текст не давал достаточного аффорданса, поэтому пользователю нужно было как-то намекнуть, что «слово кликабельно».

В какой-то момент ЦСС дал возможность указать форму курсора для любого элемента на странице, и многие стали лепить эту руку над чекбоксами и другими элементами, на которые можно нажать. Я был противником этого: у меня была уже устойчивая привычка, что рука означает ссылку, и, следовательно, кликнув, я уйду со страницы. Мне было некомфортно нажимать на чекбокс «пальцем», я хотел надёжную стрелочку.

На кнопках рука смотрелась совсем бредово: я и так вижу, что могу нажать («не лохи летят»).

Сейчас на дворе веб 2.0 («Javascript now works», как говорит Джефф Этвуд), и кругом стоят пунктирные ссылки, которые никуда не ведут, а что-то делают на текущей странице. Естественно, что такие ссылки нуждаются в курсоре-руке, никакого дискомфорта это не вызывают.

Проблема теперь в том, что я не знаю, как сформулировать правило, по которому выбирается курсор между рукой и стрелкой. Делать руку у всех «кликабельных» элементов — западло. Пока лучшее, что мне приходит в голову — довериться браузеру (тогда у всех ахрефов будет рука).

Да, ещё про сайты разных веб-студий.

На странице работы никогда не сказано, собственно, в чём состояло «комплексное интернет-решение». «Сайт компании Пумпурум-лимитед» — и скриншот. Что за компания, чем занимается, зачем ей делали сайт? Этого не написано. Потому, что этими вопросами реально не задавались разработчики. У них было ТЗ, где было сказано, какие нужны разделы, «график» нарисовал что-то в Фотошопе, верстальщик сверстал, вот и сайт, вот скриншот. Что ещё сказать? Не писать же вату из ТЗ, что сайт поддерживает такие-то браузеры и минимальное разрешение такое-то.

Всё это как-то очень уныло.

На сайтах одних веб-студий главная страница рассказывает о том, какой у них опыт в разработке комплексных интернет-решений, поисковой оптимизации и созданию сайтов под ключ. В виде маркированного списка, естественно. Другие веб-студии думают, что первые — отстой, и пишут у себя на главной что-нибудь мерзко оригинальное, например: «О нашей компании больше любых слов могут рассказать наши работы» — и ставят ссылку на портфолио.

Если девушка при знакомстве говорила бы юноше: «о том, насколько я хорошо выгляжу, больше любых слов скажет мой внешний вид», и только потом убирала бы руки, закрывающие лицо, вряд нашлись бы люди, не считающие её идиоткой. О компании, действительно, говорят её работы. Но об этом факте посетитель догадается без подсказки.

Скриншот сайта просто на белом фоне трудно воспринимать как сайт, поэтому в почти в любом портфолио веб-дизайнера сайты показывают в браузере. Многие дизайнеры предпочитают и эскизы рисовать «как бы в браузере».

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

Дело в том, что на Маке у окон обычно нет «рамки»: сверху заголовок (возможно, с тулбаром), а под ним идёт от первого до последнего пикселя по горизонтали — внутренности окна. Если у окна нет строки состояния, то «контентная область» и снизу продолжается до конца.

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



В общем, если в Фотошопе сверху влепить «шапку» от Сафари, забив на полупиксельный рамку (фотошоп всё равно рисует рамку вокруг канвы), то а) координата X любого элемента продолжит отсчитываться с нуля, а не с трёх, допустим, пикселей; б) можно будет легко изменять canvas size по вертикали, если страницу нужно сделать длинее, без необходимости сдвигать или перерисовывать какие-то нижние элементы.

Но смысл рисования сайта внутри браузера не только в повышении реалистичности. Главное (собственно, то, ради чего я перешёл на такой формат) — это доступность строки заголовка и адресной строки. Теперь на эскизах страниц я пишу их тайтлы, вставляю фавыконку и придумываю им нормальные урлы, что позволяет заметно упростить взаимодействие с верстальщиками и технологами. И не забудешь, что это тоже надо делать. Опять же, если я имею в виду, что на какой-то странице должен быть РСС, я могу дополнительно намекнуть на это, прицепив иконку РССа в конец адресной строки.

Короче, дарю всем желающим ПСД-шаблон (68 КБ), в котором все значимые элементы браузера сделаны отдельными слоями, в т. ч. заголовок окна (с правильной рельефностью) и урл в виде текста. Ширина картинки — 1000 пикселей. В названиях слоёв используется нехитрая нотация: точкой заканчиваются слои, которые по любому должны быть, а вопросиком — те, которые можно включать/выключать по вкусу. Ещё можно вместо обычного заголовка выбрать 5 табов, чтобы реально оценивать влезабельность своего тайтла.

Добавлено в 14:32: Сергей Чикуёнок оставил полезнейший комментарий.

Одним из самых отвратительных элементов на сайтах являются менюшки, которые после того, как прокрутишь страницу вверх или вниз, плавненько подъезжают на то же место (относительно окна), где они были. Я и так фиксированно позиционированные элементы не люблю, но эти подъезжалки совсем ни в какие ворота не лезут.

Смысл в том, что фиксированный элемент находится как бы «над» прокручиваемой частью страницы, и поэтому висит на месте, когда её крутишь. А тут получается, что он живёт в основной плоскости, но при этом постоянно гоняется за несчастным человеком. Назойливость такого элемента заставляет посетителя скорее уйти с идиотской страницы, ведь скрыться от этого на самой странице совершенно негде.

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

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

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

В среду я улетаю на пару недель из Челябинска, и я хотел бы попользоваться Айфоном как плейером, т. к. не смогу постоянно быть за компьютером. Проблема в том, что с собой я беру ноутбук, а сейчас у меня телефон синхронизируется с Айтюнсом на большом компьютере. На ноутбуке Айтюнс стоит, но я боюсь втыкать телефон в него. Я не знаю, что произойдёт. То ли он сотрёт с телефона всё, т. к. на ноутбуке в «библиотеке» ничего нет. То ли он просто скажет, что я не по адресу. А если он заодно и контакты сотрёт? Мало ли.

Я бы хотел скачивать записи программ «Эха Москвы» и слушать их с телефона во время пеших прогулок. То есть научиться «айтюнить» телефон с ноутбука как-то придётся в любом случае — заранее подготовить себе аудиотеку на две недели не представляется возможным. Но даже если я этому научусь, возникает следующий вопрос. Когда я добавлю эхомосковский файл в эту кретинскую «библиотеку», он тут же создаст альбом «Радзиховский» (или кто-нибудь ещё) и захочет кавер-арт (либо будет отображать нотку на чёрном фоне).

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

У пользователя нормального, неайтюнднутого плейера, таких вопросов вообще не возникает, конечно. Создал себе папку Music отдельно, Echo отдельно. Взял файл любой да закинул, какая разница с какого компьютера. Но тут надо think different, а я пока не научился. Учите.

А ещё около всех треков в Айтюнсе есть чекбокс. Это хорошо. Ни в одном другом плейере чекбоксов возле треков я не видел. Здорово, что Эплы предусмотрели такую функцию, как чекбокс. Жалко только, что абсолютно неоткуда узнать, на кой хер этот чекбокс там есть. А так — отличный чекбокс, с бликом!

Смирнов выпустил Починятель субтитров и утверждает, будто бы он — Веб 2.0. Но невооружённым глазом видно, что это не так:



Сразу ясно, что Дима ничего не понимает в вебдваноле. Вот как надо было:



Совсем другое дело.

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

Верстальщики недолюбливают компанию «Микрософт» за жуткую глючность и непоследовательность IE в разборе и отображении CSS. Но есть две вещи, которые компания «Микрософт» сделала правильнее, чем все остальные.

1. Компания «Микрософт» забила на идиотский стандарт, согласно которому шириной бокса является ширина его содержимого, а не ширина самого бокса, и предпочла использовать здравый смысл. Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing, и поэтому теперь мы имеем возможность верстать страницы нормально под всеми браузерами.
2. Компания «Микрософт» не реализовала поддержку идиотского значения атрибута position: fixed. Благодаря этому такого извращения нет почти ни на каких сайтах.

В «Техногрете» появилась статья Андрея Шитова, где он рассказывает о способе заставить position: fixed работать в IE. Несколько раньше на сайте Ромы Воронежского появился этот ужас «в действии».

Это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает во всех остальных приложениях в мире. Когда менюшка расположена в верхней части экрана, тебе кажется, что ты находишься и в самой верхней точке прокрутки — но на самом деле можно крутить ещё и ещё. Часть страницы сверху уже «упёрлась» в край, а у части начало было явно где-то выше, потому, что строки торчат из-за верней границы. К этому невозможно привыкнуть, и это не укладывается в голове нормального человека — как теория об искривлённости пространства.

Если очень-очень надо, чтобы крутилась только часть страницы, то скроллинг должен быть именно вокруг этой части. Это делается фреймами или дивом, у которого overflow: scroll. У всего этого есть ещё целая куча недостатков, про которые можно рассказывать часами (хотя бы то, что скролбар, не упёртый в правый угол, имеет маленькую ширину, и в него приходиться целиться).

Давно известно, что техническая возможность что-либо сделать не может являться поводом это делать. Не нужно разукрашивать скролбар в разные цвета, не нужно делать бегущую строку тегом <marquee>, не нужно подвешивать менюшки с помощью position: fixed. Это «прикольно», но пользователя всё это бесит.

По ссылке у Дениса пошёл на сайт outlookcode.com — сайт посвящённый программированию под Outlook. Нет, я не собираюсь под него кодить, просто интересно стало глянуть, что это.

Сайт начинается с короткого и внятного объяснения:

OutlookCode.com is a meeting place for people who want to make Outlook work harder for themselves and their organizations by learning how to program applications for their own use and to share with others. No matter whether you are a beginner or an expert, you are welcome to browse the articles, samples and other resources, and discuss Outlook programming issues here.

Курсивом выделены ссылки.

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

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

Вместо этого, как правило, сначала пишется описание из восьми абзацев, потом принимается решение убрать его подальше (естественно, не вешать же их на главную!), а ссылка на «о проекте» (хорошо ещё, если она называется именно так) ставится куда-нибудь вниз к «информации о конфиденциальности» и ещё какой-нибудь ерунде. В результате человек, даже если и найдёт её, вряд ли будет настолько заинтересован, что заставит себя прочесть столь длинный текст.

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

При всей замечательности и удобности сайта «Билайна», там есть как минимум один непростительный интерфейсный косяк. На некоторых страницах тебе предлагают выбрать твой регион:



Почему я должен думать, между какими буквами расположена буква «Ч»? Выдайте все регионы одним списком! Или, ещё лучше, научитесь угадывать — как-то ведь это делает Яндекс.

А ведь интерфейс им делали крутые люди. Как же так?

В сегодняшнем «Линче» Лебедев как нельзя лучше указал на вопиющую бессмысленность заставки на сайте. Около ссылки «Пропустить заставку» на присланном скриншоте он подписал:

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

Очень, очень хорошо.

Иногда на веб-страницах встречается текст, написанный слишком мелким шрифтом.

Часто таким образом люди форматируют текст, который, на их взгляд, не представляет большого интереса для читателя, либо играет второстепенную роль. (Клинические случаи, когда автор просто думает, что мелкий текст выглядит более «стильно», рассматривать не будем.)

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

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

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

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

Сегодня мы поговорим о квадратных скобках и их правильном использовании.

Историческая справка

Когда-то мониторы были плохими, и графические режимы были для них страшным мучением. Как правило, мониторы переключались из текстового режима в графический не совсем мгновенно, экран при этом неприятно мигал. Использование разработчиками графического режима без острой необходимости (то есть, не для отображения рисунков, схем или графиков) вызывало у пользователей раздражение. Операционной системой на компьютерах простых смертных стоял MS-DOS, где подавляющее большинство программ работали в текстовом режиме, 80×25 строк.

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

В качестве дешёвого способа нарисовать рамочки таблица ASCII предлагала псевдографику — набор символов, представляющих собой всевозможные края одинарных и двойных рамочек, а также стыковок между ними:



Программы, интерфейс которых был построен на библиотеке Turbo Vision (среди них DOS Navigator, Turbo Pascal 6-й и 7-й версий), пользовались псевдографикой с особым размахом, умудрясь рисовать объёмные кнопки:



Когда кнопку нажимаешь, она действительно нажимается.

Некоторые разработчики ленились использовать псевдографику, и прибегали к ещё более дешёвому способу изобразить кнопку — поставить квадратные скобки и написать между ними название:



В текстовом режиме, из-за того, что все символы имеют одинаковую ширину и высоту, экран воспринимается такой матрицей, где квадратные скобки (как и всё остальное) занимают свои ячейки. Поэтому недостающие верхняя и нижняя рамки как бы дорисовываются пользователем уже подсознательно. Конечно, вариант из Turbo Vision воспринимается лучше, но этот тоже можно терпеть.

Квадратные скобки в русском языке

На самом деле, квадратные скобки придумали совсем не для того, чтобы дешёвые кнопки рисовать в DOS’е, и даже не для того, чтобы индексы массивов указывать в языках программирования. Квадратные скобки, как и круглые скобки, точки, запятые, знаки восклицательный и вопросительный, многоточия, тире, и многое другое, являются пунктуационными знаками русского языка (и не только русского, конечно). Квадратные скобки используются, во-первых, как скобки второго уровня, по аналогии с «кавычками „лапками“», и, во-вторых, при цитировании.

При цитировании они могут использоваться для пояснений:

А вот на большее, вот этих самых ребят не хватает. [С пафосом] Но они базис... вот этого самого... прекрасного действа под названием супер-игроки, современные супер-игроки в снукер.

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

А ещё они могут указывать на отклонение от оригинала:

В оригинале	При цитировании
Что касается Василия, то известно, что он останавливался в гостинице «Невада», потом несколько дней бомжевал, а в настоящее время проживает в отеле «Калифорния».	Как пишут в журнале West Coast Digest, «[Василий] останавливался в гостинице „Невада“ [...] а в настоящее время проживает в отеле „Калифорния“».

Как видим, квадратные скобки — это не рамочки, которыми нужно ограничивать кнопки.

Квадратные скобки в сегодняшнем вебе

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



Их используют тупо как первый подвернувшийся под руку разделитель, видимо, помня, что где-то такое использование уже видели. При этом не учитывается, что в графическом режиме эффекта «матрицы», о котором шла речь выше, не создаётся, и поэтому это совершенно не похоже на кнопку. Когда ссылки, заключённые в квадратные скобки, ещё и подчёркивают, становится и вовсе страшно: линия подчёркивания не совпадает по высоте с уголками квадратных скобок, и, кроме того, начинает ещё острее ощущаться отсутствие такой же линии сверху. А особый вид извращения — это взять кнопку в квадратные скобки, подчеркнуть и при этом выделить курсивом.

Такие «кнопки» выглядят неряшливыми, сделанным «на коленке» за полторы минуты.

Уже во времена DOS была возможность нарисовать кнопку более натурально, чем с помощью квадратных скобок — и разработчики Turbo Vision этим успешно пользовались, — что уж говорить о сегодняшнем дне. Даже в Photoshop ходить не надо, CSS всегда под рукой. Возьми и сделай кнопку, раз так хочется!

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

Сейчас занимаюсь переделкой одного сайта. О чём конкретно речь — пока не важно. Мы будем условно называть заказчика компанией Coca-Cola. Итак, что мы видим на старом сайте в разделе «Прайс компании Coca-Cola»?



Если называть список цен «прайс-листом» я ещё готов, то называть его просто «прайсом» — это слишком. Ну да ладно, перед нами три ссылки (да, это ссылки). Тыкаем в первую и проваливаемся на страницу, где видим:



Примерно такая же картина на двух других страницах, но только сильногазированного прохладительного напитка со вкусом лимона Sprite — всего одно наименование. Итого: «прайс» из 7 товаров разбит на 3 (sic!) страницы, на каждой из которых нас ждёт страшная нечитаемая таблица.

Переделываем весь раздел к чёртовой матери, не забывая о том, что:

• Если в таблице всего семь строчек, то разбивать её на три страницы нет никакого повода;
• В русском языке есть слово «цены»;
• Посетитель сайта не является идиотом, и поэтому обойдётся без семикратного повторения «описания»;
• На планете Земля не существует людей, которые бы не знали, что такое Coca-cola, Fanta и Sprite, но при этом умели бы пользоваться интернетом;
• Если все бутылки упакованы в коробки по 20 штук, то эту информацию не нужно писать в каждой строке каждой таблицы;
• Это не результаты опытов по физике, чтобы обязательно указывать единицу измерения в заголовках колонок — можно найти и более подходящее место;
• Целая часть от дробной в России отделяется запятой;

В результате имеем:



Вместо «Цена оптовая» и «Цена розничная» теперь написано наоборот: «Оптовая цена», «Розничная цена». То, что тут цены, ясно и так, это слово нужно просто для того, чтобы прилагательное не подвисло в воздухе. Кроме того, по-русски вообще более естественно прилагательные писать перед существительными (ср. «идиоты полные» и «полные идиоты»).

Напомню, компания Coca-Cola здесь — вымышленная. Совпадения названия, а также наименований продукции — совершенно случайные.