0
Responsive Design
Implementing a Mobile-Friendly Web Strategy
Kye Tiernan
Managing Partner & Director of Client Service, I...
Responsive Design
Be fluid.
Make a plan.
To understand where we are
going, you need to understand
where we have been.
DISPLAY
BLOGSPPC
SEO
SOCIAL MOBILE
2000
2005
2010
ONLINE PR
AFFILIATEEMAIL
Online Communication Channels
DISPLAY
BLOGSPPC
...
How has mobile changed the way
users interact and engage with
information?
U.S Mobile Internet Usage
Visual.ly – Is Mobile Internet
Taking Over Desktop Usage?
Desktop vs. Mobile
It’s a Mobile Revolution
Responsive Design
a definition.
MOBILE
Responsive Frameworks
Size and Position – Relative Terms
Responsive Design
vs.
Mobile Friendly
Mobile Optimized
Adaptive Design
MOBILE
Mobile Friendly
Mobile Optimization
Adaptive Design
Responsive Design
Activity:
Considerations for responsive
design.
Define Your Goals.
Project Goals & Objectives
What are the overall project goals and objectives?
• Create an intuitive navigation
• Update th...
Project Goals & Objectives
What are the overall project goals and objectives?
• Can users find what they are looking for?
...
“We want a blog for our new site”
Create Meaningful Goals & Objectives
We want a blog for our new site …
• Increase our exposure
• Become a thought leader
•...
Organization Goals & Objectives
• Enhanced Brand Awareness
o Perceived as the lead brand for all programs
o Leadership and...
Know Your Audience.
Get to Know Your Audience
What are some methods you can use?
• Interviews
o Key stakeholders
o External audiences
o Focus ...
• Students – Middle School, High School and College
students seeking information on fun, engaging
programs and resources t...
• Colleges & Universities
• International Partners & Affiliates
• Honor Societies
• School Districts
• Program Speakers
• ...
Intuitive Navigation and Site Features
Main Navigation
National Geographic Expeditions
People to People
ID Tech Camps
Discovery Student Adventures
Super Camp
Program Finder
NG ExpeditionsID Tech Camps People to People
Outward Bound
Broadreach
Activity:
Creating a responsive navigation.
Content: Mobile First
Align Objectives
Audience
Needs
Organization
Needs
Web
Site
A good content strategy will balance audience needs with
organ...
Mobile First Content Strategy
 Develop a content strategy
o Know your audience
o Get to the point
o Create a hierarchy of information
 Creating contex...
When writing for a mobile user, “if
in doubt, leave it out”.
Bringing It All Together
Goal of Strategy is to Align Needs
Project
Goals
Audience
Needs
Site
Content
• Interviews
• Current Site
• Peer Sites
• In...
Thank You!
Kye Tiernan - Responsive design: Implementing a mobile-friendly web strategy
Kye Tiernan - Responsive design: Implementing a mobile-friendly web strategy
Upcoming SlideShare
Loading in...5
×

Kye Tiernan - Responsive design: Implementing a mobile-friendly web strategy

319

Published on

Presented by Kye Tiernan, MA, on September 26, 2013 at the fourth annual Center for Health Literacy Conference: Plain Talk in Complex Times.

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
319
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Kye Tiernan - Responsive design: Implementing a mobile-friendly web strategy"

  1. 1. Responsive Design Implementing a Mobile-Friendly Web Strategy Kye Tiernan Managing Partner & Director of Client Service, Interactive Strategies Plain Talk Conference 2013 – Communicating in a Time of Change
  2. 2. Responsive Design Be fluid. Make a plan.
  3. 3. To understand where we are going, you need to understand where we have been.
  4. 4. DISPLAY BLOGSPPC SEO SOCIAL MOBILE 2000 2005 2010 ONLINE PR AFFILIATEEMAIL Online Communication Channels DISPLAY BLOGSPPC SEO SOCIAL MOBILE ONLINE PR AFFILIATE VIDEO EMAIL
  5. 5. How has mobile changed the way users interact and engage with information?
  6. 6. U.S Mobile Internet Usage
  7. 7. Visual.ly – Is Mobile Internet Taking Over Desktop Usage? Desktop vs. Mobile
  8. 8. It’s a Mobile Revolution
  9. 9. Responsive Design a definition. MOBILE
  10. 10. Responsive Frameworks
  11. 11. Size and Position – Relative Terms
  12. 12. Responsive Design vs. Mobile Friendly Mobile Optimized Adaptive Design MOBILE
  13. 13. Mobile Friendly
  14. 14. Mobile Optimization
  15. 15. Adaptive Design
  16. 16. Responsive Design
  17. 17. Activity: Considerations for responsive design.
  18. 18. Define Your Goals.
  19. 19. Project Goals & Objectives What are the overall project goals and objectives? • Create an intuitive navigation • Update the look and feel • Reach multiple audiences • Engage users in a new way • Increase engagement via social media • Increase site traffic via search engine optimization • Make a site easy to update
  20. 20. Project Goals & Objectives What are the overall project goals and objectives? • Can users find what they are looking for? • Does the design accurately represent the organization and/or brand? • Who are you trying to reach? • Are current forms of engagement effective? • Are you using more than one way to engage with audiences? • Is your online presence effective? • How do you keep site content fresh and engaging?
  21. 21. “We want a blog for our new site”
  22. 22. Create Meaningful Goals & Objectives We want a blog for our new site … • Increase our exposure • Become a thought leader • Communicate more with our users • Receive commentary from site visitors
  23. 23. Organization Goals & Objectives • Enhanced Brand Awareness o Perceived as the lead brand for all programs o Leadership and Career programs are known by name • Grow Student Enrollment and Nominations o Direct mail and SEO traffic lead to conversions • Boost Social Media Connections o Facebook. Twitter and other social media channels gain more traction for programs • Known as authority for College and Career Readiness o Resources utilized by key audiences – students/parents and teachers
  24. 24. Know Your Audience.
  25. 25. Get to Know Your Audience What are some methods you can use? • Interviews o Key stakeholders o External audiences o Focus Groups • Market research o Online surveys o Previous studies o Market data • Site analytics o Google Analytics
  26. 26. • Students – Middle School, High School and College students seeking information on fun, engaging programs and resources to help them prepare for college and career. • Parents – Seeking information about the benefits, cost, dates & locations and safety of programs; what is the best fit for their child. • Teachers – Seeking program benefits, nomination forms, job opportunities and resources. • Alumni - Seeking ways to keep in touch with friends and mentors, access letters of participation and participate in a broader community. Primary Audiences
  27. 27. • Colleges & Universities • International Partners & Affiliates • Honor Societies • School Districts • Program Speakers • Media • Potential Employees • Board of Advisors Secondary Audiences
  28. 28. Intuitive Navigation and Site Features
  29. 29. Main Navigation National Geographic Expeditions People to People ID Tech Camps Discovery Student Adventures Super Camp
  30. 30. Program Finder NG ExpeditionsID Tech Camps People to People Outward Bound Broadreach
  31. 31. Activity: Creating a responsive navigation.
  32. 32. Content: Mobile First
  33. 33. Align Objectives Audience Needs Organization Needs Web Site A good content strategy will balance audience needs with organizational goals.
  34. 34. Mobile First Content Strategy
  35. 35.  Develop a content strategy o Know your audience o Get to the point o Create a hierarchy of information  Creating context o Images and text o Calls-to-action o Task oriented  Deliver a good experience o Reflect your core message o Use actionable language to encourage engagement o Align editorial goals and tone of website Key Content Considerations
  36. 36. When writing for a mobile user, “if in doubt, leave it out”.
  37. 37. Bringing It All Together
  38. 38. Goal of Strategy is to Align Needs Project Goals Audience Needs Site Content • Interviews • Current Site • Peer Sites • Interviews • Site Analytics • Peer Sites • Research Responsive Website Design
  39. 39. Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×