Please critique a Web page
Friday December 28, 2007
I want it to look better. This is my website. Could someone please review it and point out the errors. http://www.mathgym.info
My Thoughts
I decided to look at the page from a purely technical standpoint. All you designers out there are welcome to address look and feel issues. Some of the things I would fix:
- There is no meta title on the page. This tag is used in bookmarks and search engines. And leaving it out is a bad idea. The title is one of the most important tags on your Web page.
- Based on the namespace listed I'm guessing that this page was written in Microsoft Word or another Office product. While bodor has successfully converted it to HTML, Word adds strange conventions and can make pages difficult to manage later. I would strongly suggest switching to a real HTML editor. There are lots of great free HTML editors.
- The meta tags don't all have quotes around the attributes. Such as name=keywords, rather than name="keywords". Also the keywords tag also has a bunch of extra words that will cause the page to not validate.
- Inline styles are fine, but all the style properties are in uppercase. While there is nothing specifically wrong with that, if you ever move to XHTML, they won't work any more as most Web languages are case-sensitive. In other words "BLOCKQUOTE" and "blockquote" are two different tags in XHTML.
- The body tag uses the bgcolor attribute which is deprecated.
- This page desperately needs to be validated. Just skimming through the HTML and I see many errors. Culminating in the </body></html> tags listed twice.
How Would You Improve This Page?
If you have suggestions for bodor, you can post them in the comments or reply in the forum. I'm sure he would appreciate your feedback. Just remember to provide feedback that's useful, not just a flame.
Comments
Page doesn’t center in Firefox.
This person probably doesn’t know html and css, so a visual editor like Word, or better http://www.kompozer.net/ would probably be the only option.
Mostly needs more design work because it is sort of visually unappealing, but can do this in a visual editor.
Not bad for starters. I agree with Luther, it needs more visual appeal. Making a drawing on paper will give you some ideas for layout.
As far as free editors go, A decent one I use for quick fixes is PSPad. It has Tidy built in and many other functions. You can get it from www.pspad.com.
No HTML specification, the markup is malformed and will fail any validator, there’s no CSS sheet, the sentences have huge gaps in them (at least they do in Firefox) and that is what I noticed spending no more than 30-60 seconds on the page.
I want to be nice. I want to say wonderful things about it. But I can’t.
As for HTML editors, I use plain online HTML editors or Notepad. I check all my pages in the W3C HTML Validator every once in a while to clean up any stray code and mistakes. Once you know HTML there is no editor in the world that will make it any easier but plenty that will just confuse you more. Until you get to that stage you’ll want to download and use HTML Tidy, as it shows you where your mistakes are before you put a document online.
And IMO (there is a lot of argument over this, but I’m sticking to my guns) simple is best, so I code in XHTML 1.0 Strict for an XHTML 1.0 transitional blog. Using the Strict specification forces you to close all open tags (or make tags self-closing, when possible), and it forces you to give up a lot of lengthy and/or deprecated tags present in the current HTML specification. That’s why I love it.
I cut my teeth learning HTML with Jennifer’s blog, bodor, so you can’t go wrong here. I also think the W3C Schools is an excellent resource.
CSS I’ve learned in bits and pieces. I don’t realy know what the best resource is to learn it, because I always had a hard time with it no matter what I read. I can change any part of any stylesheet these days, but don’t ask me to write one from scratch; I still can’t size containers and sub-elements correctly, and I’m not a designer by any strecth of the imagination.
If one obviously does not know and understand the basics of HTML and CSS (and Javascript) it’s not a good advice to suggest the use of an (or any)editor. Because that’s the best way to make sure that such a starter never will learn how to write good scripts. An editor is a tool, not a panacee for good scripting.
The source looks like it was made in Word, and word isn’t exactly the best editor to work with. It makes editing the site later a lot harder. I would find some visual editor to use. My favorite is dreamweaver cause it tends to work out well in all browsers. This page doesn’t look all that good in Firefox.
All the CSS and html appear to be in caps. If you use XHTML later this will no longer work and you will have lots of problems.
Best bet get a web page editor that creates standard XHTML and CSS web pages.
Good luck
peace
James
FIRST AND BIGGEST ERROR (IMO).
The whole page is inside a DIV with a good width but a strange height(Why not just fit it to the contents..?)
Endless code lines messing with things that styles should be doing, wich repeats the same process ENDLESSLY!
Too much text. Poorly formated, or rather excessively formated.
The few images that appear have low quality. Word Art banner(or at least it seems so, could’ve done a better job even with JUST word art).
Badly organized.
No color rhythm.
No cross-browser compatibility in a thing as simple as centering the page.
The form is dead (could at least lead to a fake “successfull” page, but heck!).
“atadri.com” image is poorly conceived. could at least link to the page it refers to.
I think that’s about it…
Whenever I see a web site that has a good idea and is developed by someone who isn’t a web developer or even a marketing person I ask myself one thing.
“Is this idea worth paying someone to build a web site to market it?”
If you can’t afford to pay for this service at this time then I suggest spending the time to learn how to do it yourself. If you feel your idea isn’t worth the effort on your part to really learn what you need to do then a half hearted unprofessional attempt isn’t going to make it better; rather it tends to be the opposite.
I guess I make these statements because, instead of giving suggestions on how to make this site better to a person who probably cannot execute, (and please don’t take this as a bash. There are many areas in web development that I am going to enlist help from another because I know my limitations,) and would be a waste of time.
Read and learn as much as you can so that YOU know what you need to do. When you can ask specific questions about web design/development then you are ready to create a web site that may be worthy of the money you will spend…
IS YOUR IDEA WORTH IT?
I want to first commend you for wanting to improve your site by subjecting it to some constructive criticism. I hope this will be a positive experince for you.
First, I would like to say is to use the right tool for the right job. As I’m sure this has been mentioned already, Microsoft Word is not the best choice for web design. Just because it can do it does not mean you should do it. This will help with most of your formatting and coding issues.
Second, images are great, but never use them for page titles and other important information. You leave out a lot for search engines to miss this way. Use the heading tags for page titles and section titles. This will help get them noticed by both users and search engines.
Third, your call to action, which is your opt-in form, is getting lost. The one thing you want your visitors to do, they will miss. In FireFox, it is outside the white area. Move it into the white area. Also you need to make it noticeable. Use images to draw them there. Make sure that you give them a reason for them to give you their name and email, an ethical bribe. Maybe a free pdf report that they will get right away on something relevant to what they are going to receive from you over the next few weeks.
These is just a very quick look-over. I’m sure if I get into the code, there will be more issues. But if you just start with these, we can work on code issues next. I hope this gives you some encouragement and I hope that you are successful in your endeavor.
If you are using something simple, I would use Tables as a background to get the text in alignment, and to neaten up the page. I do currently use Expression Web, but for a simple website, just neatening things up would be helpful.
It is hard to navigate the page without using the mouse. Don’t forget some folks can’t use a mouse ….
very poor color contrast between the blue - would be hard for a person with visual problems to see this.
As mentioned, the code needs to be validated.
There is no alt text for the graphics.
It would look better to use the bold text only where needed, not for most of the text.
The code is a MESS, I would hate to have to maintain it
Also, the text has very strange spacing
It is obvious that Word was used to create the page, then saved as HTML. The results are always unacceptable. This is in the source:
Also, the writer’s choice of bold & normal text is strange and doesn’t seem to add anything meaningful to the content.
Then at the bottom of the page, the white table is left behind in favor of the blue background. What’s up with that? Also, I like to leave a little space at the bottom of a page, and none exists here.
Some people are just not meant to design webpages. This is one of them. Please get a professional.
He is to be praised for trying, but please keep that page off the web.
Content does not center in Firefox. CSS’s need to be right on the money with no errors for Firefox to display properly, Explorer is more forgiving.
Changing the color for each letter of the logo at the top makes it hard to read. I noticed that the URL for the page is: http://www.mathgym.info but the logo says atadri.com I am left confused.
The gaps in the text are caused by centering it. If a line is too long to fit the width the browser puts spaces in the line to compensate. Align the text to the left and use another means to put it in the center.
When I come to a web site for the first time I am looking for something. The site should antisipate what this is and make it easy for me to find it. With this site I am confronted with a lot of questions that make me think. I did not serf to this site to be asked questions, what I want are answers. The answers should be there instead of the questions.
The first thing I want to know is “What is Math Gym?” The second is “What will Math Gym do for me?”
Away down at the bottom of the page I am told that I will receive “doses” of how to keep my mind perfect. I am not told however what this dose is: Is it a news letter? Or perhaps a small bottle of elixir?
I am not told what happens if I fill out the form and click the “Register Me” button. Please explain in detail what I will get, and how much it costs, if it is free please say so.
Wayne
I have to agree with Marah Marie - I can’t find any positive feedback to give and I’m not the type to do ‘nicey-nice’ and blow smoke up someone’s a**. It is one of the worst webpages (and I use that term only because it has an url) that I’ve seen. If you aren’t willing to hire some one to do a basic site, then at least take some classes!!! HTML basics would fix a ton of the problems - and all you need is notepad! Take a graphic design class because you’re going against everything good on the web. Go to websites that work, look good and have received awards. Find the reasons why the work so well - you’ll find they’re well organized, easy to find materials, clear and easy to understand.
I’m sorry, but your webpage meets none of these criteria. Time to stop - pull what’s on there put up a ‘coming soon’ sign and rethink and reconfigure the whole thing. It looks horrid - I sure as heck would never give you my email address! It looks like a hack made it and is likely to sell all of the email addresses. I didn’t see anything about Privacy on there either.
Too much, done far too poorly. Sorry - but you asked for everyone’s opinion.
One thing is for certain, nothing is actually centered, meaning, you aren’t using whole tables.
I saw sentences broken up, I saw some sentences that didn’t match others for space - some sentences larger than others, there’s no coordination of these sentences as a picture. You’ve got a great idea, but…its not picture perfect.
If you want tags made, I can make tags for titles, and separate ideas. You can write me at Lduke@elp.rr.com. I won’t charge you for the tags, but you need titles, sub titles, and a directory system.
But most importantly, you need to use tables. Whole tables, allows you to say what you want to say and put the tables where you want them to sit as if you were setting up a newspaper for people to read. The singles that you are using are out of proportion and all over the page. The need to line up tables, and sizes of lettering - are essential to a good page.
Think of making the web page like a picture.
If you don’t know html - which some folks don’t, but are trying to build a web site, I recommend a simple program known as Net Fusion Objects (ver 10) with 1 and 1 web hosting. Its an easy program and cost is exceptionally effecient if not one of the best reasons for this program. But you have so many wonderful options in building a web site with this program.
This original and potentially beneficial website would do any website lecturer proud.
However, upon attempting to register I was met with the following error message:
Page Not Found
The page you tried to access does not exist on this server. This page may not exist due to the following reasons:
You are the owner of this web site and you have not uploaded (or incorrectly uploaded) your web site. For information on uploading your web site using FTP client software or web design software, click here for FTP Upload Information.
The URL that you have entered in your browser is incorrect. Please re-enter the URL and try again.
The Link that you clicked on incorrectly points to this page. Please contact the owner of this web site to inform them of this situation.
Apart from this, the fact that you requested feedback shows a keen interest in the subject that will develop with subsequent attempts.
I won’t be so tough on my criticisms. First I applaud anybody who tries to make a Web Site. There is a special felling of being publish on the web and knowing your tried something new.
The first I would recommend is a good book. HTML, XHTML, and CSS, Sixth Edition from Elisabeth Castro is a great starter’s book. Then get a cheap or free web authoring tool and try to clean up your html and put some indent to see more clearly. You will be amazed by what can be accomplish with just some tweaks and peaks. Don’t try to grasp everything at once. Getting rid of old html markup is a good starting point. Then work your way in creating a small style sheet CSS and you will be on your way.
I wish you good luck, and don’t get discouraged.
a. title missing
b. lose the cute curved text
c. change the different font heights (point size) to be consistent
d. the blue on blue text is a poor idea, go for contrast, hard to read as is
e. my broswer showed unusual gaps in sentences
f. the sentences are disjointed, have someone who writes/speaks English well proof it for correct sense and words, seemed awkward several places, your spell checker may correct the words, but your use of them is off. If you are a kid have an adult proof it for you.
g. get to the point, this sounds more like an advertisement for something.
what is your intent ?
to inform?
to sell a product?
h. give me more information about why I should work with this page/data, what are my benefits, why should I come to your page again?
i.who is your audience? shouldn’t be everyone.
j. there are a gadzillion images available to use, use related images to help your page. I’m more image orientated than text.
ummm… Is this a troll? It looks a lot like someone with a sense of humor submitted this to stir the class for comments during the holiday doldrums.
Using Microsoft Word as the base editor, hand-doctoring the code creating coding errors even Word wouldn’t create, almost intentionally bad type style and layout, poor actual content, etc, etc,etc.
This looks like the work of someone who wanted to build a troll page with as many errors as possible. Is Jennifer playing with us?
I agree with the above. It is visually unappealing. Although there is a “nod” to CSS, it really can do more than define fonts and a border. About.com has wonderful articles on (X)HTML and CSS, so review them and the ideas will come pouring in.
You’re trying and have a receptive attitude. Don’t get discouraged; it cannot be learned overnight. Keep at it and you’ll succeed.
Happy Dae.
http://www.ShoeStringGenealogy.com
If this is a genuine plea, I suggest getting hold of several different browsers and trying new web pages on each - Avant, Opera and Firefox for example. I suspect that bodor’s pages may look OK on IE but they certainly don’t in Firefox.
BTW the source code makes interesting reading - is this really an advert for a web hosting set-up? There’s reference to an e-book that doesn’t make it onto the screen. Also lots of links…?
Why do I feel that I’ve been conned?
The idea is great. Suggestions for improvement: 1-use only one font; 2-the the information needs to be consolidated - some is left, some is centered, and the line spacing is uneven. Is reads as if it were unorganized.
look at http://www.knujon.com/
They have a lot of information yet it looks “clean”.
I think, perhaps, you could say, “Here is the place to give your brain a daily workout” first, then ask all the questions in the same size font and not bold.
Good luck, you have a good start.
Well, what a fascinating exercise! I knew that WORD and MS PUBLISHER and the like created appalling code, but looking at bodor’s code, it really brought it home.
I have recreated the page temporarily at http://www.thetisisland.net/bodor/mathgym-test1.html. I haven’t attempted to restyle it at all, although I think it would benefit greatly from some rethinking on that score.
All I have done is rewrite the code in VERY simple HTML, being a bit repetitive in places, and separating sections so he/she can view it easily, so it will be obvious what the basic code is doing. Even with adding lines all over the place, I’ve halved the line count. If I’d scrunched it all together the way it is in the original, it would have probably come in at a quarter of the size or less.
You folks out there will probably find I’m writing very old-fashioned HTML, but it works and it’s got to be easier for a beginner to understand.
I could have suggestions for restyling too, but I think bodor needs to begin at the beginning, and get some basic code under his/her belt.
Hope you don’t mind my redoing it this way. I won’t leave it up there indefinitely.
Bodor, kudos to you for asking for help with this!
Folks have already pointed out the technical errors in your webpage, as well as the aesthetic design problems. As a teacher, I suggest you take courses at your local community college and local training labs to learn how to build websites correctly. You need to focus on 2 areas:
1) Coding — specifically CSS, xHTML, and using a professional software program such as Dreamweaver or Expression Web.
2) Website design and development — visual design, navigation, site architecture, writing for the web, marketing strategies, SEO (search engine optimization).
Don’t be discouraged by the feedback you’ve received. You have a good product, MathGym. But you need a better website and marketing campaign to promote the product.
And have someone take a look at your existing content: there are several typos and grammatical errors in your text that need to be corrected pronto!
With that last comment, I might add that you should always copyright your work, just to be safe.
Irregardless of all the negative comments towards your work, never ever give up. We ALL had to start somewhere….
There have been a number of good suggestions posted so far. Let me share my experience with you — the way my eyes, mind, and mouse moved through the page.
* The ads — an immediate distraction. Free site ads like this annoy me. Well considered and well placed ads that can help ME and help you are acceptable. These aren’t.
* atadri.com — colorful and attention getting, but annoying. It links nowhere, and seems to have no relevance to the page.
* Header text — I immediately think low-resolution = old web page, but not a show stopper. At least now I am processing information related to what you are presenting.
* Body — strikes me as amateurish due to formatting: gaps in text, frequently changing text size and weight, strange block of whitespace, uncentered, a lot of items with no bullets. Grammar and capitalization need fixed. I am relieved that the text is less than two pages deep and is interesting enough to make me think you might have a desirable product, but ….
* Footer — blue text on blue background? I wonder why you move out of the main div, reduce the text contrast, and bury your submission form. I like brain stimulation, but was afraid of what I might get if I submitted my email address. I quickly bounced up to the top of the page.
* atadri.com — I look up the site and find a single-sentence, one-post “Just another … weblog.” Not much marketing here. Some examples of your brain exercises here could go a long way to selling me your product. On your main page, I only saw very general indications of what your product includes.
* In short — Keep the header text. It works. Give me clean, simple, unified, organized bullets with reasons to sign up. Get me to sign. Point me to more info if I need it. Don’t distract or annoy me!
Good luck, Bodor! Please show us what you come up with.
Jennifer, IMO perhaps you’re going about this wrong. Instead of asking people what’s wrong with his code (Tidy choked on the code after 6 errors and 18 warnings, about 1/2 way through), why not invite regular readers to create a simple page to provide an example, or something to build on, if it’s ok with Bodor.
A good HTML editor for beginners is HippiePro found at hippiepro.com. (Jennifer listed it here.)
I learned to use HTML using Hippie97, the original version (and still use it!). The wizards act as teaching tools - just study the code and you learn how to enter it yourself. I highly recommend this software for those who are just starting out and want to learn how to do it right.
Hi Bodor,
I viewed the site and everyone so far who has commented has given you great advice, but I’m sue by now you are extremely overwhelmed and frustrated.
Web design is a very extensive field and takes years to learn even the basics that one needs to get a perfect site up and operating the way it should.
I would be more than happy to help you get the site straighted out and advise you what your best options are for getting the most from your website.
There are also many other things to consider after the site is up and running. Such as SEO/SEM and so forth.
The meta tags,content, and page title play a big part in how your site is rated by the major search engines.
It seems to me that you are using the site as a promotional tool to attract people to contact you and therefor should take the time to develop relevant
content for them and the SE’s.
All of this depends on how much time you can devote to learning the things you need to get the site done. This is a great place to start and will probably teach you everything you need.
The members here are more than willing to help you with any questions that you may have along the way. The only real way to learn this is through trial and error and keep practicing every chance you get.
Again, if you need any help I am here.
Jack
My Computer Tutor
For those of you who think this might be a con or a fake - no it’s not. Bodor has been posting to my forums for a while, and I thought it might be interesting to take his questions to a wider audience.
Thanks to EVERYONE for all the great feedback. This post has generated a lot more than I expected it to.
Having designed pages since 1992, and being self taught, I recognize with nostalgia creating a page by hand like this. Here are suggestions:
1. Consider going to a CMS like Joomla, then seeking a template that will fit your content. This is cheating, totally! But it makes your content look very professional. You can see a example of it here http://www.wburgnaz.com
2. You need to go to an editor if you are going to pursue your pages by hand coding. The convert to web page option in office should be shot and killed.
3. Keep learning! The best way to learn is to look at pages that you like source code, learn their code, how they did things, then emulate it and play with it until it works for you! Time consuming but SUPER educational because you get to learn what everything does.
This obviously is a poor design. Sorry.
From a technical standpoint, there are several flaws, made with MS Publisher/Word/Frontpage.
Adds an inordinate amount of useless code.
Title missing
Description missing or wrong format
—————————————
This is just plain wrong:
That makes no sense at all. Probably jacked from another page, and edited, and lost format.
——————————————
From a design standpoint it is really bad.
Too many colors in typeface, too many different font sizes.
THe “Give you brain a workout” wasn’t done in a “PhotoShop type” of program and the quality shows it.
——————————————
From an aesthetics point of view, the formatting is all wrong, and the casual use of type face/size is annoying, which is what the visitors will feel.
My Advise:
Start over, start with a real HTML editor,
Choose the coloring and formatting options before you jump in, start simple and embelish from there.
——————————————–
Technical:
Please take a look at the code of say 25-30 websites and consider the (at the top of the code) technical aspects that are in those pages, TITLE, DESCRIPTION, KEYWORDS, ETC… Search around for required META TAGS… read a few times, plan your tags..
USE A REAL HTML Editor.
This is a godaddy.com free website, so the tools available to the author are probably very limited. Look to create your own code (HTML), and Upload it (FTP) to godaddy.
Look at as much about HTML and realated stuff on About.com, which is a wonderful source for developers at every level.
If this person purchase some books about webpage design or log on to howstuffworks.com and follow the tutorial, I believe he will be able to it improve one page at a time.
Is the goal of the page to attempt to make money from ad at the top or to promote MathGym? I would suggest removing the ad from the most important part of the page at the top. You need to fix the odd spaces in the text and somehow add some spacing to the sign up at the bottom. If you do that, then it will be much improved.
Another idea, if you want a much more professional look, is to use one of the free templates you can find on the internet. You will have to learn some html to do that, but, essetially all the html and CSS is done and you can just modify something. It is easy enough that you could learn that on the fly.
Oh poor Bodor - hope we didn’t scare you off. I’m bad at checking back for comments and replies and such so I had no idea until now this got so extensive. When you ask for “feedback” on the Web, as you see, you’re gonna get it; something about not being able to see each other as the conversation unfolds, perhaps, ‘emboldens’ almost everyone. Overall that’s usually a good thing, but it can be a bit hard to take, too.
I can’t give any better advice than what’s already here, all I can say is if you want to learn HTML so you can write it in your sleep practice, practice, practice. It is something you learn by rote, like math. I’m self-taught, and I started much older than most people do, and I had no Web/programming background whatsoever - I just jumped right into it. HTML is your most primitive programming language (it’s not even a programming language, but that’s another story)and the easiest by far to learn of all languages on the web.
This is how I learned it: I would see, for instance, bold text on a page, and want to do that effect myself. In 2005, there was no way to “right-click and view *selection* source” in any IE-like browser, so I had to right-click, view source, and hunt down that one bolded word, stare at the code wrapped around it, then copy it into Word or Notepad to copy to my online text editor later on when I was writing something. I learned one tag at at a time, and I would forget which tags were for what constantly. I went on that way for months, forcing myself to use the straight HTML editor when I barely had any idea what the code was that I was copying into it from other people’s web pages, and making tons of mistakes along the way.
About three months later all that struggling with it just stopped. You’d think I’d been writing HTML since I was 5; the code just flowed right out of my head. At that point I cheered up and realized I could learn it, so I started poking around About.com and W3C Schools to learn more.
Around that time I embarrassed myself greatly on a huge website with a popular story that was on a terrible-looking, high-contrast page of mine. Like you, I got tons of negative feedback about it, distracting from the story people were supposed to be commenting on. That’s what slowly nudged me into learning CSS.
By now I would know Javascript and other programming languages, too, because I actually have an interest in using those, but using free web hosts for most of my content has stunted my progress in learning more, since scripting and programming languages are forbidden in those setups. I plan to correct how and where I host my stuff…someday, so I can finally play catch-up.
If putting the site together yourself is a bit over your head right now, no worries: there are plenty of designers out there looking for work, there are websites like Typepad that will let you point your domain name at one of their hosted sites so you can just use the rich text editor to post new content, there are web hosts that offer Wordpress installations that are supposed to be easy to install and just use the rich text editor included with them from there. Not everyone should code. What you write is probably a lot more important than what you can do with your coding.