Как да адаптирате маса за мобилни устройства. Завъртането на телефона е крайна мярка

В Aspro: Next, започвайки от версия 1.1.7, можете да адаптирате таблици за мобилната версия. Необходимо е да се направят промени в изходния код на страницата - да се добави клас, който отговаря за адаптивността на таблиците.

Една проста таблица в мобилната версия надхвърля страницата.

За да направите таблицата адаптивна, отидете на редактиране на страницата, където е добавена таблицата. След това отидете в режим за редактиране на изходния код.

Преди отварящия етикет

добавете етикет с клас

След затварящия таг

въведете етикета

...

Запазете промените си.

Сега таблицата се превърта и не излиза извън рамката.

При хоризонтално превъртане таблицата не излиза извън рамката, но при надясно в мобилната версия се отваря странично меню. За да сте сигурни, че менюто не пречи на работата с таблицата, трябва да направите промени в кода на страницата.

Трябва да добавите класа "swipeignore" към маркера

, които добавихме по-рано. В резултат на това преди етикета трябва да се посочи таг с класове

...

Запазете промените си.

Сега, когато превъртате таблицата надясно, страничното меню не се отваря, което пречи на работата с таблицата.

Можете да скриете страничното меню при превъртане надясно и на други страници. Трябва да добавите класа "swipeignore" към маркера

блок, за който искате да премахнете дисплея на страничното меню. Ако тагът не е имал указан клас, той ще приеме формата

. Ако етикетът

класове вече са добавени, след това напишете „swipeignore“, разделени с интервал, например

Ако използвате таблици на уебсайта си, те също трябва да бъдат адаптирани за мобилни устройства. Използвам два варианта за адаптация - компресиране и пренасяне на думи + подреждане на таблици в една колона.

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

Основен вариант

И така, за повечето таблици на сайта използвам следния css код:

@медиен екран и (max-width:1000px)(td(word-break:break-all;)

Той уточнява, че думите, които не се вписват в блока, трябва да започват на нов ред, ако разделителната способност е по-малка от 1000 px. Разделителна способност 1000 е пример, вижте си сайтовете, за някои има смисъл да зададете по-ниска резолюция.

Можете да постигнете добро показване на таблица, като използвате двоен код в CSS. Използвам паралелно:

@media screen and (max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe, textarea, input, button, submit, video, object, embed(max-width: 99% !important;) table, span, div, ins(max-width:100% !important;)

В него се посочва, че при разделителна способност под 700 px таблицата се показва в 100% размер, тоест тя е компресирана, но заема целия блок по ширина. Свойството!important показва, че ще се прилага за всички разделителни способности, по-малки от 700px.

Адаптация в една колона

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

След това кодът се записва в стиловете:

@media only screen and (max-width: 320px),(min-device-width: 320px) and (max-device-width: 600px) /* Принудително таблицата да не бъде повече като таблици */ table.mceItemTable, table. mceItemTable thead, table.mceItemTable tbody, table.mceItemTable th, table.mceItemTable td, table.mceItemTable tr ( дисплей: блок; }

В този случай дисплей: блок; показва, че tbody, th, td, tr са заключени в таблиците mceItemTable. В резултат на това с резолюция под 600 px таблицата е изградена в една колона и всъщност не е таблица.

Използването на маси е друг пай в кошницата с удобство на потребителите, но те трябва да се показват правилно на мобилни устройства, в противен случай резултатът ще бъде обратен на очаквания - посетителите ще избягат от кривите на масата и ще влошат PF. Никой не забранява показването на таблици в една колона за всички таблици и обратно, но смесената е по-добра, в зависимост от характеристиките на дизайна на таблицата.

Таблиците с данни не се справят много добре с адаптивния дизайн. За съжаление този момент съществува. Отзивчивият дизайн е свързан с персонализирането на вашия дизайн, за да побере различни размери на екрана. И така, какво се случва, когато екранът е по-тесен от минималната ширина на таблицата с данни? Можете да намалите и да видите цялата таблица, но размерът на текста ще бъде твърде малък за четене. Или можете да увеличите точката за четене, но ще трябва да превъртите вертикално хоризонтално и (за съжаление), за да видите таблицата. Таблиците с данни могат да бъдат доста широки и със сигурност са такива. Таблиците могат да бъдат направени гъвкави по ширина (тегло=100%), но съдържанието на клетките може да стане толкова тясно, че просто да не се вижда.

За да се избегне този неприятен момент се използват адаптивни таблици. Такава таблица ще показва хоризонтална лента за превъртане, ако екранът е твърде малък, за да покаже цялото съдържание.

Как да направите адаптивна таблица с помощта на CSS

За да създадете адаптивна таблица, добавете контейнерен елемент преливане-x: автонаоколо

...

Забележка. В OS X Lion (на Mac) лентите за превъртане са скрити по подразбиране и се показват само когато се използват (дори ако са зададени на „overflow:scroll“ или автоматично).

Този път ще засегнем подобна тема, но ще вземем по-сложна таблица, със заглавия.

За структуриране на данни (например цена на услуги или часове на работа) и удобното им представяне на потребителя, таблиците са идеални; в съвременните времена те трябва да са адаптивни за смартфони и таблети, в противен случай важни елементи, съхранявани в клетките, могат да бъдат скрити екрана.

Нека начертаем таблица на графика на услугата за доставка с куриери на смени и цени, като добавим атрибута aria-label (текстови етикет) към клетките с данни.

Време за доставка	Куриер	Плащане с карта	Стойност на доставката
8:00-12:00	Николай	Не	20 търкайте.
12:00-18:00	Вадим	да	50 търкайте.
18:00-23:00	Алексей	да	120 търкайте.
1:00-6:00	Юджийн	Не	90 търкайте.

Table.delivery (ширина: 100%; граница: 0px; border-collapse: collapse;) table.delivery thead (font-weight: bold;) table.delivery td (padding: 0.6rem 1rem; border-bottom: 1px solid # e8e9eb;)

Появата на таблицата на компютър с фиксирана разделителна способност от 1140 пиксела. ще изглежда нещо подобно.

При намаляване на разделителната способност на дисплея до 334 пиксела. клетките ще се свият колкото е възможно повече и ще оставят част от информацията скрита.

С помощта на CSS можем да постигнем желания ефект - разделяне на таблицата на блокове, разбираеми за посетителя при разделителна способност на екрана под 800 пиксела. Просто добавете следния код към вече създадените стилове:

@media screen и (максимална ширина: 800px) ( table.delivery thead ( display: none; ) table.delivery tr ( display: block; margin-bottom: 1rem; border-bottom: 2px solid #e8e9eb; ) table.delivery td ( display: block; text-align: right; ) table.delivery td:before ( content: attr(aria-label); float: left; font-weight: bold; ) )

На екранната снимка по-долу можете ясно да оцените превъзходството на този метод.

Благодаря за вниманието! Не забравяйте да оцените статията!

Показването на обемисти данни на малък екран винаги е пъзел. Какви начини можете да решите и как трябва да изглежда удобната маса на мобилен телефон?

Струва си да се отбележи, че таблиците често се простират отвъд екрана, не само на мобилни устройства: случва се те да съдържат повече колони или редове, отколкото се побират на огромен монитор или дори няколко. Въпреки това, колкото по-малък е екранът, толкова по-вероятно е да възникнат проблеми с използваемостта.

Ключовите елементи в табличен изглед са съгласуваност на съдържанието и значими атрибути. И двете са особено важни за мобилните маси. Първо трябва да създадете удобна маса за големи монитори и след това да създадете версия за малки екрани. Подобна нужда може да бъде отлична причина да прецизирате съдържанието на вашата таблица и да я направите по-удобна за всички потребители.

Броят на колоните на таблицата, които трябва да се показват на мобилен екран, зависи от тяхната ширина и съдържанието им трябва да е ясно, без да е необходимо да използвате мащабиране.

За сложни или дълги текстове, например в сравнителни таблици, само 2 колони ще се поберат на тесен мобилен екран. И ако таблицата е пълна предимно с числа, колоните могат да бъдат направени по-тесни и следователно да се поберат повече.

Статистиката на Националната ръгби лига се състои от числа, така че 11 колони се побират удобно на екрана на мобилно устройство, без да е необходимо хоризонтално превъртане. Моля, имайте предвид, че този резултат се постига чрез използване само на логото на противниковия отбор в първата колона и съкращения, които може да не са ясни на непосветените. Само феновете на ръгбито обаче се интересуват от такава подробна статистика за играчите.

Завъртането на телефона е крайна мярка

Ако завъртите телефона си хоризонтално, повече колони ще се поберат на екрана. В същото време обаче броят на линиите е намален и потребителите може да намерят за досадно да трябва да въртят смартфона (особено ако има заключване на въртенето). Помислете добре дали голямата ширина на масата оправдава тези недостатъци.

За да сравняват кредитни карти на уебсайта на Citi, потребителите трябва да следват инструкциите: „Завъртете телефона си хоризонтално, за да продължите да сравнявате кредитни карти.“ В същото време, когато се върти, по-голямата част от екрана е заета от огромни изображения на кредитни карти, които се фиксират на място при превъртане, оставяйки много малко място за самото съдържание на таблицата. Това е грешка на много мобилни сайтове: ако на десктоп изображенията могат да бъдат добро заглавие за колона, то на мобилни устройства те са необходими.

Във всяка таблица, която обхваща повече от един вертикален екран, лепкавите заглавия на колони помагат на потребителя да избегне объркване относно контекста.

В таблицата за сравнение с Best.Buy отляво не се записват нито колоните, нито техните заглавия и данните са трудни за четене. Вдясно е как изглежда тази таблица при превъртане, без никакво видимо обяснение.

Въпреки че обикновено е нежелателно както за мобилни устройства, така и за настолни компютри, то е относително приемливо за големи маси на мобилни устройства. Когато данните не се побират на екрана, може да се наложи посетителите да ги използват. В този случай обаче е необходимо: трябва да е очевидно, че това не са всички налични данни. Както при плъзгачите, стрелките и изрязаните елементи предават тази информация най-ясно. Понякога се използват точки, но те обикновено са по-трудни за забелязване и разбиране.

На уебсайта eBag последната колона с продукти е отрязана, така че потребителите разбират, че е налично хоризонтално превъртане.

Уебсайтът на Subaru използва точки и стрелки над таблицата, за да покаже на потребителите, че има повече налични екрани със съдържание. Точките създават известно объркване, защото две от тях са маркирани, за да покажат „текущото местоположение“ (т.е. двете колони, които се виждат в момента). Освен това е по-добре да поставите стрелките не над масата, а точно в нея.

Ако потребителите трябва да прибегнат до хоризонтално превъртане, най-лявата колона, която обикновено съдържа заглавия на редове, трябва да бъде замразена, така че потребителите винаги да виждат заглавията на редовете.

Fidelity поправи имената на прикачените файлове и заглавията на колоните. Последната колона вдясно е изрязана, за да помогне на потребителите да разберат, че хоризонталното превъртане е налично.

Officeworks.com.au поправи първата продуктова колона, така че потребителите да могат да сравняват всички други опции с нея. Продуктът в първата колона служи като отправна точка за сравнение и потребителите могат да го заменят с нещо друго. Стрелките, поставени директно в таблицата, показват, че данните могат да се превъртат наляво и надясно.

Ако данните не се побират на екрана, потребителите вероятно няма да имат време или желание да ги изследват напълно. Така че въпросът е как да им предоставим само информацията, от която се нуждаят. Отговорът на този въпрос зависи от задачата и вида на данните. Ето две стратегии за ограничаване на количеството данни в различни ситуации:

Потребителят избира данните, които го интересуват, преди да ги види.
Потребителят избира данните, които го интересуват, докато ги разглежда.

Първият подход работи, когато потребителят трябва да види данните, но не и да ги сравни, и той избира само това, от което се нуждае, преди данните да бъдат заредени. Например, той може да се интересува само от характеристиките на конкретна кола, хранителните свойства на определено ястие или статистиката за конкретен играч и потребителят не ги сравнява с други опции.

За да видят хранителна информация за Jamba Juice, посетителите трябва да изберат напитката, която ги интересува, за да видят информация за нея. Превключвателят Small/Medium/Large ви позволява да изберете желаната опция, но не ви позволява да ги сравнявате. За да разбере например разликата в калориите между малка и средна чаша, потребителят трябва първо да запомни броя на калориите за малката чаша, след това да премине към средната, да потърси броя на калориите за нея и да извади една от самите други - много умствена работа, която повечето хора ги мързи да свършат.

Втората стратегия е да се даде на потребителя контрол върху прегледа, докато преглежда данните. Например, един потребител иска да види приликите или разликите между две опции, докато друг иска да знае специфични характеристики на продуктите, като капацитет на багажника или функции за безопасност, но не се интересува от разликата в нивата на шум между два автомобила. Възможността за избор на редове и колони за показване позволява на потребителите да се съсредоточат върху функциите, които имат значение за тях.

На уебсайта на Dell потребителите избират продуктови спецификации, които ги интересуват, от менюто в горната част на страницата. Отляво: По подразбиране се показват всички характеристики. В центъра: потребителят избира тези, от които се нуждае. Вдясно: Показва се само избраното от него.

Ако таблицата включва данни, които могат да бъдат групирани по категории, направете го и позволете на мобилните потребители да:

получите общо разбиране за видовете данни, налични в таблицата;
получите директен достъп до интересуващата ви информация.

На Samsung.com сравнителните диаграми могат да показват всички спецификации или само приликите между продуктите, или само разликите, или избираеми от потребителя критерии. Сайтът групира данни с подобни атрибути, което ви позволява да изберете интересни набори от данни. В същото време групите данни дават преглед на съдържанието на страницата, като казват на потребителите каква продуктова информация е налична.