my website is online so far 2 month, but the traffic is very low or almost not traffic except those spammers, so i would like to know what do you guys think of my website, is the design ok? what can i do better? my website called tdever.com, try to be a community for web developers. Please feel free to give your opinion. Thank you
Inaccessible fixed width layout too big for my netbook/tablet and too small for my desktop, breaks horifically when zoomed, illegibly useless and absurdly undersized fixed metric (px) fonts, so in general it reeks of "WCAG, what's that?" and is a completely useless accessibility train wreck. Given the relative lack of... anything on the page in terms of images of flashy bits, one really has to question what the devil it needs an ungodly 22 scripts totalling over a megabyte -- likewise the massive document size and ridiculous amount of CSS (129k? REALLY? FOR THAT?!?) means that I can tell before I even look under the hood the code is probably outdated or just plain poorly done. Waiting for the total 82 files to actually load like most sites with 'endless files for nothing' is painful at best if one's connection has piss poor ping times, and the 2.1 megabytes of total data is certainly not a good thing. AGAIN, ESPECIALLY with half that being "JS for nothing and your scripts for free... that ain't working, that's NOT how you do it" Digging deeper you have 41k of markup to deliver 6.6k of plaintext and barely a dozen content images -- that's anywhere from three to four times as much markup as should have been used. Looking at said code, I see all the hallmarks of "HTML 5 isn't the future, it's 1997", from the idiotic nesting IE conditionals around the HTML tag by Paul irish, to the endless pointless scripting for nothing, the static scripting inlined in the markup, pointless HTML 5 bloat wrapped around HTML 3.2 style code, META[keywords] that fails to even grasp what keyWORDS are (should be seven or 8 WORDS that exist in your BODY you want to uprank, it's NOT keyphrases, NOT keysentences, and if you say the same word in every term over and over again, you REALLY missed the point), endless pointless div for nothing, pointless wasteful classes everywhere, ittle if anything resembling semantic markup, complete GIBBERISH use of numbered heading tags, clearing DIV like it's still 2001, DIV doing numbered heading's job, attributes like TARGET that have ZERO BUSINESS being used in any website written after 1997, pointless span for nothing, pointless classes (like all those 'span.title' -- that whole section I suspect should be a table with AXIS), vertical breaks in LI doing border's job, etc, etc, etc... Just another laundry list of how not to build a website.
Damn, I like your style, straight to the point. Wish I could give you a "like" To the OP: Yeah, deathshadow pretty much covered it all. Outdated code spread throughout.. looks like it was built ten years ago. The site lacks any real interactivity, and its not that great to look at. But hey, I got a kick out of your "keysentences". And besides, who actually uses meta keywords in 2013...
I do, but I follow the RULES for them so they are actually still obeyed -- despite the wild rumors and claims by people NOT using them properly to the contrary. Hence this part of my "what's wrong with your website" rant/series of articles: http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-2#section_2.4
Really want to thanks deathshadow to point out those problems, and i agreed your points. its definitely a outdated website compare to html5, have to say i am new to html5. about the keywords, i have to admit its ridiculous after had read the link you gave, and i already changed it on my website. For the page width layout, thats a problem, what do you suggest? do you know a good tutorial for it?
Don't get him started on HTML5 - Code using XHTML 1.0 Strict or HTML 4.01 Strict. You need a fluid width, and that involves changing the width of elements to %, and the size of fonts to em. However with the amount of CSS on the site I suspect that will take a long time. Basics are that your page container should be around 70-80%, with each internal container (Header, footer, whatever) taking up a percentage within that. At no point use px to determine width of an element except for min width, if you're using it. Fonts should be declared in em. 1 em is the amount of space a character takes up on the screen. So if your page is using the following sizes (For example): H1: 18px H2:16px P:12px, then you convert them by taking the base size (P) and change it to 1 em. Then change the font sizes proportionate to that, so H2 would become 1.3em, and H1 would become 1.5em, in this example. ~Jam
The home page is very busy. I would have less information on it so that when people come there it's just a more comfortable experience being there. There's so much information people can easily miss things I reckon. I'm thinking it doesn't help the traffic problem but it's my first impression.
Well, in google's eyes, they dont have much value: http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html Strictly SEO, they're pointless. Also deathshadow, on your site's post, you should include a list of some of the new tags people should start using in HTML5 ( If you haven't already), like: <header> <hgroup> <footer> <nav> <aside> <figure> <figcaption> <article> <section> I've used all of them, and then style them with CSS. Sure you can use divs, but one should organize their code.
Jam, as you suggest, after 3 hours work, i changed my page width layout by replacing all metric pixel by %, now it looks quiet good on most screens, but its messy on all mobile devices, i think the problem is that i set the page container's width to 80% and all sub-container are on % based on main container, and the % is based on device's width, so all blocks look so small on mobile device and not readable. now what should i do to make my page looks good on mobile device? need help....
Which is funny since in my own testing they still work -- IF you limit it to 7 or 8 'words', IF you limit it to less than 128 characters, IF those words actually exist in BODY, it seems to make a small boost, even in Google, which means they don't even know how their own system works anymore. This is why websites like SEOWorkers will pretty much tell you the exact same thing. Of course since 99.99% of developers don't do that, guess what? META[keywords] doesn't work for them. Again, it's called keyWORDS, not keyhrases, not keysentences, but keyWORDS... 7 or 8 single words (or multi-word proper names are ok -- like "New Hampshire" or "Free Pascal") totalling less than 128 characters that actually exist between your <body></body> tags as CDATA. That's what it's for, and if you do that, it still works! Read the OTHER LINK in my signaure -- pointless IDIOTIC BLOAT, particularly if you use numbered headings and horizontal rules properly! A numbered heading by definition declares the start of a section/subsection of the page, where grammatically lower order (higher numberd) headings are the start of a subsection of the higher order (lower numbered) heading preceeding it. That's why for some twenty plus years we've been told it's improper to have more than one H1, since that's the heading under which ALL SECTIONS OF THE PAGE ARE A SUBSECTION -- and why slapping H1 on the main topic of the page usually makes no sense -- since all the sub-headings on your typical site are rarely subsections of it. (Links and About Me are rarely a subsection of "Latest news"). It's why skipping headings going "down tree" is gibberish and breaks heading navigation (something screen readers and browsers that actually give a **** about accessibility like Opera provide) ... A H3 after a H1 makes no sense since a H3 is the start of a subsection of a H2! No H2, it's gibberish... just as lower order headings before a H1 is gibberish... ... and then even HTML 5 agrees that HR declares a change in topic/section where a heading is unwarranted/undesirable. MEANING HTML 4 ALREADY HAS TAGS TO BREAK THINGS INTO ARTICLES/SECTIONS -- even a page's footer is simply any content after the last heading or HR. This means SECTION, ARTICLE and FOOTER serve no legitimate purpose other than encouraging the addition of extra wrappers. HGROUP is some of the most idiotic bull in the specification and makes no sense unless you're one of the re-re's choosing your tags based on their default appearance or doing dumbass idiotic crap like: <h1>Site Title</h1> <h2>some stupid tagline</h2> WHAT THE BLUE BLAZES would make the tagline the start of a separate subsection?!? It's a literary de-emphasis and a SINGLE heading, as such what's in that H2 belongs INSIDE the H1, likely using a SMALL tag - which is used for when as the written word it would be smaller without changing it's meaning - JUST like B and I and why none of those tags are deprecated, despite what the idiots slapping emphasis (EM) and 'more emphasis' (STRONG) around things that shouldn't be emphasized will tell you! Likewise NAV is pointless foxtrot bravo sierra if you have heading navigation, because it's alleged purpose is to let people on accessibility devices skip over menu/navigation to content -- well guess what, THAT's WHAT PROPER HEADING ORDERS ALREADY PROVIDES IN SUCH USER AGENTS! ASIDE if used to say "this goes off to one side" Is by it's very nature presentational markup akin to HTML 3.2's CENTER TAG!!! -- the only meaning that could possibly make any sense for semantic markup would be a literary aside, where a character breaks the fourth wall do deliver a monologue to the audience while the rest of the cast continues on as if the audience isn't there. (Shakespear, Ferris Bueller, etc) -- so rare a case in online writing it relegates the tag's usefulness to about the same as the rarely if ever used (and even less frequently used properly) ADDRESS tag. When you use responsive layout to strip away all those columns and floats, guess what, it's no longer "aside". ASIDE is presentation, and as such has NO MALFING BUSINESS IN THE MARKUP!!! Figure and figcaption are cute... assuming one actually has mathematical figures with related explanations -- but that's also really rare on websites and already people are slapping it around any and all images and their associated text with no regard for it's semantic meaning... making it just as idiotic as the re-re's who slap paragraphs around single images, extra DIV around menu UL for no good reason, etc, etc... HTML 5 is a bunch of idiotic bullshit and redundant bloat IF you've bothered paying attention the past decade and a half, practicing semantic markup, Oh, and there's a REASON to use DIV instead of all those idiotic tags -- DIV is semantically neutral, it implies no meaning to it's content. That's a GOOD thing, as it lets the content inside it stand on it's own merits using the EXISTING meanings your content should actually have thanks to tags like H1..H6, HR, P, OL, UL, etc, etc... ALL those new tags do is encourage people to continue one of the worst trends in web development -- the people who slapped endless pointless nested tables around each-other got to HTML 4 and ended up wrapping endless pointless DIV around each-other, now just wrap endless pointless SECTION around each-other.... It went from bad to worse to worst! Especially the re-re's who are just using SECTION wherever they used to use DIV so they end up with section wrapped around section wrapped around section when NONE of them are even sections/subsections or need extra semantic meanings! For example, someone here on these forums was holding up this garbage as an example of good HTML 5 practices: <header> <section id="header" class="container_12"> <section class="grid_5"> <img id="logo" src="http://assets.intellectproductions.com//eca233_emr/img/layout/logo.png" alt="NetworkAdministration" /> </section> <section class="grid_7"> <section class="buttons"> <p><a href="#" class="button">Employee Login</a></p> </section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our Physicians</a></li> <li><a href="#">Patient Registration</a></li> <li><a href="#">Visits</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </section> </section> </header> <!-- END HEADER --> <section id="grey-bg"></section> Code (markup): It's got HEADER, what the *** does it need multiple sections in it for? the IMG is non-semantic heading replacement, that should be a H1 with some form of image-replacement like gilder-levin, the next 'section' isn't a subsection either or if it is, that's ALREADY communicated by the two sections inside it, the latter by NAV. There is NO reason for 'employee login' to grammatically be a paragraph so that's just bad semantics -- and the empty final section is a presentational hook, meaning it shouldn't be having ANY semantic meaning applied to it because it's NOT CONTENT! That's one hell of a train wreck of bloated rotting on the beach like a whale carcass code for what I'd have written as: <div class="widthWrapper"> <h1> <span>Network</span>Administration <b><!-- image sandbag --></b> </h1> <ul id="employeeBar"> <li><a href="#">Employee Login</a></li> </ul> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">Our Physicians</a></li> <li><a href="#">Patient Registration</a></li> <li><a href="#">Visits</a></li> <li><a href="#">Contact Us</a></li> </ul> Code (markup): That UL around 'employeeBar' assumes there would be more options when they're logged in... like "profile", "messages", "logout"; the empty B is for gilder-levin, the span being to try and replicate image coloration when images are disabled/blocked. It's called graceful degradation... and if like a good little dooby I have a HR or H2 before the content, I've even got NAV's functionality already working in many UA's ... without even wasting time on NAV. We don't need 'header', we have a headING... we don't need section, that's what UL should ALREADY BE PROVIDING... ... and of course don't even get me STARTED about the presentational classes in the original from the use of some dipshit off the shelf CSS 'framework' -- defeating the entire point of semantic markup, separation of presentation from content, or even using CSS in the first place. CSS frameworks, OOCSS and their kine being little more than continuing to justify the presentational markup practices of HTML 3.2. But yeah, those new HTML 5 structural tags make site building SO much simpler... <Bill Cosby>RIGHT....</cosby> News flash, when the majority of developers cannot use or are blissfully unaware of the EXISTING semantic tags like CAPTION, LEGEND, LABEL, THEAD, TBODY, TH, SAMP, KBD, VAR... or attributes like SCOPE and AXIS, or can't even be bothered to use heading tags properly, THROWING MORE TAGS IN THE MIX IS NOT THE ANSWER! It's the same type of halfwit garbage you see from the AJAX-tards who use it to replicate framesets just out of some 'pageloads are evil' whackjob paranoia and then sell it to the suits as 'faster' or 'using less bandwidth' when deep down anyone with more than two brain cells to rub together should know it's BULL... because when a page is bloated and slow loading, THROWING MORE CODE AT IT IS NOT THE ANSWER!. Of course those types of nimrods wouldn't be resorting to such dimestore hoodoo / five and ten voodoo if their code to content ratio didn't start out at 20:1 before they even start writing their pointless bloated scripting for nothing. JS for nothing and your scripts for free... that ain't working, that's not how you do it... lemme tell ya, these guys ARE dumb... Maybe make the page load slower with some jquery, maybe slow it down with some YUI... I want my... I want my... I want my PHP But all of it is again typical of the people who never pulled their heads out of 1997's ARSE, and until a few years ago were still just sleazing out presentational HTML 3.2 and slapping 4 tranny around it -- now today they continue to crap out their endless pointlessly bloated decade and a half out of date garbage code; only difference being they slap 5's lip-service around it for ZERO actual improvement in code quality, clarity, ease of maintenance or reduction in bandwidth consumption. HTML 5 is, from a markup standpoint, a trip with Mr. Peabody and his boy Sherman to 1997. (or is it Doc Brown and his boy Marty? Doctor and his companion of the year? Bill and Ted?) It undoes ALL the progress 4 / X 1.0 STRICT provided, completely forgets the reasoning behind STRICT's creation, and on the whole serves no legitimate purpose for rational developers who bothered moving past the 1990's in their site building practices! Oh, and apologies for the threadjacking rant. <henghist>Threadjack, THREADJACK, THREADJACK Mwuhahaahaaa... you're all gonna die.... die...</henghist>
Trying it on responsive, it really suffers. I would recommend you make it so it just stays the same or the responsive aspect (if there is one and it's not just poor coding) actually sticks.
You want to use something called 'media queries' -- on mobile you just start stripping out things like the width setting - it's the easiest approach to doing it... for example if you had #pagewrapper { width:90%} you could get rid of that at display sizes smaller than a certain size thus: @media (max-width:768px) { #pageWrapper { width:auto; } } Code (markup): Put something like that at the end of your stylesheet, and it will override your normal declaration below the stated max-width in the query. Generally speaking it's the best approach as you can do things like strip away floats and columns as the screen gets narrower, without dumbing anything down content-wise for mobile users. Sometimes it often helps to strip out presentational images or force resizing of such content as well -- mobile usually has less RAM and bandwidth to play with, so gutting out things they don't need can help a lot.
deathshadow knows what's up. This might help, too http://www.netmagazine.com/tutorials/build-basic-responsive-site-css not my site, but it's helped me more than a few times.
Create a new stylesheet and call it mobile. Link it from your Head section and set either a media query (What deathshadow suggested) or set the media= to "handheld". Then, style your website. Use display: none; on elements that you don't want mobile users to see (You might want to get rid of the sidebar for mobile users, for example). One of DS's sites showcases this brilliantly - http://www.ewiusb.com/. Resize the window and see how the view changes for different resolutions.
Jam, thanks for infos, DS's site is definitely a good lesson, i think i figured out how to do a responsive site, and i also did a major changes on my website, when you have time, please take a look on my website, then tell me what you think? or is there still something i can do better. Thanks!