26 11 / 2013
THE PRACTICALITIES OF MEDIA QUERIES
Media queries afford us the capability to adapt our layout using a variety of parameters. The most commonly used parameter is width, specifically playing around with width ranges. You see this in the wild a lot especially as implemented by a multitude of css frameworks like Skeleton, Foundation and Frameless. These are grid frameworks that can react to the different width ranges presented by browser viewports - a viewport is the viewable part of the screen configurable by setting the ‘viewport’ meta tag. Browsers can be running on anything from a desktop screen to the excitingly and drastically differently sized mobile screens!
ITERATING WITH VISUAL TESTS
So, the challenge becomes to create an efficient simple design that showcases and hides features that are relevant or irrelevant depending on how a user views a mobile app. This can be mitigated by how we approach features and layouts. That’s a great first step but the true panacea is to constantly test and re-iterate.
Testing can be varied, it depends on what it is that we’re building. Specifically, if our mobile app will always be run from the web ala Forecast.io or if it will be embedded in a hybrid mobile app with native extensions. In this series of articles, I’ll be showcasing some of the approaches I tend to use including online/plugin, emulator and device based testing explaining the nuances and the why of each.
To make it easy for you to follow along, I’ll be using the home screen of (1) Up App which is a simple but functional page. FYI Up App uses the Skeleton responsive grid.
So, for part 1 let’s dive in by utilising both a testing site and a browser plugin. This works best for apps running on the web.
There are a variety of online sites and tools that use iFrames to mimic different viewports. All you have to do is enter a url and start testing. The Responsinator is such a tool. I like to start by picking a browser such as Safari as it represents a substantial number of potential mobile users. However, this just a basic approximation as I’m running on a MacBook so the versions will be different.
- Go to http://www.responsinator.com/
- Enter the url for your app, I’m entering http://aishy.github.io/UpApp/
After the screen loads you’ll see how your mobile app renders on different viewports ranging from the iPhone 3/4 to the Kindle.
For Up App, our initial test reveals that both the text and the animated sun illustration render well, but the illustration looks slightly blown up out of proportion on Landscape view ports.
I generally tend to find that Android device layouts are usually unpredictable. Here Up App is completely broken on the portrait viewport but works well on landscape.
Skeleton, our grid, doesn’t support widths lower than 300px for portrait viewports very well out of the box. This could be the root cause.
USING A PLUGIN
Similarly, there are plugins that allow you to navigate to the app on most browsers. Once the page renders, you can then start testing by manipulating the viewport.
Viewport Resizer fits that bill. Its a plugin that works cross browser by default. Just bookmark a link to the site on the browser of your choice and start testing. The results should be comparable to what we saw with our online tests.
After testing, I make a note of the issues and usually re-iterate on the design and functionality.
For Up App it looks like I might need to,
- Add custom media queries to resize the sun illustration specifically for landscape & tablet portrait viewports.
- Augment the grid with media queries to support viewports smaller than 300 px.
You can keep using the aforementioned tools to refine and retest. When you’re ready, the next step is to start testing on emulators and actual devices.
Yes, there is a part two - stay posted!
(1) Up App is developed by Aisha Yusaf aka Pakora Butty and was used by her permission.
12 10 / 2012
Photo By laura musselman duffy
At The Super Times, our mobile audio start up, we really believe in the power of the internet and the current podcast revolution. We’re audio story geeks and love how stories can transform thinking, illuminate minds and bring people together. From lectures, to interviews, documentaries, dramas and fiction there’s so much out there.
Internet Radio 1.0
I believe that the recent paradigm of subscribing to podcasts was internet radio 1.0. It actually hurts listener discovery and does not help many podcasters create more of what they love and maybe make a sustainable living. I think we’ve barely scratched the surface of what can be done online
A Brief History
Here’s a brief history of audio story telling. Back in the day, stories were broadcasted solely on Radio. Listeners tuned in to a scheduled broadcast where the quality was determined by the channel. Radio channels could only broadcast a finite number of programmes per year - so listeners actually missed some awesome programming that never saw the light of day due to bandwidth constraints. Stations included BBC Radio 3 and 4 in the UK, NPR in the US, CBC in Canada and even RTÉ Radio 1 in Ireland.
Today, we’re online. That’s infinite bandwidth. Not only can you hear stories from the same old broadcasters but a new breed of storytellers have emerged. They have an awesome ear, a freedom to follow their heart with cheap tools and razor sharp production skills that rival the old broadcasters. On the internet they can podcast: the shows can either be listened to as they are broadcasted online, but mostly downloaded for offline listening. Even traditional Newspapers like the Guardian and magazine publishers like Wired have got in on the action producing brilliant audio content at low costs. A new listenership is now addicted, downloading all they can and listening when they can.
But somehow they’re voices are getting lost. Bar a few, the same distribution network that empowers them holds them back. It’s not just a question of quality, I’m sure there are tons of crap shows out there but the opposite is equally true. There are tons of great quality shows and stories with almost no listenership. I guess you can equate this with the Self Publishing revolution that has been taking off in the pushlishing industry over the last few years.
Aggregators - They Suck
A quick answer to this problem was the ubiquitous RSS Feed, after all its what podcasts were all about. As long as a show had a feed, any listener can point a podcast catcher at the feed and start downloading content directly to their desktop or mobile device. Podcast directories started popping up everywhere.
For a podcast producer you had to get your feeds in as many catalogues as possible. As a listener you had traverse these catalogues and figure out what to listen to. Even with charts, evaluating content became a tremendous chore. Listeners thirsty for content subscribed to popular shows and when they got bored they either gave up or started asking for recommendations to no avail.
This is the problem inherent in podcast aggregators. Listeners have to find and pull in content, otherwise the software is useless. These days, podcast aggregators bundle some form of catalogue becoming a sole source for finding and listening to content. If you succeed and subscribe to the right content, you are now in catch up hell. The efficiency becomes you’re worst nightmare, suddenly you have so much audio that you need to listen to that you’re simply overwhelmed!
Getting Found on Radio
Podcast aggregators, when and if they work are a great tool for listeners. However, podcast producers including popular ones still have to figure out how to make a living. A recent phenemonen has started happening. With the help of organisations like PRX, some podcasts like The Moth have crossed over to traditional radio.
Meaning, they get paid for every show that is broadcast with exposure to a new audience. This is really awesome, the rebels have taken over. But this is not a scalable solution. Radio bandwidth is finite, a small number of shows can only be aired at a certain time.
Although, for listeners the convenience works. They tune into a trusted channel and experience a new kind of programming. They can even download more of the same if they wish. A subdued win-win.
The Offline Internet Channel
Funnily, I think there’s a weird happy medium. Specialist channels that can broadcast high quality internet content. Bonus points if the content can be offlined and consumed whenever and whereever. This may include programmes from traditional brodacasters as they’re content is also found online.
Basically, we can harness the power of podcasts with the simplicity of traditional radio and its push model. This is nothing less than a revolution for a new listener landscape.
Even though the idea may sound grand, the implementation could be as simple as publishing a brilliant list of podcasts for recommended listening on a regular basis.
Twas an Accident
We stumbled onto this when building the 1st iteration of The Super Times. Back then we had a website called Said.fm (as in I said, you said), we thought there was a gap in the market for a Spotify of audio stories. Listeners would use the app to find content by mood or topic (we built expensive algorithms that categorised and linked programmes).
We then employed curators to pick small recommendation lists that can be easily offlined to help make the content accessible and give listeners a good starting point. The content in Said.fm was constantly montiored for quality and we had a niche.
To our great suprise, the only feature that really mattered were those recommendation lists. Simply, they were convenient and more than good enough. Listeners visited the site, found the latest recommendation and synced ignoring everything else!!
They trusted us and that was enough :)
Others, have also picked up on this. PRX has Public Radio Remix which is “programmed with the best work from the hundreds of independent producers and stations on PRX and beyond, featuring great storytelling, edgy podcasts, cutting edge lectures, interviews and more.” - the content is nothing less than awesome.
To make this work, the current crop of podcast aggregators and catchers just don’t cut the mustard. Its not about alarm clocks and double speed listening. I just want interesting stuff at the click of a button. I may spend a small amount of time performing minor configuration but that’s it.
This is the new challenge - its about filtering, discovery and distribution. You could argue this is more than tooling and you’re probably right. I’m also talking about new channels that can harness the web for a specialist theme and perform the broadcasting. Whether the channel and consumption end point are one and the same could be debated.
In fact, this is what we’re truely striving for at The Super Times: a specialist channel for amazing thought provoking audio conversations delivered as podcasts for offline consumption. We control filtering, discovery and distribution.
We could branch out with more channels like the best tech talks or even the best sports programming. The more I think about it, the more I see the similarities with Apple’s Newsstand.
Possibly Getting Paid
Like Apple’s Newsstand, this creates a simple market place for podcast producers to get paid. With enough listeners, even if a programme is played once that producer could see a one off distribution to millions of listeners.
If those listeners are paid subscribers, the producer can receive a paycheck to see them complete at least a single series. With simple segmentation and a good UI, listeners can fine tune their listening making them great supporters for the content they love!
If you’re in the US, how would this change Public Radio and all that pledging? There’s a new generation of listeners that is becoming accustomed to internet level choice and they’re hungry for awesome audio - we need to help them out!
In closing, I’m really excited about this: The possibility of creating a self sustaining and accelerating ecosystem that serves both listeners and producers with internet level bandwidth!
Now, let’s get on with it.
P.S. I’d be really happy to meet you on Twitter: here