A new look for pnsn.org

The new pnsn.org website redesign aims to provide better user experience for all devices, prioritize features, and provide high availability during a large seismic event. We will begin to slowly offload users to the new site starting December 10, and hope to be complete by December 11. Do not be surprised if you see the old site on one page view and the new design on the next. The content will be consistent between the two sites, only the presentation will change. We hope the following changes will provide the user with a better experience and we're interested in your feedback.

 

Design

Since our 2011 launch, mobile traffic has surged from 5% to 40%. Google is now ranking sites based on mobile compatibility or to look at it another way, penalizing sites without it. We have patched for these limitations along the way but have reached a design limits for both small mobile screens and high resolution desktop monitors.

The old layout was designed for a 1024 x 768 monitor, the standard resolution during our last redesign. We quickly hit this 1024 width barrier as we added new features like seismograms, and quickshake. Our solution at the time was to get rid of the left menu, but this was at best a patch since it created a jarring user experience, and the width still did not fill higher resolution monitors.

To solve these two problems we have implemented a responsive design. Responsive layouts ignore the device and considers only the user's viewport when rendering a page. This allows us to efficiently use all available screen real estate regardless of the device.

 

The 2011 Layout on a high resolution monitor.

The new layout on same high resolution monitor

New layout on mobile.

 

The new design also required a redesign of the sitemap. The previous menu was too cluttered at the top level (homepage). The new top level menu items are:

• Earthquakes
• Volcano Seismicity
• Products
• Tremor research
• Outreach
• About

Although the sitemap has changed the urls to these pages have not.

 

Social Media

As the number of devices connect to our site have grown, so has our social media footprint. When we launched in 2011 we had less than a hundred users on our Facebook group, no Facebook page, and a Twitter account that had never tweeted. To date (early December, 2015) we have the following for social media numbers:

 

 

Social media has largely replaced the functionality of blog comments and our news section. In 2011, our blog posts generated plenty of discussion on our comment engine, but over time the commenters migrated the discussion onto social media. The last holdouts on our commenting engine are two very engaging individuals. We encourage them to exchange emails and continue their discussion.

Our news feature was simply links to interesting news article, a role Twitter is much better suited for. The Twitter feed is found on the front page, just as the news feature was, and also includes automatic tweets for events greater than M2.5, which will be reposted on our Facebook Page. User's can follow us on Twitter or Facebook to receive the latest PNSN info.

 

Hosting

Most of the services that drive pnsn.org will move to Amazon Web Services. The motivation for this is to keep large traffic surges off our network and to be able scale out quickly. Since the 90's the PNSN has hosted the site on premises. Initially it was on a single server serving static assets, which worked fine until Mount St. Helens erupted in 2004. This single server could not keep up with the public’s interest so the University of Washington stepped in and mirrored it onto two more servers. It ran in this configuration until 2011, when we rebuilt the site and moved it onto three modern on premises servers. On an average day this is more than enough firepower to serve approximately 10K page requests.

During an event, however, these number can rapidly increase as users seek more information. This traffic can come at us at anytime and can be driven by a variety of forces. For example, a large event anywhere in the world can increase our traffic two to four fold and the New Yorker article, “The Really Big one”, doubled our traffic for about two weeks. Other traffic surges are self inflicted, such as our Seahawks experiment, which saw page requests in the hundreds of thousands just during the game. With the exception of the Seahawks game, which was only made possible with assistance from the Microsoft Azure team, our three servers have mostly handled the traffic spikes, but we have not had a true test.

It has been almost 16 years since the Nisqually earthquake, and 11 years since the start of the last Mount St. Helens eruption. Not only are there more devices connecting to our site today, but we are also serving much richer content at much lower latencies. The on premises architecture is meant to scale, but securing more servers, finding a place in our crowded server room to plug them in, and provisioning could take a day or more. This increase in traffic could also compromise our network, which has seen an increase in data throughput driven by both new seismic channels and higher sample rates.

We hope you will find the design intuitive and painless. We are eager to hear from you on what works and what doesn't. It is our goal to provide you with the most relevant and immediate information on the homepage and also to give additional tools such as seismograms, spectrograms, quickshake and tremor map to those who want to dig deeper. Happy surfing!

 

The PNSN Web Team

Luis Flores: The student who designed it, but then graduated and took a real job.

Kyla Marczewski: The student who had to implement Luis's design and really did most of the work.

Angel Ling: The student, turned staff, who put the PNSN on the social media map.

Doug Gibbons: The guy who redesigned the sitemap into a more intuitive flow.

Me (Jon Connolly): The guy who takes all the credit for everyone else's hard work.

Feel free to contact us at pnsn@uw.edu if you run into any problems.