I could really use a chart or grid x long (row) by y high (column) that’s easy to stay on the row you’re reading looking for the y element. Certainly I could give each row a different color, but that will probbably look kinda lame. Is there a better way to design this simple chart?
Thanks Much,
Chris
Could you not just use alternating background colours for rows? Or a different background for the row on hover?
You’ve posted in HTML/CSS, but tagged your post “graphics”.
Are you talking about an HTML table, or something else?
I agree a different colour for every row would be a bit too much. But a more standard way would be to alternate the colours which is easily done with an nth-child() selector. The colour difference only need be subtle.
Another way, if the columns are spacious enough, is to have just a bottom border, so you have horizontal lines between rows.
Sorry for the delay. Graphics or HTML? I guess that would be HTML or CSS because I’ll need to add or change from time to time, but I need the look first and that would be the artistry of graphics (I think, maybe not).
I guess a grid chart is too simplistic to do much with; alternating between 2 colors seems the only way, maybe two colors of the same tint would look good, like same is saying. -Chris
You know what would be good is a gridless grid where on mouseover the/a whole row would be highlighted or boxed.
Good for somebody using a computer with a mouse or equivalent, perhaps. What about those using touch-screens, or navigating by keyboard?
Wouldn’t they just do whatever they do for navigating. I don’t understand. Wouldn’t a touch screen user user just drag their finger over the grid to the right position? Wouldn’t a keyborder use their keyboard to jump from place to place?
You’re talking about styling which will highlight a row on mouseover, to make it easier to read. What styling are you going to provide for those without a mouse? Are you going to leave them to struggle with your “gridless grid”? Are you going to have some form of basic styling to make the table easier to read, with an added effect on mouseover for those able to see it?
I’m simply pointing out that not everybody is using a mouse, so relying entirely on mouseover / hover effects is not a good approach.
I have some examples here which show some of the methods mentioned for styling tables.
The last one highlights the rows on hover. Usually I pair :hover effects with :focus for the benefit of keyboard users so they see the same highlight effect while tabbing through a page. The problem with table rows is they are not tabbable like anchors and inputs are. So you must add a tabindex attribute to them so they are.
So in that example you can highlight the rows by tabbing through them.
Though I’m still not sold on the idea.
Sam, That look pretty nice. The only users left out are touch screeners. Who cares about them? That touch screen nonsense should be outlawed. It’s wose than the mice that first came ouit, having to lift your arm hundreds of times a day. What’s not to like about your gridless grid with mouseover and even with tab index? -Chris
Presumably you have nobody visiting your site on mobile and tablet, then?
I shouldn’t have said who cares about them, rather who cares about touch screens. With the first mice you had to lift your arm a little repeatedly, now with touch screen you have to lift your arm a lot repeatedly - they are a big step backwards, caising a lot of physical pain and wrecking a lot of people’s shoulders. The best cursor controller, and that’s what touch screen are, fancy cursor contollers, is the Logitech M570 mouse. No matter what device you’re using they all amount to directing the computer to do something regardless of whether there’s a mouse or cursor. I couldn’t care less if touch screens work on the chart. For those running a business, there’s less money for buying your product if more and more people are paying insurance and doctors for Rotator Cuff surgery and avoiding their computer to avoid more injuries - and pain. Touch screens cause a lot of physical pain.
I was thinking upright/vertical touch screens. For touch screens that are horizontal - mobile and tablets, they’ll have to find the tab key:
If you think I shouldn’t use charts that have row highlighting using a cursor or tab button because mobile and tablets exist and so all programmers should kneel to their needs, think again. Mobile and tablets are highly dysfuntional devices, they don’t have to be. They are designed for entertainment and light searching and email and buying… I read an article saying Wikipedia is having a lot of trouble finding programmers because so many people now have been raised on mobile they don’t get into programming because it’s too difficult to program on such tiny screens. No doubt it’s a concern for this site about programming. I would let up on worrying about mobile at every opportunity. People ignoring their kids, spouces, and pets because their distracted by mobile devices - how is that not dysfunctional? Let’s not forget how many mobile users die from distracted walking - walking into traffic, walking down stairs, etc.etc. According to Injury Facts, distracted walking incidents involving cell phones accounted for more than 11,100 injuries between 2000 and 2011.
That’s pretty damn pathetic.
-Chris77
I think that the original point that was being made is that now the ‘majority of internet access’ is now via mobile/tablet and that you should do your best to support as many devices as possible.
No one knows what the future holds but the sales of desktops have slumped and most internet access is now via mobile and is not used just for simple entertainment. I do all my shopping, booking flights, email and online purchases via mobile as very often mobile sites have had more thought to how content is displayed and you get straight to the point in fewer steps.
Whether ‘touch’ is good or bad is besides the point. It’s here now and is widely used so you should cater for it as best you can. That doesn’t always mean producing the same display as you would with a mouse and sometimes hover effects are an extra help to mouse users but may not be necessary for touch users if the content is already organised and easy to use.
I’ve built some very complicated screens on large scale projects (projects that have been running with a team for a few years) and these are data intensive screens with multiple and complex tabular data. In some cases the mobile view of the data has been so successful that it has changed how the desktop data was arranged.
In the end it’s remembering that you have no control over what device the user may use so you build your page so that it works irrespective of device and then you can enhance for mouse or touch if required.
No one said it was easy though 
I haven’t had chance to check it but i think if you also added in onclick="void(0)" it would allow the hover effect for touch screens as discussed here https://css-tricks.com/forums/topic/click-function-for-hover-states-on-touch-devices/
I used this to get slide up panels to work on mobiles and it seemed to work so i would think it would enable you to highlight a row. I just don’t have a mobile device to hand to test it.
That looke great. Let me work on that. I thought getting mobile to highlight a row would be a programming ordeal. Apparantly it takes ony 1 line. Thanks Noppy - Chris
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.