During the presentation that John Mellor and I did at I/O this year covering building beautiful websites for high DPI displays, we summarized our talk into about 7 key points. If you follow these seven simple guidelines, you’ll find your site looks great on any high DPI display. Setting width=device-width means you only have to care about device independent pixels If you don’t set the viewport to width=device-width, or if you use a fixed width, you’re in a world of hurt. The devicePixelRatio on high DPI...
At Google I/O this year every attendee got a brand new, beautiful Chromebook Pixel - for many, it was their first high DPI (a so called retina) laptop, and I think many people realized how, um, not so beautiful 1x images look on a 2x screen. In other words, how crappy most of the web looks on a high DPI display. While there, John Mellor and I gave a talk covering the best practices for building sites that look good on high DPI displays. We covered the theory behind the three different types of pixels and...
Support for target-densitydpi in the viewport meta tag was recently removed from WebKit and with Chrome for Android moving forward to current revisions on WebKit, this change is now rolling out in Android. This change affects only a small number of sites because of the limited implementation of the target-densitydpi attribute. It brings Chrome and other WebKit based browsers in compliance with the specification and matches the behavior of other modern mobile browsers. In order to to best understand what’s...
TL;DR: If you’re using a semi-colon to separate values in your viewport meta tag, your site may break! Use a comma instead. Browsers can be pretty forgiving most days, they do their best to fix our coding mistakes; but it’s a tough job. Most days, they manage to get it right, but trying to fix all the possible error cases is pretty hard. Worse yet, sometimes one browser fixes our code for us, while others don’t. The viewport meta tag seems to be one of those elements that’s a little bit persnickety. The...
What is the viewport? # Imagine if every web page you opened on your phone or tablet got the same version as your desktop, and was displayed on the small screen of your device. On a phone, that might mean you would see only the top leftmost corner, a tiny 320px by 480px view, and you’d have to scroll around the page to be able to see everything. (See figure 1). Unlike a desktop or laptop, there is no way to resize the browser window to fit the content that you want to see. Thankfully, on mobile devices,...
Over the last few months, I’ve spent a lot of time thinking about how to make it easier for developers to build web applications that work offline, its a tough problem to solve. The web has the features/technology to do it, but I think there are two things preventing us from getting there easily. The first is a perception issue for users, many people think that the web only works when they’re online, no internet, no web. That leads to a bit of a catch-22, users aren’t asking for it, so developers aren’t...