Responsive Retrofit Mobile

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.

Aly Chiman

Aly Chiman is a Blogger & Reporter at AlyChiTech.com which covers a wide variety of topics from local news from digital world fashion and beauty . AlyChiTech covers the top notch content from the around the world covering a wide variety of topics. Aly is currently studying BS Mass Communication at University.