D.iK.iJ

D.iK.iJ
dikij.com
fb: dikij87
tw: DiKiJcom
dikij
dikij_com
Рейтинг
239
Регистрация
26.05.2013
Должность
Человек-оркестр
Интересы
Занимаюсь адаптивной версткой сайтов, а в свободное время делаю симпатичные кулоны с опалами.
Делай что должен. И будь оно... просто будь! 💬 Когда будет срублено последнее дерево, когда будет отравлена последняя река, когда будет поймана последняя птица, – только тогда вы поймете, что деньги нельзя есть. 💬 Лучший момент, чтобы посадить дерево, был 20 лет назад. Второй лучший момент - сейчас.
Оптимизация сайта для планшетов и телефонов - 2
tommy-gung:
в bootstrap есть пример с обертыванием таблицы дивом - http://getbootstrap.com/css/#tables-responsive
как по мне такой вариант предпочтителен, таблица останется исходной

Конечно предпочтительнее!

Зачем, если можно обернуть все в обычный div со стилями? :)

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

Да, перепроверил прошлый свой пример. Там 1 колонка слишком сильно ужимается. Действительно нужно ставить в стилях ширину для каждой, либо прописать что-то наподобие width: 1%; тогда браузер сам подберет размер. Хотя, не очень люблю этот вариант.

---------- Добавлено 06.04.2016 в 02:45 ----------

Ragnarok:
запилите онлайн демку?

Блин. Я ее удалил уже. Вот сделал вам новую со всеми примерами: http://dikij.com/test2.php

Никаких красивостей и дополнительного кода. Только таблицы и как на них влияют разные стили и методы адаптации.

Юмор: приколы, баяны, картинки, видео. Часть 35

6666 нужна наша помощь!
ostmaster:
garik77, не поверите - предлагала именно этот вариант ))

Всеми руками "ЗА"!

Первая в мире* история, когда человеку на Серче насильно сменили ник! 🍿

* тут какой-то текст, чтобы все поняли, что под звездочкой можно писать любую ерунду.
Адаптирую для мобильных устройств сайт любой сложности! (10т.р. и меньше)

Так как не у всех есть доступ в раздел, часть отзывов перекочевала в тему о бесплатной адаптации:

Dahau:
Заказывал у тс адаптивную верстку. Вместо обещанных семи дней сделал за пять с учетом тз и всех дополнительных пожеланий. Не пропадает, отвечает быстро и без напрягов.
alsedov:
Подтверждаю сказанное. Владелец Плеервокса мой давнишний друг и SEO клиент. Когда потребовался адаптив, он сам нашел Андрея, который на удивление быстро и недорого сделал адаптив. В итоге я попросил контакты такого шустрого исполнителя и передал Андрею еще один проект autovyhlop.ru.

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

Отзыв реальный, мой номер телефона для сомневающихся +7 499 391-35-99
Prince Ali:
Сделал заказ. Мой сайт мне всегда казался весьма не простым в работе. Но Андрей взялся без вопросов. Скажу честно, из-за сложности сайта я ждал каких-то проблем в процессе работ, такое часто происходило с другими исполнителями, которых я нанимал.
Но что вы думаете! Андрей без вопросов сделал все работу, и на таком высоком уровне, на который я даже не рассчитывал. Теперь я твердо знаю, к кому обращаться за адаптивным дизайном. Огромная благодарность.
webagent66:
Обратился за помощью к ТС по доработке адаптивного дизайна. ТС великолепно владеет данной тематикой.
Рекомендую данного человека, как ответственного исполнителя!
nikonor:
Работал с Андреем. Он адаптировал дизайн под мобильные устройства. Работой остался доволен. Все возникшие вопросы были решены быстро и четко. Буду обращаться еще.

На данный момент мной адаптировано более 45 сайтов. И еще 2 в работе.

Портфолио пока успеваю заполнять только на dikij.com. Уж извините :)

Оптимизация сайта для планшетов и телефонов - 2

Спасибо за отзывы!

Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.

Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.

А в этот раз у таблиц на сайте клиента был не только 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;}

Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.

А вот добавление table:before c display: table-cell растягивает содержимое на 100%.

Магия :)

Ну и важный момент про шрифты!

Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.

Да и 12 пикселей - это уже совсем мелко для телефона.

Что у вас сегодня на ужин-7

На ужин жареные сверчки из Тайланда, гусеницы и немного фруктов:

Другого фото нет, так как уже все скушали :)

Юмор: приколы, баяны, картинки, видео. Часть 35

Какие все тут злые...

Оптимизация сайта для планшетов и телефонов - 2

Адаптивные таблицы при помощи только CSS стилей 2

Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:

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

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

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.

У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.

Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :)

Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?

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

Оптимизация сайта для планшетов и телефонов - 2
nastroen:
А обязательно ли упоминание "screen"? Например: @media screen and (max-width:600px)

Google обходится без этого screen и предлагает простое @media(min-width: 468px) в рекомендациях по стилям адаптивного блока.

Действительно интересно, спасибо :)

Я ориентировался на то, что кроме "screen" есть еще куча других параметров:

http://htmlbook.ru/css/value/media

all - Все типы. Это значение используется по умолчанию.
screen - Экран монитора.

Видимо, пример из Гугла трактуется как all.

Тег noindex спасет от Минусинска?
KnoWhy:
Уже не знают, что и придумать.
Следующей услугой, наверное, добавят "страховку от снятия вебмастером тегов noindex"...

Следующей услугой будет nofollow и noindex сразу :) Или ссылка просто текстом. Чтобы наверняка уж. "Крауд маркетинг"

1... 208209210211212213214215216 ...293
Всего: 2928