Daniel O'Connor

Spring Fling announcement and analytics

It took active 90 visitors to crash the Pipe Dream server a year ago when we announced that Passion Pit would headline Spring Fling. The article received 374 likes.

Last week we broke the news that Yellowcard will headline the 2013 Spring Fling. The website maxed out at 180 active visitors and we reached 6,900 visits in one day (the largest if you exclude Alyssa Mercante’s viral column). Thankfully, the server didn’t break a sweat.

One year after the redesign

It’s been a little over a year since I redesigned the Pipe Dream website. Since Feb. 10, we have received 525,756 visits and 973,180 pageviews.

Comparing Feb. 8, 2013 through Mar. 9 2013 to the same period a year ago, monthly visits increased 34% (49,113 vs 36,642) and pageviews increased 24% (91,059 vs 73,590). We now receive 27% of our visits from mobile devices compared to 17% a year ago.

More importantly, however, is the audience we are reaching. As a student newspaper, traffic outside the Binghamton area doesn’t mean much. To measure student engagement, we can track the percentage of visitors in Binghamton and the percentage of users coming from social media.

Traffic from Binghamton is up slightly from 33.63% to 34.98% (10,944 vs 14,966 visits). Additionally, over 25% of our visitors come from Facebook compared to 19% last year.

Responsive web design for college newspapers

Saturday morning I spoke about responsive web development for college newspapers at the ACP Midwinter National College Journalism Convention in San Francisco. As promised, here are the slides and notes.

State of the Web

Mobile traffic is quickly increasing as we become more connected than ever. At Pipe Dream, the school newspaper I work for, over 25% of traffic is from mobile devices. You can’t ignore mobile.

Examples

• Boston Globe (Sept. 2011) - Set the bar and started a trend
• TIME (Oct. 2012) - Over 12% of traffic to TIME comes from social meida. They are doing so on mobile.
• Pipe Dream (Feb. 2012) - Redesign I led back in 2012.
• Daily Orange (Aug. 2012) - Created by the makers of the Boston Globe website.
• Daily Kansan (Aug. 2012)

Ditch the App

There are two ways to create a mobile app for you college newspaper. You can sign up with a vendor and let them take care of the development. Or, you can find a developer to build one for you. Both are bad investments.

Vendor

A vendor will give you an application that is little more than a glorified RSS reader. They are often poorly designed and offer little flexibility since all of their clients extend from the same base application.

Custom application

You can hire a developer and get the app of your dreams, but let’s be honest. How many students will download and actually use your paper’s application?

Also, will you support iOS and Android? What if Windows Phone is the next big thing? Code written for one operating system is not easily portable to another.

The better approach is to modify your existing layout to work on all devices. This is the idea behind responsive design.

Responsive Web Design

Responsive websites adapt to the width of the browser. They look great on any device with any viewport. This is key. You shouldn’t design for specific devices. There are too many devices and too many screen sizes. Instead, you should ensure the site looks great at any width.

There are three components to a responsive website: a fluid layout, flexible images and media, and media queries.

Fluid layout

A fluid layout will shrink and expand accordingly as you resize the broswer. This is because fluid layouts use percentages instead of pixels for width values. Also, the container div has a max-width, not a width.

If you had a two column layout inside a 980px container and the main column was 624px, you would switch the width of the container to a max-width and find the percentage value of 624px. In this case, it is 65% since 624/960 = 65%. The sidebar, of course, would be 35% wide. You would change the pixel values to their equivalent widths.

The max-width means that the container will be at most 960px. The percentages allow the columns to keep their relative widths as the broswer viewport goes below 960px.

Your website should now contract as you make the browser window smaller. The content may look “squished,” but the horizontal scrollbar should not appear.

Flexible images and media

Now that our layout is fluid, we must ensure that images and media resize appropriately. To do this, add the following code to your CSS rules:

img, embed, object, video {
    max-width: 100%;
}

This code will target the img, embed, object, and video HTML tags and set the max-width to 100% so these tags are only as wide as the container that contains them. If you resize the broswer window, the media will shrink if necessary.

Media queries

Maximize your browser then slowly decrease the width. When the content becomes hard to read or something looks wrong, you’ve identified a breakpoint. If a horizontal scrollbar appears, you made a mistake in the previous steps.

Once you have found a breakpoint, you need to determine the width of the browser. I personally use the Chrome Web Developer extension (install the plugin and click on Resize > Display Window Size to view the width). We will target that breakpoint with a media query.

@media only screen and (max-width : 980px) {
    #search-form .search-bar {
        width: 180px;
    }
    header .logo {
        padding-bottom: 15px;
    }
}

The media query above will set the width and bottom padding of a search bar to 180px 15px when the browser width is less than or equal to 980px.

Viewport

Mobile browsers assume that web pages are designed for desktops and zoom out the page. We can tell it that the website is “mobile-friendly” by setting the viewport in the “.

This tells the browser that the width of the page is equal to the device’s width and the browser should not be zoomed in when loading the page.

A responsive website has a fluid layout, flexible images and media, and many media queries.

Advanced Issues

There are a few issues that often arise when developing a responsive website.

Large image sizes

Despite changing the max-width of our images, we are still downloading the large files. This wastes resources and slows down the webpage for mobile visitors. Adaptive Images solves this issue by serving images with the optimal resolution for the user’s device.

IE 6-8 compatibility

Internet Explorer 6-8 do no support media queries, but the great Respond.js script can fix that. It’s fairly lightweight and works well!

Detecting viewport with JavaScript

There are many different ways to target specific viewports with JavaScript. For a basic responsive layout, however, you should not need JavaScript.

Tools

• Responsive Design Bookmarklet - Simulate your website on multiple devices.
• Chrome Developer Toolbar - Used to find the “breakpoints” in your design. In other words, the toolbar can be used to determine the viewport width when resizing the browser.

Further Reading

• Responsive Web Development by Ethan Marcotte - Great book by the man that coined the term.
• HTML and CSS Guide on HTML Dog - A bit outdated, but a good website for learning HTML and CSS.

I hope the talk taught everyone a bit about responsive web development. It’s not magic — there is a learning curve. That said, this is something that can be learned in a summer.

Questions? Leave a comment or shoot me an email at daniel@danoc.me.

What I’ve been up to…

It’s been a while since I last posted here. Here’s what I’ve been working on.

Pipe Dream Redesign

Unfortunately the redesign is taking longer than excepted due to some complications. I decided to ditch the mobile-first approach since scaling up a complicated grid is easier said than done. The time spent making mockups wasn’t wasted, however, since I have to ensure the mobile version lives up to the mockups.

Instead, I decided to create a new branch in Git and heavily refactor the existing design. The gigantic and poorly written CSS files have been causing headaches, but this great talk by Andy Hume of the Guardian has cleared some confusion.

I’ve got a lot going on in the next two weeks, so I’ve set a March 23 deadline to launch a redesigned Pipe Dream.

Speaking at ACP Journalism Convention

I’m giving a talk about responsive web design at the ACP Convention at the end of February in San Francisco. Here’s a look at the description:

Ditch the App, Go Responsive!

Apps seem to be all the rage, but do you really need an app? WordPress and other content management systems allow you to create a website that looks great on all devices. Learn to use media queries in CSS3 to “be mobile” and better serve your readers. For those attending this session, intermediate HTML and CSS knowledge is recommended.

I’m incredibly excited to do this and will post slides once they’re ready.

Faculty Salary Database

I always intended to work on side-projects for Pipe Dream. One of these is a database of faculty salaries at Binghamton University. The information is public and can easily be obtained with a FOIL request.

I worked on it over winter break with seven other developers to teach them about basic HTML/CSS, PHP, Git, and GitHub. The project is nearly completed but needs a few finishing touches. The source code is availible on GitHub.

Secret Project

I’ve been working on the early stages of a journalism startup I plan to launch next Fall. More details to come!

It’s going to be a busy semester, but lots of exciting projects in the pipeline!

Semester in Review: Top 10 Pipe Dream posts

This semester Pipe Dream received 159,276 visits and 313,853 pageviews. Nearly 25% of these visits were on mobile devices and 32% of visitors lived in Binghamton, Johnson City and Endicott.

47% of our traffic came from search engines while 33% came from other websites (referral traffic). Facebook accounted for 23% of our overall traffic.

Compared to the Fall 2010 semester, we received 19,000 more visits and 65,000 more pageviews. Two years ago, referral traffic made up only 25% of our traffic. Traffic from Facebook has more than doubled (37,000 visits this fall compared to 17,500 two years ago).

For better or worse, here’s a list of this semester’s most popular posts on the Pipe Dream website:

1. 6,197: Katherine Modell, student, passes away in Dickinson Community
2. 4,079: CoRE students fight to outwit Dropbox creators
3. 3,808: Childish Gambino to perform in the West Gym
4. 3,123: Updating: Greek Life student officials arrested on Saturday
5. 2,996: Police raid parties, fraternity leaders arrested
6. 2,908: Party Blind
7. 2,613: Letter to the Editor: Respecting Privacy
8. 2,282: Binghamton gets Jacked with Afrojack
9. 1,911: The Binghamton Commandments
10. 1,869: University investigating AXP

Want to know anything? Leave a comment or reach out on Twitter.

Moved to GitHub

Thanks to GitHub’s generous educational discount, I’ve moved the Pipe Dream repository to GitHub. Until now we hosted the private repository on our Linode VPS, but GitHub offers great user management, a nice user interface, a built-in wiki, and a fantastic issue tracker.

The transition was smooth and took minutes. And after a little bit of fiddling with Capistrano’s config file, deployment is now working better than ever!

GitHub offers free private repositories to students and student groups. Sign up if you haven’t already!

Take to College is back (kind of…)

I created Take to College in Nov. 2009 as a senior in high school. What started as a static one-page website got 150,000 visits and 2,500 likes on Facebook in its first three months of summer. It was quickly profitable thanks to Google AdSense and Amazon affiliate links.

The success inspired me to learn PHP and the next year I created a dynamic version that featured user accounts, customizable lists, and integrated the Facebook API.

Despite the numerous redesigns, Take to College never really took off. I abandoned it mid-redesign this summer as I focused on my internship at WePay.

I recently removed the splash page and put up a (very beta) version of Take to College. I haven’t touched the code in months, but it’s certainly looks better than a splash page!