Greetings!
I’m making my first website.
My problem is when to consider the browser quirks in terms of designing.
Is it ok to just proceed and be specific first in one browser before minding the other major browser quirks?
Or do I need to make it parallel? I mean I need to design and try it work in several browser versions in parallel.
Thank you.
What tools are you using to create your website?
I use the following Firefox Addon that shows a green icon in the bottom right browser corner if the page validated OK
If the page does not validate then clicking on the red icon displays the source and all HTML errors. Once all errors are cleared the page the difference between browsers is minimal.
I see, thank you for the quick response sir. You mean, all I need to do is to pass all the validation…
As a beginner, I would highly recommend coding in sections. Aka code the header of hte page first, do the CSS for that.
Save and then check in all the browsers for anything that’s not regular. Do this for each section. That way if you get something wrong, you know the section which is causing it, and it’ll make it that much easier to debug. Rinse and repeat :).
And of course, you have us here if you ever get stuck debugging something :).
thank you for that message sir RyanReese, I’m excited. Is it ok to know if what expert does in designing? You’ve mention that beginners should use sectioning.
Well I just code the entire page and then check it. If somethings wrong I usually know how to fix it without much headache. If nothing is wrong- go me :).
@John_Betong
What tools are you using to create your website?
If you are using PHP then I toggle sections by replacing 0 and 1 like this:
<?php if(1) { include '_doctype-strict.php'; /* Develop */} ?>
<?php if(0) { include '_doctype-html5.php'; /* online */ } ?>
<head>
<?php if(1) { include '_header.php'; } ?>
<style type='text.css'>
/* specific to this page */
</style>
</head>
<body>
<div id='outer'>
<?php if(1) { include '_logo_stuff.php'; } ?>
<div id='content'>
<div id='box_left'>
<?php if(1) { include '_box_left.php'; } ?>
</div>
<div id='content'>
<?php if(1) { include '_content.php'; } ?>
</div>
<div id='footer'>
<?php if(1) { include '_footer.php'; } ?>
</div>
</div><?php /* content */ ?>
<?php if(0) {include 'javastuff.js'} ?>
</body>
</html>
so cool sir @John_Betong.
I know little in php. Somehow I understand your code and its great. I never thought that php can also be a tool in developing a website. I commonly used it in database interpretation. I wonder if is there any account that tell the advantages and disadvantages of using php rather than a pure html code. Is there any discussion about that?
It’s best to check it in all major browsers as you go along. That way, you’ll pick up anything that isn’t working properly much sooner, which means you’ll be able to resolve it more easily. For a start, you’ll be able to pin down much more precisely where the problem is … if you’re only adding one bit of code at a time, and it goes wrong in Browser X, you’ll know that the code that’s causing the problem is almost certainly in the bit you’ve just added, so you usually don’t need to then spend ages scouring the whole document to find it.
You don’t want to complete the page and have it looking wonderful in IE8 only to then find that it doesn’t work properly in other browsers, because then it’s going to be a nightmare to get it fixed.
Doing it in sections is a good idea when you are just starting out. As you get more experience, you’ll get quicker at debugging and be able to deal with a whole page at once (but don’t rush it, it takes time =p).
Also, make sure you are building it in one of the “good browsers”, like Chrome, Opera, or Firefox. If you do your main testing in IE, you’ll be crying when you try to get it to work in the others.
If your code is valid, most problems will be solved for you already, and you’ll also just have a few issues.
I highly recommend you use a reset CSS as well. I recommend Eric Meyer’s Reset CSS. I love it because it’s really small. A reset CSS neutralized a lot of browser default styles so you’re working with a clean slate.
Actually that’s a bit big of a reset. I usually recommend trimming it down a bit when I suggest that on the forums. It’s small, code wise, but it’s still huge for a reset. I like doing this
[LEFT][COLOR=#464646]/* null margins and padding to give good cross-browser baseline */[/COLOR][/LEFT]
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,li,ol,ul,table,tr,td,th,p,img { margin:0; padding:0;}img,fieldset { border:none;}img{vertical-align:bottom;}
I agree you should trim it down, since it targets a lot of elements that aren’t used.
I didn’t recommend that this time, since it can be a bit tricky to know what you should trim down for a beginner. Also, sometimes you may use something that you removed, so I usually advocate trimming it after you have your HTML written. =p
I’m learning…
Thank you folks…
I’m planning to use HTML5, is using flash header, jquery, carousel advisable? ho about dropdown list?
Ask @deathshadow60; (Sorry to keep tagging you so much, DS). He’ll explain more.
I wouldn’t use HTML5 as it’s still just a working draft. For more information about that particular debate, visit this thread.
I wouldn’t use flash for just a header - flash is used mainly as a body object because of the amount of work needed. Also, it might look sort of weird. (Which might be innovative or dumb - but most likely dumb)
I don’t know what carousel is, but I would recommend using JavaScript (if you are ‘fluent’ in that language) instead of jQuery. Write more? Yes. Can’t use pre-made code? Yes. Faster (to load) and more exact? Yes.
Most people are fine with dropdowns for navigation, but don’t like accordian-style side navigation.
Also, keep in mind that, while validation is great, it doesn’t mean it will work like you want it to, especially in some browsers (namely, Internet Explorer). Just cross-browser test and you’ll be fine. You can stick your final product into the Critiques forum and they can do it for you, upon request.
~TehYoyo
I normally develop in FF or Chrome than near completion test in other browsers. That work flow works very well for me. Though if you are not at least some what familiar with cross-browser styling checking different browsers as you make changes will probably make it easier to debug issues as they come up.
Do I need to try my website in IE 7 or in lower version? I heard FB stop supporting IE7…
You should still check in IE7. WHile the user base for that is diminishing, it’s still enough to warrent at least a check in it. At minimum, provide some graceful degradation :).
Get your site on line ASAP - Just do it and start building your SEO Brownie Points:)
If on the off-chance you have problems with your online site then create another thread detailing your problems.
I think HTML5 is just fine to use today, for the most part. There are a lot of elements I would ignore, but putting the HTML5 DOCTYPE on valid HTML 4.01 Strict or XHTML 1.0 Strict is a perfectly fine practice. Adding in a sprinkling of the well-supported HTML5 elements is also just fine. (That thread TehYoyo linked to provides a number of points from all sides.)
I would definitely avoid a Flash-based header. Unless you know what you are doing and add accessibility to your Flash-based header (which is rather tricky to get really good, even for seasoned developers), it can be poor in terms of a lot. There isn’t much Flash can do (for a header) that you can’t do with good ol’ HTML and CSS (and MAYBE a splash of JS).
If by carousel you mean one of those slideshow like things, those are okay, but make sure that it can display it’s content in some way without Javascript. If it completely breaks without JS, you’ve done something wrong.
I also support the use of jQuery, if it makes sense. If you are only writing 5KB of Javascript, then jQuery is overkill. However, if you are writing 100KB of Javascript (for something like a web app), then jQuery can be a huge help. (If you are writing 100KB of Javascript for a regular website though, you’re doing something wrong).
I would take a look at it in IE6 and IE7, just to make sure it is usable. However, making sure it looks exactly the same as it does in the other browsers is a bit silly at this point. Really, your site should be functional all the way back to IE3, but it’s a bit silly to go that far back in testing.
Also, I wouldn’t rush getting your site online, depending what it is. You can have a bad release. There is no reason to start scoring SEO “brownie points” now, because any major site change completely changes what SEO points you would get. Wait until the site is at a reasonable point of completeness before getting it on line. Throwing up a one page “under construction” site is going to do you more harm than good.
Is this just for SEO or for traffic? That is, if he puts up an under construction page, will it hurt how users view his site in the future? Will they see the under construction page and just never come back?
~TehYoyo