www.webdeveloper.com
Results 1 to 2 of 2

Thread: Please review and tip

  1. #1
    Join Date
    Jun 2014
    Posts
    2

    Please review and tip

    Hello, I'm Infamous and I just made a personal website to make into my own online portfolio. Currently, I only have one project up there, xTech, which you'll see on the website. What do you think of it? Any ideas / tips you guys could give me to make my site better?

    My site is http://designinfamous.net/

  2. #2
    Join Date
    May 2014
    Posts
    810
    Well... goofy scripted splash page type garbage, illegible color contrasts (dark gray on dark gray? REALLY?), difficult to read webfonts, fixed width layout on the xTech page along with all the failings of the page before it... Not doing great and I've not even peaked under the bonnet yet.

    We pop the hood, and we have a presentational image in the markup, the CENTER tag which hasn't been valid markup since 1997 (a laugh in the HTML 5 doctype, but again illustrating what I keep saying about HTML 5's target audience), an H2 that doesn't actually seem to be starting a subsection of the page's H1 and is instead a whole slew of CONTENT (which means it has no business in a heading tag), double-breaks doing paragraph's job, jQuery bloat on a page that honestly shouldn't even be wasting it's time on script-tardery...

    The initial page is a laundry list of how not to build a website -- which is scary given how little markup there is that the meanings and use of tags could be ignored so many times.

    The xTech page gets even worse with the classes for nothing, paragraph doing numbered heading's job, horizontal rules where you shouldn't be saying there's a change in topic -- if you don't know what's wrong with <p class="header"> followed by a horizontal rule, you REALLY should go back and learn HTML. Sorry if that sounds harsh, but it's the truth.

    Just to illustrate what I mean, this would be that xTech page written using proper semantic markup aka using the tags for what they actually MEAN.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	rel="shortcut icon"
    	href="/favicon.ico"
    />
    
    <title>
    	xTech Home
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<div id="top">
    	
    		<h1>
    			XTECH HWID SYSTEM
    			<span><!-- image sandbag --></span>
    		</h1>
    		
    		<ul>
    			<li><a href="index.php">Home</a></li>
    			<li><a href="account.php">Login / Register</a></li>
    			<li><a href="creds.php">Request / Reset Information</a></li>
    		</ul>
    		
    	<!-- #top --></div>
    	
    	<div id="content">
    	
    		<div class="subSection">
    			<h2>What is the xTech HWID System?</h2>
    			<p>
    				The xTech HWID System is an application extension, and web control panel, to add security to any kind of application you may wish to protect. HWID (Hardware Identification) is not something that can be easily toyed with, making this application extension a must-have for all programmers out there!
    			</p>
    		<!-- .subSection --></div>
    		
    		<div class="chain"></div>
    		
    		<div class="subSection">
    			<h2>What can I use the xTech HWID System for?</h2>
    			<p>
    				You can use the xTech HWID System on any application that you desire to have HWID style credentials on.
    			</p>
    		<!-- .subSection --></div>
    		
    		<div class="chain"></div>
    		
    		<div class="subSection">
    			<h2>How is the xTech HWID System made?</h2>
    			<p>
    				Currently, the application extension is built in Microsoft .Net Framework 4., however binaries for other .Net Framework versions are scheduled to be made. The Web control panel is made using MySQL 5.6.16, and PHP 5.5.11.
    			</p>
    		<!-- .subSection --></div>
    		
    	<!-- #content --></div>
    	
    	<hr />
    	
    	<div id="footer">
    		xTech HWID System STANDALONE | API Version 1.32
    	</div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Uses a recommendation doctype instead of the trip in the wayback machine to 1997 that is the not even out of draft HTML 5, uses a H1 as the on-page title, since a H1 is the heading under which the entire page is subsections, and starts each of the subsections with a H2 -- which H2 mean "what follows is a subsection of the H1 before it", just as H3 mean subsections of the H2 before it. The horizontal rule before the footer serves a similar purpose, saying there is a change in topic where a heading is unwanted/unwarranted. which is why HMTL 5's SECTION, NAV and FOOTER are a bunch of pointless redundant garbage!... It uses a LIST for the menu, which is of course a short list of choices, gets rid of the classes you don't need (big tip, if every like tag inside a container is getting the same class, none of them need classes!), paragraphs for your ACTUAL paragraphs (which means you don't need that pointless "text" class), etc, etc...

    Which should be all you need to replicate that exact same appearance while actually having the PROPER markup with graceful degradation... NOT that I'd replicate that appearance given the low color contrast between the text and it's backgrounds being illegible to probably around a quarter the population, the slow loading illegible webfonts, or all the endless "JS for nothing" that I'd never have on a site in the first place.




    Oh, and that goofy scripted scrollbar garbage -- that has to be one of the most annoying things you can do on a website.... particularly with the footer overlapping your content!
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles