SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    A question before I start to build a website.

    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.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I see, thank you for the quick response sir. You mean, all I need to do is to pass all the validation..

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by claro View Post
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    @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>
    Last edited by John_Betong; Mar 16, 2012 at 11:21. Reason: spelling: not my fortey

  8. #8
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    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.

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by Stevie D; Mar 17, 2012 at 06:58.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post

    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;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm learning..

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

  14. #14
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by claro View Post
    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

  15. #15
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote 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.
    The only code I hate more than my own is everyone else's.

  16. #16
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Do I need to try my website in IE 7 or in lower version? I heard FB stop supporting IE7..

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    @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.

  19. #19
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by samanime View Post
    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

  21. #21
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    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".
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    First impression matters on the web like anything else. I don't think a construction page ever puts forth a good impression.
    Last edited by Stevie D; Mar 20, 2012 at 07:03. Reason: Link code fixed
    The only code I hate more than my own is everyone else's.

  24. #24
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  25. #25
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,728
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •