When you're designing for mobile, you have to convey the same information in a lot less space. Right now I'm designing a website that I want to be responsive, but I'm having some difficulty.
We want to present users with a report based on assessment they've completed. The sections of report aren't really self-explanatory and I want to give an explanation of what each heading means, before going into the scores.
My problem is that I don't know how to do this best on a mobile device. Having a description under the heading seems like a waste of space and an annoyance on a small screen.
I've considered using an icon (either a ? or a i, I don't know which is best) which opens a modal screen when touched, but it's not ideal because it's fairly important information and I think most people would ignore the icon or not realise what it's for.I'm also a bit worried about forcing people to click an icon or interact in some way to get essential information.
What methods do you use for getting across this type of information with little space available?