16 сентября 2016 в 19:59

Браузеры наши меньшие, или Нам нужно серьёзно поговорить

Вадим Макеев

Вадим Макеев (Opera Software)


Меня зовут Вадим Макеев ( pepelsbey). Я работаю в компании «Opera Software». Мы выпускаем браузеры, в частности, десктопные, мобильные и т.д.

Сегодня речь пойдет о браузере, который мы выпускаем, он называется «Opera mini», но я пришел не продавать вам его, я пришел рассказать про браузеры и про вещи, о которых мало кто думает.

Разговор будет не только технологический, но еще и серьезный. Я попытаюсь рассказать про серьезные вещи, чтобы вы думали о своей профессии ни «херак-херак – и в продакш», а в смысле «что и зачем» вы делаете. Это моя основная мысль.

Я, как пользователь Интернет (регулярно, много, года с 2001-го только этим и занимаюсь) испытываю проблемы, когда пользуюсь вебом. Главные проблемы состоят в том, что люди, которые разрабатывают веб (т.е. мы с вами и я лично), в некоторых ситуациях закрывают информацию от пользователя, не дают людям нормально ею пользоваться, блокируют доступ… Каждый день так или иначе это делают. Решают ли они не поддерживать «ie 6», решают ли сделать клиентский рендеринг или еще что-нибудь такое – то, что хорошо для одних, но плохо для других, и решают вместо сайта запустить нативное приложение… Это все приводит к некоторым проблемам.

Например, проблема вот такая бывает:



На этом слайде очень точно изображена проблема. Это не шрифты грузятся, это не сайт 4 метра весит, это другие проблемы. Этому сайту нужен javascript. Хотя бы для того, чтобы нарисовать что-нибудь.

Еще проблема выглядит вот так:



Иногда сайты выглядят вот так, потому что фон у body темный, но сайт не загрузился, потому что ему нужен javascript, или javascript-библиотека не подгрузилась, или браузер, который рендерит на сервере javascript, просто не может обработать все ваши синхронные события, потому что он работает определенным образом.



Т.е. доступа к информации в этих случаях никакого. Я захожу и не получаю информацию о телефоне какого-нибудь кафе, куда хочу попасть, информацию о ТВ-программе и т.д.



Это сайт ayyo.ru, каталог фильмов, где можно брать напрокат фильмы смотреть.
Я был активным пользователем, когда жил в России (я приехал из солнечной Норвегии). Когда я уехал, я продолжил пользоваться этим сайтом, в смысле, как каталогом. Там действительно хороший каталог фильмов и можно по жанрам поискать и т.д.

Когда я захожу на сайт в «Opera Mini» (я пытаюсь экономить трафик в роуминге – как бы роуминг везде роуминг), сайт мне показывает синюю штуку и говорит: «Нет».
А если я захожу на сайт и трачу весь трафик, который он от меня хочет – много, сайт толстый, он мне показывает такую штуку:



Не оптимизировано под мобильную версию, вообще, ни разу, но ей можно пользоваться. Перевернул телефон, позумил и т.д. А почему? Потому что это SPA – single page application. Зачем? Не знаю. Люди просто решили сделать. Хорошие люди, которых я знаю, компания мне симпатична и т.д. Я до сих пор пользователь этого каталога. Но они решили сделать все модно, прогрессивно, и в итоге отрезали часть людей, которые не могут пользоваться их сайтом. Это один из вариантов.

В принципе, эту проблему можно описать вот так вот:



Это, когда у сайта есть body, а в body ничего нет, или подключается javascript. Вы не даете содержимое, вы начинаете его инициализировать потом. Для кого-то это абсолютно нормальный подход, потому что javascript должен быть на сайтах. Вы говорите: «Чтобы мой сайт работал, браузер должен поддерживать javascript. Если он не поддерживает, извините, так я разрабатываю». Это ваше право – так говорить, но я показываю, к чему это приводит, и в конце доклада попытаюсь вас убедить, что это неверный подход.

В общем, а смысл делать single page application, если это просто каталог и все, что вы делаете со своими этими перезагрузками в фоне? Вы просто экономите переход между двумя html-страницами. Все то же самое можно делать клиентским рендерингом, чтобы браузер мог показывать информацию. И ниже я покажу примеры удачного исполнения таких вещей.

Такие еще сайты бывают:



Да, они совсем черные, там по-другому. В январе-декабре 2015 года, сайт meduza.io выглядел вот так в моем браузере, когда я экономил трафик или пытался сохранить страницы в оффлайне или просто на плохой связи пооткрывать много-много статей. Так выглядел сайт.
Я пожаловался разработчикам, они ответили: «А у нас все работает», а я, когда открываю, у меня все вот так.

А потому, что они используют встроенный браузер, они не считают пользователей «Opera Mini» или других прокси-браузеров своей целевой аудиторией. Прошло какое-то время, и ребята переделали сайт, и теперь у них приложение на React, оно рендерится на сервере, и в браузер дается готовая статическая версия и уже потом, с помощью всяких динамических скриптов обновляется.



1– это январь, 2– это тоже январь, а 3 – это уже весной они перезапустились. Эта последняя, 3-я картинка – это «Opera Mini». Можно делать сайты как веб-приложения, которые нормально работают в прокси-браузерах, нормально работают там, о чем вы даже не знаете. Есть очень много браузеров, очень много приспособлений и роботов, читалок, безумного всего, о чем вы не знаете, на чем вы никогда не будете тестировать. И есть принципы, которые позволяют делать под них всех.

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



  • Например, копирование текста. Вы думаете, что пользователь, прокручивая страницу, будет цепляться за текст, типа случайное выделение или еще что-нибудь такое, и вы берете и делаете так, что ваш сайт прокручивается идеально. Ваш сайт не зумится, потому что отключили увеличение текста, и ваш сайт выглядит, как приложение. Но если я захочу скопировать какой-то кусок текста и написать о вашем сайте твит, у меня не получится этого сделать. Это базовая возможность доступности информации в вебе, чтобы она была текстовая. И имитировать приложение – это мешать людям пользоваться вашей информацией, распространять ее.
  • Сохранение картинок. Картинки прячутся за прозрачными div’ами, ставятся фоном или просто как-то прячутся, чтобы их, не дай бог, не сохранили пользователи. Если вы засунули свою картинку в сайт, она все равно появится в google images, яндекс-картинках и т.д. Т.е. вашу графику все равно не спрятать, потому не прячьте свою графику от пользователей, они все равно ее найдут так или иначе. Это то же, вы скрываете свою информацию, вы делаете приложение из сайта.
  • Копирование адреса. Про адреса, которые не обновляются у сайта, хотя вы ходите по страницами, даже говорить не буду. Об этом дальше будет мем.
  • Навигация по истории – то же самое, это связано с адресом. Если на конкретную страницу вашего сайта не дать ссылку, если по сайту не перейти вперед-назад по навигации, это не сайт, это просто кусок информации, который спрятан от пользователя. Т.е. он вроде бы на экране, но до него не добраться.
  • Базовая доступность для людей, которые пользуются не глазами, а слухом для того, чтобы воспринимать ваш сайт – экранные читалки и т.д.

Я был на конференции в Варшаве недавно, и там Леона, британская барышня, которая занимается доступностью, слепая от рождения, читала доклад про доступность. Когда ты слышишь о том, как она рассказывает, как она пользуется вебом, а она активный IT’шник, она им пользуется, она делает свои презентации. Единственное, что она не могла сделать, – это нормально самостоятельно спуститься со сцены, потому что там была сложная лестница, все остальное она сделала потрясающе сама. Когда ты слышишь от человека, который по-настоящему страдает от сайтов, которые мы делаем, от кода, который мы пишем, начинаешь задумываться. Надеюсь, это тоже будет каким-то аргументом для вас. Странно, что для этого нужен человек, который на самом деле незрячий, чтобы убедить вас, но возможно у вас другие аргументы есть, и вы просто услышьте, что я говорю.

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



Вот, Олег Бунин – организатор фестиваля. У меня кто-то спросил: «Слушай, у тебя в друзьях Олег Бунин, а кто это такой?». Я говорю: «Сейчас». Открываю приложение Фейсбука, открываю его профиль. «Так», – думаю, – «сейчас надо ссылку отправить».



Так… ее можно заблокировать, написать что-то плохое, его можно ткнуть, написать ему текст и уточнить вашу дружбу, еще можно «cancel» сделать. Но:



Разработчики приложения в Фейсбуке решили за меня, что я не могу отправить ссылку, ссылку на профиль пользователя. У них есть сайт в Интернете, на котором можно скопировать из адресной строки ссылку на профиль пользователя, из приложения этого сделать нельзя!

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

Но можно же сделать лучше. Можно сделать фейсбучное приложение, правильный нейтив, можно сделать, чтобы ссылку можно было копировать, можно починить одну штуку, можно починить другую штуку, но, может…



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

Я подхожу к другой теме.
Я рассказал о боли, которая бывает, когда я пользуюсь Интернетом. Сейчас я расскажу о типе браузеров, которые вы все не любите, которые работают непредсказуемо и в них мало кто тестирует, но ими пользуются многие люди.
Есть три самых популярных браузера, которые можно сгруппировать под названием «прокси-браузеры» – UC браузер, Puffin, и Opera Mini.



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



Собственно работает это так.



Пользователь вводит какой-то адрес, адрес отправляется на прокси-сервер, который находится в нашем случае в Норвегии, в Калифорнии или где-нибудь еще. Прокси отрисовывает и отправляет результат и отправляет его сильно сжатым. Т.е. до 90% страница весит меньше. Что происходит – чуть дальше.

Результат отображается до следующего действия. Как только пользователю необходимо открыть какое-то выпадающее меню, приложение регистрирует клик, отправляя запрос на сервер, сервер рендерит этот клик у себя, отрисовывает меню и возвращает его на клиента. Т.е. вы как будто бы ждете дольше между открытием меню и появлением его у вас на экране, но в итоге получается быстрее, потому что вы грузите не 4 Мбайта, а 400 Кбайт, допустим. Т.е. разница бывает в 10 раз.

Но что не умеют эти браузеры делать? Они не умеют работать с интерактивным javascript, т.е. у всяких там сет таймаутов стоят жестко заданные значения, сколько бы вы там не ставили сет интервалов. Они не подгружают веб-шрифты, эти браузеры в своей массе. Т.е. если вы указали какой-то кастомный шрифт, он не подгрузится, либо будет использоваться какой-то системный шрифт, либо какой-то дефолтный на системе, и не работает CSS-графика.
CSS-графика – это широкое понятие – border-radius, box-shadow, градиент и т.д.

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

Ужасный браузер! Кто «радостно» верстал под Opera Mini? Кто злился, если тестировал свой сайт в Opera Mini? Я злился, я злюсь. Я разрабатываю какие-то сайты и думаю: «Какой ужас!», но я радуюсь, когда я еду в отпуск в Италию, у нас на троих одна симка на 1 Гбайт трафика, и мы по очереди пользуемся Интернетом через «Opera Mini», и нам хватает на всех до конца отпуска. Чтобы почитать информацию и чего-то такого. Ну, если, конечно, сайт не сделан как-то криво.
Браузер ужасный. Есть разные статистики, вы могли их слышать, но, мне кажется, эта статистика сегодня прозвучит впервые. Я взял и сделал срез именно по России.



Ээто все только в апреле 2015 года. За 1 месяц. Это все происходит в России. Очень много людей пользуется браузером «Opera Mini». Я пользуюсь им сам. Это, чтобы вы понимали, что это не просто какой-то браузер, который скоро отомрет, потому что ушло время, это браузер, которым люди пользуются, потому что им удобно пользоваться, потому что не у всех безлимитные тарифы, потому что не у всех быстрый Интернет.

Чуть ли не президент Ирана называет 3G главным мировым злом… Т.е. есть страны в мире, где быстрый Интернет означает смену режима и революцию. Там быстрого Интернета просто не будет через какое-то время. И там наш браузер довольно популярный. Россия находится примерно на пятом месте среди стран популярных. На первых местах находятся азиатские страны, где Интернет перешагнул этап домашних компьютеров десктопных и стал сразу мобильным. У нас этот этап был, поэтому мы до сих пор на полностью мобильный интернет не перешли.



Это самый популярный телефон в России, которым пользуются пользователи «Opera Mini». «Fly» называется. Они на своем маленьком экране, на этой безумно неудобной клавиатуре пользуются браузером.

Как вы думаете, какой второй самый популярный телефон? Вот он:



Не уверен, что он именно золотой. На самом деле я иронизирую, но он действительно второй по популярности, т.е. первой идет модель «Fly», вторым идет «Iphone», а потом идут 10 млн. других. Т.е. отрыв между разными устройствами очень небольшой. Нет такого, что есть какой-то массовый лидер, который занимает половину всех устройств в России. Устройств – бесконечное количество, но, что интересно, пользователи дорогих навороченных телефонов тоже пользуются «Opera Mini». Они могут пользоваться ей в разных режимах, но у них есть возможность просто включить и видеть, сколько Кбайтов трафика они экономят каждый день. Просто, чтоб вы знали, что это не только мобилки какие-то несчастные. Это могут быть такие лопатки 6+.



Такой телефон лежит у меня сейчас в кармане, я купил его в каком-то странном магазине, за 1400 рублей. Это самый дешевый телефон «Nokia», на котором есть wi-fi. Я купил его для того, чтобы чувствовать, как люди пользуются Интернетом, у которых нет смартфонов в руке. Это очень дешево. За телефон, у которого две симки, аккумулятор неделю живет, безумие какое-то. Там какая-то java-платформа безумная, там стоит браузер. Речь о том, что если вам нужно тестировать где-то живое устройство, лучше всего для этого подходит.



Еще интересная штука про хиленькие телефоны. Самые хиленькие телефоны, сейчас по возможностям очень сильно походят на браузеры в часах. Т.е. если вы хотите сверстать сайт для apple watch, где пока нет браузера, или сверстать для какого-то самсунговского браслетика с браузером, вы можете сверстать такой же сайт для «Opera Mini», и мощности у браузера будут одинаковые, они смогут примерно одинаковое. Это тоже будет слабенький девайс с крошечным экранчиком. Т.е. маленькие экраны – это не старые телефоны, это еще и новые устройства, которые появляются в неожиданных местах, на руках или где они появятся в следующий раз, я даже не знаю.
Так выглядит сайт медузы на этом телефоне:



Им можно пользоваться. Я кликаю на это меню, он посылает запрос на сервер, и меню показывается. Я могу на этом маленьком экранчике, этого бесконечно слабого устройства читать новости в нормальном дизайне. Ничего не разваливается, но просто градиенты не подгрузились или еще что-то такое.



На том же самом сайте Meduz’ы (я часто буду его упоминать, потому что это такой пример веб-приложения, а не просто сайта). Они сделали не шрифтовые иконки, а шрифты, как я вам сказал, в прокси-браузерах не работают. Они сделали svg-иконки, поэтому делайте svg-иконки, ребята, потому что, во-первых, это просто правильно, потому что это имеет смысл, это графика, а не шрифт, во-вторых, это работает в браузерах, это более совместимый способ.

Но у них есть немножечко другая проблема. Когда я открываю сайт, прокручиваю то, что я сегодня показал в браузере, я вижу такие черные дыры.
Браузер «Opera Mini» нормально показывает картинки на сайтах, но не показывает фоновые картинки, потому что фоновые картинки – это оформление. Т.е. когда мы задаем какую-то штуку фоном, мы говорим, это градиент, еще что-то такое, когда мы говорим про содержимое, мы говорим img, это содержимое с точки зрения html, и содержимое этот и другие браузеры показывают, а фон – нет. Но ребята на Meduz’е, я у них спросил, они говорят: «Нам так удобнее». Ну, а фоновую картинку, где там бэкграунт сайз хавер задал, она сразу сама подстроилась. То же самое можно сверстать с помощью img, спозиционировать и т.д.



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



Картинка на сайт как сделана… div class=«NewsEntryImage», ну, ок, класс. Дальше data-reactid… ну, это веб-приложение, ему нужно там инкапсулировать ла-ла-ла, компоненты каким-то образом трекать. Не суть. Дальше всякое такое странное. Потом начинается атрибут style, дальше background-image дается, т.е. так они вставляют на страницу картинку img, т.е. содержимое, то, что пользователь должен увидеть вместе с заголовком, то, что должно загрузиться и прочитаться, то, что должно нормально быть увиденным. Но прячется, потому что браузер думает, что это оформление.

Т.е. браузер ожидает одно, а разработчик ему дает другое. Что интересно: они используют множественные фоновые изображения, и они в одной картинке подгружают точечный фон, точечки в рябь над фотографией, а тут же загружают картинку, т.е. они берут, смешивают оформление и содержимое в одном описании. Т.е. ребята просто фигачат интерфейс.

А как выглядит ссылка на эту новость? А ссылка выглядит вот так:



… Link—independent, тоже нормально – reactid… href, в ссылке есть href – круто, это, правда, не всегда бывает. Ссылка продолжается, ссылка закрывается. У ссылки нет содержимого, это пустая ссылка. Лежит блок с новостью, а под блоком с новостью просто лежит ссылка, и она спозиционирована поверх блока с новостью. И когда человек, который слушает вашу веб страницу подойдет к этой ссылке и спросит: «На что ссылка?», голосовой браузер скажет: «Ни на что». И я не знаю, что он точно скажет, но ссылка будет вести в никуда, это будет просто визуальная спозиционированная ссылка в никуда с url.

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

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



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



Нет. Все тестируют в браузерах, которые лежат в кармане и на ноутбуке, на котором вы разрабатываете. Ни у кого такой лаборатории, если не работаешь в Яндексе или в какой-то крупной конторе, которая сильно ориентируется на это, так же Mail.ru очень сильно запаривается с тестированием. Такого девайс-лаба ни у кого нет. Соответственно, это все просто не работает. Т.е. ни доводы про семантику, ни объяснение людям, что нужно тестировать страницы не только в карманном браузере, это просто не работает.
То, что работает, хочу предложить вам я в конце доклада. То, что, надеюсь, сработает, но это нужно воспринять.

Попробуйте воспринять код вашего сайта как API. Вы подключаете у себя на сайт Яндекс-карту, и вы идете, читаете документацию, и там написано, что этот ключ такой параметр дает, этот метод возвращает такое-то значение… Вы читаете документацию и строго по документации пишете свой код. И раз – у вас получается классная внедренная карта, Google-карта, Яндекс-карта. Вы взяли API, который вам предоставил Яндекс, Google, использовали его, получился предсказуемый результат. Тот html-код, который вы пишете, – это тоже API.



Вы говорите всему открытому миру: спека для вас документация по этому API. И вы отдаете не просто браузеру, в котором вы хотите тестировать, вы отдаете всей истории нашего Интернета. Весь наш Интернет, все наши девайсы, браузеры, программы, любые устройства работают по спецификации, они работают по документации к этому API, и они ожидают, если вы используете картинку, она будет вставлена как img, если она будет содержимым, если она будет оформлением, она будет вставлена фоном, если вы используете ссылку, значит она будет вести куда-то, она будет иметь содержимое href и т.д. Т.е. все, что описано в спецификации – это API.

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

Что делают браузеры «Opera Mini», «UС браузер», «Puffin» и т.д.? Они читают спецификацию и думают: «Разработчик будет указывать оформление так, содержимое так, и, зная, как он будет делать, мы сможем с этим что-то сделать, правильно интерпретировать, правильно оптимизировать и т.д.». Поскольку разработчики «воруют и убивают» в своем коде, соответственно происходят провалы. Соответственно вам не нравится то, что вы видите в прокси-браузерах, возникают сложности – пользователи не видят содержимого и т.д. и т.д. А если вы вообще не отдаете никакого API, пустой body, соответственно, вы, вообще, не используете этот API… Инжектите с помощью javascript, и это просто не работает.

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

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



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

Об этом можно читать и слушать дальше:


Если вы просто плюнете на эти ссылки, но захотите посмотреть хотя бы одну, посмотрите первый доклад «This Web App Best Viewed By Someone Else» Эрика Мейера. Очень важный доклад, прочитанный им, по-моему, в марте или в феврале. И другие статьи можно будет прокликать.

А это ссылка на презентацию:



Контакты


» pepelsbey
» Блог компании Opera

Этот доклад — расшифровка одного из лучших выступлений на конференции разработчиков высоконагруженных систем FrontendConf.
Автор: @olegbunin
Конференции Олега Бунина
Похожие публикации

Комментарии (188)

  • –5

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


    Ваш чудо браузер не поддерживает JS? Сделайте поддержку JS. Статьи на хабре и выступления на конференциях не изменят веб в одночасье, если вообще что-то изменят. Мы уже проходили это с XHTML.


    Ваш чудо браузер вырезает фоновые картинки, считая их оформлением? Пилите более интеллектуальные эвристики. Например, не считайте оформлением картинки вставленные в html, каким бы способом они ни были туда вставлены.


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


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

    • 0
      Поддерживаю. Сам ходил с Nokia N70ME с 2007 года до 2015. Конечно же с Оперой Мини. И по факту прогресс OM остановился где-то в 2010 году. И я простил бы все тормоза новых версий, если бы там появились фичи, которые были «обычной» опере для Симбиан того времени. А сейчас OM больше отдает ностальгией по временам, когда я готовил курсовые с помощью своей N70 и Оперы Мини. Не потому что у меня не было ПК, а потому что я жил за забором в военном институте и это было единственным средством связи. Но сейчас проблема трафика актуальна разве что для труднодоступных районов. Простите, но китайский Андроид доступен в любой деревне, если это не за Северным полярным кругом. Проблемы безнадежно слабых процессоров и малой RAM давно в прошлом.
      • +8
        Очень жаль Вас, ребят. Вы наверно не читали статью или не поняли её.
        Автор против деградации веб разработки.
        Ведь веб был создан специально для разных классов устройств, и в том числе для устройств которые не имели интерфейса или не умели рисовать графику, для того чтоб для всех этих классов устройств не пилить нативные приложения!
        Скажем прямо что на Андроид смартфонах среднего ценового сегмента всякие быдлолендинги и прочие одностраничные урезанные жертвы масштабирования могут и будут тормозить.
        • +3
          Определитесь к кому вы обращаетесь. Ко мне лично («вас» с заглавной — знак глубокого личного уважения в личной переписке) или к другим комментароам («ребят» — множественное число).
          Если по делу, то:
          — Автор путается в мыслях и словоблудит.
          — Я не оправдываю кривой код.
          — Автор предлагает заняться некрофилией и писать сайты с учетом их отображения в OM на экранах чуть ли не 128х128.
          — Я предлагаю этим не заниматься
          — Автор сетует на текстовые кнопки и иконки, предлагает рисовать из в SVG. Потому что текстовые порой криво отображаются в OM.
          — Я предлагаю не ныть, а пилить свой OM, потому что SVG иконки — нагрузка на бюджет. И нищеброды, типа меня, не могут себе это позволить. Да и не хотят.
          — Автор говорит о быдлокоде, пустых body-тегах и так далее.
          — Я осуждаю быдлокод.
          — Но я предлагаю показать эти сайты в «обычных» браузерах десктопов и мобильных устройств. Если там все работает номально — домиливайте свой OM и не морочьте людям голову, что все беды из-за быдлокода.
          — Автор ссылается на «правильный», но неоптимизированный код с багами. (пустые урлы на Медузе).
          — Я предлагаю выпустить тулкит для разработчиков, эдакий граммарнази для кода, автоматический тестировщик сайта. Что угодно, что будет намекать на специфику восприятия сайта Оперой Мини в разных аспектах и задавать некий стандарт. Если они этого делать не собираются, то пусть не морочат людям голову.
          • 0
            Согласен с каждым Вашим утверждением, жаль плюсовать не могу.
          • +1
            — Автор сетует на текстовые кнопки и иконки, предлагает рисовать из в SVG. Потому что текстовые порой криво отображаются в OM.
            Не текстовые кнопки, а иконки, сделанные через веб-шрифты. У них и правда куча проблем и ни одного достоинства (по сравнению с SVG-иконками). Если, конечно, не считать поддержку IE8 достоинством, где всё равно надо деградировать много вещей кроме иконок (PNG-версии которых можно генерировать автоматом).
            — Но я предлагаю показать эти сайты в «обычных» браузерах десктопов и мобильных устройств. Если там все работает номально — домиливайте свой OM и не морочьте людям голову, что все беды из-за быдлокода.
            Включите VoiceOver в Safari и вдруг обнаружите, что те же ни пустые ссылки, ни фоновые картинки не работают. Это нормально, по-вашему? Вообще голосовые читалки работают как раз в обычных десктопных браузерах. Так что дело в плохом коде.
    • +1
      боюсь что js не взлетит на слабых устройствах. Для проверки всё есть.
      • –2
        боюсь что js не взлетит на слабых устройствах.

        Так исполняется на сильных устройствах (терминальный сервер, если не понятно).


        Для проверки всё есть.

        Что всё? Вот открываю я DevTools в хроме — там только "посмотреть как будет выглядеть в айфоне".

        • +1
          мои мысли так далеко ушли что ответ на вашу мысль займёт много букофф. Я просто много лет занят разработкой под опера мини и мне всего хватает.
    • 0
      Ваш чудо браузер не поддерживает JS?

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

      Ваш чудо браузер вырезает фоновые картинки, считая их оформлением

      Невероятно, но мой последний-распоследний хром также считает их оформлением, если попытаться страницу распечатать.Если вы заглянете миниопере в server:console (кстати, к вопросу об отладке), то по нотайсам «browser.js применил фикс 9572» видно, что эвристик там выше крыши. Использовать для вставки изображений тег img в первую очередь разумно, так же, как разумно использовать стандартные контролы вместо колхоза из HTML-разметки и скриптов, там, где их функционала достаточно.

      И да, миниопера всё ещё выручает при поездках в захалустье, где лучшее, на что можно рассчитывать — EDGE. Плюс выполняет функции read later — там спокойно можно держать открытыми кучу сайтов в фоне.
    • 0
      У этих ваших «чудо-браузеров» больше 300 миллионов пользователей только на андройде с Google Play, не считая даже другие маркеты, системы и «недотелефоны».
      • 0

        Если вы говорите об этом браузере, то это один из десятка браузеров под Андроид на базе webkit, который, очевидно, замечательно всё везде показывает, если не включать "экстримальный режим", в котором половина веба просто перестаёт работать.

  • –12
    Поддержу предыдущий комментарий.

    Если браузер не поддерживает JS в 2016 году — это проблемы браузера, а не разработчиков.
    Сайты с — это нормально, потому что в некоторых случаях реально удобнее сделать SPA и нет смысла в индексации. А не нужна индексация — не нужен .

    Я, как веб-разработчик, принципиально не буду писать под браузеры без JS, под древние телефоны, на которых нет нормальных браузеров. так же я не буду писать сайт для людей с ограничеснными возможностями, если считаю, что им «этот сайт» не нужен. Да, я решил за них, такой вот я злой.
    Хотя, я делал сайт для людей с проблемным зрением. Знаете какой это ад? А знаете сколько человек им пользуется? Еденицы.

    Вы бы еще предложили писать под lynx.
    • +10
      Возможно для тебя это «еденицы», но для этих единиц твой сайт целый мир.
      • –14

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

        • +11
          А ждать, что весь мир вдруг начнёт думать о единицах — довольно глупое занятие.

          А я считаю, что в этом и есть суть цивилизованного общества. Видимо мы все еще в дремучих веках. Печаль.
          • –6

            Вы видимо давно не выходили на улицы..


            1. Министр образования и науки — богослов.
            2. По теологии дают научные степени.
            3. За ловлю покемонов в храме — сажают.

            Всё очень, ОЧЕНЬ плохо.

            • +1
              Одной страной весь мир не ограничивается.
              • –2

                В какую страну посоветуете перебраться?

            • +3
              Все так, только это не значит то это правильно и это не нужно менять. Особенно когда это возможно.
            • +2
              Несмотря на это, сайтами образовательных учреждений теоретически могут пользоваться слабовидящие — это прописано в требованиях к сайтам, за соблюдением которых следит Рособрнадзор. Другой вопрос, что пока проверяется лишь наличие версии для слабовидящих, а не её качество, но, думаю, когда-нибудь и качество станут проверять.
          • 0
            Сами-то вы, конечно, давным-давно слезли с разработки SPA-приложений и пишете только с учетом браузером для слепых и слабовидящих. Правда, всего неделю назад разработку этих самых SPA-приложений обсуждали.

            В вашем прогрессивном цивилизованном глазу, кажется, застряло дремучее бревно.
            • 0
              Я прокомментировал определенное высказывание.

              А SPA приложения мало чем отличаются от desktop приложений, просто используют для отображения браузер, это уже не старый добрый web с гипертекстом.
            • +2
              Я от разработки под веб бесконечно далёк, поэтому простите за немного глупый вопрос, но SPA — это аббревиатура от single-page application?

              То есть, «SPA-приложение» расшифровывается как «одностраничное приложение-приложение»?
              • +1

                Да.

        • +3
          В статье же написано про слабые устройства — вы думаете их единицы?
          Вы же предлагаете запилить для них «чудо-броузер» с JS и блэкджеком, который любой кривой код должен смотреть.
          Не правильней ли следовать стандартам??

          Да, а под lynx тоже бы неплохо оптимизировать)
          • +2
            Все зависит от ЦА сайта. Если основная аудитория это юзеры со слабыми девайсам (в какой-то Африке, например), то оптимизировать под них будут. А если таких пользователей 1-2%, то вряд ли под них будут писать отдельные решения или адаптировать основное.
          • –2

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


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

        • –1
          Думаю этот коммент минусуют лицемеры — вот каждого к стенке прижать и спросить: а что ты сделал для людей с ограниченными возможностями?
        • +1
          Чем именно вы не довольны? Лично вас никто не просит что-либо делать. Ваш негатив не делает ничего полезного. Если не думать о каждом конкретном пользователе то зачем тогда думать вообще о ком-то? Например зачем пользователям вас лично уважать, ценить и рекламировать? Люди сделают выбор в пользу кого-то другого и пусть у видящих людей больше возможности увидеть ваши продукты в более хорошем свете — прочитав это они или некоторые из них захотят найти кого-то друго-го кто так не выражается и поддержать альтернативные проекты.
          • –2
            Чем именно вы не довольны?

            Вам показалось.


            Лично вас никто не просит что-либо делать.

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


            Если не думать о каждом конкретном пользователе то зачем тогда думать вообще о ком-то?

            Если не можешь жить вечно, то зачем вообще жить?


            Например зачем пользователям вас лично уважать, ценить и рекламировать?

            Зачем социопату их уважение, оценка и реклама?


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

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

            • +2
              И суровая правда по вашему это «всем плевать на пользователей»? Если у вас плохая работа где вам не дают быть тем кем вы хотите — найдите другую работу. Нет другой работы? Создайте её сами! Вы тут перекладываете своё отношение на якобы отношение заказчиков. Вам плевать не только на пользователей но и на своих клиентов — заказчиков. По большому счёту. Вот может быть вы об этой правде?
      • –7
        Ну, я же писал, что вот такой я злой. К сожалению, сайты — это в основном бизнес или хобби. Ни то, ни другое не ориентировано на еденицы.
        Да и не разработчики сайтов должны об этом думать.
      • –1
        Все определяется бизнесом. Возможно, стоимость разработки версии для браузеров без JS не стоит очень небольшой аудитории, ради которой эту версию можно сделать. На одной чаше весов отзывчивость приложение, а на другой стороне небольшой бонус к аудитории. Маловероятно, что этот бонус весит больше, чем отзывчивость приложения.
    • +5
      Разметка создавалась не для красоты а в большей степени для описания содержимого. Вопрос может не в том для кого мы делаем сайты, а в том что мы сами загоняем себя у тупик не следуя стандартам. Вот примеры почему еще нужно следовать стандартам:
      • Я лично до сих пор встречаю ситуации когда нужно воспользоваться текстовым браузером типа линкса
      • бывает что страница которую я искал в поисковике уже удалена. и я могу открыть и почитать сохраненную копию. Но только если теги использовались правильно.
      • Я знаю уйму людей которые не хотят включать js в силу своей паранойи. Но они есть.
      • Ок. бывает просто cdn на котором хостится ваш фреймворк упал. Пока вы не исправите проблему пользователь не сможет ничего увидеть


      Я привел те примеры которые я встречаю изо дня в день. Наверняка есть еще. Всяческие сервисы которые позволяют сохранять сайты для последующего чтения, например. Почему все они обязаны знать про JS если мы работаем с HTML. Основной посыл автора который я услышал — это скорее вопрос ко всем: «Почему мы ставим оформление выше чем информацию?». Разве мы покупаем книги для того что бы полюбоваться картинками? Мы хотим получить информацию.

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

      Пока писал этот комментарий нашел еще один интересный вариант. Сам поисковик ищет информацию по тегам а не по оформлению. И, да, я знаю что гугл пообещал что будет читать SPA приложения нормально. Но на выходе у меня был пример когда гугл не мог догадаться как обчитать сайт потому что вместо ссылок использовались события onclick, везде. Ни одной ссылки. Google виноват что автор приложения не подумал о такой мелочи?
    • –1
      Вы бы еще предложили писать под lynx.
      Вот не знаю, воодушевлю я вас, или расстрою. Links не поддерживает вкладки.

      image
      • +1
        А при чем тут я? Я говорил про Lynx, а не Links
    • 0
      А как насчет браузера Tor? JavaScript в нем может быть вполне отключен в целях безопасности. Учитывая последние нехорошие тенденции в рунете очень много людей может начать им пользоваться.
      • 0
        Когда хотя бы 1% пользователей сайта будет без JS, тогда заказчики будут требовать работоспособность сайтов наравне с кросбраузерностью и адаптивностью.
    • +3
      Lynx (а также links и elinks) — прочему нет-то? Я как веб-разработчик тестирую свои сайты в разных браузерах — и в линксе тоже.

      Кстати, возможность для сайта быть прочитанным либо услышанным посетителем со слабым зрением — это не прихоть разработчика, которую он может реализовать, если захочет, а может и забить — это иногда и обязательное требование. Например, сайты российских государственных образовательных учреждений обязаны иметь версию для слабовидящих, если основной сайт плохо виден таким посетителям.
    • 0
      А не нужна индексация — не нужен
      сайт.
      Дописал, не благодари.
      • 0
        Вообще, там пустые теги body, просто хабр их съел.

        В общем-то, я понял настрой местных разработчиков. С удовольствием ожидаю наплыв сайтов для инвалидов. Как думаете, сколько минусующих меня их будет делать? Я думаю, ни один из них.
        • 0
          Я вообще не сайтописатель. За единственный свой сайт мне стыдно, рад что он умер. Но почему-то я всё же делаю приложения чтоб пользователю было удобно. Даже если у него мышки нет.
  • +19
    Когда-то очень давно у меня появился телефон, sony ericsson k310i, и он поддерживал opera mini. В те студенческие времена у меня не было компьютера, интернет был только в университете за деньги в час, которые я себе редко когда мог позволить. Но у меня была opera mini, которая настолько экономила дорогой GPRS, что мне это было по карману, даже когда я просиживал часами в интернете. За это хочу сказать большое спасибо разработчикам этого замечательного браузера, тонны знаний были получены с помощью него через маленький экран кнопочного телефона.
    • НЛО прилетело и опубликовало эту надпись здесь
  • –8
    Если браузер не поддерживает стандарты — это проблема браузера, и разработчиков этого браузера, но никак не проблема разработчиков сайтов, которые используют современные возможности, имхо
    • +23
      Выводить текст каринкой, например, — это не стандарт. Делать переход по страницам/пунктам меню без изменения адреса, так что нельзя дать сохранить ссылку на страницу — это не стандарт.
    • +13
      Современные возможности это что? Та лапша от разработчиков медузы, которая приводится в презентации?
    • +1
      Скажите, в вашем современном браузере
      А это ссылка на презентацию:
      открылась эта ссылка? Ведь разработчик нам явно сказал что это ссылка, да и выглядит как ссылка. Может вашему браузеру уже пора на покой?
      • 0
        В самой презентации это именно что ссылка. Вы смотрите расшифровку с перепечатанными слайдами.
        Другой вопрос, что в Опере-мини презентация в принципе не работает…
  • –6

    Сейчас народ хочет 4к@60fps видео на ютубе, а не текстовый веб ради экономии трафика. Времена медленных каналов, слава богу, прошли.

    • +6
      Народ захотел 4к@60fps когда ему рассказали что так можно и что это круто. При этом большинство даже с торрентов качают 720p/1080p @24fps максимум.
      • +2
        Вы подумайте хорошенько про какой «народ» вы говорите. Не гики ли это часом? Которые получают удовольствие от самого осознания крутости их вундердевайсов, которые поддерживают 4к@60fps, от крутости технологий, которые под этим лежат? Обычного человека такое не вштыривает. Его будет волновать стоимость монитора/телевизора с таким разрешением, скорость закачки такого видео и пр.
        • +3
          Истина где-то между:
          Видел я одних товарищей, которые покупали телевизор. Хотели хороший и больше, в магазине им впарили 4к, что вполне соответствовало требованиям. Фильмы, правда, все еще смотрят в HD/FHD, потому что в 4к и искать дольше, и кинца не особо много, и размер всего этого забивает гвоздь в крышку гроба.

          Вот вам и 4к, вот вам и новые технологии
          • 0
            Оффтопик: 4k не совсем новая технология, она пришла в кинотеатры довольно давно, с появлением цифровых кинотеатров. Другое дело, что в домашних хозяйствах она появляеться только сейчас. Впринципе все фильмы что выходят в кино существуют и в 4к и в 8к версиях, не знаю правда насколько их реально достать физическому лицу.
        • 0
          Наверно именно поэтому у каждого третьего iPhone сейчас, притом у большинства взятый в кредит
          • 0
            Потому что айфон это статусная вещь, а 4K нет. 4K ты перед девушкой в парке не помашешь.
            А айфоны покупают старых моделей, б/у, восстановленные, даже поддельные.
            А сколькие с айфонами с битым стеклом ходят — смешно смотреть
      • +5
        Угу. 25 минут видео про то, что помещается на половину листа А4.
        Вчера смотрел обзор на тплефон и плевался. Текстового описания толком нигде не нашёл и через 15 минут ютуба стало понятно что время потраченно зря.
      • 0
        При этом большинство даже с торрентов качают 720p/1080p @24fps максимум.

        Чаще всего, даже для относительно новых зрелищных фильмов/мультфильмов раздачи в 480p по количеству сидов сильно опрережает другие форматы.

    • +4
      То, что они прошли у вас (а есть ли в этом хоть капля ваших засуг?), еще не значит, что они прошли у всех. И в статье, которую вы видимо прочитали по диагонали, об этом прямо сказано.
  • +14
    А я вот до сих пор пользуюсь Opera Mini. Много, реально очень много.
    Недавно на хабре статья была про 5G — так вот у нас много где и EDGE толком-то не работает. И вот там Опера — это спасение просто.
    В любой дороге — в поезде, в самолёте (10 мб за $5, Аэрофлот — привет!), в блаблакаре через пол-Европы, запад Украины (там, кстати, с 3G на удивление неплохо всё стало, lifecell рулит), Беларуси и России от Смоленска до Кемерово — всюду Мини дичайше выручала.

    Про роуминг я вообще молчу — $15 за 10 мб трафа — привычное дело у большой тройки. И Вы не поверите — иногда приходится им пользоваться.

    Жизнь есть и за пределами городов, а по мнению некоторых людей — она только там и начинается.
    • 0
      вот как раз хотел что то такое написать.
      собираюсь потестить теперь его в местах со слабой связью.
    • +1
      Я знаю место (и иногда бываю там) всего-то в сорока километрах города с миллионным населением, где живу — там не что 3G — там и GPRS не работает, и голосовая связь не проходит.
      • 0
        И как там Опера Мини, хорошо показывает?
  • НЛО прилетело и опубликовало эту надпись здесь
    • +4
      «Я не прошу, чтобы сайт стал проще для парсинга, понимаете?»
      реальные пацаны не просят? )
      т.е. вставать на уши и парсить кривой сайт на дохлом телефоне с дохлым каналом, вместо того что бы попросить его «создателей» следовать таки стандартам — это по пацански, да? )
      ну… в гамаке и стоя…
      • 0
        Старая Опера долго просила, чтобы под нее адаптировали сайты. За пределами рунета (и может еще каких-то регионов), всем плевать было. Итог — адаптировалась Опера, похоронив свой движок и успев расстаться с большей частью аудитории. А в рунете адаптировали т.к. большая доля была.

        Так и сейчас. Браузер с маленькой аудиторией что-то там требует? Да плевать все хотели, адаптируйся сам или уходи с рынка. Другое дело, если под хром или сафари надо допилить.
      • 0
        Давайте ещё и ие6 учитывать, и оперу десятую, по такой логике.
  • 0

    Как мне кажется в CSS легче управлять background'ом чем img в блоке. И текст поверх изображения проще сделать. Недавно только добавили описание для изображений на сайте. Теперь ссылки не пустые но не все.

    • 0
      LOL. Если учесть, что до появления background-size растягивающиеся фоны 10 лет как-то делали с помощью позиционирования IMG
      • 0

        Но этож не значит что это было легче.

        • 0
          Куда уж легче задать img width:100% внутри ссылки с overflow:hidden
          • 0

            А если не известно что будет больше высота или ширина (изображения и контейнера)? Потом отступ снизу надо победить плюс если картинок несколько подряд надо между ними пробелы убрать чтоб задать фиксированные отступы.


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

            • 0
              >А если не известно что будет больше высота или ширина (изображения и контейнера)?
              10 лет назад такого вопроса не стояло

              >Потом отступ снизу надо победить плюс если картинок несколько подряд надо между ними пробелы убрать чтоб задать фиксированные отступы.
              Нить разговора потерялась

              >Ещё у меня на фоне показывается картинка низкого разрешения поверх которой крутится индикатор загрузки а на переднем плане загружается изображение высокого разрешения. Как это предлагаете реализовать в img без скриптов?
              Использовать прогрессивный jpeg. Наличие гифки со спиннером сильно критично для семантики, да
              • 0

                В общем у img много недостатков для обхода которых нужно писать css костыли.

                • 0
                  Конечно же пустые ссылки, спозиционированные поверх картинок, положенных фоном имеют гораздо меньше недостатков :)
  • +2
    приложение на реакции

    на самом деле приложение на React-e
    • –2
      Пофиксил, спасибо
  • 0
    что делает Джесси Пинкман на обложке?
    • –1
      Клёвая фотка, не правда ли? :)
  • 0
    Opera уже сталкивалась с тем, что многие не хотят адаптировать сайты под ее нестандартные фичи. Вроде дошло, даже движок прикрутили популярный.
    Нет вот опять, разработчики сайтов плохие, что не хотят поддерживать какие-то фичи непопулярного браузера, которые даже не все пользователи этого браузера используют.
    Вы не Гугл и даже не МС, забудьте об этом. Или адаптируйтесь к сайтам сами или они будут глючить у ваших пользователей и вы будете терять аудиторию. А то синхронные события не могут они обработать. Ну не обрабатывайте, пользователи найдут другие браузеры.
    • +6
      Повторите это в лицо той незрячей девушке, о которой упоминалось в презентации? Скажете ей, что она будет всю жизнь жить без Интернета, потому что вам нравится какой-нибудь очередной sexy js-фреймворк?
      • –4
        Опера специально привела такую девушку на презентацию? Типа чтобы принудить веб-мастеров таки адаптировать сайты под их кривой браузер? Это не работает, Опера уже в этом вроде как убедилась. Пока ты маленький — следуй стандартам, а не пытайся изобрести свои и с помощью слепых девушек заставлять воспринимать эти стандарты всерьез.

        Да, я общался со слепыми девушками и, думаю, что смогу объяснить ей, что проблема в кривом браузере, который недостаточно популярен, чтобы диктовать вебмастерам, как им делать сайты мимо стандартов. И что ей стоит поискать альтернативу Опере, а не вестись на пропаганду ее евангелистов.
        • +1
          Opera вообще для слепых не предназначена, насколько я понимаю. Думаю, у них какие-то специальные программы.

          Кривой браузер… А вы купите Nokia Lumia 520 и попробуйте сёрфить на старом IE и 512MB RAM. Или посмотрите с какими телефонами ходит Индия и Африка — а это миллиарды людей и их будет только больше, а уж в Сети их доля растёт нелинейно.

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

          Я недавно пересел с Lumia 520 на телефон с мощным SoC, Android 6 и 5-дюймовым экраном. Только из-за веба. Хотя по сути ту информацию, которую я привык получать каждый день, можно эффективно и удобно получать через Telegram-бота
          • 0
            Ну вы считаете, что Медузу можно реализовать как-то не так, как это сделали ее разработчики — реализуйте. Сделайте себе парсер и пользуйтесь.
            Они решили, что реализовать какие-то фичи или ускорить разработку важнее, чем поддерживать какую-то возможность, используемую частью аудитории браузера, которая вообще составляет единицы процента от общей и падает. Имеют право. В худшем случае, лишатся этих пары процентов, что пользуются Оперой.турбо и добавят гораздо больше за счет удобного в остальных браузерах сайта.

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

            Опера умирает и активно теряет аудиторию. Куда ей еще требовать что-то?
            • +1
              В презентации даже цифры есть. 12 миллионов уникальных пользователей в России за один месяц 2015 года. Это почти 10% населения страны.
              • 0
                В презентации и не такое нарисуют.
                http://www.liveinternet.ru/stat/ru/browsers.html?period=month&id=25&id=32&id=23&id=22&id=12&show=rebuild+graph&per_page=100&report=browsers.html%3Fperiod%3Dmonth вот вполне показательный график и тренды.
                • 0
                  Похоже скоро это будет не разработка на HTML+CSS+JS и даже не разработка сайтов, а разработка для WebKit. А ещё через некоторое время все будут мечтать похоронить Web вообще вместе с этим вебкитом, который превратится в жрущего ресурсы и батарейку монстра, для которого выпускают обновления безопасности каждую неделю. Точно как сейчас с Flash.
                  • +1
                    Будет глючным и жрущим батарею — будут искать ему альтернативу. А так, он опенсорсный, многие компании могут вносить в него нужные изменения по части эффективности рендеринга. Опера вроде тоже этим хвастается в соседнем посте.
                    Если будет только Вебкит, вебмастера вздохнут с облегчением. Это не отменит конкуренцию у разработчиков браузеров, зато здорово упростит жизнь за счет того, что 99% api у браузеров будет совпадать.
                    • +5
                      Сами потом взвоете от этого гуглонета
                    • 0
                      Если будет только вебкит, веб точно умрёт, т.к станет доступен только для машин с 16ГБ памяти, процем последнего поколения и SSD. Потому что там явно приоритет скорости разработки над оптимизацией.
                • –1
                  я вижу, что браузер opera mini популярней браузера айфончика, а вы?
                  • –1

                    Вы видите, что 1.5 > 13.9? Ок...

                    • 0
                      • 0

                        Внимательнее смотрим:
                        http://prnt.sc/cj0kgo

                        • +3
                          ок, это я проглядел, спасибо. кстати, ваш сервис скриншотов яркая иллюстрация статьи выше — без джаваскрипта не работает.
            • 0
              Т.е. вы сами признаёте, что «лидеры рынка» не следуют стандартам? Так может хотя бы попытаться хотя бы немножко исправить ситуацию, а не включать капиталистический битчинг?
              • –1
                В данном случае, стандартам не следует аутсайдер рынка. И почему-то требует, чтобы это учитывали владельцы сайтов. «даже если» это не о данной ситуации.
                • +1
                  Статью не читай @ комментируй?
        • +22
          Вы идиот? Вы понимаете, что Макеев говорил про стандарты веба, которые позволяют, при их соблюдении, пользоваться интернетом даже слепым с помощью речевых браузеров и Опера тут вообще не причём?

          Это вопрос доступности. То есть вопрос соблюдения сайтами веб-стандартов. Именно про это говорил Макеев. А не про кривые браузеры, которые существуют только у вас в голове.

          Почитайте про то, как слепые вообще пользуются компьютером и насколько для них критично соблюдение стандартов разработчиками, а потом рассказывайте про кривые браузеры.
      • –4
        Согласен. Я вообще считаю, что за использование JS-фрейморков нужно вешать, четвертовать и сжигать. Это как же, пользоваться свободой выбора, делать что-то в своё удовольствие, не учитывать что-то? Наказывать за такое пора. Мрази.
      • 0
        Тут у меня есть новость в тему. Вкратце: есть в Америке такой институтик, Berkley University. И была у него такая привычка: все свои лекции преподаватели записывали и выкладывали в Ютуб, для всех. Так вот, пришла им грамотка из Департамента По Защите Инвалидов. Грамотку эту я понять не могу, но суть её вот в чём. Поскольку глухие люди не могут слушать эти лекции, то существование этих лекций даёт неглухим студентам других вузов неоправданное преимущество над глухими. И поэтому лекции нужно убрать. И Berkley University послушались и обещают убрать лекции с Ютуба в ближайшее время.
        Комментариев у меня нет, я занят выяснением того, как срочно скачать с Ютуба пару терабайт и не быть забаненным.
        • 0

          Ну на Ютубе есть возможность прикрутить субтитры. Даже есть автоматические. В чём проблема поднапрячь студентов и преподавателей и записать их?

        • 0

          Ин нужно либо вообще универ закрыть, либо в каждую аудиторию сажать сурдопереводчика. Мало ли в неё зайдёт глухой и ничего не услышит :-)

    • –1
      Вспомнилось мне два принципа:
      «Выбирать инструмент под задачу, а не наоборот»

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

      Про какие нестандартные фичи вы говорите? В этой статье просят соблюдать стандарты HTML- чтобы картинки были в img, чтобы ссылки содержали в себе информацию о странице, на которую они ведут, чтобы браузеру отдавалась страница с корректным содержимым в <body>, а не пустой тег и 4МБ яваскрипта. Требования простые и правильные.
  • +4

    А ненажимаемая ссылка на презентацию в конце — это такая ирония?

  • +14
    Дело вообще не в опере. Обычный человек не знает как всё работает и не знает как всё могло бы работать. Если бы знал, программисты получали бы раза в 2 меньше, чем сейчас. Потому что зависания, вылеты и уязвимости перестали бы восприниматься как природное явление типа дождя.

    Обычный человек скажет «телефон тормозит». А я инженер и программист и могу посмотреть исходники страницы или открыть профилировщик FIrefox (запомните мои слова — через пару лет все будут шельмовать Firefox также как сейчас шельмуют Opera — у этих людей всегда будет кто-то другой виноват в том, что их говнокод не работает нормально). И от того, что я вижу у меня регулярно случается депрессия от состояния отрасли и общего подхода к созданию сайтов.
    • +4
      FF будут шельмовать т.к. он работает не так, как браузеры на основе Вебкита. И под него какие-то вещи надо допиливать. Как бы ок, когда за ним 30-40% аудитории. Не ок, когда единицы процентов. Через пару лет FF может вообще с рынка уйти, статистика у него весьма печальная: http://www.liveinternet.ru/stat/ru/browsers.html?period=month&id=32&id=12&show=rebuild+graph&per_page=100&report=browsers.html%3Fperiod%3Dmonth
      • 0
        А вы часом не оборзели с такими предъявами?
        • +5
          График не красивый или что?)
      • 0

        Очень надеюсь, что blink переломит ситуацию.
        Mozilla делает много интересных и открытых проектов.


        ЗЫ пользователь Chromium

      • 0
        Я упёртый и преданный пользователь Firefox начинания с первых версий, но сейчас они делают всё чтобы я ушел с него.
        Браузер тормозит на компьютере с core i7, ssd, 16 ram и профилем на рам диске. Открываешь одновременно джиру и файрбаг, потом закрываешь файрбаг и вуаля всё становится пошаговым.
        • 0
          файрбаг

          Скоро не будет поддерживаться же. Переходите на встроенные инструменты и включите многопроцессную работу, становится намного легче.
          • 0
            А как включить многопроцессорную работу? Встроенный инструментам далеко до Firebug и консоли того же Chrome, или что-то изменилось за последнее время?
            • 0
              А как включить многопроцессорную работу?

              Так же, как и всегда.
              Встроенный инструментам далеко до Firebug и консоли того же Chrome, или что-то изменилось за последнее время?

              Появилась тема FireBug и вкладка DOM ))
              По возможностям FireBug давно проигрывает встроенным инструментам, там ни отслеживание эвентов на вкладке инспектора, ни замеров производительности, я уж молчу про отладку всяких шейдеров и аудио.
              А вот по удобности FireBug всё ещё впереди планеты всей. Со следующей версии во встроенные инструменты обещают добавить многострочную консоль, но работы в этом плане ещё много.
  • +15
    Очень-очень-очень сильно, неистово плюсую автору, но прекрасно понимаю, что с такой точкой зрения мало кто согласится, типа «не мейнстрим это».

    У меня самого был не так давно удивительный пример — я хотел проверить НОМЕР ЗАКАЗА, который я разместил в магазине, чтобы мне было проще сообщить его на выдаче, и я наивно решил, что я это сейчас «быстренько» прямо по дороге к стойке выдачи сделаю через телефон на сайте магазина.

    Удар №1 — инет тянет еле-еле. Такая вот география в довольно холмистом районе + внутри бетонной коробки торгового центра. Ни о каком 4G речи даже нет, дай бог, чтобы ПРОСТО работало. И это — не палатка посреди леса, а крупный торговый центр в ближних пригородах немаленького города в Штатах.
    Удар №2 — главная страница сайта сделана как раз в виде SPA и (как я потом уже посмотрел) грузит мне без спроса при заходе чуть ли не всю «галерею популярных товаров со скидками» метров на 5 размером
    Удар №3 — всё это крайне меееееедленно крутится на отнюдь не помоечном, а вполне приличном смартфоне на Киткате 4.4, причём, пока все скрипты не подгрузятся, на экране нет НИЧЕГО, кроме какой-то крутилки а-ля «ждите ответа».

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

    Так что я, конечно, понимаю, что разработчики их мобильной версии сайта из солнечного Бангалора наверняка тестили его исключительно на айфонах, подключенных к интернету по гигабитной сети и (о, ужас) никак не подозревали, что кому-то придет в голову воспользоваться их сайтом в магазине их же сети, где инет будет тянуть со скоростью 20-30 кбит/сек, но реальность-то несколько иная…

    Кстати, вот так как-то получилось, что за последние полгода я больше в том магазине не покупал вообще ничего. Скорее всего, случайность, но, возможно, вот это отвращение и злоба в тот момент осели где-то в глубине подсознания и сейчас фильтруют этот магазин из всех моих списков :-)
    • 0
      Удар №2 — главная страница сайта сделана как раз в виде SPA и (как я потом уже посмотрел) грузит мне без спроса при заходе чуть ли не всю «галерею популярных товаров со скидками» метров на 5 размером

      Меня в этом плане больше убивает сайт PSN, там при загрузке грузится 3-4 мегабайта json в архиве!!!
      А всё потому, что они туда выгружают абсолютно всё и ещё рекурсивно.

  • –18
    Я попробовал открыть в OperaMini адрес http://192.168.23.20:8123/
    После чего снес нафиг эту штуку.
    Вы пишете на айтишном ресурсе для людей, которые выходят за рамки фейсбучновконтактовой таргетгруппы о том как ваш браузер хреново работает.
    За самокритику 5, за браузер 1-
  • +1
    Конечно же, доступность — это правильно и нужно, но в рамках же разумного.
    Есть стандарты и руководства (WCAG) и, конечно, здорово, когда эти стандарты применяют на практике. А вот конкретно при разработке под Opera Mini с ее проприетарными изысками, зачастую страдать и отказываться от современных инструментов/подходов представляется неразумным.
    Ибо время потратить надо, нервную систему расшатать надо, а в бюджет не заложено и заказчику плевать на тот мизерный процент пользователей, которые знают на что идут, используя определенные браузеры в 2017 году.
    • –1
      да хосспадя, ключевое слово «заказчику плевать» — плевать что он теряет часть аудитории и получает снижение активности в принципе.
      потому что кому охота лицезреть тормозящий сайт на своем телефоне.
      ну что — тупой заказчик, но вы то должны понимать.

      я вот кстати не уверен что процент «мизерный», это просто не охваченная аудитория или места.
      и общее поганое впечатление от сайтов в мобильной версии.
      • 0
        Что понимать?
        Ключевое слово — «любой каприз за ваши деньги».
        • 0
          Думаю lexy хотел сказать, что не стоит отождествлять себя с заказчиком в частности и ЦА в общем.
  • 0
    Кстати, если есть возражения — возражайте в дискуссии, пожалуйста. Я действительно не понимаю призыв разработчиков OM игнорировать прогресс. Если хотите — мейнстрим.

    Представитель компании сетует на шрифтовые иконки и предлагает заменять их на SVG. Хорошая идея! Meduza с её годовым бюджетом 1,7 миллиона долларов может себе такое позволить. Что делать нищебродам, таким как я, которые раншье юзали Оперу Мини от бедности, а теперь шаблон с Themeforest за 50 долларов на свой магазин покупают. А там, черт подери, иконки шрифтами. Опять же, новостной сайт должен быть априори как топор — простым и доступным. Что делать малобюджетному e-commerce? Включать правило 80-20.
    • +2
      Наверное потому не понимаете, что считаете прогрессом рендерить страничку текста тонной js кода. Нет, не прогресс это, не забивайте голову.

      На самом деле хвост разных «непрогрессивных» браузеров и девайсов очень огромен и только растет, не говоря уже о тех, у кого для каких попало сайтов js отключен. Давно пора рассматривать примитивную страничку без js как просто еще один media query, причем дефолтный.
      • 0
        Я не предлагал писать громоздкий, неоптимизированный код с игнорированием стандартов. Не путайте. Автор публикации заявляет о принципах доступности. Это хорошо. Но веб не стоит на месте. Развиваются технологии, развиваются устройства. OM создавалась как инструмент для обеспечения доступности. Сейчас это не совсем так.
        Нам показывают айфон 6 с Оперой Мини и заявляют, что это второй по популярности аппарат на который устанавливают сабж. Почему нам не говорят на какие сайты ходят владельцы таких аппаратов? Неужели пользователи ставят то, что ограчичивает функционал устройства? Вероятее всего, владельцы современных устройств не только хотят сэкономить трафик или просто смотреть сайты. Их цель — избавиться от рекламы, а в последнее время — еще и получть доступ к заблокированным сайтам. Сейчас поставил OM на свою пятерку и зашел на Ютуб, а затем на свой кхм-кхм.сайт, который на шаблоне за 50 баксов с темфореста. Да, полупрозрачности не работают, но всё отображается корректно и главный функционал не пострадал. На ютубе видео смотрятся, на сайте товары покупаются. И за это разрабам респект. Будет ли работать всё так же на каком-нибудь N70? Нет, да и не должно.

        Но в статье-то говорят о крайних случаях типа «мы не можем обработать ваш js и запихнуть в экран nokia 6101, чтобы работало и там. Плохой код, фуфуфу». В подтверждение правоты показывают «код студента» с пустым body.

        Повторюсь, я не за быдлокод на сайтах. Я поддерживаю идею доступности, но не в том виде, в котором её подают разработчики OM.
        • +1
          Ещё один «чукча не читатель».
          Разработчики ОМ не предлагают вам делать какие-то изверты чтобы сайт работал в ОМ.
          Они только и просят что следовать стандартам.
          Пустой боди — не стандарт.
          Пхать релевантные иллюстрации в фон — не стандарт.
          Сайт на котором не одной ссылки зато 100500 onclick — не стандарт.
          Городить одностраничное ПРИЛОЖЕНИЕ для сайта новостей — не стандарт. Потому что это не приложение.
          Подход хуяк-хуяк и в продакшн — ну нихрена не стандарт!
          /cc vintage esc
          • –1
            А какие нестандартные возможности браузера используют spa сайты (с пустым body и генерацией страницы на js)?

            Почему onclick не стандарт, если по клику происходит что-то отличное от загрузки новой страницы?

            Современные сайты это уже давно не только гипертекст. Кого-то это может не устраивать (всегда что-то кого-то не устраивает), но любой прогресс многих людей в принципе не устраивает. Им сложно принимать любые новшества и хочется чтобы было по старому. К счастью, решить не им.
            • 0
              Этот «прогресс» был еще 15 лет назад, если не раньше, DHTML назывался. Были еще одностраничные сайты целиком на флэш, жалкое зрелище.

              Сейчас прогресс скорее в юзабилити, A/B тестах, аналитике, быстрых чистеньких легковесных сайтах нацеленных на результат. Раньше об этом вообще не думали.
          • 0
            Подход хуяк-хуяк и в продакшн — ну нихрена не стандарт!

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

            • 0
              С таким подходом и с раком бороться не надо, и с тяжёлыми наркотиками, и с коррупцией, и с мафией…
              • +1

                Евангелистскими статьями вы всё это не победите.

          • 0
            Вы меня совсем невнимательно читаете. Перечитайте, пожалуйста.
            Но если даже смотреть на проблему со стороны нетрадиционной программной ориентации (пустые body, о которых вы говорите), то почему же все эти кривые сайты нормально отрисовывают «большие» браузеры, а затруднения возникают в OM и ей подобных архитектурах «клиент-сервер-клиент».
            Я веду речь о том, что условиях жестких аппаратных ограничений и постоянного прогресса со стороны веб-технологий, разработчики рано или поздно встанут перед выбором. Пытатсья «впихнуть невпихуемое» или же отказаться от поддержки определенной программной платформы.
  • +1
    Объясните в чем проблема написать и поднять на своих «прокси-серверах» парсер js сайтов? С последующим сжатием в микроверсию путем проброски чистой статики в Опера Мини, а назад только действий пользователя?
    По сути некий аналог RDP протокола но для HTML/CSS/JS?
    Да будут нехилые такие затраты на сервера и «сеансы» пользователей но это же идея для монетизации!
    • 0
      Я пользовался опера мини очень давно, однако какой-то парсер js уже тогда был.
  • +1
    Во времена Dial-Up'а джава-скрипты на сайтах мне очень досаждали, и я их просто отключал в настройках браузера Internet Explorer. Почему бы в Opera Mini не сделать такую функцию? Захотел (имеешь толстый канал) — включил, захотел (не имеешь толстого канала) — выключил. Можно даже расширить перечень отключаемого в соответствии с появившимися новыми технологиями, которые в данный конкретный момент и на фиг не нужны. В чем проблема? О самом браузере Opera Mini могу сказать, что пытался ставить его на смартфоне, но он мне не понравился и я снес его почти сразу. Чем не понравился, уже не помню — может быть, именно кривым изображением сайтов. Если бы там в основном окне была большая кнопка, которая позволяла бы включать и отключать разные очень полезные и современные свистелки и перделки, было бы понятнее, в чем проблема. А так — просто не показывает, и всё. Догадайся сам, почему.
    • 0
      Почему бы в Opera Mini не сделать такую функцию?

      Потому что в браузер передаётся не изначальный HTML, а весьма пожатый и переделанный код, и в Opera Mini нету DOM?
      • 0
        Но есть же вариант Opera, работающий с html? Одна контора, прикрутили бы там код этого варианта, если первоначально сайт криво отобразился, нажимаем кнопку, грузим через дополнение.
        • 0
          Проще поставить этот браузер и грузить через него.
          • 0
            Проще. Но медленнее, во многих случаях.
      • 0

        Потому, что в Opera Mini стандарт (HTML) только между сервером сайта и сервером Opera. Между последним и клиентским устройством пользователя 100% приприетарщина от Opera. И они сами решают, что там должно быть, а чего нет. И как в "это" должен преобразовываться стандартный HTML/CSS/JS. А так же, что нужно видеть пользователю, а что не нужно. Разумеется исключительно ради блага самомо же пользователя. Беда еще и в том, что завтра появится фирма Ballet Maxi, которая будет делать все то же самое, только по своему. Разумеется "гораздо лучше", чем Opera Mini. И что тогда? Разработчикам придется пользоваться только тем что одинаково хорошо работает и там и там?
        Итак, есть стандарты, принимаемые W3C и разработчики браузеров или реализуют их (полностью) или нет. А обращаться к разработчикам веб-сайтов с призывам "давайте не будем так делать, мы не можем/не хотим это реализовывать" так же глупо, как заняться выпуском скрипок с одной струной (чтобы можно было играть одним пальцем) и укороченным грифом (чтобы можно было положить в карман), а потом обратиться к композиторам с просьбой "учесть это в своем дальнейшем творчестве".
        А то, что к пиару своих поделок эти ребята привлекают еще и инвалидов стыдно вдвойне. Никто не спорит с тем, что доступность сайтов должна обеспечиваться в максимально возможной степени. Но тут мы слышим нечто, напоминающее требование "запретить музыку, т.к. слабослышащие ее не слышат, живопись, т.к. слабовидящие ее не видят и литературу т.к. альтернативно одаренные ее не понимают". В общем профанация.
        Прошу прощения за резкость.

  • 0

    С оперой-мини, лично я, чаще всего сталкиваюсь в таблицах совместимости для различных технологий. Ну и, чаще всего, там все "красненькое". Н-да — думаю я, и больше не сталкиваюсь с браузером "опера-мини". Право каждого человека — самому выбирать, насколько его присутствие в сети должно быть полноценным. И если человек покупает один из тех телефонов, которых так много в вашей статистике, значит он сознательно отказывается от многих возможностей. И это вопрос не финансовой доступности, так как сейчас полно очень дешевых смартов на Android. А трафик я экономлю тем, что мои сайты получают голые данные через API. Я еще могу долго рассказывать почему меня мало волнуют пользователи с плохими телефонами или вообще без телефонов, но главные ответы тут лежат на поверхности: поддержка чего-то — исключительно вопрос целесообразности, и целесообразность эта — чаще всего экономическая.

  • +5
    Для тех, кто делает сайты по фен.шую должно быть специальное место в раю. Потому что это адский труд.
    И спасибо Вадиму за то, что в наш век реактов и ковровых бомбардировок, он пытается нести в мир доброе и светлое: напоминание нам всем об основах веба — доступности.
  • 0
    Срочно кто-то должен сделать новый фреймворк, соблюдающий феншуй старого доброго веба!!! На месте оперы я бы так сделал — стал бы продвигать ещё один js-комбайн. А не говорить, что вокруг все зажрались. И никаких проблем.
  • 0
    Ну, а фоновую картинку, где там бэкграунт сайз хавер задал, она сразу сама подстроилась. То же самое можно сверстать с помощью img, спозиционировать и т.д.
    Кстати, а как сделать background-size: cover с помощью img? object-fit не работает в ИЕ (и даже полифил для него не работает). Получается надо только скриптами вымучивать.
    Вот лично я бы и рад семантично верстать, но в вебе настолько тяжело сделать интерфейс, что вся верстка превращается в жонглирование костылями.
  • 0
    Плюсом ко всем кулстори, что увидел выше. Опера мини — это единственный браузер со встроенной читалкой QR-кода. Ни сафари ни хромой этим похвастаться не могут.
    Вот Opera Coast перестал пользоваться, ибо много умничает и за меня решает, что мне интересно будет. И никаких настроек, как будто я эппло-бой какой-то.
  • 0
    Всем тем, кто пишет, что виноват браузер, а не разработчик сайта: Вам известно такое понятие как «доступность вэб-контента (Web Accessibility)»? Видимо, нет.
    • –3

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

      • 0
        Почему-то мне кажется, что будь вы из категории тех самых «ограниченных пользователей» ваш комментарий выглядел бы по другому.
        • +1

          Разве что если бы я был ограничен на голову. :-) Иначе бы уже пилил во всю своего Джарвиса.

  • +3
    Как можно вообще выпускать в продакшн сайт который не отображается при выключенном Javascript? Это все равно, что не предусмотреть ручное управление при разработке самолета. Я вообще считаю, что сайт должен отображаться даже с отключенным CSS, просто выдавая голую разметку. Продукту нужно давать «запасы прочности» и предусматривать «защиту от дурака», тестировать совместимость, отображение на различных дисплеях и разрешениях, etc, как можно это не брать во внимание?
    • –1
      Я бы сказал «это при разработке самолёта не предусмотреть возможность заправлять рапсовым маслом.» Зимбабве негодует, им бы очень пригодилось.
    • +2
      И без выключенных картинок. На нынешние сайты в таком режиме без слёз не взглянешь.
  • 0
    Совершенно согласен, что стандарты нужно соблюдать. Однако утверждение автора о необходимости проверять во всех браузерах, в том числе неполноценных, весьма сомнительно. В первую очередь зависит от назначения сайта. Одно дело википедия, другое онлайн офис. Стоит ли его запускать на звонилке? Нет

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

    Учитывая фиксированные величины в виде денег и времени на разработку нет смысла убиваться над legacy, лучше выкатить хорошо сделанный продукт для основной аудитории. Что касается прелоадеров, то надо вспомнить, как раньше сайты скакали и другались по мере загрузки даже в настольной опере. Бывает страницу успеешь промотать, а потом простыня текста уезжает на неизвестное науке расстояние.

    И вообще, кто сказал, что пользователи на разных устройствах должны иметь равные возможности? Я уверен, что человек, покупающий в 2016 году кнопочник не ставит интернет в первую десятку потребностей. Тем более полноценную поддержку всех фишек. Он даже видео на html5 и flashне увидит, только плакать не станет.
  • +2
    Да вот чёрт его знает. Я, например, люблю писать сайты по таким рекомендациям. Я всегда всё пишу «с нуля» под каждый заказ. Да, я люблю велосипеды. Потому что мне кажется, что проще и быстрее каждый раз написать с нуля, грамотно и качественно, с поддержкой стандартов, обратной совместимости и с неограниченным расширением функционала по требованию. Но в итоге, у меня нет работы, никому это не надо.
  • +5
    Давайте будем честны…
    Современные HTML5 сайты плохо работают в Opera Mini по одной простой причине — Opera Mini для серверного рендинга использует, заброшенный 4 года назад компанией, движек Presto. За четыре года веб измениился, сильно. Переписать на Chrome движек компания так и не смогла, хотя разговоров куча было.
    Несмотря на все попытки компании самый крупный источник дохода остался тот-же — Presto. Однако в текущее время он в состоянии «дойной коровы», люди которые создавали его — уволены, разработка «браузеров»(а по другому современную оперу — скин для хрома — я назвать не могу) перенесена в Польшу(дешевле).
    Дошло до того что оперу купили какие-то китайцы, нет денег даже на корпоративный блог на хабре:

    -->


    «Смена движка произойдет под капотом, пользователи ничего не заметили» — ага, действительно ничего о кампании опера больше не заметно.
    https://habrahabr.ru/company/opera/blog/169239/
    А ведь когда-то именно эта компания участвовала в создании современного веба.
    «Спасибо» эффективным менеджерам и прочим манагерам.
    • 0
      Призываю в диалог pepelsbey
      • –3

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

        • +6
          Это не диалог, это обиженный монолог мимо темы.

          Ну как это мимо темы? В Opera Mini едет верстка, причем обычно именно из-за заброшенности Presto.
          Компания продолжает участвовать в создании современного веба, только гораздо более успешно и прагматично — в рамках проекта Chromium.

          А можно увидеть конкретный вклад «сейчас», и увеличение его по сравнению с «раньше»?
        • +7
          Но ведь Chromium- путь к монополии и застою веба.
    • 0
      А какая последняя версия на родном движке, не помните?
      • +1
        12 версия — последняя на Presto
    • 0
      meduza без проблем в нормальной опере открывается. Так что проблема явно не в этом.
  • 0
    Здравствуйте. Я — тот, кто пользуется Opera Mini версии 7.6, которую уже, видимо, и в Play Market не найти. И меня всё устраивает в моём повседневном её использовании. Кроме всё чаще появляющихся предложений установить что-то ещё:



    При этом нажатие на «Нет, спасибо» надолго не помогает, реклама (или что это?) снова появляется уже через несколько открытых страниц.
  • 0
    Мысли в статье правильные. Но что-то я не верю, что веб повернёт в правильное направление. Думаю, веб в будущем — это хаотический клубок тормозящих технологий, которые уже никто не будет понимать. Нагромождение бессмысленных модных интерфейсов, которые никому не нужны. И приложения победят, так как вебом уже невозможно будет пользоваться, и придется держать сотню-другую приложений, чтобы получать нужную информацию.
    • +2
      И только пацаны которые делают сайты которые не тормозят, а просто работают всегда будут при деле и цениться. А сами сайты получат некую лейбу, которая будет говорить о том что перед вам не говно.
      • –3
        Этого тоже не будет. Щас в цене люди, которые делают сайты под ключ, и решающий фактор — цена. Отсюда популярность конструкторов.
  • +1
    А еще они сильно грузят комп и жрут ОЗУ. noscript самое востребованное расширение для любимой лисы.

    Спасибо Вадим, прекрасная статья! Рад что вы развиваете mini.
  • +2
    Я всегда считал, что основная информация сайта и навигация должна быть доступна без JS, Flash и прочих плагинов. Мало ли что: JS-файл не подгрузится, пользователь не дождётся загрузки или просто отключит JS (некоторые сайты вызывают сильное желание сделать это), код не заработает в каком-то из браузеров — и всё, сайт больше не работает. И я считал, что все так думают.
    • 0

      Ну уж давайте и CSS туда же. И вообще, надо завязывать с HTML и всем WWW переходить на Markdown. sarcasm off

      • 0
        Ну да, сайт должен выдавать информацию и с пользовательским CSS (в опере presto такое было). Меньше рюшечек, больше дела.
  • 0
    Какое-то у меня де-жа-вю… Где-то я уже это читал или слышал. Слово в слово. Несколько (до 5) лет назад.
    • 0
      Вспомнил. Frontend Weekend от UAWebChallenge где-то летом 2015. Вадим там выступал с тем же докладом.
      Судя по Google, он с этим докладом уже второй или третий год по разным конференциям ходит. Двоякие эмоции испытываю по этому поводу.
      • +1
        от этого он менее актуальным не стал, увы.
  • 0
    «Здравствуйте! Я работаю в Opera Software, нашим браузером Opera mini все еще пользуются, но наши браузеры не умеют в такие штуки, которые вы делаете. Поэтому вы, ребята, так не делайте.»

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

    Если я то же самое предложу 2му заказчику — он внимательно и с интересом выслушает, но откажется, сказав «Аудитория, которая не может себе позволить смартфон с нормальным браузером мне не интересна — она либо неплатежеспособна, либо в Италии. Что первые, что вторые мне безразличны. Я — владелец магазина одежды в Хабаровске.»

    Если я предложу это третьему заказчику, он, узнав что это займет в 2-3 раза больше времени, скажет «Мне до фонаря, мне надо чтобы сайт работал вчера. Я — организатор фестиваля электронной музыки, который состоится через месяц, и чем быстрее мы запустим рекламу с адресом сайта, тем лучше.»

    В общем, такие вещи оставьте Яндексу, RT, Госуслугам, и прочим, у кого есть достаточно ресурсов и оснований для выполнения такой работы.
  • 0
    Эта же прекрасная статья и сама же сильно нарушает принцип доступности. Почему тут текст в виде картинок? где альт к нему (а желательно вообще дублировать подписи текстом).
    Например я лично очень много статей с Хабра/GT «читаю» не глазами, а используя Text-to-Speach на Andoid (использую Pocket). и часто большая печаль, что невозможно понять чего-то когда автор подает важные куски информации в изображения.
    • 0
      кстати, да!
  • 0
    Пользуясь случаем, поскольку отзывы оазработчики не читают, хочу попросить разработчика мобильной версии Opera (не mini, а обычной какбы полной версии) для Android.
    Прошу вас:
    1) верните в Opera кнопки «на предыдущую страницу (назад)» — [<] и «на следующую страницу (вперёд)» — [>] когда включен режим «телефон»;
    2) сделайте так, чтобы при прокрутке страницы вниз не исчезала панель адреса с кнопкой вкладок — неудобно переключать вкладки, когда кнопка вкладок скрыта и чтобы её отобразить — надо прокрутить страницу вверх, повторяю — это крайне неудобно;
    3) сделайте полное отображение вэб-адреса, включая «http(s)://».
    4) можно ли как-то сделать, чтобы некоторые сайты принимали этот браузер как за компьютерный? Некоторые форумы на компьютере открываются нормально, а если с мобильной версти Opera, несмотря на то что в настройках включено «desktop», всё равно открываются в мобильном виде, где не видно подписей пользователей форумов и т.п.
    Все эти функции можно сделать опциональными, кому надо — включат, кому не нужно — оставят как есть.
  • +1
    Всё. Приехали.
    Сегодня покупал билеты на сайте S7 Airlines. Он не работает нигде кроме хрома!!! В последней версии Firefox он просто не реагировал в некоторых случаях на нажатия мышкой по кнопкам, Карл!
  • +1
    Всё правильно написано. Поддерживаю. Сначала html, потом расширение через javascript

    Насчёт приложений и сайтов я в 2013 году говорил такое — И про мобильные приложения… снова
  • 0
    Долгое время использовал Opera на десктопе, но теперь не использую. Я консерватор, когда речь о затратах моего драгоценного времени. Принципиально не хочу обновлять версию и не буду, пока не захочу. Какой-то софт может быть для меня настолько не важен, что затрачивать на него лишнее время не вижу необходимости. Пользователь привыкает к софту и если он его устраивает, то не нужно навязывать ему обновление. Мне возразят про защищенность и исправления, но это мое дело и мой риск. Верните пользователю возможность один раз отказаться от обновления.
  • 0
    Редкого здравомыслия и актуальности статья. Так держать.

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

    То же самое происходит и с разработкой ПО. Юнец вдохновленный дешевыми эффектами и модными непонятными названиями навроде Jquery, Angular, Dojo и иже (несть им числа) со страниц популярных коллективных блогов, бросается бездумно копировать замысловатый код (а затем и стиль) чтобы почувствовать себя причастным к величию, как он полагает, прогресса, не отдавая себе отчет, что копирует самые поверхностные его проявления, не стоящие ничего и не делающие его ни на йоту профессионалом.

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

    PS как же раздражает невозможность проплюсовать статью, написанную (всего!) несколько дней назад.
    Это, к слову, тоже имеет отношение к написанному выше. Покуда, вопреки «мудрым» предположениям маркетологов этого бложика не стимулирует посещаемость, но объективно снижает качество контента (поскольку голосуют либо случайно зашедшие читатели, либо откровенные бездельники, проводящие дни на пролет в тщетных попытках вычитать «смыслы» в блогах, вместо какой-бы то ни было полезной и осмысленно деятельности).
  • 0
    У меня к разработчикам Opera Mini один вопрос — Когда Presto научится компилировать RegEx в JavaScript?

    Это тоже скорость. И это умеют все движки. Даже Opera начиная с 15 версии (потому что на WebKit переехала)

    Но Opera-то Mini до сих пор на Presto.
    • 0
      НИКОГДА
      Престо забросили, и сейчас выжимают последние соки из когда-то прорывного движка.
      Когда престо совсем перестанет работать с современным вебом (осталось совсем немного) OperaMini которую мы все знаем умрет следом.
      Хром/Блинк/ИлиЧтоТамЕще монолитный кусок г..., который нельзя использовать для серверного рендинга как можно было использовать гибкий Престо.
  • 0
    Есть ещё два незаметных класса программ плохо работающих с хипстерскими SPA-сайтами на react: веб-архиваторы (даже продвинутые с браузерным движком под капотом вроде webrecorder.io и archive.is) и веб-аннотаторы (вроде marker.to, hypothes.is).

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