* The Business of Software

A former community discussing the business of software, from the smallest shareware operation to Microsoft. A part of Joel on Software.

We're closed, folks!


» Business of Software FAQ
» The Business of Software Conference (held every fall, usually in Boston)
» Forum guidelines (Please read before posting!)


Andy Brice
Successful Software

Doug Nebeker ("Doug")

Jonathan Matthews
Creator of DeepTrawl, CloudTrawl, and LeapDoc

Nicholas Hebb
BreezeTree Software

Bob Walsh
host, Startup Success Podcast author of The Web Startup Success Guide and Micro-ISV: From Vision To Reality

Patrick McKenzie
Bingo Card Creator

Serving platform specific screenshots

I want to make sure that users see screenshots of my software that are relevant to the platform they're using.

So Mac users will see a Mac screenshot, Windows users see windows etc.

It'd be nice to handle varying versions of windows separately but just Win / Mac would be ok.

I think the best way to do this would be with a server side script. Probably using something like PHP since it's ubiquitous. I'd hope it would actually serve the image, not just redirect since that would slow everything down.

I could write this myself but would probably end up using servlets since I have no PHP experience. But servlets seem too heavy for this and the server configuration gets disjoint from the web server which isn't ideal.

So, is there an off the shelf solution to this? A web search didn't turn up anything but maybe I searched for the wrong thing. Seems like the kind of thing many software companies need.
Jonathan Matthews Send private email
Thursday, October 31, 2013
Can't you just use Javascript?
Andy Brice Send private email
Thursday, October 31, 2013
You can do it very easily on the client, in JavaScript. You can detect the OS via navigator.userAgent and then  document.write() html for the right link.

Below is completely untested snipped in JavaScript to get you started. Doesn't detect mac because it's extracted from real code that didn't need that, but it's beyond trivial to add mac detection.

Doing this on the server is equally trivial which is why I don't think there are pre-made solutions that aren't more trouble to integrate than the problem they solve.


<script type="text/javascript">
var OS_UNKNOWN = -1;
var OS_WIN_XP = 0;
var OS_WIN_VISTA = 1;
var OS_WIN_7 = 2;
var OS_WIN_8 = 3;
function getOS() {
  var userAgent = navigator.userAgent;
  if (-1 != userAgent.indexOf("Windows NT 5.1")) {
    return OS_WIN_XP;
  if (-1 != userAgent.indexOf("Windows NT 6.0")) {
    return OS_WIN_VISTA;
  if (-1 != userAgent.indexOf("Windows NT 6.1")) {
    return OS_WIN_7;
  if (-1 != userAgent.indexOf("Windows NT 6.2")) {
    return OS_WIN_8;
  return OS_UNKNOWN;

  if (getOS() == OS_WIN_7) {
      document.write("<img src='win7.png'/>");
  } else if (...)

Krzysztof Kowalczyk Send private email
Thursday, October 31, 2013
Hmmm... thinking about it, yes I probably could use JS.

I was thinking that if I used it I'd need to place a default image on the page which would be replaced by the script so that browsers with script turned off would still see a default. This would create a race condition of concurrent downloads which would slow everything down.

But... I guess I could use <noscript> and just put the default in there.

Thanks guys, I think this does make more sense.
Jonathan Matthews Send private email
Thursday, October 31, 2013
What does an iPad user looking for Windows desktop software see?

It's dangerous to make assumptions about users based on the device they're using to view your website at 10pm in the evening.
Marlee Ammon Send private email
Thursday, October 31, 2013
I'll just show them the default (probably windows), since this is a desktop app there's really nothing else I can do.

On the other hand if I had some convincing evidence that the majority of ios users had Macs I might show the OSX screenshots.
Jonathan Matthews Send private email
Thursday, October 31, 2013
It should be possible and easy to find screenshots for platforms other than the one you are browsing with.

Sometimes I search for Linux software using my Mac or my Android phone and sometimes some other combination.
koan Send private email
Thursday, October 31, 2013
> Mac users will see a Mac screenshot, Windows users see windows

So when I'm using my brother's Mac, I can't see how it'll look on Windows until I get home?  Why inconvenience the user like that?  Show all 3 platforms, side-by-side, so we can see it for ourselves.  It also lets us know that it's a cross-platform app without even reading the page.  Win-win!
PSB136 Send private email
Friday, November 01, 2013
On the screenshots page, yes I plan to see both but there are places where I only want to show the likely most appropriate one for brevity.

I nicer control would show the most likely one with a switch underneath to look at the other platform(s). Perhaps I'll write a library to do that and give it away free at some point.

For anyone who wants to do the simple version I've implemented for now, here's some tested boilerplate...

        var winImage = 'windows image path';
        var macImage = 'mac image path';
        var htmlStart = "<img  src='";
        var htmlEnd = "' alt='' />";

        if (navigator.platform.toUpperCase().indexOf('MAC')>=0) {
            document.write(htmlStart + macImage + htmlEnd);
        else {
            document.write(htmlStart + winImage + htmlEnd);
        <img src='win image path' alt='' />
Jonathan Matthews Send private email
Friday, November 01, 2013

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz