Comment by program247365

10 years ago

Firstly, thanks so much for starting to work on this!

Let me suggest a few things:

* I'm confused as to why you're using tables for layout? Might want to consider something more modern, and use tables just for tabular data, and use divs, classes, and CSS for handling the layout: http://learnlayout.com/ You can get a lot done without using tables and <center> tags, etc.

* The width on your table is 85%, why not 100%? Let that bad boy go to the edge of the viewport, on mobile every pixel counts.

* I'd suggest adding this to your 'body' css, make that content go to the edge of the viewport:

margin: 0; padding: 0;

* I see a lot in inline styles in your table, you might want to consider taking those out, and just throwing them into your CSS stylesheet. Those are the most specific, and override everything. Maintaining that will be hard, and painful. Unless you have some historic, or those are dynamically entered for good reason by your CMS, I'd take them out.

* <tr class="spacer" style="height:5px"></tr> Things like this could be better improved by removing, and just adding padding to the element you really wanted to add some breathing room around

* <span class="score" id="score_10487419">318 points</span> Perhaps this is a personal preference but I prefer classes over ids in CSS. Classes are more easily overridden, and have less headaches than ids on large websites http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-...

* <span class="deadmark"></span> Reason for these? Looking at it, I'm not sure what value it might provide. If it's something that isn't pertinent to that item on the page, I'd consider not rendering it, as there is nothing in it, and you, as a general rule shouldn't use spans or divs to solely help you lay things out on the page

* <td colspan="2"></td> As I see you have these there, since you're laying out with a table, I'd encourage you to not do that. Tables are markup heavy, and you'd find you could bring your page weight down if you did not use tables for layout. See http://www.stevesouders.com/blog/2013/05/09/how-fast-are-we-...

Specifically for mobile:

* Responsive Design: https://developers.google.com/web/fundamentals/design-and-ui...

* Touch Targets: http://www.smashingmagazine.com/2012/02/finger-friendly-desi...