Looking at these two boxes, it seems to me that using an old-fashioned HTML table would be the way to go.
What are your thoughts?
As per a conversation last month, I’ve decided not to go out of my way to do responsive design since most of my website is not responsive. At the same time, if making one of these last pages responsive is easier (or not a big deal) then I might as well do so.
How would you tackle the above mock-up?
P.S. In the first box, the layout is static, but in the second box it is best to think of things as “rows” which could vary from 1 row up to 3 rows depending on what kind of plan the member currently has. This is probably why I think of these as tables!
Before I start laying out my page, I would like to get a sense if using HTML tables is oaky for this, or if there is a better approach.
The only thing else I’d know to do would be to use a DIV to create a “row” and then use DIV’s for each element inside the row and maybe make them block-inline?!
A table is a structured set of data made up of rows and columns ( tabular data ). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.
So thinking ahead a few steps, when I do v2.0 of my site, I want it to be entirely responsive. And I don’t think HTML tables are very responsive unless they are maybe only two skinny columns.
So how should I approach designing what I have in my OP if I wanted things to be more responsive?
(I mentioned using DIVs, but maybe there is a better responsive way?)
Using divs, p, display list, tables, etc does not make a site responsive. It all depends on the CSS width setting. Beware that certain block elements have a default width of 100% of the parent. Havoc will be created when used incorrectly on mobile sites. The block element can be modified by setting display: inline or display inline block.
CSS applied to web page layout is complicated and there are no easy solutions which apply to every case or example.
Rather than trying to find simple solutions which cover every eventuality (which is impossible) example scripts can be validated which is why I requested the contents of the web page.
@UpstateLeafPeeper, i don’t have a web page yet, and am not sure how to best tackle things for this latest problem…
I am most surprised there is not a sample web page considering this is Ver: 002 and the original version has over 50 web pages?
Not only Valid Responsive sites can easily be checked using the Google Mobile Friendly Test, failure results in numerous solutions which will ensure conformity of the web page.
