png-24 and Browser Support - browser

Should I use png-8 or png-24 in my website? Do most websites still use png-8 or is browser support good enough that I can safely use png-24? I have some jquery sliders, I don't know if that makes any difference or not.

Browser support is good enough that you can use PNG-24. IE6 even supports PNG-24.
If you're using the images for sliders, though, you'll probably want transparency and PNG-32 is supported by every modern browser as well. IE6 can display them, albeit without the proper transparency (unless you use hacks.)

Related

What is a "modern browser"?

I searched SO before asking this potentially vague question, found many references to 'modern browsers', but no definitions. Since this is a term very widely used and referenced, I was surprised that I couldn't find a definition or even a description on the Internet.
So, what, in June 2018, is considered a modern browser? And what is a modern browser in general, is it only the current major version of each popular browser (i.e. Chrome, Safari, FF, IE, Opera)?
Modern Browser: Reference:
A modern browser is any browser that: successfully renders a site that you just built using web standards, without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it.
Modern Browser Advantages: Reference : Modern Browsers
Modern browsers are fast. They take full advantage of the underlying platform to render graphics with the GPU, compile and execute JavaScript across multiple CPU cores and ensure that web applications run as close as possible to the same speed as native applications.
Modern browsers enable rich, immersive experiences that could hitherto only be delivered through a plug-in or native application. They can blend video, vector and raster graphics, audio and text seamlessly without sacrificing performance.
Modern browsers implement features when they are ready, providing predictable patterns that developers can rely on rather than suddenly breaking or removing specifications. They don’t check off support based on a half-completed implementation written to pass a synthetic test, but validate against a test suite that confirms interoperability.
Modern browsers do adopt standards at an early stage of readiness so developers can experiment and validate the specification, but clearly delineate unstable prototypes as such.
A modern browser is any browser that: successfully renders a site that you just built using web standards, without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it.
Reference.

At which point do you decide to stop supporting older browsers?

I would like to start a community discussion. As per my question, when do you decide to stop supporting older browsers?
I've nearly completed the development of a large personal application. It uses a lot of HTML5, CSS3 and JavaScript. If I were to support older browsers, I would estimate that it would increase my front end work load by at least 50%. And to be frank, I don't want to support the older browsers. From a business point of view, one could argue that if I don't, I could lose revenue. I disagree. I feel that the customers who use older browsers wouldn't be the customers I would want anyway - they would be the ones giving me more work as I'd have to fix compatibility problems in my application to work with their old browser or have to continually tell them to upgrade their browser. If the web is to move on, then people need to stop supporting the older browsers, however, I do see that the tide is slowly starting to turn towards this.
Recently, IE6 was pronounced dead. When can we safely say that IE7 and IE8 or indeed Firefox 3 can longer be considered as 'important' enough to support?
Furthermore, I hear a lot of people say on this site "make sure it degrades gracefully so it'll still work with browsers that don't have JavaScript support"? What kind of browsers now don't have JavaScript support? Mostly old phones and if these old phones don't support JavaScript then I highly doubt that they will parse the HTML correctly either. I also have a Sencha touch mobile version of my application. Am I going to make a WAP version of it to support older phones? No. It's a rich web app. That's how it has designed to be and that's how I intend for it to stay.
I rather like Apple's approach: If you upgrade your OS, don't expect your apps from the previous of the OS to work with the new one. Yes, it can be a frustration, but it means there is less of a mess overrall and people are forced to upgrade to move along with the times.
It works the same way for new web apps, if I want to keep them clean, quick and efficient, I need to stop hacking the code to support legacy software and if users don't like it, they can move on from my site or join the rest of us and upgrade their browser and have a better web experience.
I don't want this to come across as arrogant, but I am genuinely interested in your opinions when you consider enough is enough and only support recent browsers.
For me, I have always assessed the users who would be using it. I think in the end, it is impractical to support every single browser and its version under the sun.
As a baseline, I always ensure that the application works fine in IE8 and the latest version of Firefox. IE8 is pretty decent, so there usually isn't much work required to get it working. As most versions of Firefox and Chrome tend to get auto updated, I just test in Firefox Latest, Firefox 3.Latest and the latest version of chrome.
For example, if I am designing an application to be used by tech-heads, I wouldn't really care much about IE7 and below, or old versions of Firefox and Chrome.
However, if I am designing something that will be used internally and there are certain browser requirements, then I will make sure that the app works perfectly in those browsers (i.e. the dreaded IE6 and IE7).
As IE8 is the "final" version on Windows XP, I think it would be quite beneficial to ensure that things work decently in IE8 at least.
Also, since Facebook and GMail has dropped support for IE7 and below and older versions of other browsers, I think it's safe to say that we can ignore those versions too.
As for javascript, I think it is impractical to build something that works exactly the same without javascript. I think it is a good idea to gracefully degrade, so that certain things might not be avaliable for the user, but they can still use the app to a certain extent.
However, in certain cases, the whole app would not be able to work without javascript (or a non-javascript experience would be next to useless), then telling the user to enable javascript is probably a good idea. This is implemented in apps like Facebook and Google Docs. See this excellent blog post for some debate.
So, in summary:
Develop for "modern browsers", IE8+, FF3.latest and the latest FF, latest Chrome and Opera.
Support other browsers if the development/client requirements exist.
Look at what the big boys (facebook and gmail) are doing in terms of browser support. If they can afford to drop support for browser x and we are developing an app targetted towards general consumers, then we can afford to drop support for browser x too.
I agree with you on the most part that it is a pain to support older browsers and I think that creating web applications that are supported on older browsers such as IE6 and IE7 should be stopped because it is our duty as developer's to help the web advance even further.Furthermore Google has dropped support for every IE browser under IE8 and these in my agenda means that the browser is as good as dead and I can safely stop to create websites for it.
IE8 is a decent browser and is still very widely used even if it's usage is being dropped at an increasing rate : browser usage statistics ; I still think that you should develop for it at least a year from now when hopefully it's usage will be to small to matter
Firefox ,Safari,Chrome and Opera have auto updates witch popup to the user every time a new version is released so most of the times I don't bother checking for older versions how my websites work.
But about the graceful degradation of your websites I still think you should try as much as possible to make your websites work even if you have Javascript disabled because not all users have old browsers that don't support Javascript but there are those who keep it turned off for various reasons

Text-based web browsers era passed away?

Do you think text-based web browsers era has reached the end? Please try to enumerate your reasons by topics like CSS, Scripting, etc.
Thanks in advance,
It depends on how you define "the era of text-based web browsers". If you define it as a period of time when more people used text-based browsers than browsers that could display graphics, then I'm not sure that era ever existed. The first web browsers, such as NCSA Mosaic and Netscape could all display images in addition to text. The text-only browsers came after those and provided a way for people to browse the web in environments where images were not supported (e.g. consoles/shell accounts).
However, if you define "the era of text-based web browsers" as the era in which it is possible to browse the web with text based browsers, then that era is not over. Text-based browsers, in my experience, are a very good way to check if a site is accessible to those with disabilities (e.g. those with screen readers and the like). As long as there are people designing sites to be accessible to everyone, text based browsers will have a role.
While they may never completely be gone, text-based browsers reached their end quite a while ago.
With the lack of support for interactive content (Flash, Silverlight, etc.), Javascript, CSS they're really just not the relevant anymore.
When the Internet was strictly about finding information, they were useful. The Web is so much more now...and text-based browsers are effectively obsolete.

How To Distract Clients From Using IE6

How can we distract our clients from using IE6. We know IE6 is not a good standard-compliant browsers; has many issues. How to satisfy clients so that they do not use IE6?
Thanks...
I'm currently in the process of building a new site for my company and I've been looking at http://code.google.com/p/ie6-upgrade-warning/.
Essentially it's a little javascript lib that checks to see if the user is running IE6 and if so it displays a nice little overlay on top of your site. The only problem I've got with it is that it completely blocks the user from using your site. I'd like to allow for them to use it anyways but I'd like them to know that their experience may not be as good as it could be. I'm sure it can be adapted though, you should never exclude people from using your site based on their user agent. That being said I think it's a good tradeoff that you try to get your users to upgrade and if they don't wan't to they can still use your site but they probably won't see all of the fancy pancy browser tricks that you can do with modern browsers.
(source: googlecode.com)
It sure looks nice anyway
Other resources include http://ie6update.com/ (not a fan though, you shouldn't trick users)
Update: Seems like someone made a bit more customizable version of this written in jQuery. See jreject.turnwheel.com
One of the reasons this problem exists is as follows.
Many IE6 user have no choice. They sit behind corporate firewalls with locked down machines and while on their home machines they will have the latest technology they are constrained by the workplace rules and policies.
So why do the corporates not upgrade from IE6 to 7 or 8? Well here is one reason. Workload.
As a sysop you need to upgrade 500 machines to the new browser.
In many cases these browsers run mission critical add-ins as ActiveX's etc so to do the upgrade you have to do all the testing and verification and then do a planned roll out upgrade, which will have problems, hiccups and glitches, a lot of work and late nights and unpaid overtime and a lot of flak from the users as you do this.
And what is the payback for this upgrade? Well the internal systems work on IE8 exactly as they worked on IE6, (well not always and you may need to rewrite that as well) but the users can now access the latest startup site that plugs into Facebook (but will be gone in 6 months) perfectly but it is not work related.
So unless there is a tangible business benefit many shops simply cannot se a reason, or justify the cost of a browser upgrade.
These locations will convert, when they go to Windows 7 perhaps or because the "application" they use internally is upgraded and needs the newer browser version. But at this point there is a justification for doing it.
N.B. I have recently worked in two jobs where IE6 compatibility was a must for this reason, large client bases, behind firewalls with lockdown, and i am not stating the above as a reason/excuse not to do it. The sooner the better.
Provided they have the proper permissions to do install software on their machines, use Chrome Frame. The speed boost, if nothing else, should be incentive alone.
"The customer is always right."
You can advise them otherwise, but if they want IE6 for whatever reason then it's up to them.
The best way is by educating them, make them aware of why you are blocking IE6. Do a comparison, case study, etc to convince them, try and put it in terms they may understand, try to convince them that using IE6 is a bad idea (whatever your reasons).
Its simple to implement a script to prevent IE Browsers from connecting to your site, however doing that may result in users being turned away. If this is a public site take into consideration the market share internet explorer has, unless your site is really incredible it is unlikely you will get a user to install a new browser.
To get around this in the past a simple splash page that informes them of the reasons not to use IE6, Example:
You are currently using internet explorer, while you may continue to browse this site using IE, please be aware that some functionality may not be available due to compliance standards within internet explorer, and due to this we do not support issues that arise when using Internet Explorer. We recommend using Google Chrome (Download here) or Mozilla Firefox (Download here).
If this is within a corprate environment you can always work with the IT department to ensure that alternate browsers are distributed. I recommend Google Chrome, simply beacuse of the ability to create "Application Windows" that eliminate problmem causing elements of the browser GUI (Back buttion etc...)
Having a site that elegantly degrades when the user's browser is IE6 is the best option. IE6 users should still be able to use your web site - if a particular feature requires a modern browser a user will be more likely to switch if they already find your site useful.
Another point: modern javascript libraries like jQuery makes it easier to code sites that are compatible with IE6. There's no need to turn away potential customers because of their web browser choice. If you're a web designer it's your job to make sure they have a good experience.
A lot of this comes down to the reasons you want them to stop using IE6. IE6/7 are a pain in the bum if you let them be. We're now taking a more aggressive approach to browser adoption when it comes to what you can/can't do.
For instance, when you visit our new sites in most browsers you'll get rounded corners, transparency, gradients etc. When you visit in IE6 you get a square, opaque, monotone website. Wherever you have PNGs you'll get a simple GIF (even if it looks pants).
Unfortunately IE6 is tied to many businesses for internal reasons (using apps etc) and you can't force them to upgrade but you can give them a subtle message.
make them understand that ie is not bad, its ie 6 thats bad .. if they wish to use ie they can surely use it but could use ie 7 ir even ie 8... make them see that how ie 7 and 8 provide some great features which are not there in ie 6..
also ie 8 is the only browser that follows strict css 2.1 methodology
plus there are many websites which previously were running in ie 6 (with no problem) are running under a warning message that some context may not be suported by ie 6 for eg. www.yahoo.com, so why to use it?
thanks
We had the same issue in one of our projects. I made a simple conditional check and displayed an additional div with links to download firefox, Chrome and IE-8.
Try facebook.com on IE-6. This was my inspiration for the additional div.
In line with Markus' post, it's simple enough to display a popup when the site loads with a warning. Ideally you won't show this every time they load a page of course, that will get old fast.
You have a good opportunity when working on a spec with your client, to tell them "it will cost $X more if we have to support older browsers including IE6 (don't just say IE6), and it will mean we can't easily add more advanced functionality... supporting older browsers will detract from the overall quality and increase time & cost.
A while ago there was a collective effort in Norway to get users away from IE6. Several of the largest sites in Norway participated, and the user got a kind warning on top of the site that recommended him to upgrade or switch browser for an improved browsing experience - if using IE6.
Check out what Wired said about it!
make a whitepaper
Two things:
Charge extra -- double or treble rates or more -- to support IE6. (even IE7 these days).
Point out that IE6 (and WinXP too) will be losing the last vestiges of support in the near future. If you think they're insecure now, just wait till that happens -- no more security fixes. If you're still developing for IE6 now, then you're clearly not going to be ready for the upgrade in time, so you will be hacked, and hacked badly. If your client is willing to accept that, then that's his problem, but you need to help him understand the gravity of the problem. He needs to be putting his upgrade plans in now, not getting more dev work done for the old systems.

What percentage of marketshare does a browser need for your support?

I'm building a website for a small non-profit org. and I was wondering at what kind of browser marketshare a browser should have before I support it. Chrome looks like a major contender, but it's still less than 5%, as is Opera.
What browsers do you think I should completely support for this kind of project?
I'm going to second Robert S's answer, and expand a bit.
If you take the time, from the initial concept forward, to be standards-compliant and emit clean XHTML with CSS, you'll save yourself the majority of the pain. You'll probably be fairly close to your intended output across all the browsers right out of the gate. Sure, there will be some pixel-level wonkiness due to the way the box model is implemented, but you'll probably be "close enough" that no extra expense is needed.
I wouldn't go so far as to intentionally "tweak" my site to be sure it works with every browser -- not only is that expensive (in terms of time), but it's also doomed to fail as browsers come closer and closer to clean support for the standards.
FWIW, Chrome is a browser you absolutely should test with. As others have mentioned, it's based on Apple's WebKit. Testing Chrome and the Windows version of Safari will give you a very good handle on your site's user experience on the Mac platform, at least if you don't have a Mac available for testing. :)
Firefox, IE7 and IE6 are enough to cover more than 90% of the browser market share.
It is a good idea to read the new web standards and take in account what Microsoft prepares for IE8.
Then you can try to be compatible with Google Chrome.
Finally, there should be a very specific customer request to invest the time and money making support for the other browsers like Opera, Safari e.t.c.
Here's my testing/bugfixing priority list:
Absolutely essential to fully support Firefox 3 and IE7
Highly recommended to fully support Opera and Safari (no missing functionality, slightly degraded interfaces are acceptable, but only if absolutely necessary)
Interface degradation is acceptable with IE6 and Firefox 2 as long as it is still usable (I consider these as 'end of life' browsers, and frankly, rarely worth the effort), also here are older versions of Opera and Safari, but I rarely see significant problems with these.
If the interface does not rely heavily on Javascript then it must degrade gracefully enough to be usable in text based and mobile browsers such as Opera Mobile, Links/Lynx, iPhone, etc (this includes any necessary optimisations for the screen size)
Informational (i.e. non-application) sites must be at least tested with a screenreader
I will put no significant effort into supporting Firefox 1 and IE5.5 or below.
New functionality must be tested and at least working with upcoming browsers such as IE8 and Chrome. It's pointless ignoring these, as they are both likely to become very popular in the coming months and years.
Of course, the only way to know for sure what will work for you is by looking at your own usage statistics. You may find that a significant proportion of your users still use IE6 (many businesses have yet to upgrade), or that mobile device use is particularly high, etc. Check your own stats!
It's not a matter of market share. It's a matter of what our customers use.
When your customers are public schools that are often underfunded, then you eschew a lot of flash and Flash.
The obvious answers are Firefox and IE. I would suggest starting with standards-compliant XHTML and then go from there.
I don't make this decision based on marketshare alone, or even primarily. My support list (in order of priority) currently looks like this unless a client expresses a need to expand it:
Safari 3
Firefox 2
Firefox 3
IE 7
IE 8 beta
public-facing functionality works, looks correct, in IE 6
Chrome
The reason I take this approach is that, first, it's best to work in a standards-compliant browser before tweaking to broken engines. Second, Safari has the greatest standards support combined with a marketshare which isn't negligible (Opera is just hard to justify for cost:benefit reasons). Third, in my experience going from Safari to Firefox is usually less problematic than the other way around. This is subjective but it's my experience.
Also a side effect of targeting Safari first, IE is likely to be less painful, as the Webkit team has gone to great lengths to comply with existing practices wherever possible.
Chrome comes last because it's so likely to "just work" if Safari is good to go.
Edit: Firefox 2 comes before Firefox 3 because its support set is more restricted. The same is true for IE 7 before IE 8b.
Well, since Chrome is based off of WebKit, if you test for Safari, chances are Chrome will work as well.
I tend to ignore Opera altogether. That probably makes me a bad person, but I'm ok with that.
it depends how critical the application is.
for a small non-profit, I [personally] wouldn't bother testing with browsers with < 4-5% share. However, you should still aim to develop your code as browser agnostic as possible
I personally agree with Andy Lester in that the true key is to understand the platforms of your target audience. Yes globally Chrome might have a 3-5% market share, or something like that, but if your not-for-profit organization was targeted towards developers you might have a much higher rate of adoptions. So in addition to what everyone has said here, know your audience.
I know with my website targeting technology people, I see about a 30% FireFox, 55% IE, 12% Chrome, and the rest are others for my visitors. Vastly different from the norm due to my audience.
I like to keep a close eye on Yahoo's Graded Browser Support page. I generally only spend time on worrying about getting everything perfect on browsers they consider to be 'A-Grade'. I generally try to progressively enhance, instead of gracefully degrade which means in most cases I get basic functionality on 'C-Grade' browsers.
http://developer.yahoo.com/yui/articles/gbs/index.html
I personally like to group browsers in two broad categories:
IE: You should always aim to support IE, given its market share.
Others (Firefox, Opera, Safari, Chrome): If you strive to write standards-compliant HTML, CSS and JavaScript, what works in either of these browsers will most probably work with the rest.
Start with Firefox and IE. If you have any time left, which you probably wont, you can check out the others :)
IMHO the more important thing to do is do a good job of separating your presentation tier from your business logic. Try to be as flexible as possible and allow the users to decide the direction. You might now say, Webkit doesn't have enough users, but a month down the line your client decides to buy iPhones for all their employees. (I know you said non-profit, but I think example still holds) Just try to put yourself into a position to be flexible.
I would recomend that you will try to comply with the standards issued by w3. If your application comply you will also be safe for future versions of browsers.
Make your design using FF and make fixes for IE in the end, that way you will save work.
Regarding JavaScript use a framework such as JQuery or DomAssistant to make code that will work on all browsers. But be aware not to make navigation or content dependant on client script, provide an alternative to support almost 7% that is not java enabled.
Do the standards-compliant engines first: WebKit (Safari/Chrome) and Gecko (Firefox). Opera usually works okay, too. Then go and add IE support. Any browser whose preview release doesn't support the full CSS2 spec doesn't deserve A-grade support, IMO.
Firefox 3, IE 7, IE 6
Firefox is the most important primarily because it runs on OSX and Windows and has a high market share which means if your site runs on Firefox it will also be available to mac viewers. Follow this closely with IE 7 which is important because of its browser share and being packaged by Windows means anyone with a new windows box will have it.
Unfortunately there are people running older versions of windows (anything before 2000) who cannot update from IE 6 to a more modern browser. This ensures there should be for the next while there should be a lower cap of about 10% of people using IE 6. Realistically there are about 20% average who still user IE 6 and so this indicates that even some with modern operating systems have not upgraded.
Safari and Chrome come hand in hand as both working off a similar engine which makes them the next logical step for compatibility tests. Because they both use webkit and safari runs on both windows and mac (as the default browser) Safari is more important to test for by a small margin. Chrome is a logical choice because if you get it on Safari it will work on Chrome and it has a pretty strong start in browser stats for being so new.
Opera is completely optional unless you decide that you want to develop a website that must be viewable on a Nintendo Wii. Anyone on a computer who can use Opera is most likely savvy enough to also have another browser installed which they can view your site with. Opera uses its own custom parser and it has low browser share and so there isn't a compelling reason to go to lengths if your site shows well on everything except for Opera. The onus is really on them to make their browser work on your site honestly considering the low numbers and the other stronger browsers.
Unfortunately IE 6 and IE 7 both require a filter hack to get opacity to work and IE 6 has many incompatibilities and still requires a box model hack when not in strict mode and has float bugs regardless and so following web standards to the letter isn't an option, but wherever possible if you do follow web standards and use conditional IE comments you will most likely have a site that runs cross browser with minimal headache.

Resources