Thank you to the Triangle AMA chapter for having WRAL.com's General Manager John Conway and Director of Sales and Marketing William Ammerman as keynote speakers for the November 2013 lunch meeting. The WRAL.com Redesign has been a year in the making and we're pleased to be able to share our key takeaways from the project. Please share your thoughts on Twitter with the hashtag #WRALredesign.

1. WRAL.com Redesign
#WRALredesign

2. Industry Trends: Multi-Screen
“We are a nation of multi-screeners.”
-Forbes (9/23/2013)

3. Industry Trends: Multi-Screen
You are here

4. How Big is the WRAL.com Redesign?
• Over 3 million unique visitors per month
• Over 100 million page views per month
• Over 300,000 story level assets
• 7.5 TB of data transferred on a peak day
• As many as 100,000 weather alerts per hour
• Over 46,000 lines of server side code for the redesign
(not including our Javascript and CSS)

5. Set Goals for the Redesign
The WRAL.com redesign has been compared to rebuilding a jet while
it is in flight.
What are we trying to accomplish?
• Seamless experience across desktop, laptop, tablet, and
mobile devices
• Updated look and cleaner, less cluttered design
• More room for images
• Fast page loads
• Innovative ad units
• Better use of video

6. About Responsive Web Design
Consumers access WRAL.com on many devices
Key Concept:
Responsive web design delivers a layout best suited for the
user’s screen. This insures a great experience on any
screen.

7. About Responsive Web Design
Ethan Marcotte wrote “Responsive Web Design”
He defined three components of
responsive web design:
1] Media queries
2] Fluid grids
3] Flexible images

8. About Responsive Web Design
Media Queries
Introduced as part of the new CSS3 specification, media queries
allow us to inspect the physical characteristics of the device
rendering the website.
Using a media query, we can
build a style sheet for displaying
our website on a specific device,
or a specific screen size.
This allows us to use one set of
code to deliver the same website
differently to different devices.

9. About Responsive Web Design
Fluid Grids
Once the media query has determined the size of the user’s screen,
a fluid grid allows information to be positioned in the best way for
that specific screen.
The layout of the webpage
“reflows” and changes based
on the screen resolution.
Fluid grids mean that the way
information is presented
changes from screen to screen.

10. About Responsive Web Design
Flexible Images
Rather than designing for a fixed column width
measured in pixels, responsive web design relies on
proportion. Images and text fill the available area,
depending on the screen size.

11. What Influenced Us
The Boston Globe was
one of the first local
news websites to use
responsive web design.

12. What Influenced Us
USA Today went to a
cleaner design with
simplified navigation
and bolder images.

13. What Influenced Us
ESPN.com uses a drop
down menu that shows,
at a glance, what’s
contained in that
section, complete with
images and subnavigation.

14. Usability For Dummies
Steve Krug wrote “Don’t Make Me Think” and “Rocket Surgery Made Easy”

15. Usability For Dummies
Key quotes from Steve Krug:
1] Don’t make me think. If you have room in your head for only one usability
rule, make this the one.
2] Get rid of half the words on each page, then get rid of half of what’s left.
3] We don’t read pages. We scan them.
4] Create a clear visual hierarchy.
5] A morning a month, that’s all we ask.

16. Usability For Dummies
A few notes on layout:
1] Layout affects scanning patterns.
2] Your headline has about 1 second to gain attention.
2] People key on faces and follow other people’s eyes.
Source: www.grokdotcom.com

17. The Redesign Process
The redesign process starts with a rigorous look at your audience and
how they use your website.
WRAL.com Heat Map Showing User Interest

18. The Redesign Process
Every detail of the site has to be thought through for different audiences
using different devices.
Flow Charts
Site Analytics
Wire Frames

19. The Redesign Process

20. The Redesign Process
Options to consider in a responsive web design.

21. The Redesign Process
Consider how elements should reflow from a 3-column layout, to a 2-column
layout, and a 1 column layout. Map the existing site and ensure that critical units
are preserved 1 to 1.
Existing site
Redesign
3-column view
2-columns
1-column

22. Advertising in Responsive Web Design
Responsive web design requires rethinking ad placement.

23. Advertising in Responsive Web Design

24. Sneak Peek of the new WRAL.com
Simplified navigation makes it easier for users to find important information quickly.
3-column view
2 and 1-column view

25. Sneak Peek of the new WRAL.com
A cleaner, less cluttered
home page delivers:
•
•
•
•
•
•
•
•
•
Updated look
Larger images
Faster load time
Streamlined navigation
Enhanced video features
Enhanced weather features
Flexible alert notifications
New page sponsor ad units
Sharp new footer design

26. Sneak Peek of the new WRAL.com
Roll-over sub-navigation “Mega Menus” provide greater insight and depth at a glance.

27. Sneak Peek of the new WRAL.com
Story level pages provide a
utility bar to make it easy for
users to:
•
•
•
•
Comment
Print
Share
Adjust font size

28. Sneak Peek of the new WRAL.com
Story level pages provide a
utility bar to make it easy for
users to:
•
•
•
•
Comment
Print
Share
Adjust font size

29. Sneak Peek of the new WRAL.com
Story level pages provide a
utility bar to make it easy for
users to:
•
•
•
•
Comment
Print
Share
Adjust font size

30. Before

31. After

32. Biggest Takeaways
Your website needs to keep up with
changes in technology.

33. Biggest Takeaways
Analyze your end users and how they
interact with your site.

34. Biggest Takeaways
Clearly define your goals and
deliverables for your team, partners, and
stakeholders.

35. Biggest Takeaways
Budget carefully. It isn’t cheap!

36. Biggest Takeaways
Communicate changes to your internal
and external audiences.

37. Biggest Takeaways
Involve key stakeholders early
to achieve buy-in.

38. Biggest Takeaways
Apply usability testing to achieve a
world-class user experience.

39. Biggest Takeaways
Consider how your redesign impacts
your web developers, content creators,
ad operations, and partners.

40. Biggest Takeaways
How will you measure success?

41. Biggest Takeaways
Give yourself time.

42. Biggest Takeaways
Have a dedicated project manager.

43. Biggest Takeaways
…and the number 1 takeaway…

44. Biggest Takeaways
Plan.

45. Contact Us
John Conway
General Manager
jconway@wral.com
919.821.8849
William Ammerman
Director of Sales & Marketing
wammerman@wral.com
919.821.8772