Critique for our design

Hello!
My name is George, and I hope to take a few seconds of your time to hear your critique for our design.
www.printnews.info
Thank you!

 

Hi George,

You’ve built the whole site in tables, which is a technique from 1996. Nowadays websites are built in divs et cetera. Absolutely not recommended to build it this way so my first advice would be to rebuild the whole site and only use tables for displaying data.

On April 21st, Google launched an algorithm change which will hit sites that don’t have a mobile version of their website. So my second point of critique would be to make your website responsive.

I also would strongly advice to add some colors to your website. I assume that the whole point of your website is to make it black/white/grey, but still, I would at least add color pictures (once the advertisement is live, the only thing in color will be the advertisement).

Currently your website logo isn’t clickable. It’s strongly recommended to make your logo clickable (on every page on your site). Also, sub pages don't have the logo. The logo should be displayed on ALL pages.

Now you have all content for each news item within an A element, that’s not a valid way of HTML coding (and there are a lot of other HTML and CSS validation errors.

Now you’ve got your email at the bottom of the page. SPAM bots will find this so I would recommend to convert the email to hex (for example) to make sure you won’t be spammed to death

I would include the category for each news item, now the users have to figure it out themselves which isn’t really user friendly imho.

Hope this helps!

 

Wow. So much. Thank you for your fast answer! We'll try to figure out what we can do.
ps: about black/grey/white - I'm afraid this is the main idea, that we can't decline... we wanted even to automatically repaint all pictures to look typographic.

 

Glad I could help Good luck!

 

Hi there!

First thing I would do is to run it through HTML validator. http://validator.w3.org. I ran it and saw more than 60 errors. They include including CSS in a separate file, ensuring that you have alt tag for <img> tags.

As BenBlurr mentioned, I agree that you should not be using table for this type of site. Instead, consider using list items.

For fluid layout and mobile responsiveness, also consider using EMs instead of Px. Currently the font sizes are fixed, which is terrible when users access your site from non-web devices. In any case, make your site fluid and mobile friendly.

Hope that helps!

 

W3C Validator only people here are caring about. You run test for Google and Facebook and you will see they don't seem to care about it at all.

You seemed to be influenced too much by other people, be yourself. It's marketing that help your business grow, not codes.

 

Idiot. Pure and simple. Idiot. Having a well-structued document allows for accessibility and less code overall, which then means a speedier site. Yes, Google and Facebook are prime examples on what not to do, but they've managed to become such institutions in and of themselves, they don't really need to. For the rest of the world, adhering to standards is usually a good thing, as it means people with disabilities and using other than the main browsers will still be able to use your site.

 

All the thumbnail previews look like they are a bit stretched. You need to find a better way of making thumbnails without distorting them.

 

I agree with the criticism this design needs to be responsive. Given the layout, it wouldn't be hard to use one of any number of grid systems to make a simple and completely responsive template in a couple of hours.

Check out bootstrap, or if you want something more minimal check out the Skeleton CSS framework.

 

The black on gray has some legibility issues due to the use of a serif font; remember the mantra serif is for print, sans is for screen. The average of that background texture has a luminance of 167, which the dark gray of the flow text with it's luminance of 63 falls far short of the 128 difference that should be considered the minimum and 192 ideal typical of fancy or thin glyph fonts (you have the former).

The "perfect width perfect height" boxes are accessibility and design trash, which also feels like "for print" concepts that have no place on the web. The way the lines of text are cut off on those looks more like rendering bug than intentional design. IF I were to use a layout like that I'd be using inline-block for them on old browsers and flex-box on new ones so they can actually change size to fit their content. Remember, if you have to design your content to fit the layout, there's something wrong with the layout. (which yes, also runs contrary to "for print" thinking).

Likewise the fixed-width image based background prevents you from going properly responsive or elastic, meaning you either need to eliminate that at smaller screen sizes or just axe it outright. It too reeks of "for print" design and for the web, that's a bad thing; either that or it's someone playing around in Photoshop and calling it design while lacking sufficient knowledge of HTML, CSS, websites or accessibility to be doing so.

It seems to load fast enough here, but the numbers are a bit troublesome. I only see maybe 20 actual content images, leaving me wondering what those exra 14 files are for when I see maybe two things I'd have extra images. for. The single monolithic stylesheet is fine, but the three JS leave me wondering "FOR WHAT?" since I'm not seeing anything that warrants the presence of JS on the page.

Peeking under the hood, good gravy! Welcome to the bleeding edge eighteen year old coding practices -- again proving what I've been saying about HTML 5's target audience being the people who never extracted their craniums from 1997's rectum.

Massive amount of pointless static scripting in the HEAD (some of which isn't even stuff that goes in HEAD), render elements like DIV inside HEAD, no media target on the CSS <link>, tables for layout, gibberish use of table elements, nothing remotely resembling logical document structure, incomplete forms, endless pointless DIV, classes and ID's for NOTHING, attributes like TARGET, ALIGN and WIDTH that have no business on any website written after 1997, lack of ALT attributes on images, static STYLE in the markup, fixed width declared in the markup, presentational images in the markup... It's just another laundry list of how NOT to code a website.

A conclusion supported by the numbers: A 33.4k HTML file to deliver 3.7k of plaintext and twenty content images is nearly three times the markup needed for such a simple page!

You have no logical document structure, no logical heading orders, which means zero graceful degradation and nothing remotely resembling accessibility... which is why I'd toss the entire concept and start over from scratch.

Just to show you what I mean, there is NO legitimate reason for the markup of that page to vary much from this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" />

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>

<title>Page 1 - All news - PRINTNEWS.INFO</title>

</head><body>

<div id="top">

	<h1>
		PrintNews
		<span>-</span>
		<small>The First Real Newspaper on the Internet</small>
	</h1>

	<div class="today">27 April 2014</div>

	<hr>

	<form action="search.php" method="get" id="topSearch">
		<fieldset>
			<label for="topSearchTerm">Search for:</label>
			<input type="text" name="q" id="topSearchTerm">
			<input type="image" src="images/search.png" alt="Go">
		</fieldset>
	</form>

	<div class="bannerAd">
		Advertisment I REALLY wouldn't place here
	</div>

	<ul id="mainMenu">
		<li><a href="/politics">politics</a></li>
		<li><a href="/business">business</a></li>
		<li><a href="/culture">culture</a></li>
		<li><a href="/sport">sport</a></li>
		<li><a href="/science">science</a></li>
	</ul>

	<div id="content">

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-32468997#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/2adfead8-4311-47dc-9fd9-9e601a68a336.jpg" alt="For Sale Signs"><br>
					Labour plan to cap rental increases<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Private landlords would not be able to increase rents by more than inflation for three years under Labour plans to give tenants more security.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-32465547#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/5d0e0900-0ec1-46c5-bec5-2001ec788eb5.jpg" alt="Nigel Farage"><br>
					EU exit nothing to fear, says Farage<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				UKIP leader Nigel Farage accuses the &quot;political class&quot; of lacking confidence in British businesses and says the UK can go it alone outside the EU.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-32463038#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/93b898cf-ac1d-4ef9-9270-18aa595018c8.jpg" alt="David Cameron"><br>
					PM's 'brain fade' over football team<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				David Cameron comes under fire from Twitter users after saying in a speech that he supported West Ham - when he is an Aston Villa fan.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-32470837#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/c3fd6ad5-255f-431d-bc6d-d39c9ac743c6.jpg" alt="David Cameron"><br>
					Cameron sets out '100 day' Tory plan<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				David Cameron says wages, welfare, housing and childcare will be at the heart of the Conservatives' programme for government in its first 100 days if it wins an outright victory.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-northern-ireland-32465333#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/fd46afcf-de87-4cb3-a1a8-d1d2ad0775ff.jpg" alt="Jim Wells"><br>
					Wells committee call over comments<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				The chair of Stormont's health committee says she has called Health Minister Jim Wells before the committee to explain his comments on same sex relationships.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/election-2015-england-32285715#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/ddf0cea0-7592-42b6-a823-7f96177d9592.jpg" alt="A public gathering"><br>
					Do people's hustings turn the tables?<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Can "people's hustings" turn the tables on politicians and put voters back in control of the agenda ahead of the general election?
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/business-32468360#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/71c1a78e-29eb-4c8d-8d81-2a5c62c8a686.jpg" alt="Ferdinand Peich, VW Chairman"><br>
					VW chairman resigns in power struggle<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Ferdinand Piech, the chairman of VW, Europe's biggest carmaker, resigns after a power struggle with his chief executive.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/news/uk-32464402#sa-ns_mchannel=rss&amp;ns_source=PublicRSS20-sa">
					<img src="/pictures/a55b430b-b594-41f3-870e-3aebaaca8862.jpg" alt="Len Blavatnik, Warner music owner"><br>
					Music boss tops Britain's rich list<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Warner Music owner Len Blavatnik is Britain's richest man with a &#163;13.17bn fortune, taking top spot from the Hinduja brothers, according to the Sunday Times.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/cricket/32470136">
					<img src="/pictures/469ff2c8-14aa-42be-acbe-c67b2b105440.jpg" alt="James Anderson"><br>
					Anderson leads England to victory<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				James Anderson inspires England to a nine-wicket win over West Indies on the last day of the second Test to go 1-0 up with one to play.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/snooker/32461267">
					<img src="/pictures/1bb6846a-3407-412c-ac60-8377183f368c.jpg" alt="Hawkins"><br>
					Hawkins wins tense Crucible thriller<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/horse-racing/32469552">
					<img src="/pictures/e685a73f-d37a-4e6d-abbe-5b0405395c87.jpg" alt="'Invincible' McCoy"><br>
					Farewell to the 'invincible' McCoy<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32468599">
					<img src="/pictures/5b2395f6-6d81-462a-83ca-d01c4ca99275.jpg" alt="Eden Hazard"><br>
					How much for Hazard? '&#163;100m per leg'<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Eden Hazard would cost Real Madrid &#163;200m if they wanted to try and buy him from Chelsea, says Blues boss Jose Mourinho.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32470751">
				<img src="/pictures/3e43a87f-00c7-4e03-8547-5b4ebc179a28.jpg" alt="FA Trophy Winners"><br>
			FA Trophy winners 'face relegation'<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Players from North Ferriby United - the FA Trophy winners - claim the club faces voluntary relegation from the Conference North.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32469230">
					<img src="/pictures/200ea393-e34c-40a1-ac43-5df270aa091a.jpg" alt="John Carver"><br>
					I can take fans' flak - Carver<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Newcastle boss John Carver says he can take supporter criticism after his side slump to a seventh straight loss.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32470853">
					<img src="/pictures/8ac4752f-488b-4120-8352-90abaf61d6b7.jpg" alt="Tim Sherwood"><br>
					Hart should have seen red - Sherwood<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Aston Villa boss Tim Sherwood says a late offside call cost his side victory in the 3-2 loss at Manchester City.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32468638">
					<img src="/pictures/9526ca3f-a263-49b9-967c-a14ab1eb28a9.jpg" alt="Brendand Rogers"><br>
					Liverpool were outstanding - Rodgers<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Brendan Rodgers claims Liverpool were &quot;outstanding&quot; despite being held to a goalless Premier League draw by West Brom.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/netball/32469724">
					<img src="/pictures/398adf7b-9715-41c3-83d5-dd7aedacf0c0.jpg" alt="Surrey Storm"><br>
					Surrey Storm win Superleague title<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Surrey Storm beat Hertfordshire Mavericks 56-39 to win the Superleague grand final for the first time in their history.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32470569">
					<img src="/pictures/70c1df23-a30f-4b57-8719-b811c8966155.jpg" alt="Bloody riots at Belgrade Derby"><br>
					Bloody riots mar Belgrade derby<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				The start of the Belgrade derby between Red Star and Partizan was delayed for 45 minutes following serious crowd trouble.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/football/32362059">
					<img src="/pictures/1133bb98-8450-4e54-ba51-011659bc464a.jpg" alt="League Results"><br>
					Brighton &amp; Hove Albion 0-2 Watford<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Watford are promoted to the Premier League after they beat Brighton and other results go their way.
			</p>
		<!-- .newsItem --></div>

		<div class="newsItem">
			<h2>
				<a href="http://www.bbc.co.uk/sport/0/diving/32468797">
					<img src="/pictures/f06f8ee2-12c7-498f-b061-4da17d709fc8.jpg" alt="Laugher in Kazan"><br>
					Laugher adds second gold in Kazan<br>
					<small><span>www.bbc.co</span> 26 April 2015</small>
				</a>
			</h2>
			<p>
				Great Britain's Jack Laugher claims his second gold medal of diving's World Series in the men's 3m springboard.
			</p>
		<!-- .newsItem --></div>

		<div class="pagination">
			<h2>Pages:</h2>
			<ul>
				<li><span>1</span></li>
				<li><a href="/all/2">2</a></li>
				<li><a href="/all/3">3</a></li>
				<li><a href="/all/2">Next</a></li>
				<li><a href="/all/3">Last</a></li>
			</ul>
		<!-- .pagination --></div>

	<!-- #content --></div>

	<div id="footer">

		<hr>

		<ul class="socialLinks">
			<li class="googlePlus">
				<a href="https://plus.google.com/share?url=http://printnews.info">
					Google+
				</a>
			</li>
			<li class="twitter">
				<a href="http://twitter.com/share?url=http://printnews.info">
					Twitter
				</a>
			</li>
			<li class="faceBook">
				<a href="http://www.facebook.com/sharer.php?u=http://printnews.info">
					Facebook
				</a>
			</li>
		</ul>

		<hr>

		<a href="mailto:printnews@outlook.com">printnews@outlook.com</a><br>
		printnews.info &copy; 2015

	<!-- #footer --></div>

<!-- #top --></div>

</body></html>

Code (markup):

Which uses semantic markup, heading orders and rules to provide logical document structure, and is designed with a "content first" and "accessible design" attitude. EVERYTHING else being done there belongs in the external stylesheet where it can be targeted to specific media (like screen,projection,tv as screen media, print, aural, handheld, etc) and customized in terms of numbers of columns and general layout by media queries. It is also as I said, spitting distance from being 1/3rd the total code.

When it comes time to add those specific screen media layouts, they should be elastic (size scaling to the default font size), semi-fluid (expanding/contracting between two points) and responsive! (changing the layout so as to best fit the available space)... hence why outdated outmoded concepts that were NEVER correct to be doing in the first place like "tables for layout", fixed width design, and declaring presentation in the markup like widths is accessibility rubbish and pretty much defeats the entire reason HTML even exists in the first place!

... and no, do NOT dive for mouth breathing idiotic BS like bootcrap or nonsensical gibberish like "grids"; neither serves a legitimate purpose other than bloating out the codebase or trying to cover up developer ineptitude by proudly proclaiming one's developer ineptitude.

Generally I get that you are trying to emulate a print layout, but as you should have been told LONG before trying to do this and something web developers have been screaming at "designers" for the better part of two decades, the web is not print! -- many print layout concepts are the opposite of the accessible design and general purpose of websites which is why you don't see that type of stuff on a whole lot of pages out there, and the ones that do try it usually blow chunks.

 

I take that as a compliment. It means people like Facebook and Google are different.
Most people who care about w3c validator the most on my count list are seller of "what you see is what you don't get" wordpress themes.

 

So... I'm assuming next time you buy a car, you'll go with a Yugo, or maybe a cheap chinese knock-off. That they're not following any standards, or are completely unsafe to drive shouldn't matter -they work, no matter how, right?