mozilla

Compare Revisions

Responsive design

Change Revisions

Revision 386627:

Revision 386627 by anushbmx on

Revision 386797:

Revision 386797 by anushbmx on

Title:
Responsive design
Responsive design
Slug:
Web_Development/Mobile/Responsive_design
Web_Development/Mobile/Responsive_design
Tags:
"Mobile", "Responsive Design", "Web Development"
"Mobile", "Responsive Design", "Web Development"
Content:

Revision 386627
Revision 386797
n11      The goodn11      The Advantages
n14      Though it wasn’t initially proposed as method for creating n14      Though it wasn’t initially proposed  as method for cre
>mobile sites, responsive design has recently gained a lot of atte>ating mobile sites, responsive design has recently gained a lot o
>ntion as a way of taking some first steps towards mobile-friendli>f attention as a way of taking some first steps towards mobile-fr
>ness in lieu of a separate mobile site. With this technique, you >iendliness in lieu of a separate mobile site. 
>may address two of the three <a class="external" href="http://blo 
>g.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-developm 
>ent-part-1-what-is-mobile-friendliness/" title="Approaches to Mob 
>ile Web Development Part 1 – What is Mobile Friendliness?">goals< 
>/a> of mobile web development: 
n16    <ul>n16    <p>
17      <li>17      &nbsp;
18        <strong>Presentation</strong> — Using a flexible site lay18    </p>
>out paired with CSS media queries, you can make your site look as 
> good as possible no matter what size the user’s screen is. 
19    <ol style="font-family: 'Lucida Grande', 'Lucida Sans Unicode
 >', Tahoma, Arial, san-serif; font-size: medium; line-height: norm
 >al;">
20      <li style="border: 0px; margin: 0px; outline: 0px; padding:
 > 5px 0px 5px 5px; line-height: 1.4em;">It save time and money as 
 >there is't a need to maintain separate websites for different dev
 >ices.
n20      <li>n22      <li style="border: 0px; margin: 0px; outline: 0px; padding:
 > 5px 0px 5px 5px; line-height: 1.4em;">Responsive Design provides
 > every page a single and unique URL.
21        <strong>Content</strong> — By altering the content based 
>on browser features detectable <a class="external" href="http://w 
>ww.quirksmode.org/blog/archives/2010/08/combining_media.html">via 
> JavaScript</a>, you can tailor your message to the user. 
nn24      <li style="border: 0px; margin: 0px; outline: 0px; padding:
 > 5px 0px 5px 5px; line-height: 1.4em;">Social sharing stats (Face
 >book Likes, Tweets, +1 on google plus) wont be distributed ,since
 > the mobile and desktop versions of your web pages will use a sin
 >gle and unique URL.
25      </li>
26      <li style="border: 0px; margin: 0px; outline: 0px; padding:
 > 5px 0px 5px 5px; line-height: 1.4em;">Responsive Design doesn't 
 >care about user agents.
27      </li>
23    </ul>28    </ol>
n28      The badn33      The Negatives
t31      This approach isn’t without its limitations, though. Becaust36      This approach isn’t without its limitations. Because conten
>e content must be altered on the client-side with JavaScript, onl>t must be altered on the client-side with JavaScript, only minima
>y minimal content changes are encouraged. In general, things can >l content changes are encouraged. In general, things can get very
>get very hairy very quickly if you are trying to code two separat> hairy very quickly if you are trying to code two separate sets o
>e sets of JavaScript to work with the same DOM. This is a big rea>f JavaScript to work with the same DOM. This is a big reason why 
>son why web applications do not tend to adopt this approach.>web applications do not tend to adopt this approach.

Back to History