July 18, 201115 yr This is my first website and to reiterate I am a complete newbie to website creation. It's for my wife's new business and is simply a static site with a few forms - nothing fancy! It still needs some styling on several pages but I've got it up and running for now. I know my images need to be smaller so after a crash course with photoshop I'll see what I can do! Any constructive critiscism or a gold star is welcome (did I mention I'm a newbie and this is my first ever site? ) http://www.kindermusikwithnadine.com Thanks! Edited July 18, 201115 yr by Webtastic
July 18, 201115 yr Hmm, I'm not sure how to approach this gently, I've never been too great at it. So how about I just give you a list of stuff that could be worked on, you don't take it the wrong way and we all go on our way witha nice learning experience? First off, it's not terrible. I have seen much worse. You managed to avoid flashing GIF's and frames, which is pretty great, most first timers don't. You also seem to have a decent grasp of layout and structure. So let's get into the nitpicky bit. The fonts aren't great. I see cursive but looking at the stylesheet I see it's trying to use Comic Sans. Both are pretty bad for body text. Generally you want to stick to something 'normal'. Arial, Helvetica, Times, Georgia etc. Because it's obviously a design influence by kids and fun I'd go sans-serif. It's too wide. Unless it's an intentional design decision you want to avoid side scrolling as much as possible. General rule at the moment is maximum 960px wide. You are resizing images in HTML which is a big no-no, but you know that already. There isn't much consistancy in the design. As you move between pages the header changes, sometimes vanishes as do the sidebars. What I would do is drop the right hand sidebar entirely, keep the navigation/testimonials/facebook on the left hand side and always display it. This will help you reduce width and provide consistency in one go. Minor user-experience quibble I always pick up - Your forms should be aligned vertically. Label above text field every time and buttons to the right. It's the natural progression for people and you would be surprised how many people get frustrated when you change it. Most importantly ; Don't get discouraged.. Every single one of us has a long way to go and we always will. Don't be afraid to try things, don't be afraid to straight copy other peoples work to help you figure out HOW and WHY they it's done a certain way. Finally : That picture of your wife on the About me page? Put that on the main page, she's pretty =) (Also something clever about making the business more human to customers.. but really just the pretty) Edited July 18, 201115 yr by Glowbridge
July 18, 201115 yr Author Hmm, I'm not sure how to approach this gently, I've never been too great at it. So how about I just give you a list of stuff that could be worked on, you don't take it the wrong way and we all go on our way witha nice learning experience? First off, it's not terrible. I have seen much worse. You managed to avoid flashing GIF's and frames, which is pretty great, most first timers don't. You also seem to have a decent grasp of layout and structure. So let's get into the nitpicky bit. The fonts aren't great. I see cursive but looking at the stylesheet I see it's trying to use Comic Sans. Both are pretty bad for body text. Generally you want to stick to something 'normal'. Arial, Helvetica, Times, Georgia etc. Because it's obviously a design influence by kids and fun I'd go sans-serif. It's too wide. Unless it's an intentional design decision you want to avoid side scrolling as much as possible. General rule at the moment is maximum 960px wide. You are resizing images in HTML which is a big no-no, but you know that already. There isn't much consistancy in the design. As you move between pages the header changes, sometimes vanishes as do the sidebars. What I would do is drop the right hand sidebar entirely, keep the navigation/testimonials/facebook on the left hand side and always display it. This will help you reduce width and provide consistency in one go. Minor user-experience quibble I always pick up - Your forms should be aligned vertically. Label above text field every time and buttons to the right. It's the natural progression for people and you would be surprised how many people get frustrated when you change it. Most importantly ; Don't get discouraged.. Every single one of us has a long way to go and we always will. Don't be afraid to try things, don't be afraid to straight copy other peoples work to help you figure out HOW and WHY they it's done a certain way. Finally : That picture of your wife on the About me page? Put that on the main page, she's pretty =) (Also something clever about making the business more human to customers.. but really just the pretty) This is exactly the kind of constructive critiscm I'm after. Don't worry, I have a thick skin and I want to learn/improve this and future sites. I'm going to post back later to your comments (really busy now!). I've been told by two people that on teh homepage the texts in quotes are misaligned and hover over the pictures. Looks fine on my pc A resolution issue? I need to workout how to fix that.
July 18, 201115 yr Author Hmm, I'm not sure how to approach this gently, I've never been too great at it. So how about I just give you a list of stuff that could be worked on, you don't take it the wrong way and we all go on our way witha nice learning experience? Sounds good to me First off, it's not terrible. I have seen much worse. You managed to avoid flashing GIF's and frames, which is pretty great, most first timers don't. You also seem to have a decent grasp of layout and structure. Thanks. I want to keep it simple and avoid flashy things etc as you mention. I know it can be improved greatly but it's a start. So let's get into the nitpicky bit. The fonts aren't great. I see cursive but looking at the stylesheet I see it's trying to use Comic Sans. Both are pretty bad for body text. Generally you want to stick to something 'normal'. Arial, Helvetica, Times, Georgia etc. Because it's obviously a design influence by kids and fun I'd go sans-serif. Ok, noted. Thanks. It's too wide. Unless it's an intentional design decision you want to avoid side scrolling as much as possible. General rule at the moment is maximum 960px wide. Ok, I'll change it to 960 as you suggest. I don't get scroll bars on my screen but I guess its to do with screen resolution? Only reason I put a width in was because of text and images jumping around when restoring down/changing the size of a browser window. You are resizing images in HTML which is a big no-no, but you know that already. Yes, lazy of me, I know. I'll create a div class for them. There isn't much consistancy in the design. As you move between pages the header changes, sometimes vanishes as do the sidebars. What I would do is drop the right hand sidebar entirely, keep the navigation/testimonials/facebook on the left hand side and always display it. This will help you reduce width and provide consistency in one go. Ok, all good stuff. I didn't really go with a template design in mind but I see what you are saying. Minor user-experience quibble I always pick up - Your forms should be aligned vertically. Label above text field every time and buttons to the right. It's the natural progression for people and you would be surprised how many people get frustrated when you change it. Ok, makes sense and I'll get that changed. Most importantly ; Don't get discouraged.. Every single one of us has a long way to go and we always will. Don't be afraid to try things, don't be afraid to straight copy other peoples work to help you figure out HOW and WHY they it's done a certain way. No worries, I'm keen to learn and dont have a problem with constructive criticism. Finally : That picture of your wife on the About me page? Put that on the main page, she's pretty =) (Also something clever about making the business more human to customers.. but really just the pretty) Ha-ha - thanks, she'll be happy when I tell her Huge thanks for your suggestions Watch this space! Webtastic!
July 18, 201115 yr Well i don't know about anyone else but i got alot of load error (of just errors in the code) And i agree with Glowbridge on this one but you should try to get a new colors for the writing because it looks a bit tatty with that font but overall not that bad for a first attempt
July 19, 201115 yr Hi Webtastic Good effort for your first site, still a lot to do/learn but the start is there. You should look into using lists instead of tables. And remake the quotation marks in photoshop, and save them as an PNG file instead of a JPG file. This will give you a transparant image with shadow, instead of the white background they have now. Good luck P.H.
July 19, 201115 yr Author Thanks for the additional comments I've just looked at the site from my work PC which is still on IE7 and it looks a mess! Text overlaps pictures and everything is misaligned. Looks fine on my home pc using IE8 or Firefox. Some people have reported just the quotes on the homepage overlap pictures, all else ok. I'm sitting down with a friend in the know tonight to work through what needs doing to get the layout sorted. Then I'll be working on the suggestions from this forum. Thanks!
July 19, 201115 yr Hi webtastic, that was a great effort. I especially liked some features which i haven't noticed any first-time user to do., viz., there's a video on the main page and you have also given the option to locate by a map. I liked the map thing. It shows ingenuity. But, while reading, i didn't quite like the font. Also, when u go from one page to another, there's a bit of inconsistency. But still, i think a couple of more websites and you will be able to design even more better sites. Edited July 19, 201115 yr by 2cool designs
July 19, 201115 yr In your CSS stylesheet .h2 #h3 .h4 you can name these: h1 h2 h3 etc. No dots, nothing. Also: Make a wrapper 980px wide to wrap the whole site. Then you can resize individual divs to align inside the site wrapper. <div id="site_wrap"> should be the first div after <body> Then your logo image does not need to be inside a div, just create the following CSS class. .IMG_logo { float:left; padding-bottom:20px; clear:right; } Something similar can be done for most elements on your page. Also your top navigation is made with <li> tags, very good. Now do the same for the bottom/footer navigation, here you use tables, bad bad. Good luck again. P.H. This style can be attached to that image to cr Edited July 19, 201115 yr by seedism
July 19, 201115 yr Author Hi webtastic, that was a great effort. I especially liked some features which i haven't noticed any first-time user to do., viz., there's a video on the main page and you have also given the option to locate by a map. I liked the map thing. It shows ingenuity. But, while reading, i didn't quite like the font. Also, when u go from one page to another, there's a bit of inconsistency. But still, i think a couple of more websites and you will be able to design even more better sites. Hi! Thanks for the comments. I know I've made some amateur mistakes and that the site needs a lot more work but I am slightly pleased with it given its my first from zero experience. The font will definitely change. My wife says she likes it but I'll get it changed. Thanks for taking the time to look through it and post back +1 for you. W
July 19, 201115 yr Author In your CSS stylesheet .h2 #h3 .h4 you can name these: h1 h2 h3 etc. No dots, nothing. Ok. My css sheet is a right mes and does need a little tidying. When I first started teh site I kept getting confused on when to use a div id or div class although I think I understand it now. I though # was for div id and . for a div class? Also: Make a wrapper 980px wide to wrap the whole site. Then you can resize individual divs to align inside the site wrapper. <div id="site_wrap"> should be the first div after <body> Ok, I'll do this. I did notice if I set it to 960 or 980 then images and text move around. I also get scroll bars along the bottom. But I think I know why. I have a bit of rework to do Then your logo image does not need to be inside a div, just create the following CSS class. .IMG_logo { float:left; padding-bottom:20px; clear:right; } Something similar can be done for most elements on your page. Ok thanks! could you explain what "clear" does? Seen it a few times but not sure what it does and when you would use it. Also your top navigation is made with <li> tags, very good. Now do the same for the bottom/footer navigation, here you use tables, bad bad. Thats me being lazy. I know tables are the old way so I'll redo it with lists and ban tables from any future work! Good luck again. Th Thank you for taking the time and effort to look over the site, style sheet and make teh suggestions. Realy really appreciated
July 20, 201115 yr Author Good morning Website Gurus My website has been updated. After taking on board the comments and suggestions I visited a website guru friend of mine who reiterated the importance of a design/template layout. I've recreated the site using a header div, colum 1 2 and 3 divs and a footer div. I then placed the relevant contetnt in each section and now I longer see a mess in different browsers, especially when restoring down. I have not yet changed the classes, home materials, timetable or enrol pages. I'll be doing that later today. Changes on the home page: Font changed New facebook badge added. Footer redone with li's, not a table. All images resized in Photoshop and uploaded again. Changes on Locations page: Header added Font changed Changes on Contact form: Data Entry fields position changed. Header added Font changed thank you page created after form submission. (send me a message ) No form checking yet (will do that later). About me page changes: Image of the wife resized in photoshop. It was 1.5MB. Now its about 17k! Font changed. Header added. **** The footer in IE7 doesnt sprread out but I'm not overly concerned about that. To do: Resize the images on other pages and upload again Add css entries for image sizes rather than in the html (height, width) Change font on other pages. Add the newly created divs (header, colums, footer) and position the elements within them. Some general styling and tidying up of the pages. ****** Any comments or suggestions from the changes? Webtastic! Edited July 20, 201115 yr by Webtastic
July 20, 201115 yr Author Right - I'm 99% done. Apart from a little further styling to do, I've completed the corrections/suggestions from this forum and friends. I'd be grateful for any final comments or suggestions. My wife has already had her first query and confirmation of a "pupil" http://www.kindermusikwithnadine.com Many thanks Edit: I know have a few tables in there and have resized imaged in the HTML. Those are on the list to be done via CSS and/or better methods. For now my brain is full! Webtastic! Edited July 20, 201115 yr by Webtastic
July 20, 201115 yr Isnt that a lot better, great. I would remove the underline from your links, the hover effect from the background color is enough. Just add text-decoration:none; to the CSS tag of those links. And in the header you use those music-notes images on either side of the text. You could do a horizontal flip on the image on the right, the left side of each of those musical bars is darker then the right side and it would look better if both darker ends are on the outer edge of the header. Good work and 200% improvement already. P.H.
July 21, 201115 yr Author Isnt that a lot better, great. I would remove the underline from your links, the hover effect from the background color is enough. Just add text-decoration:none; to the CSS tag of those links. And in the header you use those music-notes images on either side of the text. You could do a horizontal flip on the image on the right, the left side of each of those musical bars is darker then the right side and it would look better if both darker ends are on the outer edge of the header. Good work and 200% improvement already. P.H. Hi! Thanks very much for the thumbs up and further suggestions. I'm just relieved that I understand a few things better now. The text moving all over was driving me mad! But I understand now the importance of creating the relevant areas and then adding the content to each section. So much more to learn but I'm pleased with my first attempt Webtastic! edit: just overwrote the style sheet with an older copy. Now pages are out of place Will put the correct one back later (its on my home pc) Edited July 21, 201115 yr by Webtastic
Create an account or sign in to comment