This document discusses responsive web design and how to make websites responsive. It covers how responsive design works using fluid layouts and media queries. It also discusses responsive image rotators, making images fluid, and converting existing websites to be responsive by cleaning up problem areas and replacing components. The document provides examples of CSS media queries and tips for making UI elements responsive in templates.

1. Cristian Horta
Web Project/Operations Manager, CWO
chorta@ucsd.edu
• RWD, how does it work? (media queries)
• UI elements in our templates, how they are responsive
• Responsive Image rotator
• Fluid images fix for images with fixed width and height
• Converting sites in the CMS to be responsive
• Pros and Cons of RWD

2. RESPONSIVE
WEB DESIGN IS
AWESOME

3. But,
How does it
work?

4. Fluid Layouts Media Queries
+ CSS
@media

5. viewport: 1024px
.HTML .CSS

6. viewport: 768px
.HTML .CSS

7. Media Queries
body {
background-color: #FFF;
color: #333;
}
@media screen and (max-width: 768px) {
body {
background-color: #333;
color: #FFF;
}
}

8. UI elements in our
templates, how they are
responsive

12. Responsive Image rotator

13. Simple, Easy to Read Markup

14. Image and Caption

15. Image and Caption + Link

16. Just Images

17. Don’t need the controls?
No Problem!

18. Fluid images fix for images with fixed
width and height

19. Fluid images fix for images with fixed
width and height
#tdr_content_content img {
max-width: 100% !important;
height: auto !important;
}

20. Converting sites in the CMS to be responsive
• It’s an opportunity to clean up the site
• Identify problem areas, such as:
Tables, Iframes, extraneous code/components
• Convert image rotators to use new markup
• Replace headers in QA, Test and Release