A question before I start to build a website.

**claro** · Mar 16, 2012 08:41

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.

**John_Betong** · Mar 16, 2012 08:57

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

https://addons.mozilla.org/en-US/fir...tml-validator/

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.

**claro** · Mar 16, 2012 09:12

I see, thank you for the quick response sir. You mean, all I need to do is to pass all the validation..

**RyanReese** · Mar 16, 2012 09:25

Originally Posted by claro

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.

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

.

**claro** · Mar 16, 2012 09:52

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.

**RyanReese** · Mar 16, 2012 11:09

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** · Mar 16, 2012 11:14

@claro

@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 Code:



<?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>

**claro** · Mar 16, 2012 11:21

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?

**Stevie D** · Mar 16, 2012 18:42

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.

**samanime** · Mar 16, 2012 23:25

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.

**RyanReese** · Mar 17, 2012 08:48

Originally Posted by samanime

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

Code:

/* null margins and padding to give good cross-browser baseline */
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;}

**samanime** · Mar 17, 2012 17:54

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

**claro** · Mar 18, 2012 17:40

I'm learning..

Thank you folks..
I'm planning to use HTML5, is using flash header, jquery, carousel advisable? ho about dropdown list?

**TehYoyo** · Mar 18, 2012 18:22

Originally Posted by claro

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

**oddz** · Mar 18, 2012 19:33

Originally Posted by claro

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.

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.

**claro** · Mar 18, 2012 21:24

Do I need to try my website in IE 7 or in lower version? I heard FB stop supporting IE7..

**RyanReese** · Mar 18, 2012 22:14

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

.

**John_Betong** · Mar 18, 2012 22:21

@claro

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.

**samanime** · Mar 19, 2012 04:37

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.

**TehYoyo** · Mar 19, 2012 13:35

Originally Posted by samanime

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

**samanime** · Mar 19, 2012 15:14

Yes, it's for traffic.

However, it's also pointless for SEO itself. Since any major change to the structure or content of a site basically causes a large scale refactoring of your SEO (usually resulting in a substantial drop). In three months of time with a half finished site, you are unlikely to get much, if any, SEO juice. Once you do release the real site, since it's a major refactoring, nearly all of that link juice vanishes anyways.

So you have an almost net zero of SEO, but you've damaged potential traffic. Lose lose. =p

**RyanReese** · Mar 19, 2012 16:44

Originally Posted by samanime

Yes, it's for traffic.

However, it's also pointless for SEO itself. Since any major change to the structure or content of a site basically causes a large scale refactoring of your SEO (usually resulting in a substantial drop). In three months of time with a half finished site, you are unlikely to get much, if any, SEO juice. Once you do release the real site, since it's a major refactoring, nearly all of that link juice vanishes anyways.

So you have an almost net zero of SEO, but you've damaged potential traffic. Lose lose. =p

Not a fan of this information, if it's true. If you have a construction page up and suddenly you put a lot of content on, you're saying that won't really help at all? If the site in question had a "bad release".

**oddz** · Mar 19, 2012 18:52

First impression matters on the web like anything else. I don't think a construction page ever puts forth a good impression.

**samanime** · Mar 20, 2012 09:26

Originally Posted by RyanReese

Not a fan of this information, if it's true. If you have a construction page up and suddenly you put a lot of content on, you're saying that won't really help at all? If the site in question had a "bad release".

Correct.

As oddz say, first impressions matter (at least for humans, it's debatable for SEO bots). However, the benefit of the SEO you could really get in any amount of time with only a construction page (read: virtually no content), is almost nil, but the damage you can do to your sites reputation by people is substantially larger.

Since one of the best ways for SEO is to get links to your site from other sites, people would find your site (if it had an SEO value), and then never come back.

So, like I said, it's kind of a lose lose.

**dresden_phoenix** · Mar 20, 2012 10:28

Chiming in a little late... but for what it's worth.

In answer to your ORIGINAL post, ALWAYS code for STANDARD COMPLIANCE browser. Don't confuse that phrase for meaning "HEY! FF10 is standard compliant, I'll just code for FF10". Unless you are absolulety sure your audience is that narrow( is this an INTRANET page???) it really not a good idea to pick a VENDOR to specifically code for.

As long as I have segwayed into the topic of vendor , ( and possibly CSS3 vendor support) let's hit on two things. Do include ALL available vendor syntaxes (-o, -moz, -webkit, etc). Yes, It's going to seem redundant and and be a pain for a bit, but remember the goal is broad support ( it could be worse... I will address that in a moment). However realize your page si not going to look the same on all browser so allow some stylistic wiggle room ( if some old browser doesn't get fades or rounded corner... it's nothing to cry about) just don't code/design in a way that a browser that doesn't support your CSS3 bg gets blue text on a blue bg, for example. DO NOT however rely on bleeding edge selectors ( :NOT, :FIRST-OF-TYPE, etc). These are handy, and fun.. and someday will be of great use but are styll 50/50 on support. Your page should gracefully degrade. That is If your design starts not to function in son browser it should still look "intentional " ( that's the key to looking good) AND all the information and navigation should be accessible.

As Ryan pointed out coding in small sections and checking often is a great method, as code often interacts with itself. That is line 1&2 could work, line 2 & 3 could work together , even line 1 & 3 could work together .... but LO! line 1, 2 & 3 dont work together . So, checking in every few lines helps you to catch those interactions as they happen (as opposed to having to do detective work .. figuring out what is not playing nice with what).

As I said earlier code for compliance, and once you have your compliance working. Code in fixes for specific browser bugs, keeping in mind that you can always gracefully degrade.

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?

The right tool for the right project. You will ALWAYS NEED HTML. PHP is for automation. if your site gets to be 1000 html pages.. do you want to update by hand or would you not rather have a handful of templates and a database? If your site is just a single message with a few sub pages, PHP is fun but overkill. Think of it this way, if you own a small brownstone in Chicago, do you NEED a riding lawnmower (PHP/ASP, etc)? at the same time if you own a golf course somewhere...would you SICK WITH a push-mower(pure HTML) ?

HTML5.. use with EXTREME CAUTION.. but experiment with it. It's coming... eventually. I loathe to say this, but to also research polyfills. And always keep in mind GRACEFUL DEGRADATION and accessibility. Even as an Art Director, I still contend that a flashy & fancy page that cant be read or navigated is no match for a plain and CLEAN page that shows all it's content and is easily navigated.

User Tag List

Thread: A question before I start to build a website.

Thread Tools

Display

A question before I start to build a website.

Bookmarks

Bookmarks

Posting Permissions