WRAL.com Redesign #WRALredesign
WRAL.com Redesign Presentation Made to Triangle AMA on November 21, 2013
Nov 12, 2014
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
WRAL.com Redesign
#WRALredesign
Industry Trends: Multi-Screen
“We are a nation of multi-screeners.”-Forbes (9/23/2013)
Industry Trends: Multi-Screen
You are here
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)
Set Goals for the Redesign
• 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
The WRAL.com redesign has been compared to rebuilding a jet while it is in flight.
What are we trying to accomplish?
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.
About Responsive Web Design
Ethan Marcotte wrote “Responsive Web Design”
He defined three components of responsive web design:
1] Media queries 2] Fluid grids3] Flexible images
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 ofcode to deliver the same websitedifferently to different devices.
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 wayinformation is presented changes from screen to screen.
About Responsive Web DesignFlexible 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.
What Influenced Us
The Boston Globe was one of the first local news websites to use responsive web design.
What Influenced Us
USA Today went to a cleaner design with simplified navigation and bolder images.
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 sub-navigation.
Steve Krug wrote “Don’t Make Me Think” and “Rocket Surgery Made Easy”
Usability For Dummies
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.
Source: www.grokdotcom.com
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.
Usability For Dummies
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
The Redesign ProcessEvery detail of the site has to be thought through for different audiences using different devices.
Site Analytics
Wire Frames
Flow Charts
The Redesign Process
The Redesign Process
Options to consider in a responsive web design.
The Redesign ProcessConsider 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
3-column view 2-columns 1-column
Redesign
Advertising in Responsive Web DesignResponsive web design requires rethinking ad placement.
Advertising in Responsive Web Design
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
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
Sneak Peek of the new WRAL.com
Roll-over sub-navigation “Mega Menus” provide greater insight and depth at a glance.
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
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
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
Before
After
Biggest Takeaways
Your website needs to keep up with changes in technology.
Biggest Takeaways
Analyze your end users and how they interact with your site.
Biggest Takeaways
Clearly define your goals and deliverables for your team, partners, and
stakeholders.
Biggest Takeaways
Budget carefully. It isn’t cheap!
Biggest Takeaways
Communicate changes to your internal and external audiences.
Biggest Takeaways
Involve key stakeholders earlyto achieve buy-in.
Biggest Takeaways
Apply usability testing to achieve a world-class user experience.
Biggest Takeaways
Consider how your redesign impacts your web developers, content creators,
ad operations, and partners.
Biggest Takeaways
How will you measure success?
Biggest Takeaways
Give yourself time.
Biggest Takeaways
Have a dedicated project manager.
Biggest Takeaways
…and the number 1 takeaway…
Biggest Takeaways
Plan.
Contact Us
John ConwayGeneral Manager
William AmmermanDirector of Sales & Marketing
Related Documents
