Help Shape the Future of Space Exploration

Join The Planetary Society Now  arrow.png

Join our eNewsletter for updates & action alerts

    Please leave this field empty

Jason Davis headshot v.2

JPL Releases a Big, Bold Website Redesign

Posted by Jason Davis

09-10-2014 18:37 CDT

Topics: about science writing

This week, NASA's Jet Propulsion Laboratory released a major website overhaul. It's a substantial departure from their old site, and features a responsive, immersive design. By responsive, we're talking about sites that dynamically rearrange themselves to be readable on a variety of screen sizes, from phones to desktop computers. And by immersive, we mean the design is minimalistic and features big, bold multimedia elements that direct the viewer's focus solely on the content—in this case, "some of the coolest videos, images and news stories in the Universe," says a narrator in the site's introductory video.

The new

NASA / JPL-Caltech / Screenshots by Jason Davis

The new
JPL's new website is big, bold and beautiful—and a fitting home for pretty pictures of the Cosmos.

Overall, I'm a fan. I appreciate that a major NASA center took a step outside the status quo to embrace modern web design. I also like that an effort was made to make the site accessible to both casual browsers and regular visitors. For instance, someone drawn to the site through a social media link might soon find themselves exploring full-screen image galleries, gawking at the core of a dead star or the tracks of a one-ton Martian rover. At the same time, it's pretty easy to find media resources like press kits and links to mission-specific websites. 

The page opens with full-screen images linking to news stories, images and other content. Well, not quite full-screen—you'll notice the designers included a "scroll for more" break at the bottom of the page. That's likely because some users find full-screen web images disorienting to the point of not realizing that the page is scrollable. We received similar feedback during previews of The Planetary Society's soon-to-be-released LightSail website, so we added an animated arrow to guide viewers down the page.

Immersive websites work best when you feature compelling multimedia to accompany well-written stories. It won't be hard for JPL to find pretty pictures—a giant image of Saturn's mesmorizing polar vortex, for instance, works very well here. But there's a pitfall: The cover images have to be centered so that their focus doesn't stray off the page on devices using portrait orientation. Take, for instance, a recent headline about the NuSTAR spacecraft's discovery of the brightest-ever pulsar. The featured image uses a zoomed circle pullout. But—oh no! On my Nexus 7 tablet, the pullout wanders off the screen. It's not a huge deal, and in fact, it might draw some users to click on the image to learn more. But it's a consideration nonetheless.

What did you discover, NuSTAR?

NASA / JPL-Caltech / Screenshots by Jason Davis

What did you discover, NuSTAR?
The left screenshot was captured on a Windows 7 PC at a resolution of 1920 x 1080 pixels, while the right screenshot was taken on a Nexus 7 tablet in portrait orientation.

As you scroll down the page, you'll notice a lot of the content is presented in block format. This is a staple of responsive design—blocks are easy to dynamically arrange so that they fit snugly on multiple screen sizes. To see what I mean, check out the "What's Happening Now" section. On my Windows PC, I see three items each under the Featured, News, Videos and Images headers, and I can click an arrow to load three new items. On my Nexus 7, I only see two items. And on my phone? Just one. The advantage of using this format is that the content remains snappy and readable, no matter the device. 

Next up is the Missions section. I really love the fact that JPL chose to put their missions portal smack-dab in the middle of the page, rather than burying it within dropdown menus. Missions are the bread and butter of both JPL and NASA at large, so it makes sense to emphasize them. Compare JPL's new approach to NASA's existing missions page:

Comparing mission pages

NASA / JPL-Caltech / Screenshots by Jason Davis

Comparing mission pages
JPL's new large mission buttons (right) bring order to an otherwise unruly list of past and present space missions.

Since JPL has less missions to feature than NASA, it makes sense to categorize them by Current, Past, Future and Proposed. In all fairness, NASA proper has a lot more missions to contend with. They allow you to sort by mission topic, which helps, but there's something dismaying about seeing "Apollo-Soyuz" listed as the fourth mission. I'm pretty sure that whenever I land on this page, my impatient brain decides I'm in the wrong place and commands my finger to click the back arrow.

Most NASA missions have their own websites. Therefore, the new JPL mission pages mostly provide a brief overview, things like press kits and fact sheets, and a link to each mission website. This brings up a complex web design question that is common for any large organization with semi-autonomous subgroups (such as other government agencies, or universities): To unify, or not to unify? Trying to squeeze all of and its dizzying array of subsites into a single, common design would be expensive and time-consuming. And that's just from a technical perspective—I can only imagine the role intra-agency politics would play. 

Plus, who among us hasn't enjoyed stumbling upon an ancient, abandoned NASA web page? This deeply buried portion of NASA's history website was invaluable for research I did on the Ranger program for my journalism master's project. And what about treasure troves like this space shuttle mission archive? I hope that if NASA ever begins shutting down old servers like this, they migrate the data for historical purposes.

Stuck on Earth
Stuck on Earth
The website has just one small bug that's prominent on smaller devices: You can't start your scrolling motion on certain images, meaning if you make your screen look like this, you're stuck.

NASA / JPL-Caltech / Screenshots by Jason Davis

There's another neat part of the website redesign that's worth mentioning: The innovative use of the menu "hamburger" in the top-right. Clicking it brings up a full-screen menu rather than standard flyouts and dropdowns. I think this part of the site is well-executed, and it puts most sections just a couple clicks away. Personally, I would move the News and Missions sections closer to the top, but this may have been a design choice—notice how the menu is visually organized into an hourglass shape.

I did notice one bug that I hope the web team will address. It's most apparent on mobile devices—in particular, phones. When scrolling through the main page, if my finger starts its scroll motion on certain images (and areas surrounding those images), the page won't scroll. You can't really scroll past the "Explore" section on a phone unless you get a running (flicking?) start.  

All in all, JPL's new website is a fitting home for news and multimedia coming from some of the world's flagship space missions. At first glance, you might think immersive web design is jarring or gimmicky. But as the trend continues to gain momentum, the organization of these sites is becoming a priority, rather than an afterthought. JPL's site seems like an effective way to get information-soaked visitors to slow down and focus on content—in this case, content that showcases the beauty of space. 

See other posts from October 2014


Or read more blog entries about: about science writing


ESP Interactive Solutions: 10/10/2014 04:58 CDT

We are glad to read this news just because this news relates with our field. It is pretty difficult task to move NASA's website into new look without loosing data and especially heavy images captured by telescopes. Now it is done and we can proudly say that we are in space now. Great work. Your Well Wisher, ESP Interactive Solutions, Inc.

Bob Ware: 10/10/2014 07:56 CDT

Now that is a beautiful website and it is truly easy to navigate for what you want to see! Before it was really hard to find what you needed. Thanks to all who created this design! Thanks Jason for doing a nice explanation blog on it.

Leave a Comment:

You must be logged in to submit a comment. Log in now.
Facebook Twitter Email RSS AddThis

Blog Search

Essential Advocacy

Our Advocacy Program provides each Society member a voice in the process.

Funding is critical. The more we have, the more effective we can be, translating into more missions, more science, and more exploration.


Featured Images

Color map of Pluto
Comparison of Schiaparelli and Opportunity landing locations
Mars Reconnaissance Orbiter Context Camera image of Curiosity landing site
Schiaparelli landing site, after landing attempt
More Images

Featured Video

The Planetary Post - Star Trek 50th Anniversary

Watch Now

Space in Images

Pretty pictures and
awe-inspiring science.

See More

Join The Planetary Society

Let’s explore the cosmos together!

Become a Member

Connect With Us

Facebook, Twitter, YouTube and more…
Continue the conversation with our online community!