Jump to content
Sign in to follow this  
bobble14988

Why is Internet Explorer still targeted.

Recommended Posts

I am, by no means, an expert web designer or developer. I am primarily a software engineer and work quite a lot on server-side code of web applications. But I've been wondering about this question for some time and I've tried to find somewhere appropriate to post this question as I'd like to see some discussion so I apologise if it is the wrong place.

 

My parents have been running a business for almost 10 years and have recently asked me to redesign their website. I've been looking to build up my portfolio so I thought it would be an interesting side-project.

 

After many hours of planning the design and laying out the basic structure of the page (testing only with Chrome, for now) I ended up with a solid design I (and my parents) liked which was ready for content. I felt proud of my first website designed from scratch and could see myself doing it more often.

 

I typically use Chrome so, after installing various other browsers, I started testing the site for cross-browser-compatibility. The site looked exactly the same in all browsers except Internet Explorer. The CSS rules for my titles don't have text-shadow, the divs didn't have border-radius and the positioning was all over the place.

 

The my frustration was palpable. I know there are tricks for creating IE-only stylesheets and so I was expecting a few issues but not to have to design the entire site twice!

 

There are many articlesabout Chrome overtaking IE as the predominant web browser in use and, at its current rate of decline, Firefox may even be more popular soon, so why oh why are web developers still going to all the effort of designing websites for the ugly ducking which is Internet Explorer?!

 

Would it be the case that, if no new website targeted IE and only the "good" browsers, then IE would simply die and Microsoft would have to replace it with something which conformed to the standards of other browsers? Or are web developers destined to design two sites for two different class of browsers? Is it worth going to the effort, or should I simply include a check when they load my site which redirects them hereif they're using IE?

 

I assume that experience is key to designing a site with perfect cross-browser-compatibility and I will know for next time to take this into consideration earlier in the process.

 

Thanks for reading :)

Share this post


Link to post
Share on other sites

*yawn* - Most cross browser issues are down to poor coding, not the browser.

 

Cant say it better myself a +1 for you!!

 

But I think its a bit unfair to compare the old browsers to the new browsers. Microsoft is trying to get people to install IE9 which is way better than its predecessors but unfortunately they cant force the users to upgrade their browsers and i am sure they don't have the man power to go to every PC and manually upgrade them.

 

*edit*

 

what you could do is leave a message that will only display to user using IE8 or lower. You can them suggest that they should upgrade their browser. This way if you do get an IE visitor your not sending them away from your site.

 

<!--[if lte IE 8]><p class="browseHappy">This website was made for a modern browser, <a href="http://browsehappy.com/" target="_blank">download one</a> and browse happy!</p><![endif]-->

 

drop that in at the top below your opening body tag and style it appropriately

Share this post


Link to post
Share on other sites

I guess the crux of my issue is, when my site (and I'm sure many, many others) work automatically in ALL browsers except Internet Explorer, and Internet Explorer is becoming less popular by the day, what incentive is there for me as a developer to target that browser?

 

*yawn* - Most cross browser issues are down to poor coding, not the browser.

 

Poor coding, maybe. But, as I said, I'm not an expert and still learning.

 

It'd be nice to know, however, why you put a text-shadow property, which is supported across all browsers except IE, down to poor coding?

Edited by bobble14988

Share this post


Link to post
Share on other sites

It'd be nice to know, however, why you put a text-shadow property, which is supported across all browsers except IE, down to poor coding?

 

I thought you said, and I quote "The CSS rules for my titles don't have text-shadow, the divs didn't have border-radius and the positioning was all over the place.

"

so I don't understand your argument. If it's not supported in IE then you can't code for it and if you're getting layout issues across browsers then that is most likely down to poor coding. I'd put the text-shadow property down to unsupported by that version of the browser and live with it.

Share this post


Link to post
Share on other sites

There are a lot of developers out there that are adopting the "graceful degradation" method.

 

Basically you develop your site and get it done using all the rounded corners and shadows that you like. But on older versions you leave it without these elements. The people visiting the site will get the content and they will get the message. They will be missing a few twist, turns and shadows.

 

I like this method because it gives users a reason to upgrade their browsers.

Share this post


Link to post
Share on other sites

I don't think it will help you with your text-shadow but modernizr may be something you would like to take a look at, it can give you a fallback option, if what you are trying to do in IE is not available then modernizr will provide you with a alternative way.

 

http://modernizr.com/

Share this post


Link to post
Share on other sites

This is some good discussion on the topic and I appreciate the feedback.

 

However, my question still remains, why do web developers continue to target a browser which seems to be working against their best efforts?

 

I understand the argument for not wanting to alienate a portion of users but, as IE becomes less and less popular, won't developers want to target that browser less and focus more on "better" browsers which help make their lives easier?

 

Edit, I found these two articles on the topic interesting, maybe a little bias but still make their argument well. Suffice to say, this is not an isolated problem only I'm having and not necessarily down to poor coding.

 

http://www.theregist...mozilla_on_ie9/

 

http://www.devprocon...ernet-explorer3

 

Also, Mozilla's comparison of IE9 and their browser http://people.mozill...ie9_vs_fx4.html This points out many, many things which are missing in IE9.

Edited by bobble14988

Share this post


Link to post
Share on other sites
This is some good discussion on the topic and I appreciate the feedback.

 

However, my question still remains, why do web developers continue to target a browser which seems to be working against their best efforts?

Well for starters 30% of visitors are using IE7-IE9 so let keep 30% of my visitors happy while they are here they my buy something

I understand the argument for not wanting to alienate a portion of users but, as IE becomes less and less popular, won't developers want to target that browser less and focus more on "better" browsers which help make their lives easier?

 

if it was easy wouldn't everyone be doing it?

 

if i was your client and wanted an e-commerce website what would you tell me if i asked about browsers would you redirect my visitors to a no to IE page, don't forget that's 30% of my visitors, i may have paid for that visitor with google adwords at £3.51 a time or they may have found us by our keywords that's come from spending time doing SEO

Share this post


Link to post
Share on other sites

You build for people not for browsers.

If a large percentage of potential visitors are going to be using IE then you have to build with it in mind.

 

I go for the graceful degradation route myself.

I no longer support IE7 or below and 8 gets graceful degradation.

 

In your case you were using modern techniques so of course an old browser wont support them.

IE10 is now heading our way (I've got it on my Win 8 machine) and it's a huge leap forward. Still lacks a decent plugin engine but apart from that it's a lovely little browser that's fast and has a superb JS engine as well great support for HTML5 and CSS3.

Share this post


Link to post
Share on other sites

This is a bug bear of mine, I am by no means an advanced designer/developer. So I go my own route and design in my preferred browser (firefox) then add all the addition css code for webkits, opera and ie. It may not be a perfect method and I am sure that there is a quicker much more efficient way to be doing it but so far it works. :)

Share this post


Link to post
Share on other sites

You build for people not for browsers.

 

I guess this is the best response so far. But, after doing some research on the subject, it is nice to know that I am not the only one caught out by Microsoft's lack of standards compliance.

 

 

*yawn* - Most cross browser issues are down to poor coding, not the browser.

 

Also, after doing research, it is nice to know that poor coding isn't the root cause of the problem.

Share this post


Link to post
Share on other sites

Also, after doing research, it is nice to know that poor coding isn't the root cause of the problem.

To help you with your coding just use the validator, if your site validates there is more chance of the website looking how it should do in all browsers.

 

http://validator.w3.org/

Share this post


Link to post
Share on other sites

To help you with your coding just use the validator, if your site validates there is more chance of the website looking how it should do in all browsers.

 

http://validator.w3.org/

 

I coded the site with xHTML validation in mind. It is an ASP site so it doesn't pass W3C validation but the xHTML is correct.

Share this post


Link to post
Share on other sites

In the interest of completing this discussion, for anybody who stumbles on this thread, a single line of code has resolved my problem (for IE9 at least).

 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

Reference here: http://davidwalsh.name/css-rounded-corners

 

Including that above where you import your stylesheets should fix most problems.

 

Why you need to do this for IE only is still totally beyond me but I'm happy that I've learned from this frustrating experience.

Edited by bobble14988

Share this post


Link to post
Share on other sites

In the interest of completing this discussion, for anybody who stumbles on this thread, a single line of code has resolved my problem (for IE9 at least).

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Please explain. This site http://stackoverflow...content-ie-edge says

 

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

 

So you are making viewers see your page as IE9 (if the user has IE9 otherwise whatever the user has, perhaps only IE7) so I don't know if it will cure the problems for all viewers.

 

Your link says "Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag <meta http-equiv="X-UA-Compatible" content="IE=edge" /> and provide the border radius: " but if a user only has IE7, I don't see how it will help. I think all that IE-edge does is stop someone with IE9 using compatibility mode IE7 (not sure about that).

 

I agree with others that when you say "positioning all over the place" you should be able to deal with that without using "X-UA-Compatible" method.

 

I used the "X-UA-Compatible" content= "IE=EmulateIE7" method a lot when IE8 first came out and most users still had IE7 but don't use it now. I think it's a bit of a cop out. You should code so that your page looks decent in all browsers, but not necessarily the same.

Edited by Wickham

Share this post


Link to post
Share on other sites

Troubles will coming soon not only with IE but with Opera too. Opera officials wants to support Webkit but in strange way. CSS styles in browsers will too much different. So.. it will hard time for developers..

Share this post


Link to post
Share on other sites

Of course Internet Explorer are not up to speed when it comes to standards-compliance, but as a developer it is your job to make sure you understand the strengths and weaknesses of the browser in question. While Internet Explorer has a bad reputation, it certainly isn't as bad as many believe believe and/or claim. Internet Explorer has brought some good creations with it, despite lacking support. For example the "contentEditable" <div> was a Microsoft IE innovation which has now been adopted by all browsers. You must also be aware that the older versions of Internet Explorer are still used by a large number of people, and those older versions have support for non-standard attributes. For example:

 

function test(event)
{
   console.log(event.target.id);
}

 

This code will not work in older MSIE versions because it is the standards-compliant method, to support MSIE < 9, you'd need to use:

 

console.log((event.target || event.srcElement).id);

 

This is just to demonstrate that MSIE does do everything, it has just done it its own way for much of the time. My belief is that they once owned the Web, so had no real requirement to follow the standards so rigorously because they were the only player.

 

Another reason to support MSIE is that many people are still using the browser. The Opera browser, according to Opera's own FAQ, is used by 275 million users. Being such a minor browser should put into perspective just how many people are still using MSIE; and that is why you must maintain support for it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By Wisitory
      Hi,

      I am currently designing an educational website and I'm having an issue with Javascript. Before I started to construct this website I had no coding experience whatsoever, so if my code is not very good, that's why. I am experiencing the following issues:

      1. If you load the website in Chrome or Firefox (www.wisitory.com), the tools on the left hand side vertical toolbar are sometimes all there (there are 6 in total) but sometimes only 4 appear. This issue never happens in IE. I have attached pictures showing this.
      2. When you first load the webpage, when hovering over elements which use the hover CSS code, the elements disappear before coming back with the hover CSS.
      3. On the following webpage:

      http://www.wisitory.com/wisitory/website/year%201%20subjects/maths/Tutorials/numbers%20&%20place%20value.html (copy and paste this as it doesn't seem to work if you click the link)

      I am using Construct 2 to display a game that I have created. The game takes far too long to load for my liking and I want to reduce this - Hopefully someone can give me some advice on this.

      To anyone that can help, please let me know what code to post and I will.

      Thanks in advance .

      Wisitory
       


    • By Wisitory
      Hi,
       
      I am currently designing an educational website and I'm having an issue with Javascript. Before I started to construct this website I had no coding experience whatsoever, so if my code is not very good, that's why. I am experiencing the following issues:
       
      1. If you load the website in Chrome or Firefox (www.wisitory.com), the tools on the left hand side vertical toolbar are sometimes all there (there are 6 in total) but sometimes only 4 appear. This issue never happens in IE. I have attached pictures showing this.
      2. When you first load the webpage, when hovering over elements which use the hover CSS code, the elements disappear before coming back with the hover CSS.
      3. On the following webpage:
       
      http://www.wisitory.com/wisitory/website/year%201%20subjects/maths/Tutorials/numbers%20&%20place%20value.html (copy and paste this as it doesn't seem to work if you click the link)
       
      I am using Construct 2 to display a game that I have created. The game takes far too long to load for my liking and I want to reduce this - Hopefully someone can give me some advice on this.
       
      To anyone that can help, please let me know what code to post and I will.
       
      Thanks in advance .
       
      Wisitory


    • By gobbly2100
      Hi folks,
       
      I am working on a site and seem to be having a major issue with IE and z-index.
       
      If you visit this website and click the "Rewards Store" down the left hand column, it has a lightbox popup that creates an overlay but I cannot get the overlay to go behind the login box popup.
       
      www.allfix.co.uk
       
      Any assistance would be much appreciated.
    • By Nillervision
      Greetings people.
      I am working on a HTML5 front-end template mostly for educational purposes as I do a little teaching from time to time.
      The template is HTML5/CSS3 only (no IE8 compatibility or vendor-prefix css required)
      Unfortunately I have encountered a bit of a problem when trying to nest a SVG in an image tag. The problem is that IE10 renders the image with the fixed dimensions that the image was saved with rather than the fluid % dimensions specified in the CSS. If have not added width and height attributes to the img tag and I even tried to open the SVG in a text editor to remove the width and height data from the file header. But nothing seams to work. The HTML markup as well as the CSS3 is 100% valid with W3 standards.
       
      Here is my link:
      http://www.nielsharbo.dk/test/frontend-template/
       
      The SVG in question is the logo in the header.
       
      MARKUP:
      <header class="mainHeader clearfix"> <div class="logo left padding"> <img src="img/logotype.svg" alt="Responsive and Semantic web"/> <!-- THE SVG IN QUESTION--> </div> <div class="headerOptions right padding"> <form class="searchForm clearfix"> <input class="searchInput" name="searchInput" type="text" value="Search" onclick="this.value=''"/> <button class="searchBtn" type="submit"> <img src="img/search.png" alt="Search" /> </button> </form> </div> </header> CSS:
      .logo{ width: 40%; max-width: 280px; margin: 0; padding: 0.5rem 2% 0 0; } .logo img{ width: 100%; max-width: 240px; } Everything looks like it should in FF and Chrome.
      I know there are other ways to embed SVG but I'm sure it must be possible to assign width and height with css in a way that IE recognizes. I hope someone can help, Thank you
    • By kanger
      Hello
       
      I've come across this issue before and I've forgotten how to fix it...
       
      basically on this page: http://fourteendesign.com/new_portfolio/
       
      if you scroll down to the portfolio section the links to 'visit site' within green buttons aren't working and when I look at it the code is showing as:
       
      <li>
      <button class="btn btn-success">
      Text - Visit Test Site
       
      Text - Empty Text Node
       
       
      I've tried making the element display:block and with zoom:1 but that made no difference.
       
      Anyone know how to fix this?
       
      many thanks in advance
       

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,691
    • Most Online
      4,970

    Newest Member
    yshcherban
    Joined
  • Forum Statistics

    • Total Topics
      65,773
    • Total Posts
      454,575
×