D.iK.iJ
©  2006-2016 - сайт автора
 
Ссылки Поиск Написать В избранное NO

От дикого автора

         Приветствую вас на сайте dikij.com, мой дорогой посетитель.
         Многие знают меня по нику D.iK.iJ и здесь я храню свои фотографии и фантастические рассказы, веду блог и отвечаю на комментарии. Ну и различные эксперименты по заработку, продвижению, забавные и полезные скрипты и PHP программы тоже нашли место на этом сайте.
         Гуляйте по тайным комнатам, пишите на стенах... только не теряйтесь! И возвращайтесь живым и целым Человеком.
         Интересует, что пишут о сайте? (RSS, Email). Еще можете почитать новое на N.M. И глянуть новости дня и отрывки из рассказов.
         Also, the English version of the site.

Последнее из блога

       

         Не так давно я зашел в аккаунт Google Adsense и увидел там объявление о новом формате мобильной рекламы. Было всего два варианта и всего один код.
         Я решил добавить этот код на все страницы:

(25.05.2016 blogger) Объявления уровня страницы - Мобильная реклама от Гугл Адсенс

         Тут есть как фиксированные объявления (в нижней части страницы) так и заставки при смене страницы. Да и показывается эта реклама не всем посетителям, а выборочно.
         Думаю, стоит попробовать. Хотя, пока на 30 показов - что-то никто еще не кликнул. Например, на 10 показов поиска - 1 клик уже есть.

         Раз уж я вспомнил тут про поиск. В общем, он у меня теперь на всех сайтах - через Гугл. Это я немножко «психанул» из-за отключения Яндексом рекламы в поиске по сайту. Да, она там была мне не очень нужна. Да и работала только на двух сайтах... но не приятно.
         Возможно, я потом создам отдельную страницу для поиска, как рекомендует Яндекс. Но пока - откровенно некогда этим заниматься.

         Домохозяйство
         Ну и чтобы дважды не отвлекаться, раз уж вспомнил про дела... Ближайшую неделю я тут «домохозяйствую». Жену забрали на сохранение. На мне ребенок (1,5 года) и собака с кошками. В общем, все довольно весело. Справляюсь я, кажется, неплохо, но времени абсолютно нет. Чувствую, скоро стану просто мастером отговорок «почему задерживаюсь с работой».
         Хотя, больше жалко Сашку. Вроде и понимаю, что даже на обычное кормление уходит часа 4 в день, но хочется еще и поводиться немного. И погулять с ним - тоже хочется. Но - тоже некогда. Эх.



       

         Сегодня хотел затронуть довольно любопытную для меня тему. Это влияние адаптивного дизайна на количество посетителей. Тема любопытна еще и тем, что заказчики говорят о ней мало, а статистику присылают - еще реже. Хотя, этот пункт (про наличие мобильной версии) встречается во множестве аудитов сайтов.
         Но начать я хочу немного с другого. Началось все с нескольких постов на форуме Серча, где люди отмечали, что потратили кучу времени на ускорение сайта и выполнение рекомендаций по Google PageSpeed Insights, но никаких изменений в выдаче не произошло.
         Тут напрашивается вывод, что сама скорость загрузки - не самый сильный фактор ранжирования, если он вообще учитывается Гуглом. Но ведь есть еще и «поведенческие факторы». И «юзабилити» (удобство для пользователя). И там все довольно логично. Если сайт грузится дольше 5 секунд, начинает расти процент «отказов». Посетитель просто устает ждать и закрывает страницу.
         Я отлично прочувствовал это на себе, намучавшись как-то в поездке со своим же сайтом, заметку на который нужно было добавить с телефона. Постоянная боковая прокрутка и увеличение - не самые удобные в мире вещи. Заказать адаптивный дизайн тогда было просто нельзя. А какие-то популярные шаблоны на мой табличный самопис вообще не подойдут... впрочем, я отвлекся от темы.

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

(03.05.2016 blogger) Влияние адаптивного дизайна на количество отказов - На сайте взрослой тематики

         По словам заказчика, люди стали просматривать сайт дольше, а отказов стало меньше. Даже интересно - сохранится ли подобная динамика в дальнейшем? Сам же Гугл прямым текстом обещал, что в мобильном поиске мобильные сайты будет показывать выше обычных. По крайней мере, пометка о «мобильности» содержимого там есть уже давно. Да и Яндекс в новом Вебмастере тоже выдает ошибки, если сайт не адаптивный.
         А я просто продолжаю надеяться, что статистики по этому вопросу будет больше.



       

         Я уже писал, что max-width не работает в Firefox и IE 11 для изображений в таблицах, теперь вот решил собрать в одном месте все решения этой проблемы. Пятый раз, правда начинаю писать пост и удаляю случайно.

         1) Прописываем width: 100% изображению. После этого оно начнет корректно ужиматься. Только я советую добавить height: auto. В идеале, можно еще использовать max-width с max-height. И в них указать размер картинки.

         2) Добавить таблице table-layout: fixed. После этого картинки внутри будут корректно ужиматься. Просто чудо какое-то.

         3) Можно вообще полностью избавиться от таблицы, прописав ячейкам display: block. Бывает очень удобно в адаптивной верстке, когда ячейки нужно еще и разместить друг под другом.

         4) В сети есть еще один способ. Поместить картинку в контейнер и прописать ему максимальные значения картинки... но мне он обычно не подходит. Да и проще тогда вернуться к 1 пункту.

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



       

         Так как я не очень везучий (или руки дырявые) пришлось купить Chuwi Hi12 - вместо разбитого Chuwi vi10.
         
(27.04.2016 blogger) Chuwi Hi12 - Планшетный пк Windows 10 и Android 5.1

         Больше всего в покупке помогла распродажа на Алиэкспресс и бонусные баллы. Ииначе мне бы его никогда не купить. Единственное, клавиатуру пришлось заказать у другого продавца. И она пока где-то в пути.
         Это пожалуй, и будет основная «фишка» этого планшета. С ней он превращается в полноценный ноутбук. Хоть и стоит значительно дешевле.
         Особой радости в Windows 10 и Android 5.1 я лично не вижу, так как Андроид у меня и на телефоне есть, а ноутбук планшет предполагается только для работы и моей «писательской деятельности». Да и места 2 системы занимают больше. Поэтому, вполне возможно, что оставлю только десятку.
         А вот железная задняя крышка и больший по размеру экран - откровенно радуют. Я решил работать над ошибками прошлой покупки и больше не доверять слеклянным крышкам, которые мои кривые руки так и норовят стукнуть. :) Ну и 11 дюймов - откровенно маловато для нормальной работы с сайтами и текстом. Особенно - по высоте. Да, 14 было бы идеальным решением, но и 12 мне вполне хватает.

         Характеристики:

Тип изделия: Планшетный ПК
Объём памяти планшета: 64 ГБ
Интернет: Bluetooth,Wi-Fi
Размер экрана: 12 дюймов
Порт расширения: Разъём для наушников, HDMI, TF-карта, USB
Производитель: Chuwi
Производитель процессора: Intel
Тип сенсорного экрана: Ёмкостный экран
Частота процессора: Четырёхъядерный
Особенности: Мультитач, Датчик G, OTG, Две камеры
Объём памяти: 4 ГБ
Вторая веб-камера: 5 MP
Операционная система: Windows 10
Емкость аккумулятора: 11000mAh
Модель процессора: X5 Atom Cherry Trail Z8300
CPU: Intel X5 Atom Cherry Trail Z8300 Quad Core 1.84GHz



       

         Встретил тут на одном форуме код и обсуждения на эту тему. Написал свою версию для примера.
         Так делать не нужно!

@media screen and (max-width: 768px) {
html { width: 100%; height: 150%; }
body { transform: scale(0.5); transform-origin: center top; }
}
@media screen and (max-width: 384px) {
html{width: 100%; height: 175%;}
body { transform: scale(0.25); transform-origin: center top; }
}

         Без использования зума, так как он не кроссбраузерный вообще. Да, мы просто трансформацией уменьшаем весь сайт. В примере код для 768 пикселей (и меньше) и для 384px.
         Я хотел написать скрипт, который уменьшал бы сайт автоматически, переводя ширину окна из пикселей в проценты... Но тогда шутка бы сильно затянулась. А у меня сейчас полно работы по нармальной адаптации. Без шуток.

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



       

         Как бы это странно ни звучало, но сайт spasibovsem.ru - первый в моем портфолио по адаптивному дизайну, который сделан четко по ТЗ (Техническое задание на разработку мобильной версии СпасибоВсем.ру).

(14.04.2016 blogger) Адаптация для мобильных устройств - Сайт spasibovsem.ru - по ТЗ

         Обычно делаю все «наоборот». Начинаю с больших разрешений (от 775px) и постепенно уменьшаю ширину экрана. При этом ведется работа над переносом всех блоков на сайте и их правильным «складыванием».
         Тут же пришлось начинать с «мобильного вида» на 310px, который был прописан в техническом задании. А вот поведение элементов на меньших и больших экранах - придумывать продумывать самому. Кстати, это привело к значительному упрощению «правого» меню. А левое меню удалось избавить от полного его дублирования для мобильной версии.
         Хоть работа и заняла намного больше времени, результат того стоил. Кстати, отдельно разбирался с этим новомодным выезжающим меню. Постепенно осваиваю программирование на jquery, раз уж оно установлено у всех заказчиков.

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



       

         Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.
         Это отлично срабатывало при переделке сайтов aliexpressblog.ru и nost.ru этого хватало. А вот в адаптации таблиц на topdealers.ru возникли некоторые проблемы.

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

table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;}

table tbody {display: table !important;
width: 99.9% !important;}

         А в этот раз у таблиц был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого.
         Поэтому код CSS для прокрутки таблиц был мной переделан:

table {border: 1px solid #333333; display: block !important; width: 99% !important; overflow: auto !important;}
table:before {content: ""; display: table-cell !important; overflow: auto !important; width: 1% !important;}

         Если использовать только первую строку стилей для table, таблица будет сжиматься нормально. Да и прокрутка появляется, но вот растягиваться на 100% она не хочет. Только по ширине содержимого. А вот добавление псвдоэлемента table:before c display: table-cell отлично растягивает содержимое на 100%. Причем, насколько вижу, вполне кроссбраузерно.
         Единственное, пришлось чуть изменить ширину столбцов, чтобы сайт смотрелся симпатичнее.
         Демка.

         Ну и важный момент про шрифты!
         Для прохождения проверки в Яндексе нужно в адаптивной версии сайта увеличить весь текст минимум до 12px. Иначе проверка сайтом просто не будет пройдена. Насколько помню, это доступно пока только в новом Вебмастере.