Surviving a Responsive Retrofit

From BADCamp (Bay Area Drupal Camp) 2014.

Responsive design is complicated enough when you're starting from scratch. What about *retrofitting* an existing design to make it responsive? How do you take a website design that predates Apple's iPad and update it to adapt to as many devices as possible? How do you do all of this without adversely affecting your web editors, site admins or site visitors?

Transcript

1. Surviving a Responsive Retrofit Rob Knight, UC Santa Cruz raknight@ucsc.edu @robknight @knice
2. There are other Rob Knights…
3. A more responsive UCSC website
4. It’s not Drupal (sorry) • Cascade Server by Hannon Hill • 200 administrative/academic sites • Hundreds of users of varying skill • No concept of a theme
5. What is a ‘retrofit?’ • Not starting from scratch • Maintain existing visual design (from 2010) • Improve accessibility: ✓ HTML source order ✓ Color contrast ✓ WAI-Aria landmark roles
6. Don’t ask users to make changes prior to launch.
7. Why not just Bootstrap all the things?
8. Tools
9. Take what we have and make it better.
10. Any decent size website is already a framework.
11. Example: a list of things .archive-list: thumbnail, date, headline, teaser, link
12. Work on fragments as pieces • Normalize, standardize and document them. • Add modifiers, make them responsive. • Codepen is my hero.
13. Fragments become sass partials.
14. Use frameworks as a reference to fill in gaps.
15. Rinse, repeat.
16. Tools http://sass-lang.com http://bower.io http://gulpjs.com
17. Assemble.io • Markdown/HTML content, partials. • Use a Gulp task to build test pages.
18. Is it a good idea to add responsiveness to an existing site?
19. As always, it depends • Timeline for completion • Team experience • In Drupal, probably not • If your CMS has a theme, probably not • Worth considering
20. Thank you Rob Knight, UC Santa Cruz raknight@ucsc.edu @robknight @knice • Project: http://github.com/ucsc/webtemplates2014 • Fragment playground: http://codepen.io/collection/noFft/