1

My boss has some content in a word document which looks like the following enter image description here

I need to move this content onto a website - specifically a responsive WordPress website. I am wondering if there is a better way to display this information so that it can be responsive.

I think he really likes the arrows because they indicate a flow from beginning to end.


I built a simple CSS mockup of what this could look like on the web, but I don't really like where it's going too much. It's not really going to work on smaller screens.

The essence of the content is Title / Caption groups. The titles need to be all next to each other, in the form of arrows.

Is there a better way of visualizing this?

https://jsfiddle.net/mouseoctopus/wtsj873m/

1

I realise that you've already done something else, but one other approach you could take is to retain the "arrows" metaphor, but turn them so the arrows go down the screen instead of across.

Then you could retain the implied flow, but also have more width for the associated text. Excuse the hasty and hacky photoshop job (terrible text alignment, etc...), but something like this:

vertical flow steps

Of course, it's now slightly less well suited to a landscape-format screen, but the arrows could be made flatter and the text to the right widened out a little more to make it fit better... all of which could be done responsively in the browser. That approach would also lead to something that would also work well on a portrait-oriented phone display...

The approach you've already taken in your comment could also work with this approach, retaining the arrows when switching to the vertical view.

0

I like the arrows solution more. The second jsfiddle link you posted has lost some of its flow because you switched from arrows to boxes.

If you are worried about it looking good on mobile, simple create a break after the first 3 shapes. That way the first three (first notice of loss, assign/split, investigate/evaluate) are all on one row and the next three are on the second row.

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.