Responsive retrofitting has been defined as as finding the fastest and lowest-risk approach to creating a better experience for users of any screen size.
An issue with this is when a site has such complex styles it would be very difficult to undo for smaller layouts. In this type of situation, you may want to serve mobile first styles to viewport widths leading up to the current site’s fixed with resolution.
The goal with this approach is to have zero impact on the original CSS for larger viewport widths, but to use a mobile-first CSS structure leading up to that resolution without having to undo overly complex styles from the original CSS.
XHTML
/* rwd.css */ @media (max-width: 959px) { /* styles for smallest viewport widths */ } @media (min-width:600px) and (max-width: 959px) { /* styles for mid-tier viewport widths */ } @media (min-width:960) { /* original CSS styles */ }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28






 
/* rwd.css */
@media (max-width: 959px) {
   /* styles for smallest viewport widths */
}
@media (min-width:600px) and (max-width: 959px) {
   /* styles for mid-tier viewport widths */
}
@media (min-width:960) {
   /* original CSS styles */
}
 

We’re using yepnope.js and Modernizr media query test to check if the UA supports media queries (and has JS enabled). Where it does, we serve the responsive CSS. In the cases where it doesn’t, or when we don’t have JS enabled, we serve the original CSS.
February 20, 2014April 3, 2014
responsive designresponsive retrofit
Post navigation
← Optimize Images for SEO
Convert Click to Touch Events ‘
*
*
Email *
Website
Proudly powered by WordPress | Theme: Isola by WordPress.com.