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

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. Стюйвесант Паркер приводит справедливые доводы в защиту Самсунга, который нагло слизывает дизайн у Эпла.

Commenting on my previous post, Opera’s Vadim Makeev asked me to re-write it in English so that other guys from Opera could fully enjoy it. And so here are some screenshots from my dear Opera browser, which I’ve been using for years, and have just switched from to stupid Safari a couple of days ago. Safari sucks, as well as any other browser, but at least it looks good.

Here’s how Opera says it has to update:


Everything is just awesome. The copy. The order and position of buttons. The existence of Help button. But the winner is the crippled glow of «Install Now».

And here’s the update process:


This one is also great. The download speed is specified up to a tenth of a kilobyte. The custom progress bar has a brand glare. The percentage of progress is in the middle and is displayed as black on dark-blue, again with high precision. «Time remaining: 1 second» instead of «1 second remaining». Charming selection of buttons, with «Cancel» as the main one.

But the sweetest treat here is that this window is resizable:


This one is from some other version (notice how the weirdo button is called Minimize To Toolbar here).

But update is not the only thing Norwegian designers are keen at. Here’s a window stating that Opera has crashed:


All measures are taken to make sure the news freaks out the user completely. Nothing fits anywhere. The radio-button labels are centered (they should patent it!).

By the way, the default button is Send Report, which is an outrage on humanity: a browser crash is no fun in the first place, and then I have to send some crappy report? It’s kind of obvious that if you want a report, you just send it in the background and shut up. Now, if you click the button, a page opens in the browser to imitate report sending, but in reality nothing happens. I mean, i’ve typically waited for some time, with a maximum of 3 to 4 minutes, with no success. Maybe by design it needed 15 minutes to send the report, who knows? Anyway, I got used to clicking Do Not Send Report.

The icon is nifty, but if you think about it, they have designed a custom icon for a browser crash. That’s an important aspect of the user experience with Opera, so I guess that sort of makes sense.

Also, Opera is a unique application. After crashing it manages to do the impossible. I used to have its icon on the left side of Dock. And so after a crash on the right side a new Opera started jumping happily, while the one to the left stayed unlaunched. How’s that even possible? I have no clue, but apparently Opera does. Because of this after every crash it was necessary to remove the old Dock icon and then move the new one into its place.

Once the new icon didn’t appear immediately, so I clicked the old one. It started jumping, and then the new one appeared, also jumping. That was real fun, since they both started to bombard me with error boxes, saying something about conflicting resources, and then they hung so I had to force quite both. Epic.

But: they have «Unite».

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

Вот так Опера сообщает, что есть обновление:


Обратите внимание на всё: копирайтинг, порядок и расположение кнопок, наличие кнопки Help. Но особое внимание обратите на обгрызанное свечение у кнопки Install Now.

А вот так выглядит процесс обновления:


Тут тоже полный кайф везде: скорость скачивания апдейта указана с точностью до десятой доли килобайта; прекрасный кастомный прогрессбар с фирменным бликом и процентами посередине, написанными чёрным по тёмно-синему (опять же, с высокой точностью); «Time remaining: 1 second» вместо «1 second remaining»; очаровательный подбор кнопок, главная — Cancel.

Но особый шик в том, что это окно — изменяемого размера:


Это уже из какой-то немножко другой версии (видите, тут наиболее наркоманская кнопка называется Minimize To Toolbar).

Но не обновлениями едиными занимаются норвежские мегадизайнеры. Вот, например, окно, сообщающее о том, что Опера упала:


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

Кстати, по умолчанию выбрана кнопка Send Report, что является преступлением против человечности: и так браузер обвалился, а тут ещё я должен какой-то отчёт отправлять. Вроде бы очевидно, что если вам нужен отчёт, то отправляйте его там где-нибудь в фоновом режиме и заткнитесь. При этом если на кнопку нажать, то в браузере открывается страница, которая имитирует отправку отчёта, но на самом деле он не отправляется. То есть как: я ждал самое долгое минуты 3-4, процесс отправки не завершался, поэтому я закрывал всё нафиг. Может, там проектное время отправки отчёта 15 минут, надо просто подождать было? В любом случае я приучился жать на Do Not Send Report.

Иконка зачётная, но если вдуматься: это ж надо было задизайнить собственную иконку для падения браузера! Это весьма важная часть пользовательского экспириенса.

А ещё Опера — уникальное приложение. После падения оно умудряется делать невероятную вещь. У меня иконка Оперы в доке слева была всегда. Так вот, после падения, в правом конце дока начинала радостно прыгать новая Опера, а та, которая слева, оставалась незапущенной. Как так может быть — ума не приложу, но Опера может всё. Поэтому после падения Оперы всё время приходилось удалять старую иконку из дока, а новую двигать на её место.

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

Зато Юнайт есть!

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

Я думаю, что единое приложение в данном случае — полный бред, потому что Айтюнс уже и так загибается от собственной тяжести. А вот что не бред — так это, наоборот, вынести из Айтюнса функции магазина в Сафари.

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

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

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

Теперь мой сайт не ломается в Сафари. Я выучил, что в волшебную формулу, с которой начинается всякий CSS-файл

* {
  box-sizing: border-box;
 -moz-box-sizing: border-box;
}

нужно добавлять ещё одну нехитрую строчку:

-webkit-box-sizing: border-box;

Теперь в Сафари - и на компьютере, и на телефоне - всё хорошо.

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

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

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

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

Если перейти по ссылке на Ютюб, то Айфон автоматически переключится на YouTube.app и будет показывать киношку уже в нём.

Когда тыкаешь в какое-нибудь поле ввода, Айфон плавно наезжает на него, чтобы увеличить его до такого размера, при котором будет удобно в него печатать.

Когда набираешь адрес, работает "автозаполнение", то есть в списке под полем ввода появляются уже посещённые страницы, начинающиеся с того же самого.

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

Вообще, нужно отдавать себе отчёт в том, что Сафари - тупой и пустой браузер (что ещё ждать от браузера, который дует себе на стрелку). Браузер без fit-to-width на мобильном устройстве всё равно не позволяет нормально пользоваться вебом, как бы Джобс ни расхваливал его. Но fit-to-width - это ноу-хау Оперы. Будем надеяться, что когда Эплы откроют API Айфона, мы увидим Оперу мини или Оперу мобайл для него. Пока же приходится терпеть Сафари.

Впрочем, нельзя отрицать то, что отображение страницы "как на компьютере" подкупает.



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



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

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

Для решения этой проблемы Микрософты бы сделали обязательно галочку Show address bar, чтобы её можно было выключать для освобождения места; Эплы придумали более элегантное решение: когда страницу начинаешь скроллить, обнаруживаешь, что адресная строка является частью прокручиваемого контента:



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

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

Safari "beta" quality doesn't put a lot of pressure on us. As you understand we continue our focus on speed for real-life browsing (not just reality-distortion-field filtered benchmarks).

Johan Borg, Opera Software

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

WWDC 2007: Новые док, рабочий стол и Файндер в Леопарде, Сафари для Виндоуса, AJAX-приложения на «Айфоне». Как будто бы скучновато. А вам как всё это?

Вопрос: а как пользователю PC посмотреть, корректно ли отображается сайт в Safari? Есть ли какие-то браузеры под PC на том же движке? По идее Apple должны быть заинтересованы в том, чтобы все имели возможность верстать под их браузер.

(Веб-сервисы типа iCapture не предлагать, потому, что это просто картинка, а хочется посмотреть как оно себя ведёт.)

Subj.

The Web standards project has released the Acid2 test for Web browsers. It is a pretty crafty HTML+CSS test designed to ensure that browsers are properly implementing support for those standards.

Every browser fails it spectacularly. :)

I started work today on making Safari pass the test, and I thought I'd blog my progress as I fix bugs in the test. This will be a fairly slow process as whole features may have to be added simply to make one row of the test render correctly.

См. Surfin' Safari

Update: ...и чинят...

Update 2: ...и снова чинят

Lets say you have a div that is set to 300 pixels in CSS. You then put a 250 pixel wide float inside that div. Immediately after that you have a 100 pixel wide overflow:hidden div. All sizes have been specified in CSS.

Now here's the pop quiz. What do you think the layout should be? Should the overflow div:
(a) Be on the same line with the float and spill out of the enclosing 300 pixel div
(b) Be placed underneath the float, automatically clearing it because there is insufficient space for
the overflow div next to the float

Before I give an answer, lets see what the CSS specification has to say on this issue.

Surfin' Safari

Если хотите, можете скачать:

• Safrad (Ilya Birman's Edition)
• Красивая настройка тулбаров

Скин Safrad рисовал не я, я лишь немного улучшил его: сделал панели посветлее и добавил кнопки-шарики (minimize, restore, close) как в Mac OS X.

Скачать 572 КБ.