Today we're launching a new look for people reading ProPublica on smartphones.

In order to make our site more welcoming for the increasing number of you who read us on your smartphones, we've redesigned and re-engineered the site so that people on small screens will automatically see a version of the site optimized to fit them. If you're on a smartphone, you've already seen the new look.

You don’t need any app or special URL to see it. Just go to www.propublica.org. If you’re on your phone, you'll see our optimized site. Readers of our website using desktop browsers shouldn't notice a difference.

The new pages use HTML5 as well as a technology called "media queries." We used the approach first laid out by Ethan Marcotte in his article "Responsive Web Design" (and later, the book of the same name). We also took as inspiration the remarkable new Boston Globe site.

Why this approach? Put simply, we wanted to make the site look and work great for readers on smartphones. But down the road, we see the mobile web becoming a more common reading device, and we want to make sure ProPublica's journalism is everywhere our readers want it.

We also believe that building a site that adapts to many screen sizes is a good long-term bet. Dedicated "native" smartphone apps are great (and we've got them for Android and iPhone), but a responsive site has some distinct advantages.

Primarily, it's just easier to develop for desktop and mobile simultaneously when you're just dealing with a single template and markup. Dedicated lightweight mobile sites tend to be based on special templates that are separate from the templates that are used for the desktop site -- and mobile "app store" apps aren't even web pages to begin with -- so recreating interactives for them is a big undertaking. Consequently, dedicated mobile sites and mobile apps tend not to contain all of the material in the regular website. But on our new responsive templates, most ProPublica's stories, graphics, videos, and news applications will be available simultaneously on all devices that can get to our site.

Another advantage of responsive design: If you click on a link you'll see the right version of our site, no matter what device you're using. Links don't work with mobile apps; there's no way to engineer a link so it opens in a "native" mobile app. We think this explains a phenomenon we’ve noticed -- that though we’ve had huge uptake of our mobile apps, we don't see very much day-to-day usage compared to the number of people who come to our site on their smart phones. It's our hypothesis that it's because people have to remember to open up the app to see what's new every day.

Likewise, a dedicated lightweight mobile site requires browser sniffing and URL redirection that's complex enough that failure is common -- so much so there's a web site dedicated to it.

Responsive web design solves these problems. If you're on a smartphone and click on a ProPublica link in a tweet or an e-mail, you'll see the right thing no matter what size screen you're looking at.

Design Is Never Finished, Only Abandoned

We cringe at calling anything "in beta," but we're going to be tweaking quite a bit over the next weeks and months, working closely with our designer, John-Henry Barac.

We're also aware that, with the enormous range of smartphone browsers in the wild, our site is surely going to fall short in places. If you see something that looks wrong on your smartphone, e-mail [email protected] and we'll get it right. Make sure you tell us what device you're using and what browser you're using if it isn't the one that came with your phone.

OK, nerds. Go ahead, try it: resize your browser until it's about 480px wide and you'll see the browser switch between stylesheets. Aren't media queries grand? Of course, we didn't build the new stylesheets for people resizing their browser windows, so things might break in strange ways when you do that.

Also, let's clarify something: the new site isn't completely "responsive." They don't have fluid widths or automagically resizing images, and the page doesn't shrink to fit an infinite range of screen sizes. We call our approach "adaptive," or "switchy."

We decided early on that we really wanted to laser-focus on ~320px screen sizes like iPhone and Android browsers, which make up the huge majority of mobile web browsing in the U.S., and that for our particular use case, the widths in between smartphone and desktop were lots more work than we could realistically take on given the likely short-term payoff. Your mileage (and audience) may vary. We are under no illusions, though. We can foresee a time when we'll need to come up with a middle-range "break." The 600px-wide Kindle Fire has already staked this middle ground. For now, we're showing the full site to that browser, and sticking with smartphone and desktop widths.

Our slogan during this process has been "one website." We don't do any browser sniffing at all. Virtually all of the switching functionality is handled by media queries. In the few cases where we really need JavaScript to change the behavior of an element on mobile, the JavaScript detects window width on page render, and never asks what kind of browser you're using.

You may have noticed that there aren't any app-like behaviors like fixed-position nav and sliding page transitions. We opted not to do these because they're deceptively hard to get right, especially across all of the mobile browsers, and because they don't buy us genuine ease-of-use improvements for readers. The similarity to "app store" apps they provide tends to be pretty shallow, and we would argue, superfluous and faddish. The web has done pretty well so far without sliding page transitions, so we think readers on smartphones can browse happily without things like that.

Some of our news apps (like the maps that go with our redistricting stories and Dollars for Docs) are already adaptive, and as we have time we'll retrofit more of them. New news apps from here on out will be adaptive.

There's been quite a bit of talk about "mobile first" development and about the different information needs of somebody on a smartphone vs. somebody on a desktop browser. We don't disagree with any of it. Our goal with this redesign and engineering upgrade was simply to make the experience of reading stories and user interactives on our site better for smartphone users. There will be opportunities to use location services and the accelerometer down the road if a feature really cries out for it. But for now, readers should find reading our often lengthy stories less of a hassle.

Developer Jason Das (who deserves special praise for his work on this project) re-engineered most of the site using HTML5. There are almost no div tags on the homepage. See for yourself -- we're using the new HTML5 tags like and to make the code as semantic as possible. We also switched our stylesheets to SCSS, which makes it far easier to make complex stylesheets.