Responsive Design: How to balance content with uneven column width to arrange itself in horizontal layout
How can I arrange the data in a horizontal layout so that it manages increase in column widths. How can you manage such situations responsive design.
I want to make sure:
- Something that is technically feasible and justifies the effort
- Visual design maintains its balance
Background
The web app is used by a financial firm to review trade clearances for their employees. All employees must submit a Trade pre clearance which is reviewed by their superiors while approving.
UX
The supervisor get a list of TPC’s submitted by their subordinates. Onclick a modal window pops open and you see the trade details.
The contents of the modal have been carefully negotiated with the stakeholders and have no appetite on reducing content.
Also note, this app cannot be used on mobile
Design
Design for 1280px Screen ( company standard )
The standard of computer screen is 1280 px . If you see the center blue section, It has the meat of all the information contextual to the task. Most columns are fixed and don’t change in width , apart form Product name and Product type.
The product name could especially be very large and this destroys the balance of design. Since the modal is 70% of the screen size, so when product name is large we could increase its size and maintain single column.
But this does not resolve the issue on iPad. This is the only way that comes to my mind.
Other alternatives:
Giving the largest columns 50% width and stacking them vertically and the remaining to be divided in the other half.
Giving the largest columns 50% on first row. And arrange the bottom ones
