Cloud Four Blog

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).

One of the interesting links is this recommendation to use SVGs over icons which makes a lot of sense: https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/ I think that person would be sad to see how much worse it has gotten since.

> Is srcset commonly used? It is, to provide a couple of different image sizes so smaller screens/high DPI devices can load the best-sized image for their use. This is the best article I know on the subject https://cloudfour.com/thinks/responsive-images-the-simple-way/

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-f… (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".

Yes, yet last update was last year and coincidentally mentions article "A details element as a burger menu is not accessible" Published on September 20th, 2022: https://cloudfour.com/thinks/a-details-element-as-a-burger-menu-is-not…

Unfortunately there are still plenty of issues with the details element, especially around accessibility. Read more here: https://cloudfour.com/thinks/a-details-element-as-a-burger-menu-is-not… Hopefully this will change soon. I’ll amend the article when this will be the case.

This blog post has a good summary of some of the disadvantages of using icon fonts. https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/ As far as JavaScript goes, it has been a part of making sites work since the 90's. End users and developers won't ever be moving away from it since there are usually improvements that are gained by using it.

SVG images support media queries, which handles this use case pretty well. See here: http://blog.cloudfour.com/media-queries-in-svg-images/

That's their share of mobile web browsing. It measures usage, while the other numbers here are measuring share of unit sales. There's always been a big disparity between the market share and web usage share of Android vs. iOS: http://blog.cloudfour.com/explaining-the-ios-and-android-mobile-dispar… See also: https://en.wikipedia.org/wiki/Usage_share_of_operating_systems#Mobile_…

The one problem I've found with this approach is making sure that the CSS and JS breakpoints stay in sync as a site is maintained. At my previous job, we came up with a way of changing JS behavior based on CSS changes to DOM objects. http://blog.cloudfour.com/behavioral-breakpoints/

This explains the benefits: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-f… Here's some boilerplate code: https://github.com/johannaruiz/propotional-mqs Make sure you set the viewport correctly: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-k… as an incorrect viewport can cause issues with some mobile browsers: http://www.quirksmode.org/blog/archives/2013/11/a_day_in_the_li.html

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-dispar…

Do many of the major sites actually use StatCounter though? Akamai's stats show a very different story - http://blog.cloudfour.com/explaining-the-ios-and-android-mobile-dispar…

Does responsive design still suck on phones I hear [0]? eg downloading desktop-aimed images even though it's set to display:none. [0] http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

You can add Symbian and Samsung/Bada too. http://www.cloudfour.com/mobile-operating-systems-and-browsers-are-hea…

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 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/srcs… [0b] https://cloudfour.com/thinks/responsive-images-101-part-8-css-images/ [1] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_emb…

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…