Cloud Four Blog

I've gotten into arguments over whether or not emoji belong in the unicode standard at all, and I'm not going to rehash them here.

What I am going to say is that regardless of whether or not emoji are a good fit for unicode, they don't degrade gracefully for blind users (or for sighted users on older hardware) and they're prone to rendering issues between different fonts that can mask intent.[0]

Everything bad about icon fonts also applies to emoji. All of the articles you've ever read about how svg icons are preferred[1] -- all of them apply to emoji as well.

So in general, I only use unicode emoji[2] if two things are true

A) I'm in a closed conversation that won't be copied and pasted around or shared publicly.

B) I know the exact platform that my reader will be using to view my text.

I don't think Git falls into either of those categories.[3]

[0]: https://blog.emojipedia.org/apple-and-the-gun-emoji/

[1]: https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

[2]: I do heavily use emoji shorthands (:bug: :cat_eating_avacodo:) but these don't suffer from most of the same problems as emoji. They work as progressive enhancements for the platforms that render them, and fall back to readable text on the platforms that don't.

[3]: It's true that unicode fonts in general have issues when you get into non-English languages, but I don't advise people to avoid, say, Chinese characters, because: A) language glyphs don't change often enough to frighten me on…

For http://www.pixtulate.com (on the fly cropping and scaling of responsive images) we simply read lots and lots of blogs from the responsive web design community. We eventually narrowed down on a problem everyone was discussing and was trying to build various home grown solutions to.

After reading all the great posts by Jason Grigsby (http://blog.cloudfour.com/) the problems with sending one-size-fits-all images to mobile and tablet devices was obvious. Additionally, most existing solutions require you to pre-scale/crop multiple versions of the same image which is tedious and labor intensive. Even the proposed srcset attribute and picture element have this requirement.

Next, we looked at any existing players in the space and found that a few where starting to crop and getting traction which further validated our premise that people where looking for a robust solution.

So, we considered it worth at least building an MVP and will soon be looking for interested parties to try it out (drop me a line if interested - and yes, our site is butt ugly).

Using the width/height value on an <img> tag feels simply archaic and more importantly doesn't add value to the site visitor.

Why?

1. srcset [0]: the browser chooses the size of the image, not the server.

2. CSS/Responsive images [1] : Almost all (I am close to saying 100%) of images I have loaded on websites have their width/height adjusted by CSS.

Layout updates are often unavoidable in most circumstances surrounding images, there is just no getting around it.

So instead of pining over the past, we should adapt for the future.

I feel like this argument is the same I had with print designers in the late 90s who made every page a full image because they couldn't handle not having full control over the layout.

[0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

[0b] https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/

[1] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

The browser doesn’t know the size at which the image will be rendered on the page until it has downloaded and parsed all the relevant CSS and JavaScript files. Shortly after the browser downloads the HTML, it requests CSS and JavaScript. But before the CSS and JavaScript is done loading, the browser starts downloading images. The only thing that the browser does know is the size of the viewport. If we give sizes based on screen width then the browser will know which image to use. The width doesn’t have to be expressed as a viewport width unit though. It can be any length including absolute and relative length. You can even use CSS calc() to do things like auto-calculate margins dynamically.

For your example I believe it would be done like so:

<img src="cat-200.jpg" alt="cat" srcset="cat-200.jpg 200w, cat-400.jpg 400w, cat-800.jpg 800w" sizes="5em">

This page explains responsive images further: https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/

Using em instead of px for media queries is definitely a bit of a mindmelter at first. However, if you're truly interested in building a responsive site, not just hitting a few target devices(1), I definitely recommend spending a little bit of time getting comfortable with the idea.

Mostly, it forces you to consider the context of your media queries, not just specific resolutions or device capabilities. This helps to future-proof your code for new devices and build for difficult-to-test for contexts, like users who always have a browser zoom level set higher than you expect.

This article really helped sell me on the idea and show me the way:

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

(1)I realize this sounds judgmental, I don't mean for it to be. There are plenty of perfectly valid reasons to "just hit a few target devices" using responsive design techniques instead of building a "truly responsive site".

I'm not sure i agree with his reasons, mostly because what the data really shows is that Android users don't really browse on Wi-Fi [1] (on 3G the discrepancy - device marketshare vs browsing marketshare - is much lower).

My opinion (with anecdotal evidence) is that Android users just stick with their PCs when at home (presumably when they have Wi-Fi), whereas iOS users prefer the small screen, for some reason.

[1] http://blog.cloudfour.com/explaining-the-ios-and-android-mobile-disparity/