Back in early April we released Upwardly Mobile, a web and mobile tool that helps users compare their current living situation to other metro areas in the U.S.. This was the second in a series of apps that we built to help illustrate how the practical application of government data can inform citizens. After completing the first app with JQuery mobile we felt it was time for a different approach. This project was our first, and my first, shot at building a responsive website.
The first app we built, Sunlight Health, used jQuery mobile which was endlessly frustrating to work with. The versions of JQM changed weekly, and nothing was documented. I'm relatively new to web design, so each project I work on has some new challenge for me, but learning JQM seemed unnecessarily hard. I only really understood the structure of their theming system by the time we finished the project, far too late to actually take advantage of it. Consequently, they now have a something called a themeroller that helps you customize the basic elements.
So to find a better solution for the second app we looked toward building a responsive website. A responsive website uses media queries to determine the dimensions of the display you're viewing the site from and changes the CSS accordingly. The most obvious differences can be seen between traditional browsers and mobile devices, where information that's displayed horizontally often gets restructured to take advantage of the tall and narrow display of mobile devices. This choice seemed more reasonable from a production standpoint because we were just using HTML and CSS instead of a quirky application but it would also allow us to make the tool accessible in traditional browser windows as well as mobile platforms.
Not knowing where exactly to start here are the tools I turned to:
For inspiration: http://mediaqueri.es
A Book Apart's Responsive Web Design by Ethan Marcotte. This book was a helpful way to think through the process of building out the structure, and the tips on how to get your math right were great. Some of it did seem like overkill, specifically the math for vertical padding and margins, but overall it was a good resource to have by my side for my first responsive site.
ProtoFluid. Protofluid throws a javascript layer around your site and allows you to jump through a series of standard screen dimension. When I started using it, it was in beta mode, but has since launched as a free project, with the plea for minimal support (in the form of $5). I LOVE this tool. It was helpful to be able to view the site at all sizes, but protoFluid did a particularly good job mocking up what a mobile screen would look like since my browser won't get narrower than 400px.
For the most part, building a responsive site was pretty easy. It made sense. Of course when dealing with something that's new there are always a few hiccups. Here are a few things I will keep in mind while building my next responsive site:
I try to block out the part of my mind that thinks in terms of sections or divs when I'm designing so I don't end up with something that looks like it's been restricted to a bunch of boxes. The problem with designing without restrictions on a responsive site is that having a series of images floating across the screen severely limits the ease with which the site resizes. Text can flow easily from line to line, but the fixed sizes of my images meant that I had to become hyper attentive to widths, and in some cases build new images just to take care of an image that was 5px too big for the smallest dimension that I wanted it to fill. Next time I'll keep the break widths of my media queries in mind when working on the design.
Borders are not taken into account in the width of an object normally. In the case of the tabs on the Upwardly Mobile detail pages, each tab <li> was specified as 25% of the <ul>. When adding a border to the left and right sides to created the inset tab effect, it would throw off the 100% count, causing the last tab to jump down to the next line. Initially, I worked around this by using images for the borders, but I was using the CSS3 multiple images feature. This was breaking in a few browsers, so I ended up reexamining the problem and discovered the magic of the box-sizing property. So simple. So effective. I ended up applying that to a couple other elements also. Box-sizing: border-box; recalculates the dimensions of an element to include border.
Some other lessons we learned (or relearned)?
SVGs don't do well on android devices although there are some workarounds (thanks to Jeremy)
CSS3 animations (Moooo!) are a little touch and go. We did eventually get it to work, but it gave us some trouble and seemed unpredictable.
Building Upwardly Mobile as a responsive site was a much smoother process and a more effective tool for accomplishing our goals than JQM was. Creating a responsive site is more work than a traditional site, but I think the added value for mobile viewing was worth it and should probably be incorporated into more of the sites we we work on.
Continue readingThe protons are coming! The protons are coming!
In the Sunlight Foundation computer systems, the people are protected by one unconventional, yet endlessly impressive Timball, our sysadmin. The man investigates the problem and keeps us safe from the offenders. This is his story.
Dear fellow earthlings. We are under attack and the thing that is attacking us is our Sun.
I was alerted via friends on IRC, early this morning they shared with me a Facebook image link:
which showed a scary red spot pretty much completely covering North America (my favorite america), but i wanted to know what the National Oceanographic and Atmospheric Administration (NOAA) was doing to monitor the situation. So i jumped on the google and quickly found a pile of realtime data directly from NOAA!
Continue readingWhat Redistricting Means For Sunlight’s APIs
With the election 4 months away we're starting to get questions about when our various APIs and projects that depend upon them will return the newly redistricted legislative boundaries.
The short answer is that we will most likely not be able to support new district boundaries until after the November 2012 election (but before they technically go into effect for the purposes of representation in 2013).
If you're interested in the reasoning behind this decision, read on, but be warned, redistricting is a lot more complex than "the state has released new boundaries, let's load them."
Continue readingJuly 2012 Labs Update
Labs Update took a break last month to attend the Personal Democracy Forum in New York where we launched two new projects and ate delicious Chinese delicacies. Read on to find out all of the work that we've been doing over the past two months.
Continue readingPython Classes: Now Open to the Public
For a few years now, 
labs members of Sunlight have offered various technical classes to the rest of the staff, covering HTML and CSS, javascript, ruby, and python. It's a good way to foster collaboration between staff and generate new ideas. Just like I enjoy picking the brains of our policy department now and then, non-Labs Sunlighters usually enjoy learning at least the basics of what the other half does.
I'm about to start up a new round of the python class, now that we've got a brand spankin' new crop of fellows and interns. But since I'm pretty tired of having to futz with my linux configuration to get a proper dual display going on a TV every time, and I want the students to be able to ignore me more surreptitiously, like a proper class, I've decided to use the screen sharing feature on Google+ hangouts instead. And since we'll be on a hangout anyway... why not open it up to all of you good people who might be interested?
Continue readingWielding a Cleaver on Names, Now Safer and More Accessible!
NameCleaver recently received a small version bump (to 0.3!) with a fairly big addition: safe mode. This was the most-requested feature amongst the other in-house users of NameCleaver, so I figured it might also merit a quick announcement.
Continue readingPyGotham 2012: Report from the Waves
PyGotham 2012 was a fairly typical tech conference. It was small and regional. This being New York, there were plenty of hipsters. There were a few more women than normal. The venue was quite unusual, but more about that later.
Continue readingThe Tech Behind Call on Congress
Call on Congress is the Sunlight Foundation's new free service to help anyone with a telephone connect with and learn about their lawmakers. Simply dial 1-888-907-6886 to find out how your representatives are voting on bills and raising campaign money and learn about upcoming bills in Congress.
While Sunlight prides itself on creating powerful, online tools that make government more transparent and accountable, we do so knowing that there is a segment of the public without access to the internet that we will never reach. Call on Congress is our attempt to bring information about Congress to anyone that can use a phone.
Twilio
The service is built on top of Twilio, a simple cloud communications API that enables us to create interactive phone and SMS applications. Users can navigate through a series of menus, be connected directly to the office of their representatives, and even leave us voice messages.
I can't express how awesome it is to work with their service. They have made it incredibly easy to do things that would otherwise be quite difficult to create. We can generate dynamic responses that are spoken back to the user using Twilio's text-to-speech feature. We can have recordings of a spoken script play for static content or even play music, if we had the need. We can even forward phone calls so that users can be connected directly to the office of their representative without having to write down the phone number and dial the call.
Twilio also has SMS features that, while not used on this project, are used on our other new service, Scout.
i18n and the Google Translate API
Call on Congress is Sunlight's first multilingual project. The service is available in English, Spanish, and Esperanto... yes, Esperanto. This posed some unique challenges as we had to deal with both a static spoken script and dynamic text that would be read using Twilio's text-to-speech feature.
Dan created an amazing, multi-tiered solution for this problem. Each bit of text used in the application is run through a series of steps to determine the proper response. All of the text is written in English in the code, but is internationalized by:
- creating an MD5 hash of the text
- determining the response language
- checking for a cached translated copy of the text if it is not in English
- generating a translated copy of the text using the Google Translate API
- generating an audio file name based on the MD5 hash and a slugged chunk of the text
- doing a HEAD request to S3 to see if an audio file exists for the chunk of text
- responding either with a Twilio Say command using the translated chunk of text or a Play command with the S3 URL of the audio file, if one exists
This method allows us to basically drop in new languages as we create the audio for them. We can launch a new language and have the text-to-speech render the Google translated text until we drop language audio files into the application.
Dan is smart.
Sunlight APIs
One of the most exciting aspects about this project, at least for us internally, is that almost all of the features of this service are powered by our existing APIs:
- Member lookup by ZIP code and contact information is powered by our Congress API.
- Bill information comes from the Real Time Congress API.
- Campaign contributions and member biographies are provided by the Influence Explorer API.
Our friends at TurboVote are responsible for the API that allows us to provide information about local election offices.
Call on Congress is a great example of what can be done using our API offerings. We were able to create this application without having to do any scraping or collecting of data of our own. In fact, it's a great example of what can be done entirely with APIs. Call on Congress is nothing more than a cache and the logic that combines the Twilio, Google Translate, and Sunlight APIs into a single application.
Give it a try! 1-888-907-6886
Call on Congress is open source and available on GitHub.
Continue readingComing to PDF? Get Warmed Up With a Hackathon
A bunch of the Labs team (and the rest of Sunlight) will be in New York next week for PDF 2012. It's one of the can't-miss events of our calendar year -- and not just because Sunlight counts Micah Sifry and Andrew Rasiej as close friends. PDF is a consistently great opportunity for like-minded folks to get together and share their visions for how technology can change society for the better. We've found more than a few team members at past PDFs; I don't think it's a coincidence.
This year the folks behind the event are trying something new: a two-day hackathon in the leadup to the conference. They're calling it PDF: Applied, and if you have talent for coding and a chance to make it to New York a little early, you should really consider attending. It's always exciting to see this kind of attempt to translate big thoughts into concrete action.
Continue readingDatafest: Hacking Campaign Finance Data over a Weekend
This weekend I had the pleasure of helping to run Datafest, a two day campaign finance hackathon at Stanford. The event brought together around 60 journalists, technologists and students, many of whom had no prior experience in campaign finance or data driven journalism. The enthusiasm and dedication of the group--as well as the results--were truly heartening to see.
On Saturday morning the participants split themselves into ten teams, each of which came up with an original project to implement over the following day and a half. Some teams focused on original reporting using political influence datasets. Many produced visualizations. On the more technical end, there were interactive apps and statistical modeling. At the end of the weekend we announced an overall winner and three runners up, all of whom deserve a bit of recognition for what they achieved in such a short time.
Team Frienemies took home first place with a system for grouping and visualizing political entities by their common donors. The project is compelling not so much for its catchy visualizations, but for the insights they were able to derive. Groups that are non-partisan in name only, such as Emily's List or Club for Growth, are correctly placed at the center of the Democratic and Republic clusters. The visualization also suggests non-obvious associations, such as various telecommunications industry groups leaning Democratic. The project authors also proposed using the tool as a recommendation system: donors could find other candidates or organizations they may support and political groups could find other funders that may be interested.
Team Gophers chose to dive deep into the influences of one company as a case study in using the many datasets available. Their visualizations touched on campaign finance, the revolving door of lobbyists, federal contracts, and bills before Congress. One key insight they were able to show was that the company gave predominantly based on committee membership of the member, not based on ideology, expected election outcome or geography.
Team KeyStoners took a slightly different approach: they focued on one particular issue--the Keystone Pipeline authorization in Congress--and looked at a variety of influences on the outcome of the vote. In particular, they tried to explain what accounted for 41 Representatives who flipped their position before the final vote on the bill. Interestingly, the found that rather than campaign contributions, lobbying or prior voting record, by far the most explanatory factor was being a Democrat in a district surrounded by Republican districts.
Team MostExcellent started with a simple but interesting question: is the out-of-state money going into the Wisconsin Governor's race unusual? Through data analysis and interactive visualizations they show that out-of-state money is not an anomaly. This was combined with two short news pieces on the topic, giving a nice example of using data both to investigate a story and to present that story to the reader.
If you're interested in hacking on your own, check out the data section of Influence Explorer, where many of the teams at Datafest found their data. And many thanks to Knight Fellow Teresa Bouza for organizing the event!
Continue reading
59063
