2

I'm trying to design a website for my employer and started with the landscape/desktop layout for the section in the first image, intending to convey that it's significant that both facts are present, without any particular order to them, like two sides of a coin.

Desktop side-by-side text arrangement

I think it works satisfactorily on desktop, but when you get down to the 320px mobile width, the side-by-side arrangement would either have disgustingly small size/spacing, or be very tall, thin and unreadable.

Is there a vertical, one-on-top-of-the-other arrangement/decoration that communicates relatedness without implying hierarchy? (this one doesn't do a good job, I think., though I'd love to be proven wrong).

Mobile arrangement, stacked, with horizontal divider

I would try a diagonal slash through the arrangement, but I think the coders would have a fit trying to implement that on our budget.

1
  • 1
    I think your solution works. In the horizontal version, our reading direction places the left-hand point, then the right-hand one consecutively. In your vertical solution, the same order holds. Neither one really prioritizes your two points as numbering them (for example) would.
    – Stan
    Sep 18 '18 at 2:53
1

In some similar situation I have solved it with a jssor slider.

enter image description here

1
  • 1
    The html <blink> mark-up used to drive viewers nuts. It became a pariah and a trait of poor web site designs and quickly fell into disuse as being mindlessly distracting. I would not encourage "noisy" site content.
    – Stan
    Sep 18 '18 at 2:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.