Как сказал Якоб Нильсен(Jakob Nielsen) в своей недавней статье«Computer Screens Getting Bigger» — экраны компьютеров становятся больше.(На что кстати сослался Лебедев =)).
Дословно, гуру юзабилити сказал следующее: "Дизайнеры должны начать экспериментировать со способами утилизировать горизонтальное пространство экрана, и создавать веб-страницы с улучшенным взаимодействием для людей с большими и широкоэкранными мониторами.(Они так же должы использовать методы, такие как responsive design, для продолжения поддержки маленьких экранов, которые будут с нами до конца десятилетия)".
И вот вопрос вам, дорогие читатели — как мы можем это сделать?
В моей практике, я использовала несколько простых приёмов:
Если у вас есть, каталог товаров — вы можете использовать float или inline-block, чтобы разместить их на экране.
Вы можете использовать css media queries или их js-эквиваленты, например чтобы сделать размер текста или картинок больше и т.п.
Вы можете просто задать свойства min- и max-width для вашей обёртки контента(такой как body). Я так делаю в вёрстке блога, чтобы задать размер статей между 1000 и 1200px по ширине, для меня 1200 — это предел читабельной ширины строки текста. Так же я делаю для магазинов, чтобы при разрешении 1920px они не выглядели плохо.
Если ваш сайт, на самом деле веб-приложение, например онлайн игра, тогда вам нужно принимать целый комплекс мер, который относится к разработке пользовательского интерфейса, особенно оптимизируя сайт под мобильные устройства, так что я спрашиваю не о них.
Так же потихоньку разрабатывается свойство css text-size-adjust. Говорят на уровне префиксов кроме мозиллы уже поддерживается в -webkit- и -ms-, возможно можно использовать его.
Итак, вы владелец сайта, например блога, такого как мой, или магазина. Если вам гипотетически потребуется оптимизировать его для использования на мониторах шириной 2000 или 4000px, что бы вы использовали?
Или, представьте, что все дисплеи в мире шириной 4000px(не говорим про планшетки), может ли это изменить всю парадигму сайтостроительства? Какие изменения в интерфейсе браузеров могли бы произойти?
У меня чувство досады от того что данные представлены в сети не в виде "данных". Что такое "данные"? Это то что может понять компьютер. ... Я хочу представить себе мир, в котором все разместили свои данные в сети. Тим Бернерс Ли(Руководитель W3C, 2009, конференция TED).
Семантическая вёрстка — это когда я верстаю таблицами и думаю о таблицах. Или что-то типа того. Алексей Шилов aka mr.troll.
Четыре года назад мы даже не думали о HTML5(а многие ждали XTML 2.0).
Три года назад нам сказали, что HTML5 непременно к 2020 году будут использовать.
Два года назад мы узнали, что HTML5 уже можно использовать.
Год назад оказалось, что HTML5 давно все используют.
Сегодня, всё что не имеет доктайпа <!doctype html> выглядит остатками мамонтов (и пахнет точно так же).
Html5 принёс нам много-много всяких спецификаций и технологий. И хотя главное назначение html5 — это расширение мультимедийных возможностей браузера(в черновиках html5 назывался как Web Applications), всякие video и audio теги, их кодеки, canvas и WebGL, инкапсуляция(sandboxing) ифреймов и объектов, и т.п. — всё это довольно скучные для обсуждения вещи. То, что действительно интересно обсуждать — это новые семантические теги — nav, article, section, header, footer, и дюжину других.
О семантических тегах
Неделю назад(точнее уже три недели назад) вышла статья "Let’s Talk about Semantics(by HTML5 Doctor)", я настоятельно рекомендую с ней ознакомиться прежде чем читать далее.
Вот топ 10 самых популярных значений атрибутов Name и Id :
Name attribute value
frequency
Id attribute value
frequency
keywords
2,189,708
footer
288,061
description
2,100,858
content
228,661
generator
943,496
header
223,726
robots
937,844
logo
121,351
author
818,017
container
119,877
movie
530,989
main
106,327
quality
504,666
table1
101,677
revisit-after
475,765
menu
96,161
copyright
423,210
layer1
93,920
progid
281,339
В своей статье, HTML5Doctor, нас убеждают в том, что основываясь именно на данных списках и были приняты решения о внесении новых тегов в спецификацию HTML5. Однако, из таблицы видно что это не совсем так. Я очень люблю id="footer" или id="content" — но я никогда не использовала id="article". Значение "article" — находиться на 186 месте в рейтинге значений класса и на 728 месте в рейтинге значений id. Т.е. данные атрибуты используют меньше чем 0.1% вебмастеров из статистики. Я считаю что это очень показательные цифры, я не могу понять почему html5doctor ссылается на них.
Так откуда же появились новые теги? Если ответить коротко — они просто придуманы редактором спецификации html5 Яном Хиксоном(Ian Hickson). Когда я спросила его об этом два года назад, он ответил примерно следующее:
Element names in HTML have little relationship to the usage of those names
in reality, to be honest. I wouldn't pay too close attention to the
meaning of the element names in common conversation; only their definition
in the spec matters. - Ian Hickson(16 Mar 2010)
Это честно. И вполне разумно. Я верю что Ян Хиксон проделал колоссальную работу по составлению списка данных тегов и максимально конкретных описаний и примеров к ним. Однако большой проблемой является то, что все веб-разработчики по разному понимают данную спецификацию(ситуация чем-то похожа на библию). Кто-то прочитал и понял неправильно, кто-то подумал что он понял правильно, у многих вообще не было времени чтобы прочитать её, но было время прочитать статьи популярных авторов которые писали о том как поняли они, и т.п.
Также есть множество веб-разработчиков, которые считают, что в вёрстке названия как-то связаны с той ролью, которую выполняет тег. Я сама вкладываю в термин "семантика" именно такое значение. Было бы логично предполагать, что если тег a — означает anchor, h1 — заголовок первого уровня, abbr — аббревиатуру, то и тег menu — можно было бы использовать для меню, nav — для любого обособленного блока со ссылками на другие страницы и навигации по сайту, header — как шапку страницы, article хмм... как статью, а section — какую-то часть содержания, например той же статьи. Однако же можно привести примеры вёрстки, где, по спецификации, данные теги будут обозначать совершенно другое, и наоборот, можно привести примеры, где все значения соответствуют совершенно другим тегам.
Например тот же Ян Хиксон не рекомендует использовать тег <menu type="list"> для разметки меню. Вместо этого советуется <nav><ul></ul></nav> и т.п. Так же по спецификации возможно не рекомендуется использовать <nav> для разметки такой навигации как "хлебные крошки" и формы поиска, хотя для меня это было бы семантично(о чём я не раз писала три года назад тут и тут).
Что же я думаю по поводу новых семантических тегов? У них есть ряд положительных свойств:
В будущем можно действительно улучшить обработку и индексацию данных тегов поисковыми роботами и другими программами.
Ну, по крайней мере это лучше чем div.
Но есть и ряд и недостатков:
Названия элементов — не связаны с их значением. Например article — это любой объект который сам по себе представляет какой-то контент, а section — это группирующий элемент, например когда нужно связать много <article> воедино.(Тут важно группировать по смыслу, а не как визуальную обёртку ). Вместо <article> безусловно лучше был бы <zoidberg>.
Никто честно не говорит вслух — почему верстальщик должен использовать семантические элементы вместо div? Единственный ответ — "для поисковых роботов". Самому верстальщику — долгие раздумья, над тем какой тег использовать, приносят больше вреда чем пользы, imho.(За исключением конечно того, что таблицы надо верстать таблицами, а списки — списками. Прочие тривиальные вещи объяснял, например, Вадим Макеев, однако его объяснение про html5 не очень внятное). Веб-браузерам довольно всё равно какую кашу из тегов написал верстальщик. Прочие браузеры, типа машин Брайля — в России например составляют 0% от общего числа. Поэтому вёрстка html5 тегов — важна для роботов, и только.
Описания довольно размыты и их толкование во многом субъективно. В html 4.01 было меньше разночтений.
Очень мало примеров. В идеале — нужно создать сайт, html5samples — где собрать типовые примеры вёрстки различных сайтов. Блога, Каталога, Магазина и т.п. С подсветкой при наведении того, какие теги использовались и описанием почему. Если бы были конкретные примеры — тогда бы и html5doctor.com был бы не нужен. Вот Bruce Lawson например сделал html5 тему для wordpress, уже хоть что-то.
В html есть клёвые "стерильные" элементы div и span названия которых ничего не значат.(С большой натяжкой div можно расшифровать как division). Я считаю эти имена лучше подходят для html тегов чем "семантические" названия.
WAI-ARIA и Микроформаты
Это совершенно другой путь развития смысловой аннотации содержания. Несмотря на то что он менее удобный — верстальщику приходиться полагаться на атрибуты, а не на сами по себе теги — данный метод позволяет точно добавить семантику. Например у вас был код типа
<div style="font-size:30px;">some big big caption</div>
Несмотря ни на что — это полноценная html разметка. А затем вуаля
<div style="font-size:30px;" role="heading" aria-level="2">some big big caption</div>
Разметка показывает, что теперь это осмысленный заголовок второго уровня(конечно для тех же целей есть <h2>).
Нет никакой иллюзии в том что они используются в основном для поисковиков и других ботов.
Описания микроформатов всегда конкретны. Т.е. на каждый случай — свой микроформат.
Они отлично документированы.
В составлении микроформатов(например от Schema.org) активно участвуют сами поисковые системы — как следствие они уже хорошо поддерживаются ими.
Их проще понять
Из недостатков:
Их сложнее запомнить(если под рукой нет ссылки на wiki)
Они занимают больше места чем теги.(Однако когда не было CSS, всевозможное оформление занимало ещё больше места в html коде).
Эксперимент
Итак... После статьи на html5doctor я решила поставить небольшой эксперимент, касающийся в основном html5 тегов. Я сделала вот такой макет страницы каталога онлайн магазина:
и спросила некоторых известных людей как бы они её сверстали, по пунктам. Текст письма был примерно такой:
I have a question about semantic markup online store pages .
I'm wondering which tags you would use for the following items(see
attachment picture):
1) a horizontal menu of links to different pages
2) the entire block containing the page header(logo, cart block, and a
horizontal menu).
3) the block containing the search filters(the most important
navigation in curtain shop)
4) one filters block
5) block containing shop items
6) block of one items(which includes photo, item title, etc.)
7) pagination
8) page footer.
Can I quote your answer in my blog?
Thank you.
Данный вопрос я послала разным веб-евангелистам. Многие конечно не ответили(например html5doctor, работа у них такая, не отвечать на вопросы) — это нормально. Однако не ответил кое-кто кто обещал — это досадно. Впрочем я не буду называть тех кто не ответил, лучше поприветствуем тех кто смог ответить. Итак:
Итак. Кто из моих дорогих читателей любит сложные задачи? В награду, обещаю вам большую статью с моими скучными рассуждениями о семантике html5-элементов в начале недели. =)
Задание простое, но интересное. Художница нарисовала рамку диалога, для новой онлайн игры.(ссылка http://usabili.ru/news_imgs/151/border7.png ). Требуется сверстать её на прозрачном фоне, примерно вот так:
Blablabla blablabla blablabla balballa bla abl abl
Какой-то текст диалога тут
Рамка должна растягиваться по высоте и ширине. Либо в зависимости от контента, либо при заданной ширине и высоте контейнера.
Не обязательна поддержка IE.(т.е. вы можете использовать любые современные CSS технологии: мультибекграунды, border-image и т.п)
Чем меньше html-тегов тем лучше(Надеюсь у вас получиться сделать что-то элегантнее чем таблица на 9 ячеек =)).
Чем меньше отдельных файлов графики — тем лучше.(ну, про "css спрайты" вы в курсе).
Без яваскриптов
Сам контейнер будет всегда с position:absolute(это может упростить вам задачу)
Через неделю подведём итоги.
P.S. Кстати я снова открыла комментирование статей без регистрации.
Нравиться вам это или нет, но возможность перейти на старый интерфейс Гмайла утрачена навсегда. Мой аккаунт в очередной раз форсированно перевели на новый интерфейс, увы в этот раз отказаться нельзя. Мне правда не хватает старого интерфейса. Клёвых контрастных тем, скруглённых уголков вокруг основных блоков и вокруг сообщений.
Ну… насчёт скруглений у блоков — это конечно личные предпочтения. Я считаю что блок со скруглёнными краями воспринимается как обособленный, а с квадратными — как часть общей сетки. Т. е. слегка скруглённые уголки — лёгкий способ сделать визуальный акцент на элементе. Но пожалуйста не полагайтесь на это утверждение как на совет по UX проектированию, это просто моё личное мнение.
Что касается выделения основных блоков-то в интернете довольно много замечаний на эту тему, например — вот. Пример оттуда:
Старый дизайн: Новый дизайн:
В старом интерфейсе письма в цепочке более обособлены, а в новом сливаются в один текст.
Из того что мне нравиться в гмайле — переделанный поиск по почте, фильтр, более хорошо структурированный функционал и т. п.Т. е. верхние 100 пикселей шапки:
Мне даже нравятся иконки, вместо текста, которые так обругали многие, включая лебедева.
Хотя с отключёнными изображениями данный интерфейс бедноват. Ощущение что чего-то не хватает(хотя где-то в настройках можно таки вернуть текст на кнопки):
Тем не менее, вот уже полгода я предпочитала пользоваться именно старой версией гмыльца, несмотря на такую клёвую шапку интерфейса.
Также, среди багов, некоторые жалуются на непонятные иконки расширенного форматирования:
При переходе от расширенного интерфейса к не расширенному — появляются лишние переводы строк. В windows у меня всегда присутствует вертикальный скрол, даже при просмотре коротких писем.
Как вчера сообщила команда разработчиков Internet Explorer, в этом посте, компания Майкрософт пересмотрела своё мнение относительно поддержки своего браузера в Windows XP. По заявлению Гери Галахера(Ceri Gallacher) доля рынка IE слишком быстро падает среди пользователей старой системы. Цитирую:
The main problem of legacy oses users is inability to update their Internet Explorer. This the reason for a growing popularity of ie-rivals such as Chrome and Firefox.
— Ceri Gallacher, Program Manager, Internet Explorer
Обновление для Экплорера можно будет загрузить в windows update уже в ближайшее время.
Напомню что доля использование IE в россии критически упала с момента выхода Windows 7, если так продолжится и дальше, то веб-мастерам можно будет вообще не проверять свои сайты в IE.
Я абсолютно согласна с мнением Сами_знаете_кого, который определяет дизайн(§ 149), как решение какой-то задачи, а не создание красивой картинки, если только задача — не состоит в том чтобы создать красивую картинку.
Карго — в переводе«груз». Во время войны, некоторые острова Меланезии, занятые местными аборигенами, использовались в качестве воздушных баз. А разнообразный груз предназначенный для армии(одежду, еду), просто сбрасывали в ящиках на остров с самолётов. Много товаров попадало в руки островитян, которые считали их подарком богов. После войны — туземцы пытались имитировать деятельность военных — строили из дерева взлётные полосы, вышки, и имитировали деятельность диспетчеров. Мы-то, как профессионалы, знаем, что имитация деятельности не принесёт ящиков с припасами, а дикари, не разбирающиеся в предмете, верят в обратное.
Иногда, я сталкиваюсь с тем, что заказчики верят, что если в дизайне сайта сделать какой-то элемент абсолютно так же как на сайте N, то получат их известность и прибыль как у этого сайта. Это абсолютно нормальные взгляды туземцев. Моя работа в создании сайта — убедить клиента в том, что ему нужно не то что он хочет. Например чёрно-белый дизайн крупного западного магазина одежды — совершенно не подойдёт для магазина игрушек, ну никак. Не потому что не красиво, а потому что не решает задачу. Вы не потеряете клиента если будете спорить с ним, если вы будете заинтересованы в успехе его сайта. И главное ваша выгода всегда будет больше.
Случаются и дизайнеры не понимающие своей работы. Если на выходе получается красивая картинка, но не решающая задачу — приходится переделывать. Бывает что и дизайнеры верят в культ карго. Здесь спасает подробное тз, но даже после него дизайнер должен задать вопросы. Если вопросов нет — обязательно что-то выйдет не так. Подобный порядок работы совершенно не ограничивает творчество дизайнера, я считаю. Это не творческие рамки, а просто объяснение условий задачи.
P. S. Я редко пишу в бложик, потому что хочу писать только интересный и уникальный контент, а если дать материалу«настояться», оказывается что не всегда он интересный и уникальный. Плюс писать надо по делу — после вычитки и сокращения текста, оказывается длинные размышления можно неплохо сжать до нескольких параграфов. Надеюсь вам нравится =)
P. P. S. Расскажите, а какие сюрпризы вы посоветуете разместить на личных сайтах на первое апреля?
Мне интересно стало взглянуть на продуктивность моего блоговедения:
1 год — 96 статей — 681135 знаков
2 год — 28 статей — 170058 знаков
3 год — 21 статья — 178819 знаков
Количество статей с каждым годом падает, но я надеюсь, что качество растёт. Я лично за три года сильно выросла над собой в вопросах вёрстки, яваскриптов и взаимодействия с пользователями.(Я даже узнала что такое non-replaced inline elements =)).
Я долго думала что бы такое на восьмое марта сделать: выложить результаты исследований UX, показать интересные js-разработки, или просто написать что-то про технологии.
Вместо этого, пользуясь случаем, я хочу попиарить блоги очень милых девушек. А то мне в другие дни как-то неудобно кого-то пиарить.
Рейчел Нейборз(Rachel Nabors) — http://rachelnabors.com/ — работает UX консультантом, рисует прикольные комиксы и просто ведёт интересный блог.
Лия Вероу(Lea Verou) — http://lea.verou.me/ — безумно талантливый веб-разработчик, создатель скрипта prefixfree, сервисов Dabblet(аналог jsfiddle) и CSS3test.com(тест поддержки css3), веб-евангелист, борец с проприетарными css префиксами, и любительница семантики. У Лии великолепный живой слог статей, клёвые эксперементы с css-анимацией и многое другое.
Настя Манно — http://www.mannodesign.com — блог Насти посвящён дизайну, и представляет из себя смесь уроков фотошопа и подборок разных вдохновляющих плюшек, который очень приятно посмотреть, чтобы отдохнуть от всяких хтмлаяксовых сложностей. Хотя периодическое появление рекламных ссылок немного печалит. =)
Возможно я как-нибудь опубликую свой список мужских блогов, их раз в пять больше в моей фид-ленте.
А кого хотите попиарить вы? Публикуйте ссылочки в коментариях, и напишите пару слов о них.
Традиционно поздравляю всех мужчин сегодня. Поздравляю не только "защитников отечества", просто потому, что про Всемирный день мужчин или Международный мужской день сами мужчины-то обычно не знают. Желаю всем творческих успехов, здоровья и любви.
Иногда, нужно узнать на какие ссылки чаще всего кликают пользователи. Сделать это можно используя яндекс.метрику, которая показывает "тепловые карты" сайта. Однако яндекс.метрика как и любой скрипт аналитики довольно громоздка. Но что делать, когда нужно маленькое и точечное решение? Тут нам поможет location.hash, т.е. та штука которую можно передать после знака # в адресной строке. Моей задачей было узнать, как на страницы нужного типа попадает посетитель, если на неё ведут ссылки двух типов. Одному типу ссылок я добавила хеш-метку, другой остался нетронутым.
Далее, после того как пользователь попадает на страницу - мне необходимо передать статистические данные для записи. Это сделать довольно просто:
// Используется JQuery
$(window).load(function(){
...
// Интернет эксплорер не передаёт хеш, так что исключаем его из статистики.
if(!$.browser.msie)
$.get('http://usabili.ru/labs/.....?page='+escape(window.location+'|'+document.referrer));
});
Тут надо заметить что переменная window.location уже содержит в себе хеш. И вуаля. Статистика собрана. Реферер нам нужен чтобы не учитывать прямые заходы на страницу с поисковых систем, а учитывать только с конкретных внутренних страниц.
Влияние на поисковики
Отдельно хочу отметить, что использование символа # в ссылках - совершенно не влияет на поисковую оптимизацию. Хеш - совершенно игнорируется яндексом, и в общих случаях не воспринимается гуглом!
Для того чтобы хеш воспринимался гуглом - необходимо сильно постараться. Это можно сделать если ваш сайт - использует ajax для навигации, в таком случае вам необходимо начинать все хеши с восклицательного знака. Например так #!page=something. Подробнее про индексирование аякса можно почитать тут:
