An Amazing Opportunity
Every now and again people are given the opportunity to change the way others do something important. Recently one of these opportunities fell into my lap. As part of my job as Web Manager at the Philadelphia Bar Association I’m tasked with formatting a list of qualified candidates for judges as part of the Campaign for Qualified Judges PAC.
Why is This Important?
The Campaign for Qualified Judges is important because in Philadelphia we elect our judges. That means YOU can actually choose who will decide your future if you end up in front of one of these men or women in court. We create resources for the public to educate them about who is best for these positions and post these to the Philadelphia Bar Association website for this reason.
One of the resources that we provide on the Voters’ Guide to Judicial Elections page is a list that voters can take with them to the polls. With our current election I decided to pitch the idea of reinventing the way the public can access and save this list.
Previously this list was creating as a pdf document that the public could download, print and bring to the polls as a sheet of paper. With all of current resources available to web designers in HTML5 and CSS3 I thought I might try to improve this process. The new approach I proposed was to create a resource that people could not only print, but also save on their phones, which is more likely to come along with them to the poles. The solution I came up with for this is a responsively designed single page website.
Why Responsive Design?
Recently I’ve been really excited about the idea of “responsive web design” and the “mobile” web. This is basically the concept of creating websites that respond to browsers widths without assuming that everyone will view websites on a classic desktop computer. I think Chris Coyier put it best in a recent CSS-TRICKS screencast on responsive design, by stating that eventually there will be browsers on everything, including our toasters (I’m paraphrasing). This means we need to design websites that react to this change in user trends.
There are also projections that in the next three years more people will access the internet via mobile browsers than desktop computers. So, basically if your site doesn’t work on mobile in the next three years you will be way behind the curve.
- Mobile First Approach: For the base of this project I used HTML5 Boilerplate Mobile. This creates the basic structure of your single page, so you don’t have to retype all of the default settings that most web designers would choose anyway. The files are also all really well commented, so if you don’t understand why something is structured the way it is, you can easily find out why.
- Add to Home Screen: I used MATTEO SPINELLI’S ADD TO HOMESCREEN open source project to create the buttons that float down and up depending on iPad or iPhone visits, to prompt visitors to save this “web app” to their homescreens on these devices. This is super easy to set up, and I like it a little better than the default that you can enable on the HTML5 Boilerplate project.
- Apple Touch Icons and Splash Screen: These are the icons and splash screens that are saved onto iPhones and iPads when users “Add to Homescreen.”
- Print Style-Sheet: For those users who really want to print this list out and bring to the polls, this snippet CSS will strip out all of the web based styling and print the list simply. It also uses pseudo-elements to add the links to each anchor for later reference.
- Minimum-Width Container: Since I used the mobile first approach on this page I was able to add a width to the container div that reined in content for browsers with widths over 800 pixels (your basic desktop).
- Google Web Fonts: To preserve the look and feel of the previous printout, but also have fonts that would be responsive according the CSS applied to them and make sense semantically, I used google web fonts.
I’m not sure this will be the way people save election information to bring to the polls forever, but it seems like an awesome solution for now. If you’d like to check it out and use this as a model for your own projects follow this link. And if you can vote in Philadelphia, or know anyone else who can, please forward this link to them so they use it at the polls on November 8, 2011.