Mobile First & Responsive Design
One of the goals we set for ourselves in the redesign of the website was that it be easily usable whether it was accessed on a desktop computer or on a mobile device, like a phone or tablet.
The reason for this is simple math: more and more people are using phones to get media-rich web content. And if you design a website that looks gorgeous on a big screen, but is illegible on a small one, you are shooting yourself in the metaphorical foot. With a metaphorical gun. Which is metaphorically crazy.
The buzzword for this idea in web design circles is “mobile first.” In other words, the designer is encouraged to think of the mobile (small-screen) user first and then build up and out from there.
This is paired with its twin: a coding technique called “responsive design.” The code that constructs this web page you requested is aware of the device you are using to access the information and can render the page differently for large screens, and medium-sized tablets, and smaller (but graphically sophisticated) phones.
Want to see this principle in action? Go to a desktop computer (see how I assumed you were on your phone!) to view any page on this site, and then resize the window of your web browser. Just drag the bottom-right corner to the left and watch what happens to the content of the page as the window gets to be the size of a tablet, and then a phone.
With these bits of coding and design we’ve done our best to make navigation easy on a phone and to make text legible on small screens. You may have to do a bit of scrolling, but that’s why God invented thumbs. We have employed the HTML5 web standard throughout the site to make our content accessible to modern browsers, both mobile and desktop versions.
(If you find that something on the site “just doesn’t work,” let us know so we can try to fix it. But be aware that the reason may be that your browser is not up-to-date. Try using a different browser like Safari or Chrome. If you hesitate, like we do sometimes, when web designers ask you to update your browser, remember: they’ve stopped selling hay at gas stations.)
There is one known problem: the site will not work well on first-generation iPads. This is because the native browser on that era device can not be brought current to the HTML5 standard. I had one. Loved it. It now makes a lovely paper weight.
We’ve also made sure that the audio we post is “light weight” enough to easily stream on smart phones and tablets without draining your bank account with huge data charges. (Did you know you can play episodes of the show on your phone? Yes! You can go running with Music Inside Out in your earbuds!)
(If you do go running with Music Inside Out in your earbuds, will you let us know? ‘Cause that will totally count for our daily activity log.)
A note on streaming audio: We have been asked in the past why we don’t make it possible to download Music Inside Out as a podcast. Because the music licensing rules for radio broadcasts are different than those for podcasts, we’re not able to offer you the program as a file that you can save to your device. We are, however, allowed to stream the audio of the archived broadcast from our server to your device over the internet.
Tell Us What You Think
I’ve found the “mobile first” paradigm to be easier said than done. But I’m not alone. Everyone involved in web design these days is facing the same issues.
We hope you find the new site user-friendly and, well, pretty. But we’re sure you’ll have feedback. And so, this post. Please use the comment section below if you have suggestions for changes and improvements. And thanks.
The new site is built on the Customizr theme for WordPress designed by Nicolas Guillaume. We also benefitted from the good thinking of the smart folks behind the Foundation platform at Zurb. We had coding help from Jason Saul at WWNO, advice from Lynette Johnson, and Adam Newman helped us make the site pretty.
Sean Collins is the web producer for Music Inside Out and a former Senior Producer at NPR News.