Developer/Programmer needs design advice

Hello.

The owner of our company has designed a web site whose look mirrors that of an Excel spreadsheet. As such every column must line up perfectly.

My colleagues and I are programmers, not designers, so we are working with a web design company.

They just communicated to us that each column (or two in some cases) is it's own table, a requirement that would force us to "paint" the HTML page in a column fashion. I assume this makes it easier for them to line things up. So for example, suppose a page has thirty rows and ten columns. Since they have grouped the columns into their own table that means that in order for us to generate the HTML page we'd have to iterate over the data a minimum of 300 times. Normally we'd iterate over the data thirty times, once for each row of data.

So, not being savvy designers, we're unsure whether their requirement is viable or just plain silly. Is it possible to get the alignment necessary to emulate an Excel spreadsheet without grouping columns into their own tables?

They are using CSS3, HTML5, Bootstrap, and we are supporting only the latest browsers.

Thanks in advance,
Mike

 

Wow... you have my pity. It sounds like the 'owner' of your company has no damned business "designing" jack **** out of utter and complete ignorance of what a website is. I'm surprised given what you've said that ANY "design company" would take on the project if not for the outright mercenary nature of the industry where people will blow as much smoke up your ass as they can to scam you out of a few bucks.

... as evidenced by them using bootcrap meaning they're about as qualified to make websites as your average kindergarten student would be at running a space program.

Honestly, it sounds like you're between a dipshit (the boss) and some snake oil salesmen (the 'web design company) which is why I'd either deep six the project if I had the control to do so, or run...

RUN MAN, JUST RUN! In a "Nice to meet you, Rose. Run for your life!" kind of way. Game over man, game over...

The concept is flawed, and the **** rolls downhill from there.

I think it sounds like a lot of the important stepping stones were skipped... WHAT is the content, WHAT would be the proper semantic markup for the content -- things that should have been established and written LONG before anything like 'layout' came into the picture... no matter what the artsy fartsy types dicking around drawing goofy pictures in photoshop have deluded themselves and their clients into thinking.

 

No choice.

From a design point of view is the web design company's request valid or not?

Thanks,
Mike

 

I'd have to actually see the CONTENT to weigh in, but if the whole thing IS actually like a spreadsheet where the data and rows have a semantic relationship, the whole thing should be ONE table, not multiple separate ones. If they are dividing it into multiple tables when there is that relationship, they have NO clue what they are doing... though again, I came to that conclusion the moment you mentioned bootstrap.

In terms of outputting it that way if need be and it did make sense (which it doesn't) I'd consider buffering the output -- sucks on memory like candy but simplifies the logic. Just dump each table into it's own string then output them when finished. Memory hungry, but probably more efficient than looping the same rows from the db time and time and time again.

Really though breaking a single 'row' of data into multiple separate tables by column doesn't make any sense and reeks of a front end dev not qualified to be creating HTML.

I mean, an HTML table basically IS the same thing as a spreadsheet -- rows are related data and should be in the same TR, columns are related which is why you have TH over them in the THEAD.

For example, if you had a normal everyday 5x5 spreadsheet, the code for it would look something like this in HTML:

<table>
	<caption>Describe the contents of the table here</captoin>
	<thead>
		<tr>
			<td></td>
			<th scope="col">A</th>
			<th scope="col">B</th>
			<th scope="col">C</th>
			<th scope="col">D</th>
			<th scope="col">E</th>		
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">1</th>
			<td>Data A1</td>
			<td>Data B1</td>
			<td>Data C1</td>
			<td>Data D1</td>
			<td>Data E1</td>
		</tr><tr>
			<th scope="row">2</th>
			<td>Data A2</td>
			<td>Data B2</td>
			<td>Data C2</td>
			<td>Data D2</td>
			<td>Data E2</td>
		</tr><tr>
			<th scope="row">3</th>
			<td>Data A3</td>
			<td>Data B3</td>
			<td>Data C3</td>
			<td>Data D3</td>
			<td>Data E3</td>
		</tr><tr>
			<th scope="row">4</th>
			<td>Data A4</td>
			<td>Data B4</td>
			<td>Data C1</td>
			<td>Data D4</td>
			<td>Data E4</td>
		</tr><tr>
			<th scope="row">5</th>
			<td>Data A5</td>
			<td>Data B5</td>
			<td>Data C5</td>
			<td>Data D5</td>
			<td>Data E5</td>
		</tr>
	</tbody>
</table>

Code (markup):

Since the TH (table headers) describe the rows and columns, with SCOPE declaring which direction those TH are applied, all resulting in a single table. Separating each column into it's own table? That makes NO sense from a logical document structure or HTML standpoint and reeks of developer ineptitude and/or ignorance.

Again though, that's stating the obvious if they're using Bootcrap; as the majority of people using it don't know enough about HTML or CSS to be building websites in the first place.

There IS a problem with that though -- a spreadsheet style table layout is VERY difficult to make mobile/small screen friendly, so if that's something that's wanted with said site, the very CONCEPT of the site is broken. If they are used to faking responsive design using bootcrap, they probably don't know enough to do things like format a table properly.

But again, much of that would hinge on what the content is; since content should dictate the markup -- sadly most people seem to have that backwards and let the desktop screen layout dictate the markup. a GOOD design should be done by taking the content, marking it up semantically with ZERO concern for the final appearance saying what things ARE, NOT what they look like, all that being done LONG before the various different media target layouts are created. It SOUNDS like you are starting from a concept of what it looks like instead of what it is, and that's really a back-assward approach to building a web page.

 

Thanks, Jason. I like your website by the way. I'm an old DOS programmer myself.