Tag: Internet Explorer

Internet Explorer and the centered background SVG problem

We are rapidly approaching, I believe, a time when we no longer need to worry about things that don’t work in Internet Explorer.

But we’re not there yet.

I’ve started using SVG images on the web a lot, especially for logos, which I tend to put into a flexible-width container at the top left corner of pages. Which is great, except IE has this annoying habit of resizing the canvas for SVGs to fill the container they’re in. The whole logo appears on the page, and scaled properly… but it’s horizontally centered in the container, rather than flush against the left edge.

There appear to be many possible solutions, but for a solution that is 100% fluid/responsive (that is, it will scale with the container), this does the trick.

It does involve manually editing the SVG code, but it’s simple and you only need to do it once as part of the image prep process. In the <svg> tag, look for the viewbox attribute. It will most likely consist of four numbers… 0 0 followed by the width and height of the canvas. After this attribute, simply add width="x" height="y" with the same x and y values from the viewbox attribute.

It works!

Edge of what?

Let’s talk about Internet Explorer for a minute. Approaching two decades into a career as a web developer — cripes! how is that even possible? — I have spent a big chunk of my life hating Internet Explorer.

There was a time when I didn’t hate it. For several years, Internet Explorer was the best web browser for the Mac. (Yes, really!) But right around the time Apple released Safari and Microsoft decided to pull the plug on the Mac version of IE, everything started to go sour.

In the early 2000s, when Windows XP was released, and Internet Explorer 6 along with it, Microsoft dominated the tech world. Especially the business tech world. And with the web standards movement in its infancy, Microsoft could pretty much do whatever they wanted with the browser. Internet Explorer 5, 5.5 and 6 each introduced new, Microsoft-only technologies (VBScript, ActiveX, .NET, etc.) that became deeply entrenched in the business world, where countless corporate developers created indispensable internal web applications that were not only dependent on Internet Explorer, but specifically on quirks of version 6 (or 7) of IE. It’s a big reason why there are still office computers running Windows XP and IE 6 or 7. Because even as bad as IE 8 is, it was the beginning of Microsoft’s acknowledgment of the changing times and reluctant move towards web standards.

Long story short, I don’t just hate IE because it’s from Microsoft, or because it’s fun to bash on. Contrary to the impression I sometimes give, I don’t hate Microsoft, and as much as I love to crank, I’d prefer a world where I didn’t have things to crank about. I hate Internet Explorer because it has made my job harder, for most of the time that I’ve been doing this work.

So, it probably goes without saying that I took the announcement of the death of Internet Explorer as good news. Of course, Microsoft has to make its own browser. Uh… just… ‘cuz. Of course. So with IE going away, Microsoft has announced “Edge”, their new browser.

Meet the new browser, same as the old browser

This morning Brand New posted the new logo/icon for Edge. At least, I think it’s a new logo. For a new browser.

Source: Brand New

What is this? No, seriously. What. Is. This.

This logo fails for me on several levels. First, and most obviously, it evokes Internet Explorer. Why would Microsoft want to do that? They’re killing IE for good reason. Why create an immediate association between it and their new browser?

I think this new logo fails both conceptually and in its execution. It’s just plain ugly. But more than that, the slice/swoosh thing doesn’t work. In the old logo, it was part of the “ring” around the “planet” that the perfect circle “e” represented. A bit hackneyed conceptually, but at least it was a consistent concept. But by using the “e” from Microsoft’s new humanist corporate font (I think) — which, taken on its own, is kind of an ugly shape anyway — I think, you lose the “planet” concept. And the rest of the ring outside of the “e” is gone too. So all you have left is this weird “e” with a slice missing, which makes absolutely no sense. The only explanation for the slice is as a deliberate evocation of the old Internet Explorer logo, which again it seems they should want to distance themselves from.

I like the new blue color. That’s about the only good thing it has going for it.

So far I have not tried the preview release of Microsoft Edge. Frankly, as a web developer, I am not enthusiastic about having to support another new browser, and I’m not confident that Microsoft is going to make a very good new browser, even though IE 9 through 11 were pretty decent. All I have to go by, at this point, is this logo. And what it tells me is that Edge is just a crappy knockoff of an already crappy browser. No thanks.

Postscript: I just noticed that exactly 6 years ago today I wrote a blog post that also discusses Internet Explorer. Even then — SIX YEARS AGO — IE 8 was out and I was already cranking about IE 6 as an old and outdated browser.

How to keep Internet Explorer from displaying your site in “Compatibility View”

Fortunately this is an edge case for me, but… there’s a time for everything. And that time was today.

If you build websites using modern, open standards-based techniques, the last thing you want is to have your Internet Explorer-using visitors see your site in the dreaded “compatibility view”. This monstrosity was created by Microsoft with the advent of IE8, to allow sites (mostly corporate intranets) that require the quirks of IE6 to still look like they’re supposed to when viewed in IE8.

The problem is, IE6 sucks, and it makes modern sites look terrible. So if your users accidentally view your site in compatibility view, it’s going to suck too.

The good news is, it’s easy to force IE8 and later to display your site the way you intended. You can disable compatibility view with this simple meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

(Source: http://stackoverflow.com/a/10365780)

Fun with site usage stats, part two

Back in February, I wrote about web browser usage by visitors to my site. Some of the discussion over my recent redesign has prompted me to do it again. Here we go!

Web Browsers

Compare to last time: Firefox has jumped from 34% to 47%. That gain has come at the expense of both Safari and IE, which have dropped from 33% to 27% and from 28% to 17%, respectively. (Note, of course, that I’m rounding the actual percentages to whole numbers because talking about “16.88%” makes me feel like Spock on Star Trek, and I’m enough of a geek without that.)

Also worth noting: Chrome. It is stuck in fourth place, but its share has jumped by 4.1% from 1.44% to 5.54%. (OK, in this instance I needed to Spock it up a bit.)

Operating Systems

Once again, as a Mac user who also (unfortunately, despite my feeble efforts at self-promotion) represents a hugely disproportionate amount of the total traffic, I’m skewing the results here a bit. Still, I have not significantly altered my own usage of the site since February, but in that time Windows has nonetheless dropped from 56% to just under 50% of my total traffic, while the Mac has gone from 29% to 43%. Interestingly, in February, iPhone/iPod represented over 12% of the traffic but now they’re just over 4%. Linux has stayed pretty even, in between 2 and 3%.

OS/Browser Combinations

In February, IE/Windows was the dominant combination, at 28%. Now it has dropped to fourth place, at 17%. Firefox/Windows has gone from #2 to the top spot, even though it just inched up from 25% to 26%. Safari/Mac and Firefox/Mac each went up a spot as well, moving into second and third, and going from 21% to 24% and from 8% to 18%, respectively.

Conclusions

This is far too small and skewed a sample to say a whole lot about trends on the Internet as a whole, but what I’m seeing here overall is that Mac usage vs. Windows is up, and Firefox usage vs. anything else is also way up. Specifically I’m seeing a significant surge in Firefox/Mac… which may suggest, I suppose, that I have been visiting the site a lot more lately than I did in February. Or maybe not.

It’s also worthwhile to look at the raw total numbers in the traffic. In the time between then and now I’ve split up room34.com into a number of separate sites. The totals back in February were across the board on room34.com; for October we’re looking at stats strictly from blog.room34.com. The date range is the same: 30 days. (The original data was from January 19 to February 18; the new data is from September 20 to October 20.) Back in February, the data I analyzed represented 2,845 unique visits to my site. This month’s data represents 3,810 visits, an increase of 965, or 34%. Since the old stats included visits to a lot of pages that are now parts of other sites, the increase in blog traffic is even greater. So while it’s probably true that I’ve been spending more time looking at the blog myself in the past month, vs. February (considering I just did a redesign this weekend), the majority of the traffic increase is most likely not from me. In fact, it’s probably quite likely that my own percentage of the total traffic is quite a bit less than it was in February. Traffic here spiked on October 13-14, when I posted a reply to Derek Powazek’s blog on SEO — visits to that single page, just on October 13, represent more than 10% of the total traffic the entire site saw all month.

Let’s take a look at the OS/browser breakdown for just that one day, October 13, 2009:

The traffic from this one date was likely responsible for some overall skewing of the totals. Derek Powacek’s blog appeals most strongly to Mac users, which would explain why the Mac/Safari combination is in the top spot (Safari being far more popular in general on Macs than Firefox, for the same reason IE dominates Windows — it comes with the OS).

Lessons to be learned? Well, if I want traffic, I should write about SEO. The SEO bots (both human and software) seem to love it. But beyond that, I think there probably is some valid evidence here that there’s some real movement in the directions of both Mac and Firefox. Something that sits just fine with me!

Final Thought

What’s the deal with this “Mozilla Compatible Agent” on iPhone and iPod? I haven’t seen that before, but I assume it’s one of two things:

1. A Mozilla-derived alternative to Mobile Safari, available only on “jailbroken” iPhones.
2. An embedded client in an app like Facebook, which allows you to view web pages without leaving the app.

I’m inclined to guess that #1 is correct. I’d be surprised if any Apple-approved apps were running a Mozilla-based web browser; it seems it would be far easier and more logical to develop legit apps using the official WebKit/Mobile Safari engine. I haven’t seen any hard numbers (nor do I think it would be possible to obtain them) on the percentage of iPhones in use that are jailbroken, but if this assumption is correct, and we can assume that the ratio of “Mozilla Compatible Agent” to Safari on the iPhone/iPod platform represents at least the percentage of iPhones that are jailbroken (since I’d assume some jailbroken iPhone users still use Mobile Safari), then the numbers are staggering indeed.

However… given the fact that over 8% of the total traffic on October 13 came from this user agent, and I myself visited the site numerous times on that day from my (non-jailbroken) iPhone, to monitor and respond to comments, I suspect a much more innocuous explanation. But a brief yet concerted effort to find an explanation on Google turns up nothing. Anyone in-the-know out there care to shed some light on the situation?

Download those PDFs!

This post is strictly for web developers/server administrators. The rest of you can resume your daily activities, confident that nothing that was even remotely relevant to you transpired here.

PDFs. Web browsers. Both are a daily, or at least frequent, part of the lives of most computer users. But not all web browsers are created equal when it comes to the matter of handling PDFs. Some browsers (say, the ones developed by commercial OS makers) take the approach of trying to manage everything for the user. They include PDF readers that are embedded right into the browser, and PDFs load almost like another web page. Other browsers (most notably Firefox) treat PDFs as downloadable files, and when the user clicks a link to one, the file gets downloaded to their hard drive to be opened in a “helper app” — usually Adobe Reader.

Most website owners prefer the latter approach, and I suspect most users do as well. PDFs in general are not much like web pages, and it does not seem logical that they should be viewed within a web browser. Generally when people are accessing a PDF, it’s because they want to download the document to their computer to be used offline or to print. It is illogical for these actions to take place in a web browser. Sure, savvy users can right-click (or on Mac, Ctrl-click) and select “Save linked file as…” or some such nonsense from the contextual menu. But a lot of Windows users don’t even know their mouse has a right button, a lot of Mac users have no idea that you can press keys and click the mouse button simultaneously to perform special actions, and a lot of both would be confused by this entire process.

So we come to the matter of web developers (such as myself) trying to find ways to force the web browser to download the file instead of loading it directly. A trick I have used often is to link not to the file directly, but to a special PHP script that reads the file into the server’s memory, changes various aspects of the response (such as the MIME type), and then streams the content out to the browser. This is especially useful when you want to restrict access to files, say only to logged-in users, or only to users who have entered a special passcode. The PHP script is perfect for that, because it allows you to execute some code before sending the file to the browser. It even lets you store your files in a directory on the server that web browsers cannot access directly, ensuring (more or less… this article isn’t about hacking) the security of your files.

But what if your files aren’t in a protected area? What if you don’t want to bother with the mucky-muck of the PHP wrapper — you just want to link directly to the (browser-accessible) file, but you still want to force the download? Well, if you’re using Apache, you’re in luck. I found this great explanation of a small block of code you need to add to your httpd.conf file to achieve the same effect.

Ultimately, what you want to do is change the MIME type of the response. Browsers that are inclined to load PDFs internally perform this magic by seeking out files that are sent with the application/pdf MIME type. But there’s a very handy, “generic” MIME type for binary files, which all browsers treat as files to be downloaded rather than displayed directly: application/octet-stream. It may sound like a group of 8 singers standing in a small river, but it really just means… a generic binary file.

Here’s the complete block of code to put into your httpd.conf file, or into the appropriate virtual host configuration, however it’s stored on your particular server. I placed the code just within the virtual host configuration for the client in question, so the change applies only to their site, and not to any others that are also running on the server:

<FilesMatch "\.(?i:pdf)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

If you’re not the server admin, you should also be able to put this in a .htaccess file in your site’s root directory, but I haven’t actually tested that to see if it works.