A New Found Appreciation for Images on the Web

I’ve been putting images in web pages for years. Nearly 2 decades now. For most of that time it has been quite easy. Add your source and the dimensions and BOOM, there you go. There was always some work around optimising images outside of your page but once in there, easy.

Then, with higher pixel densities it started getting a bit harder and we had to work it out with media queries and srcset. Now SVG is widely supported, all this fussing around with different versions for different resolutions has gone away, at least for simple graphics.

I’ve recently been doing some design work on an Android app and it’s a very different way of doing things with images. For example, I’ve created a splash screen for while the app is loading. It’s a full page, wide logo in the centre, coloured background.

On the web, I’d just set the background colour and then centre the SVG logo, probably with flexbox, and use a flex-basis of 80% or some margin to give it a flexible width.

On Android, I’ve had to provide the splash screen image as a series of PNG files. 5 different resolutions, varying from 480×320 up to 1920×1280, and then in both orientations, 10 files in all. The clever part is that at the point of installing the app the Android device will only get the files appropriate for its size and pixel density but it means a lot of messing around with assets.

It’s been a similar story for icons too. Multiple resolutions. You want a different colour? That’s a separate PNG.

I’m making it sound worse than it actually is. Luckily there are great tools that let you import a single image and export all the variations you could need.

But it does make you think about the differences between platforms. To me, the web browser, with it’s ability to resize on the fly, use SVG, recolour, apply filters, transform and animate in CSS makes Android image support feel very primitive.

iOS vs Android vs Windows in 2017

Everyone has their favourite big web company and associated operating system (OS). We’re all either Apple, Google or Microsoft. Maybe not quite all of us. There’s always one weirdo who finds something “better”.

I’d say that for office desk based work most people are either on Apple or Windows (Mac or PC). I’m not sure if any significant numbers use a Chromebook and Chrome as their serious OS. I may be wrong. For phones it’s iOS, Android or, to a lesser extent, Windows. Do people still use Blackberry in big numbers? I’m assuming not.

People who use Windows for work might have any kind of phone. It’s actually pretty unlikely that they’d have a Windows phone as it’s smaller in the phone market. On the other hand, I bet almost everyone who uses a Mac has an iPhone. And without even considering any of the other options.

I’m in quite a lucky position where I work on a Windows laptop, use an Android TV box and an iPad at home so have access to all 3 operating systems. I thought I’d do a quick comparison, nothing scientific, or even particularly fair, just my own impressions. I should also point ut that this isn’t about bashing anything. I think all 3 are great. More or less they all do the same things. It’s the little differences and the UX of them that becomes interesting. Here are some pros and cons for each.

  • iOS and Android are miles ahead of Windows in terms of apps available.
  • iOS is on Apple hardware only whereas you have more choice with Android and Windows.
  • The point of entry in terms of price is much higher for iOS.
  • Android (Material) and Windows have more modern UI whereas iOS doesn’t seem to have changed very much in the last few years. Not necessarily a bad thing, just an observation.
  • iOS has Safari as its default browser, which is not quite as feature rich as Chrome or Edge. It’s easy to install Chrome though.

For what it’s worth, I have a Windows 10 phone (Microsoft Lumia 550) and I absolutely love it. The main drawback is the lack of apps compared with the other platforms but I don’t find that to be a major obstacle. Since Windows 10 there’s now a first class web browser in Edge so most services which don’t have a Windows app seem to have a web equivalent.

My phone cost me £55 (about $70) and does everything I need, whereas a new iPhone would probably cost me about 10 times that. My phone doesn’t have a great camera or loads of storage, as you’d expect at that low price but I have a digital SLR camera for that. I’m not going to pretend my Windows phone is anywhere near as good in spec compared to the latest iPhone or but I’m also not convinced that my overall mobile experience is 10 times worse. I feel I’m getting the better deal.

Play ZX Spectrum Games with Marvin

I recently got an Android TV box, which enables you to get Android apps and put them on your TV. I decided to look into ZX Spectrum emulators and after trying 2 or 3 soon settled on Marvin, presumably named after the paranoid android in the Hitchhiker’s Guide to the Galaxy, as my choice.

It automatically hooks up with World of Spectrum, allowing you to quickly search their huge archive of games and download any you want.

I’d recommend going into the options and getting rid of the joystick and keys as they’re not much use in a non touch environment and are pretty ugly.

Playing games with just a remote control is a bit of a non-starter so I’d recommend getting a Bluetooth keyboard. A mini one is fine and pretty cheap. Marvin even has options so that you can map your chosen control method – keyboard, cursor joystick, Kempston joystick, Sinclair joystick – to the directional pad. This makes it a lot easier than trying to use Q, A, O, P, M or whatever keyboard configuration you’re used to.

I’ve been playing Laser Squad, a tactical turn based war game from 1988. It’s a bit of a cult classic and has sites dedicated to it and numerous spin-offs. It’s stood the test of time incredibly well given that it’s now coming up to 30 years since its release.

I’ve even managed to get my kids, 12 and 10, interested so it must have something about it.

Long live the ZX Spectrum!