RWD
A Beta Approach
Sarah Johnson Li
Rollins College
@pixelsbysarah
Not to be
confused
with…
Rollins College
Rollins.edu/beta
What we did
What we learned
What we could have done differently
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
Why We Chose RWD
Mobile visits increased dramatically
Same content, same location
Easy updates, less work
Adapts to the en...
Audience is most Important
What they said
• Hard to navigate
• Cluttered
• Old looking
What they did
• Common search terms...
Why?
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
Don’t call it a
Committee,
call it a
Task Force
Our Task Force
13 Academic & Administrative Departments
Student Representatives
Invited more people for feedback
Create am...
Task Force Itinerary
Dialogue, not monologues
Understanding value of Responsive Design
Reviewed our analytics and peer web...
Oops!
External transparency (blog)
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
First Things First…
Change of mindset
Everyone learned and contributed
Mobile First comfortably
Started coding right away
Design
“Live”
Mockups
Review
Identify
Problems
Design/Dev Tricks
Get over learning curves early
Emphasize Web != Print
Don’t sweat the small stuff
Keep it Simple
Communi...
Dev Tricks
Browserstack.com
CSS3 Mediaqueries http://goo.gl/DbcFU6
Caniuse.com
CSS3files.com
http://www.feuersonne.com/Nobodyperfect.html
Play,
break stuff,
experiment.
If you see something
that could be done better,
do it
@rem / Remy Sharp
Framework?
ZingDesign
Decision Flowchart & Advice
http://goo.gl/h0UDB8
Google and the rest of the world is
not going to give your site better
ranking or points by using a certain
framework
Jeff...
Oops!
Set Feature Priorities
Does this prevent us from launching?
Ideal sitemap
Design Mobile Up
Team in two different bui...
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
wow! as a prospective
student, the new website
is awesome.
Gorgeous!
The font choices and colors
are young and childish.
F...
You won’t please everyone
In general, people hate change
Address squeaky wheels
Back up your decisions
Change or adapt…wit...
Oops!
Be transparent about brand changes to
eliminate confusion
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
Don’t say we didn’t warn you
Sunset Schedule for “Parchment”
Push visitors to “Beta”
Add finishing touches
Fix imperfectio...
Oops!
Spent too long collecting feedback
Production schedule pushed back
Set feature priorities
Identify
What’s
Important
Task Force
Design/Dev
Cycle
Feedback
Phase 2
Launch &
Transition
Continuing
Work
Do Not Set it and forget it
We are never done…
and neither are you
Continuous Work
Changes in Culture, Generations
Advances in Technology
Evolving Web Standards
New Ideas & Solutions
Questions? Comments?
Don’t leave yet!
Takeaways are coming…
@pixelsbysarah
sjohnsonli@rollins.edu
In Conclusion…
Takeaways
Your audience is most important
Keep audience informed & involved
Team chemistry & communication
Can’t please ev...
Lunch Time!
Thank you!
@pixelsbysarah
sjohnsonli@rollins.edu
Responsive Redesign: A Beta Approach
Responsive Redesign: A Beta Approach
Responsive Redesign: A Beta Approach
Responsive Redesign: A Beta Approach
Responsive Redesign: A Beta Approach
Responsive Redesign: A Beta Approach
Upcoming SlideShare
Loading in …5
×

Responsive Redesign: A Beta Approach

406 views

Published on

This session is designed for anyone involved in the web redesign process. Sarah will share Rollins College's Responsive Redesign approach, along with tips and tricks that they have learned along the way.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
406
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Sara Lee!
  • About Rollins
  • Founded 1885. #1 in the South. More than 2,600 undergraduate students; 575 grad; 2,557 FTE. Beautiful campus by the lake. Fox day tradition. Tars (nickname for sailors)
  • Rollins.edu/beta
  • Beta Today
  • 6 “phases”
  • ID What’s Important
  • Mobile & desktop needs
  • Why am I doing this? Who is it for? What business goal will it help my client achieve? What need will it help my users address? Don’t just keep content first. Keep the why first.What real need will this feature meet? What’s the real reason? (Hint: ‘Because I want to’ or ‘I really like blue’ or ‘everyone’s on Facebook’ don’t count.)
  • Big implications of a “committee” in Higher Ed. Requires a hierarchy, by-laws. Ongoing. Task force is more informal with an endpoint.
  • Biweekly meetings, department heads volunteered individuals from their departments. Sent follow-up emails and called indviduals.
  • They became “ambassadors” who understood the what we were doing and why, so they could help our vocal groups understand the approach. Asked them what components would be in a successful website. We didn’t show the designs until much later, but they had a much better understanding of responsive and our reasons behind the redesign.
  • Too much second guessing, lack of understanding from readers
  • It’s not about location. It’s about priority. What is the most important content for your users? Because layout changes across contexts. There (probably) isn’t going to be a sidebar on your small-screen design.
  • Positive experience to learn about each other, applied job shadow. Learned a new process together, best team effort.
  • What are they REALLY saying? Didn’t like colors = don’t understand we are rebranding
  • Color toned down, added grey, campus photos and anchor added for personality. Still brainstorming on other elements.
  • A website is not a Ronco product! Many people abandon the website after a redesign. This is no longer an option.
  • Responsive Redesign: A Beta Approach

    1. 1. RWD A Beta Approach Sarah Johnson Li Rollins College @pixelsbysarah
    2. 2. Not to be confused with…
    3. 3. Rollins College
    4. 4. Rollins.edu/beta
    5. 5. What we did What we learned What we could have done differently
    6. 6. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    7. 7. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    8. 8. Why We Chose RWD Mobile visits increased dramatically Same content, same location Easy updates, less work Adapts to the environment Promotes simple, effective content
    9. 9. Audience is most Important What they said • Hard to navigate • Cluttered • Old looking What they did • Common search terms • Top pages from Google Analytics • Event Tracking
    10. 10. Why?
    11. 11. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    12. 12. Don’t call it a Committee, call it a Task Force
    13. 13. Our Task Force 13 Academic & Administrative Departments Student Representatives Invited more people for feedback Create ambassadors
    14. 14. Task Force Itinerary Dialogue, not monologues Understanding value of Responsive Design Reviewed our analytics and peer websites Showed designs late
    15. 15. Oops! External transparency (blog)
    16. 16. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    17. 17. First Things First… Change of mindset Everyone learned and contributed Mobile First comfortably Started coding right away
    18. 18. Design “Live” Mockups Review Identify Problems
    19. 19. Design/Dev Tricks Get over learning curves early Emphasize Web != Print Don’t sweat the small stuff Keep it Simple Communicate & Compromise Shut the Front Door!
    20. 20. Dev Tricks Browserstack.com CSS3 Mediaqueries http://goo.gl/DbcFU6 Caniuse.com CSS3files.com
    21. 21. http://www.feuersonne.com/Nobodyperfect.html
    22. 22. Play, break stuff, experiment. If you see something that could be done better, do it @rem / Remy Sharp
    23. 23. Framework? ZingDesign Decision Flowchart & Advice http://goo.gl/h0UDB8
    24. 24. Google and the rest of the world is not going to give your site better ranking or points by using a certain framework Jeffrey Li
    25. 25. Oops! Set Feature Priorities Does this prevent us from launching? Ideal sitemap Design Mobile Up Team in two different buildings
    26. 26. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    27. 27. wow! as a prospective student, the new website is awesome. Gorgeous! The font choices and colors are young and childish. Fresh and bold look Doesn't show the sophistication or breath of Rollins it's MUCH more pleasant to the eye. high school website the layout has everything one would need to find out more information I would like to go back to the background that displays the architecture of the campus NO. THIS SUCKS. Ilove ourwebsiteasis. Much better than the dull look we currently have.
    28. 28. You won’t please everyone In general, people hate change Address squeaky wheels Back up your decisions Change or adapt…within reason
    29. 29. Oops! Be transparent about brand changes to eliminate confusion
    30. 30. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    31. 31. Don’t say we didn’t warn you Sunset Schedule for “Parchment” Push visitors to “Beta” Add finishing touches Fix imperfections
    32. 32. Oops! Spent too long collecting feedback Production schedule pushed back Set feature priorities
    33. 33. Identify What’s Important Task Force Design/Dev Cycle Feedback Phase 2 Launch & Transition Continuing Work
    34. 34. Do Not Set it and forget it
    35. 35. We are never done… and neither are you
    36. 36. Continuous Work Changes in Culture, Generations Advances in Technology Evolving Web Standards New Ideas & Solutions
    37. 37. Questions? Comments? Don’t leave yet! Takeaways are coming… @pixelsbysarah sjohnsonli@rollins.edu
    38. 38. In Conclusion…
    39. 39. Takeaways Your audience is most important Keep audience informed & involved Team chemistry & communication Can’t please everyone Multiple solutions available Never stop improving!
    40. 40. Lunch Time! Thank you! @pixelsbysarah sjohnsonli@rollins.edu

    ×