Sådan tilpasser du et bord til mobile enheder. Rotation af din telefon er en sidste udvej

Bemærk. I OS X Lion (på Mac) er rullepaneler skjult som standard og vises kun, når de er i brug (selvom hvis de er indstillet til "overflow:scroll" eller auto).

Denne gang vil vi berøre et lignende emne, men vi vil tage en mere kompleks tabel med overskrifter.

For at strukturere data (for eksempel omkostninger til tjenester eller driftstimer) og bekvemt præsentere dem for brugeren, er tabeller ideelle i moderne tid, de skal være tilpassede til smartphones og tablets, ellers kan vigtige elementer, der er gemt i celler, blive skjult; skærmen.

Lad os tegne en tabel over leveringstjenesteplanen med skiftbud og priser, og tilføje aria-label-attributten (tekstlabel) til datacellerne.

Table.delivery (width: 100%; border: 0px; border-collapse: collapse;) table.delivery thead (font-weight: bold;) table.delivery td (polstring: 0.6rem 1rem; border-bottom: 1px solid # e8e9eb ;)

Bordets udseende på en pc med en fast opløsning på 1140 pixels. vil se sådan ud.

Når du reducerer skærmopløsningen til 334 pixels. cellerne vil krympe så meget som muligt og efterlade noget af informationen skjult.

Ved hjælp af CSS kan vi opnå den ønskede effekt - opdeling af tabellen i blokke, der er forståelige for den besøgende ved en skærmopløsning på mindre end 800 pixels. Bare tilføj følgende kode til de allerede oprettede styles:

@medieskærm og (max-width: 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 ( indhold: attr(aria-label); float: venstre; font-weight: fed; ) )

På skærmbilledet nedenfor kan du tydeligt vurdere denne metodes overlegenhed.

Tak for din opmærksomhed! Glem ikke at bedømme artiklen!

At vise omfangsrige data på en lille skærm er altid et puslespil. Hvilke måder kan du løse det på, og hvordan skal et praktisk bord se ud på en mobiltelefon?

Det er værd at bemærke, at tabeller ofte strækker sig ud over skærmen, ikke kun på mobile enheder: det sker, at de indeholder flere kolonner eller rækker, end de passer på en enorm skærm eller endda flere. Men jo mindre skærmen er, jo mere sandsynligt er det, at der opstår problemer med brugervenligheden.

Nøgleelementerne i en tabelvisning er indholdssammenhæng og meningsfulde attributter. Begge er især vigtige for mobile borde. Først skal du oprette et praktisk bord til store skærme og derefter oprette en version til små skærme. Et sådant behov kan være en glimrende grund til at forfine indholdet af din tabel og gøre det mere bekvemt for alle brugere.

Antallet af tabelkolonner, der skal vises på en mobilskærm, afhænger af deres bredde, og deres indhold skal være tydeligt uden behov for at bruge zoom.

For komplekse eller lange tekster, for eksempel i sammenligningstabeller, vil kun 2 kolonner passe på en smal mobilskærm. Og hvis tabellen er fyldt mest med tal, kan søjlerne gøres smallere og passer derfor til flere.

National Rugby League-statistikker består af tal, så 11 kolonner passer komfortabelt på en mobilskærm uden behov for vandret rulning. Bemærk venligst, at dette resultat opnås ved kun at bruge modstanderholdets logo i første kolonne og forkortelser, som måske ikke er tydelige for den uindviede. Det er dog kun rugbyfans, der er interesseret i så detaljerede statistikker om spillere.

Rotation af din telefon er en sidste udvej

Hvis du roterer din telefon vandret, får du plads til flere kolonner på skærmen. Men samtidig reduceres antallet af linjer, og brugerne kan finde det irriterende at skulle dreje smartphonen (især hvis den har en rotationslås). Tænk grundigt over, om bordets store bredde retfærdiggør disse mangler.

For at sammenligne kreditkort på Citis hjemmeside skal brugerne følge instruktionerne: "Drej din telefon vandret for at fortsætte med at sammenligne kreditkort." Samtidig er det meste af skærmen, når den roterer, optaget af enorme billeder af kreditkort, som er fastgjort på plads, når du ruller, hvilket efterlader meget lidt plads til selve tabelindholdet. Dette er en fejl på mange mobilsites: hvis billeder på en desktop kan være en god overskrift til en kolonne, så er de nødvendige på en mobil.

I enhver tabel, der strækker sig over mere end én lodret skærm, hjælper klæbrige kolonneoverskrifter brugeren med at undgå forvirring om konteksten.

I sammenligningstabellen med Best.Buy til venstre er hverken kolonnerne eller deres overskrifter registreret, og dataene er svære at læse. Til højre er, hvordan denne tabel ser ud, når den rulles, uden nogen synlig forklaring.

Selvom det generelt er uønsket på både mobil og desktop, er det relativt acceptabelt for store borde på mobile enheder. Når dataene ikke passer på skærmen, kan besøgende blive nødt til at bruge dem. Men i dette tilfælde er det nødvendigt: det bør være indlysende, at dette ikke er alle de tilgængelige data. Som med skydere formidler pile og beskårne elementer denne information tydeligst. Prikker bruges nogle gange, men de er normalt sværere at bemærke og forstå.

På eBag-webstedet er den sidste kolonne med produkter afskåret, så brugerne forstår, at horisontal rulning er tilgængelig.

Subarus hjemmeside bruger prikker og pile over tabellen for at vise brugerne, at der er flere tilgængelige skærme med indhold. Prikkerne skaber en vis forvirring, fordi to af dem er fremhævet for at vise den "aktuelle placering" (det vil sige de to kolonner, der i øjeblikket er synlige). Derudover er det bedre at placere pilene ikke over bordet, men lige i det.

Hvis brugere skal ty til vandret rulning, skal kolonnen længst til venstre, som typisk indeholder rækkeoverskrifter, fryses, så brugerne altid kan se rækkeoverskrifterne.

Fidelity fiksede vedhæftede filnavne og kolonneoverskrifter. Den sidste kolonne til højre er beskåret for at hjælpe brugerne med at forstå, at vandret rulning er tilgængelig.

Officeworks.com.au har rettet den første produktkolonne, så brugerne kan sammenligne alle andre muligheder med den. Produktet i den første kolonne tjener som referencepunkt til sammenligning, og brugerne kan erstatte det med noget andet. Pile placeret direkte i tabellen gør det klart, at data kan rulles til venstre og højre.

Hvis dataene ikke passer på skærmen, vil brugerne sandsynligvis ikke have tid eller lyst til at udforske dem fuldstændigt. Så spørgsmålet er, hvordan man kun giver dem den information, de har brug for. Svaret på dette spørgsmål afhænger af opgaven og typen af ​​data. Her er to strategier til at begrænse mængden af ​​data i forskellige situationer:

• Brugeren vælger de data, han er interesseret i, før han ser dem.
• Brugeren vælger de data, han er interesseret i, mens han ser dem.

Den første tilgang fungerer, når brugeren skal se dataene, men ikke sammenligne dem, og han vælger kun det, han har brug for, før dataene indlæses. For eksempel kan han kun være interesseret i en bestemt bils egenskaber, de ernæringsmæssige egenskaber af en bestemt ret eller statistikken for en bestemt spiller, og brugeren sammenligner dem ikke med andre muligheder.

For at se ernæringsoplysninger for Jamba Juice skal besøgende vælge den drik, de er interesseret i, for at se oplysninger om den. Small/Medium/Large-kontakten giver dig mulighed for at vælge den ønskede mulighed, men giver dig ikke mulighed for at sammenligne dem. For at forstå for eksempel forskellen i kalorier mellem et lille og et mellemstort glas, skal brugeren først huske antallet af kalorier for det lille glas, derefter skifte til det mellemste, slå antallet af kalorier op for det og trække et fra fra den anden selv - en masse mentalt arbejde, som de fleste mennesker er for dovne til at udføre.

Den anden strategi er at give brugeren kontrol over anmeldelsen, mens han gennemser dataene. For eksempel ønsker én bruger at se ligheder eller forskelle mellem to muligheder, mens en anden ønsker at kende specifikke egenskaber ved produkterne, såsom bagagerumskapacitet eller sikkerhedsfunktioner, men er ikke interesseret i forskellen i støjniveauer mellem to biler. Muligheden for at vælge rækker og kolonner, der skal vises, giver brugerne mulighed for at fokusere på de funktioner, der betyder noget for dem.

På Dells websted vælger brugerne produktspecifikationer, der interesserer dem, fra menuen øverst på siden. Venstre: Som standard vises alle egenskaber. I midten: brugeren vælger dem, han har brug for. Til højre: Kun det, han valgte, vises.

Hvis tabellen indeholder data, der kan grupperes efter kategori, skal du gøre det og tillade mobilbrugere at:

• få en generel forståelse af de typer data, der er tilgængelige i tabellen;
• Få direkte adgang til oplysninger af interesse.

På Samsung.com kan sammenligningsdiagrammer vise alle specifikationer, eller blot lighederne mellem produkter, eller blot forskellene eller brugervalgbare kriterier. Webstedet grupperer data med lignende attributter, så du kan vælge datasæt af interesse. Samtidig giver datagrupper et overblik over sidens indhold og fortæller brugerne, hvilken produktinformation der er tilgængelig.