From small to jumbo breakpoint, consultant Nick Whitmoyer shares his recent design work and insights with NPR’s responsive website. He’ll provide a look into combining news and audio, radio programs and content collections, along with experiences for desktops and touch devices.

1. @whistle
RETHINKING
THE NEWS
An insider’s look at NPR’s responsive redesign

4. @whistle
DRIVEWAY MOMENTS
Happen all the time

5. @whistle
WHAT HAPPENS NEXT?
Searching
Discovery
Sharing
Interacting

11. @whistle
ANALYTICS
Brace yourself for some left brain stuff

12. @whistle
SOCIAL DIRECTSEARCH
42% 15%26%
Traffic Sources

13. @whistle
WEEKDAYS VS. WEEKENDS
Device usage can be significantly different

14. @whistle
DESKTOP TABLETMOBILE
55% 10%35%
Weekdays

15. @whistle
DESKTOP TABLETMOBILE
40% 10%50%
Weekends

16. @whistle
71% OF ALL SESSIONS
LANDED ON STORIES

17. @whistle
IMPROVING THE
READING EXPERIENCE

18. 1760 PX
1000 PX

19. @whistle
60-90 CHARACTERS PER LINE
Average with competitive analysis was 70 characters
per line

20. @whistle
1000-1200 PIXELS

21. @whistle
1201-1760 PIXELS

22. @whistle
TABLET

23. @whistle
PHONE

24. @whistle
APPROACH + PROCESS
Agile + Lean UX
User Testing
Browser Support

26. @whistle
BUILDING TOURS
Are used for routine User Testing

33. @whistle
BROWSER SUPPORT

34. @whistle
RESPONSIVE CONTENT
NPR publishes as widely as possible using APIs

35. @whistle
ARE WE “RESPONSIFYING”
Instead of asking hard questions?

36. @whistle
THE MOST DANGEROUS
PHRASE IN THE LANGUAGE IS,
"We've always done it this way."
— Grace Hopper
“

37. @whistle
THE CURRENT STATE OF
ONLINE NEWS
Disruptive Advertising
Link Bait
Registration Walls

38. @whistle
MAINTAINING TRUST
Content & experience must build trust
Supporters (not advertisers)
No promotional offers

39. @whistle
NPR PROGRAMS
News Magazines
Interview Shows
Episodic Shows

41. @whistle
DEPLOYMENTS
Large vs. small

42. @whistle
NPR NEWS
Topics
Authors
Columns
Special Series
Tags

44. @whistle
NPR MUSIC
Aggregations
Live Events

46. @whistle
RESPONSIVE TOOLS

47. @whistle
PATTERN LIBRARY
Re-use patterns
Live style guides
Identify areas to refactor

48. @whistle
DESIGN TO DEV
Whiteboard sketching
Visual design

49. @whistle
BACK TO THE DRIVEWAY
It’s time to turn the car on again

50. @whistle
IT’S TIME TO DRIVE
Find the right users
Learn from your users
Ask hard questions
Build and maintain trust
Make small/fast deployments

51. @whistle
MAKING THE PROCESS
EASY IS NOT THE GOAL;
making the product great is the goal.
— Ed Catmull
“

52. @whistle
THANKS, I’M @WHISTLE.
You can follow me on Twitter