August 23, 201115 yr Ok so I just finished designing a site for our recording studio thats not doing so well financially. We needed a fresh new site on a tight budget. I think I am quite pleased at what I came up with and what I could actually remember from when I was twelve trying to make websites for my friends. Anyway so I finihsed the site and everything is looking great the only problem I seem to be facing is the fact that when I check mark up validator it comes up with about 20 errors (sometimes less on other pages). When I go to make the chnages that the site tells me to my whole table formations go all out of whack so technically these errors are actually ebenfiting my site. What do you suggest I do as someone thats just trying to get a site out there that looks good and is compatible on mutiple platforms. Any help will be much appreciated. Check out the site here: http://www.sabellastudios.com/newsite. Let me know what you guys think of my coding and the errors that ensue... Check the error validator here. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sabellastudios.com%2Fnewsite%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2 Thanks again for your time Cheers, Dave
August 23, 201115 yr Well, where do I start? Hmmmm? Can I be brutally honest here...... The aesthetics of the site is okay - for a low budget project then you did good. But looking at your source code there no wonder why it didn't pass the validator - even though validation isn't the be-all-and-end-all! Coding for the web nowadays is all about semantics, everything needs to have meaning. This is why the W3C introduced HTML5 as the next version. It is meant to allow us to write semantically compliant code. Working from the top, here is some pointers for you to research more: Use the HTML5 Doctype - there is no reason why you shouldn't use this now in any project. Never ever put your CSS internal to your HTML - it should always be external, you naughty boy! Same with your javascript - external, external, EXTERNAL! Again why have you used tables for layout - tables for navigation!!!! You should use unordered lists for menus or navigations and either the new HTML5 tags or Divs for layout? Sort that lot out and try and re-validate and then see what you get and post it back up here. In all honesty Dave - don't let the validation get you tied up. If you stick to the basics, the things I have mentioned then it will be compatible on all platforms regardless of validation. Edited August 23, 201115 yr by neilp
August 23, 201115 yr I'd just forget about the validator altogether for now. Concentrate on the purpose of the site. To get more business right? Well, I doubt Google will ever find you unless you adapt to the latest web standards. In other words ... redo the site! eg... <div id="wrapper"> <div id="header"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">studio</a></li> <li><a href="#">gear</a></li> <li><a href="#">clients</a></li> <li><a href="#">music</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> etc etc etc. I could help? Edited August 23, 201115 yr by John Fotios
August 23, 201115 yr Author John: What the heck are you talking about? First off we have a crappy site now and we are already a huge hit on google for major search terns... I dont get the meaning of your post. and that code??? Anyway..nelip. I appreciate a professionals opinion although it might be a little harsh considering I did this all without knowing anything really. I used Adobe Photoshop CS to cut up my main design... CS turned it into HTML for me and it made tables out of my slices..... I dont know any other way format a site without those tables.. how would I go about this.. and where can I find information on making my java and css stuff external. Do you think if I used a newer version of Photoshop like CS5 it would have done a better job..? I know CS is really really old! Edited August 23, 201115 yr by DAS19
August 23, 201115 yr Author and john id love for you to help me but I dont have any money.. hence the reason we are doing this ourselves and on this forum asking for help.
August 23, 201115 yr Author Also one more thing. I understand I shouldn't of used tables but as of now it seems to be compatible everywhere i've checked so is that really worth worrying about? And I will change the doctype to 5 and try to find out how to make my javascript and css external.
August 24, 201115 yr and john id love for you to help me but I dont have any money.. hence the reason we are doing this ourselves and on this forum asking for help. First of all, let me congratulate you on the work you have done yourself. It looks a lot better than some so called 'designers' Also for coming to this site looking for ways to improve your site rather than expecting designers to do your work for you for free (like most.) John: What the heck are you talking about? First off we have a crappy site now and we are already a huge hit on google for major search terns... I dont get the meaning of your post. and that code??? Anyway..nelip. I appreciate a professionals opinion although it might be a little harsh considering I did this all without knowing anything really. I used Adobe Photoshop CS to cut up my main design... CS turned it into HTML for me and it made tables out of my slices..... I dont know any other way format a site without those tables.. how would I go about this.. and where can I find information on making my java and css stuff external. Do you think if I used a newer version of Photoshop like CS5 it would have done a better job..? I know CS is really really old! It can depend what your target market is. If you don't have any competition it isn't going to matter. If you have lots of competition obviously the more optimized your site is the better. I'm not really sure about the Photoshop question. I make the design and then make my own slices. So I'm not sure how the auto conversion works in the newer versions of Photoshop. I know web design isn't your day job but if you're looking to make websites you should definitely look into custom coding. Here's how to external style sheets http://www.w3schools.com/html/html_css.asp but I would advise getting a book to learn how to convert your tables to CSS. Also one more thing. I understand I shouldn't of used tables but as of now it seems to be compatible everywhere i've checked so is that really worth worrying about? And I will change the doctype to 5 and try to find out how to make my javascript and css external. I might get jumped on for this but if it all works looks good in all browsers and resolutions and searches well in Google. Then I guess it's not the end of the world if it's just for one site and you aren't a designer creating loads of different sites using tables.
August 24, 201115 yr Also, you appear to be using an animated gif for your homepage slideshow thing. Try and look into some jquery and use that instead. If you really insist on using an animated gif then make sure of the different pics in it are optimised. It takes a while to load. In fact all of the pics on your site take a while to load. Basically, you're just a bit out of date. I reckon if you gradually bring yourself up to date you will create good sites. You need to get into jquery, external css/js, html5 or xhtml, and try and move away from tables. A lot of your error codes arise from using obsolete code and properties - for example "There is no attribute 'height' " means the height attribute for that element is obsolete. You need to use css styling to set the height instead. Good start though.
August 24, 201115 yr Author Now about the site being "optimized" for best google results. What exactly does that mean and how can I do this. Thanks everyone for your help so far and I realize I'm out of ddate, considering I'm using a method I used when I was fifteen and I'm now twenty two. I just want to get the site up and live and then worry about fixing the errors. My main concern now is thee searchability for google... Oh and why do you think my pics take a long time to load? I saved them as high quality jpgs is there a better format. Edited August 24, 201115 yr by DAS19
August 24, 201115 yr John: What the heck are you talking about? First off we have a crappy site now and we are already a huge hit on google for major search terns... I dont get the meaning of your post. and that code??? What major search terms? I can't find this site anywhere! Not even when I search "sabella studios". Common. Google's smart enough to pop up with a site you've been on a bazillion times.
August 24, 201115 yr Oh and why do you think my pics take a long time to load? I saved them as high quality jpgs is there a better format. Look up "Optimising jpegs for use on the web using photoshop"
August 25, 201115 yr For someone who claims to have made this website without "knowing anything", I think this is a solid result. Sure, it can be cleaned up made better, but it seems to do the job it was designed for and in the end, that is what we all need, right? I recommend you brush up on your coding skills and take a look at jquery and css3 to get up to date with current design standards.
August 25, 201115 yr My main concern now is thee searchability for google... ...and this is exactly why you need to drop the use of tables, animated GIF's and out of date code. Google (and other SE's will get lost in the jumble of code and the chance of your site being adequately indexed drops dramatically). As far as the look of your site goes... there are a few issues but the idea is solid and with a few tweaks it'll look good.
August 25, 201115 yr Author First off thank you all so much for your help you guys have been more than informative. I think I'm going to just find out how to recode the site using div tables and external css and javascript files. Also I will keep in mind all of thr google optimization preferences. Ill still be able to keep my original design idea I guess it just needs a complete coding overhaul. Maybe I cam redirect to that site until I can recode it bc our old site is a number one hit.
August 25, 201115 yr Author Oh and are you affiliated with the chipshop in park slope and downtown brooklyn? I live on butler st maybe you can give me coding tips in person... id pay. Edited August 25, 201115 yr by DAS19
August 25, 201115 yr Oh and are you affiliated with the chipshop in park slope and downtown brooklyn? I live on butler st maybe you can give me coding tips in person... id pay. That had me wondering what Mike had to do with Brooklyn for a few seconds. Of course, you refer to an actual "chip shop".
August 26, 201115 yr First off thank you all so much for your help you guys have been more than informative. I think I'm going to just find out how to recode the site using div tables and external css and javascript files. Also I will keep in mind all of thr google optimization preferences. Ill still be able to keep my original design idea I guess it just needs a complete coding overhaul. Maybe I cam redirect to that site until I can recode it bc our old site is a number one hit. For an external file, all you need to do is create a new file called styles.css. Place that in the same directory(location) as all your other html files, and cut and paste all your CSS into this file. Then inside the <head> tag of all your html files - copy and paste this line of code in there: <link rel="stylesheet" href="styles.css"> Then do the same for your Javascript. This will help to speed up your pages as the styles and JS will be get cached in the users browser from the initial page load, thus speeding up the download process of each subsequent page. Also, it makes sense to separate your CSS so it's easier to locate when the time comes to make some changes and instead of going into all your pages to make one small change, you can just open up your main CSS file - make the change and it will cascade throughout all your other pages. Makes sense now? That should get you started anyway's and really your main concern now is the tables. The whole idea is to make your pages faster, relevant and meaningful. That's what google likes and in the long run it makes your life a whole lot easier. Just do a Google search on 'why it's bad to use tables for layout' and you will see why it's such a bad idea! I will say that I have been learning web design for over five years and there are many others on here that have been doing it for longer. So feel free to post as much questions as you want and you will no doubt pick up some very good tips as everyone on here are probably the most helpful people you will find(as well as sarky!) Edited August 26, 201115 yr by neilp
August 26, 201115 yr Yeah I'm not an actual chip shop. I dunno, you seem to do a pretty good job of .... wait for it....... spam battering on here Badoom Badish... Iiiiii thankyou - and gooodnight.
August 28, 201115 yr Author For an external file, all you need to do is create a new file called styles.css. Place that in the same directory(location) as all your other html files, and cut and paste all your CSS into this file. Then inside the <head> tag of all your html files - copy and paste this line of code in there: <link rel="stylesheet" href="styles.css"> Then do the same for your Javascript. This will help to speed up your pages as the styles and JS will be get cached in the users browser from the initial page load, thus speeding up the download process of each subsequent page. Also, it makes sense to separate your CSS so it's easier to locate when the time comes to make some changes and instead of going into all your pages to make one small change, you can just open up your main CSS file - make the change and it will cascade throughout all your other pages. Makes sense now? That should get you started anyway's and really your main concern now is the tables. The whole idea is to make your pages faster, relevant and meaningful. That's what google likes and in the long run it makes your life a whole lot easier. Just do a Google search on 'why it's bad to use tables for layout' and you will see why it's such a bad idea! I will say that I have been learning web design for over five years and there are many others on here that have been doing it for longer. So feel free to post as much questions as you want and you will no doubt pick up some very good tips as everyone on here are probably the most helpful people you will find(as well as sarky!) Thanks so much! I understand the purpose I just didnt know how to do it or that it was a standard in developing. Anyway im going to just redirect the old site for now and use the table based version because it looks fine on every browser and I think speed is an importnat factor for us right now. So ill get this site up and then worrying about recoding it.
Create an account or sign in to comment