Beginner’s Guide to Responsive Web Design

responsive

Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.

Free trial on Treehouse: Do you want to learn more about responsive web design? Click here to try a free 14-day trial on Treehouse.

Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

What is responsive design?

Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the Think Vitamin design looks like at various screen resolutions:

The first stage of Think Vitamin's responsive design.

The second stage of Think Vitamin's responsive design.

The third and fourth stages of Think Vitamin's responsive design.

It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

300 / 960 = 0.3125 or 31.25%

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {
 
  .content {
    float: left;
  }
 
  .social_icons {
    display: none
  }
 
  // and so on...
 
}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.

Resources

Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Treehouse, we have many videos that go in depth on the topic. Here are some links:

Hopefully this article helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link here so we can see!

Bonus

We’re starting to add free Youtube videos on responsive web design so if you’re interested in learning more, you can subscribe to our channel here: http://trhou.se/subscribe-treehouse-yt

Here’s a video to start:

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

214 comments on “Beginner’s Guide to Responsive Web Design

  1. Pingback: Rising Stars of The Future Of Web Design: Micro InterviewsTreehouse Blog

  2. Pingback: Free Biscuit Downloader

  3. Pingback: Calgary Engagement Photographer

  4. Pingback: Get Facebook Subscribers

  5. Pingback: Build a Website Just Like This One | Black Market Media Dot Info

  6. Pingback: Facebook Subscribers

  7. Pingback: No Moar Mobile Version Plugins! — Harlequin Girl

  8. Pingback: How to Enlarge Your Penis

  9. Pingback: Beginner’s Guide to Responsive Web Design Treehouse Blog « Magno Valdetaro | Feedshare

  10. Pingback: Beginner's Guide to Responsive Web Design – Treehouse Blog | inLine Media RSS Blog

  11. Pingback: Beginner's Guide to Responsive Web Design – Treehouse Blog | Cell Mobile Guide

  12. Pingback: Free Biscuit Downloader

  13. Pingback: uk casino sites

  14. Pingback: how to play roulette

  15. Pingback: Beginner's Guide to Responsive Web Design - Treehouse Blog | deSign of the Times | Scoop.it

  16. Pingback: Beginner's Guide to Responsive Web Design – Treehouse Blog | Internet blog

  17. Pingback: ageless male

  18. Pingback: Leonardo Garcia Fischer

  19. Pingback: Build A Better Website With These Web Design Tips : Doctor Preppers Family Preparedness Journal|Promoting the preparedness and self-reliance lifestyle, family survival, tips for survivalists and preppers, how to be prepared for a personal, man-made or nat

  20. Pingback: Dreamweaver Tutorial: What is Responsive Web Design?

  21. Pingback: Responsive Web Design « ash1520

  22. Pingback: Dorian Heyward

  23. Pingback: Responsive Web Design | deejayskywalker

  24. Pingback: What I Learned This Week, 9.7.12 « Point Park Marketing Bog

  25. Pingback: Free Biscuit Downloader

  26. Pingback: Brushless Conversion

  27. Pingback: click here

  28. Pingback: tutorial (css[1]) | Pearltrees

  29. Pingback: Chris Chu

  30. Pingback: newborn photography augusta ga

  31. Pingback: models

  32. Pingback: Beginner’s Guide to Responsive Web Design | New Day Interactive

  33. Pingback: Anna Sawyer

  34. Pingback: Filme Porno

  35. Pingback: Fun City

  36. Pingback: Important Observations About Mobile Web Design | Wisdom Health Prosperity

  37. Pingback: free advertising and free traffic

  38. Pingback: trouble ejaculating

  39. Pingback: webmaster free marketing

  40. Pingback: Mobile Websites Are Dead. | Creative Multimedia Solutions

  41. Pingback: Aventura Movers

  42. Pingback: no exam life insurance

  43. Pingback: Elvis Chicles

  44. Pingback: Jame Jorden

  45. Pingback: wine classes

  46. Pingback: URL

  47. Pingback: Loren Aliment

  48. Pingback: A great roundup of responsive design techniques « SEO HEADLINE

  49. Pingback: Creating a Grid for Product View in PHP for a eCommerce Site

  50. Pingback: Using inline-block to Display a Product Grid View | WebDesignAdmin.tk

  51. Pingback: Media Queries and responsive web design | Samson Muhangi

  52. Pingback: Develop in the Cloud - Keith Dawson - Responsive Design

  53. Pingback: How do I make my website 'mobile' friendly?

  54. Pingback: Liquid and responsive designs, the rise of mobile and tablets, and an epiphany about my project « LRD on DMT

  55. Pingback: Responsive Web Design using Twitter Bootstrap, Spring MVC | Spring under the hood

  56. Pingback: Latest in JQuery, Javascript frameworks for Web development | Spring under the hood

  57. Pingback: Responsive Website Design | TXAD Blog

  58. Pingback: Introducing PSD To Responsive HTML | The PSD To HTML/CSS Blog | Where We Blog Great Ideas

  59. Pingback: Responsive Web Design « Kylie Jean Weglo

  60. Pingback: Optimizacija za mobitele - androide

  61. Pingback: What is responsive web design? | Serendipity Online Marketing Ltd

  62. Pingback: About the Webmaster - Professional, Affordable and Creative

  63. Pingback: Fully responsive unordered list with CSS only [pure CSS] | Christian Fei

  64. Pingback: Buying website design themes: is it the right choice for my business? | Freelance Marketing Blog

  65. Pingback: Responsive Web Design Tutorials Video - Responsive Web Design Blog

  66. Pingback: Responsive Web Design – The Shape of the Future « FutureWebHorsham

  67. Pingback: 8 Free Responsive Web Design Tutorials. - Responsive Web Design Blog

  68. Pingback: responsive web design | kiana shanel

  69. Pingback: Responsive Web Design: CSS Grid Template | 9to5IT

  70. Pingback: 15+ Comprehensive Responsive Web Design Tutorials | gonzoblog

  71. Pingback: 15 Interessante responsive webdesign tutorials » claudia angenent

  72. Pingback: 响应式设计的十个基本技巧 | 博客 - 伯乐在线

  73. Pingback: Technol.gy | The Technology Marketing Blog

  74. Pingback: Responsive Design Techniques

  75. Pingback: A beginners guide to responsive design | MM&B Studio

  76. Pingback: Responsive 设计的十个基本技巧 | 5迷3道 | HTML5和CSS3的真材实料

  77. Pingback: What is a Responsive Web Design?

  78. Pingback: What you need to know, to be a UI Designer « The Mythical User

  79. Pingback: Does your content travel? | Coull Blog

  80. Pingback: Marty's WebPress | Let’s Get Responsive Up In Here!

  81. Pingback: 转载:Responsive设计的十个基本技巧 | Yuan Peng`s Tech Blog

  82. Pingback: To Web or to Native…That is the question | itechnology.am

  83. Pingback: Для Web или родной … Вот в чем вопрос | itechnology.am

  84. Pingback: Համացանցային կամ բնիկ … Դա է հարցը: | itechnology.am

  85. Pingback: more responsive web design info for designers | Misenheimer Creative

  86. Pingback: Responsive Web Design – Coming Now to Your Mobile Device | Marketsmith, Inc

  87. Pingback: Responsive Web Design. Adaptades per tots els dispositius.hipèric

  88. Pingback: 佈景主題:Whatever Lab | Lab Crocodile

  89. Pingback: 初學者淺談自適應網頁設計 | Lab Crocodile

  90. Pingback: Responsive Design :: Morgan Tepsic

  91. Pingback: Advent Blog Post 18/12/12 - Really Good SEO

  92. Pingback: Beginner’s Guide to Responsive Web Design | Dnyanesh Bhonde | WEB DESIGNER & FRONT-END DEVELOPER

  93. Pingback: Be More Responsive | CORALthirteen

  94. Pingback: Le Responsive Design : la grande tendance 2013

  95. Pingback: 动态网页设计(RWD) | 自學百科

  96. Pingback: What Is Responsive Web Design, What Makes a Website Design More Responsive, and Why is it so Important? | Web Marketing Daily Post

  97. Pingback: Project: Rampture Calculator – modern rockstar | design art tech new media | joseph maddela

  98. Pingback: top 3 online fundraising tips for 2013 | living earth adventure

  99. Pingback: 4 Reasons to Go Responsive for the New Year – Jibe Talkin'

  100. Pingback: ClearEdge Marketing: Innovative Marketing Solutions

  101. Pingback: Responsive Web Design | cKegel

  102. Pingback: Responsive Web Design « I am also Zach Evans

  103. Pingback: Responsive Web Design « breezycunha

  104. Pingback: Responsive Web Design | jlbecke

  105. Pingback: What is Responsive Design? | Dome Projects

  106. Pingback: Responsive Web Design – First Post! | avivaallegro

  107. Pingback: Responsive Web Design (RWD) Important? or Not? | hollylei

  108. Pingback: Responsive Web Design: What is it? Why is it increasingly more important? « spiderb

  109. Pingback: Best Responsive Web Design Resources for Designers | Website Designing | Tech Design Blog

  110. Pingback: Responsive Design - One site to rule them all

  111. Pingback: Things for this week | A context-aware web

  112. Pingback: Dieter Rams and Why Designers Will Lead the Future - The Industry

  113. Pingback: Fahim's Blog : WordPress, Web Design and Development , Graphics Design & Inspiration

  114. Pingback: Examples and articles on Responsive Design « Web Design Intermediate

  115. Pingback: Your first responsive web design

  116. Pingback: 60+ Responsive Web Design Tutorial Roundup – Spoil Your Mobile visitors! | Good Favorites

  117. Pingback: Beginner’s Guide to Responsive Web Design. « kaylahull11

  118. Pingback: Need advice setting up mobile-friendly site . mobi - CSS

  119. Pingback: VANUiT UNITiD – Responsive Design. Content, componenten en breakpoints | UNITiD.nl

  120. Pingback: Blogplattform FHNW | My links 19. February 2013

  121. Thank you so much for great article. This article opened my mind for the possibilities.The concept of a responsive design really got me, I had to play around with it on my recent work.I think Responsive website design might turn out as a great way to progressively enhance even small budget projects for mobile devices.

    Tony Smith
    http://www.RiaEnjolie.com

  122. Pingback: Wk 3/Tut 2 : Responsive Web Design – Part 1

  123. Pingback: 5 Mobile Optimization Strategies You Can't Afford To Ignore - Vysibility

  124. Just started to learn about web designing and this guide will help me a lot to learn more about a responsive website designing.

  125. Pingback: Week 3 – Responsive Web Design | Musings of a 21st Century Renaissance Man

  126. Pingback: Be Responsive: The Importance of Responsive Web Design :: Jacine Arias Web

  127. Pingback: Ten things you need to know about responsive design » Mobimatter

  128. please give me a proper solution or code to create responsive web design ????

  129. Pingback: Hostmethod » Responsive Resources

  130. Pingback: – Responsive Web Design

  131. Pingback: ePortfolio Update: Boy was I wrong about mobile design | Library, Baby!

  132. If your looking for a fast and easy way to create your own web site check out pagebin.com

  133. great article and it is something I been intrigue because some template and theme are not what I want. I realize I have to learn so I can do it myself. I think Responsive Web Design is basically Keeping it Simple once you master the fundamentals and then expand. Because I keep looking for a specific theme/style and I dont see it. So I am like errrr what to do find out what it is that I want to do and bascially it deals with sidebars inclusion. I have a specific format I Want to use for my sites. I dont like the formats. I am guessing static page are what I Want for my format because people’s attention span are short.

  134. Pingback: Responsive web design is the future. | Artesano's Workshop

  135. This is great for those beginning to do responsive websites, like me. However, I would like to suggest that aside from: 320px, 480px, 600px, 768px, 900px,1200px media queries, you should also include a 0px with it. The 0px query should contain the minimum CSS.
    The responsive website I have created, http://calcunico.blogspot.com, uses 0px, 320px, 768px and 1024px media queries. I did not opt for the mobile view of blogger, but coded it manually.
    The site has no issues when it comes to desktop browsers. But there are issues when it comes to mobile browsers like Opera Mini not rendering font-face style and UC browser not hiding elements which are supposedly hidden using CSS. Responsive websites and mobile browsers still has a long way to go.

  136. Pingback: Further reading on responsive design | WEB DESIGN COMM

  137. Pingback: 40 articles and resources to improve your responsive design skills - Web Hosting Blog

  138. Pingback: 10 Things You Need To Know About Responsive Design - Firm8

  139. Pingback: Dieter Rams and Why Designers Will Lead the Future | The Industry

  140. Great article! Your think vitamin video training on RWD is really helpful too – clear and easy to follow (Got a sample with web designer mag or .net). Much appreciated.

  141. Pingback: Responsive web design | I heart digital

  142. This really isn’t a “Beginner’s Guide”. It’s got some good information, but it seriously falls short of providing any actual information.

    Specifically, the description of fluid grids stops halfway through the discussion. What do you do with that 31.25%? How is it applied within the CSS?

    If the 31.25% is supposed to be used in combination with media queries, then how is it supposed to work when the media queries are based on min-width and not max-width?

    In other words, shouldn’t “width: 31.25%” be applied to styles with a max-width of 320px?

    This post is a really good example of why code samples are essential, even for a “Beginner’s Guide”. The reader should be able to experiment, even minimally, with this information. Otherwise, the reader hasn’t really learned anything.

    • I agree. I went to a presentation on responsive design and this was about all we got. It seriously failed to even present a simple example. The only thing that made this article somewhat more thorough is that media queries were introduced, but I still feel that I wasted my time reading this.

      • It should have been more clearly explained but the basics are here. With media queries you simply style the website within the media query brackets and test the results on the corresponding device. Since each media query is a style for a specific screen size, learning CSS is actually a newbies next step.

        Regarding “width: 31.25%” this will be replace “width: 300px;” almost every class or id should get a new “width:” to resize itself responsively to each screen size. “max-width: 320px;” does what it implies and “caps” the width at 320px the same as min-width: 320px; does.

  143. Not sure if this page is also made with responsive web design, but your social media bar on the left is too much to the left; out of view, I can only see the vertical second half of it… lol… But nice article though, I guess I need to start use this stuff now.

  144. Hi

    Great article. It made sense even for a non coder like me

    Can anyone advise whether it’s possible to give an existing app RWD?

    Or should I ask: is it impossible?

    How difficult out of 10? (10 being the most difficult)

    The app is writen in django

    Any comments welcome

    Thanks !

  145. Pingback: Responsive Web Design | Assignments

  146. Pingback: Be More Responsive |

  147. Am I missing something, what good is an ultra high resolution on phone when it comes to viewing regular desktop grade websites. Sure you would be able to see it all on screen, but it would still look damn tiny.

    • Very true, but if you read my post fully you would see that I did say
      ‘responsive design is definitely something i see a need for’. I was
      saying that some devices can handle full scale website, that doesn’t
      mean I am not going to design responsive sites.. actually, every site I
      do now is responsive. If I didn’t do responsive design, I would be broke now.

  148. Pingback: Beginner’s Guide to Responsive Web Design | Mobile.pro

  149. Pingback: Dusefull php links | PHP MySQL

  150. NHTE is a Web & Graphic designing company offering a wide spectrum of design capabilities & solutions with best quality and affordable rates.

  151. Pingback: Year 2013 | Shinyee

  152. Pingback: What is a Responsive Website? | rdhenker

  153. I used width tribute for text ,

    @media screen and (min-width: 480px){
    #container{
    width: 100%;
    }
    #left-column{
    width: 60%;
    float: left;
    background: yellow;
    }
    #right-column{
    width: 40%;
    float: right;
    background: white;
    }
    }

    but all other attributes work except width.
    My text cutoffs when i change the size of my browser.

    Why???????????

  154. Pingback: What Is Responsive Design and Is It Right For My Business?

  155. Pingback: Must-Read Web Design Articles for Beginners | Web Design Blog

  156. Pingback: Responsive Design in plain English | Tiny Couch

  157. Pingback: Responsive Web Design Makes Search Engines Rich With Its Approach - Website and Graphics Design Service

  158. Pingback: elearning responsive | Jose Manuel Martín

  159. Hello Nick

    and really thanks for this usefull tutorial

    if we define four box in the max-width : 1200px as example by one name and one class

    like as :

    div class=box

    div class=box

    div class=box

    div class=box

    we call them all in css just by one element :

    .box {

    }

    but how can we hidden one of them and show just three of them in the max-width: 780px ;

    does it posible or we must coll four different name for them at first ?

    I appreciate your help

    • div class=box first

      div class=box second

      div class=box third

      div class=box fourth

      .box{
      float:left;
      width:31.25%
      }

      if you want to hide the third box just:

      .box.third{
      display:none;
      }

  160. Pingback: Beginner’s Guide to Responsive Web Design | Web Designer Guide

  161. as a beginner, by reading the article and watching the introducing video on youtube, i think i have deeper understanding about RWD, thx a lot.

  162. Pingback: What Is Responsive Design? Is it right for my business? Should I have a separate mobile site?

  163. Pingback: Aktuellt och trender inom e-marknadsföring | Kvarken på webben

  164. That makes sense, fair enough.. but have you used CloudPass? There’s no need to think of all of this.. It gives you help to make sure all custom websites created are cross browsing and mobile/ tablets comparability. I guess you can contact them on http://www.cloudwebgroup.com .Great group!

  165. Pingback: Mobile email deisgn – what does it really mean for you? | Social Digital Space

  166. its about primary concept about responsive web design but have a nice video thanks author

  167. Pingback: Responsive Web Design | Old Timers' Transition Into WordPress

  168. Pingback: saumyazero

  169. 100% agree with you.

    As a developer, I have a number of mobile devices for testing designs properly (I don’t trust the online tools, they never quite get it right), from a very small screen up to my large screen Galaxy S3. So I think I have most resolutions covered :) I will always try to cater for as many resolutions as possible, but sometimes that means a lot of extra css, but thats what im paid for, so thats what I will do ;)

  170. Pingback: Responsive Webdesign Tools,Tutorials and Examples For Inspirations

  171. Pingback: Responsive Design Patterns - Treehouse Blog

  172. Pingback: Responsive Design Patterns - Learn Every Day

  173. I am totally excited to come across this…not even sure where I found it…Wiki I think. But hey! as an interemediate web designer and novice programmer, I am all smiles. Thanks for this smooth and easy intro to something that can help me build my business. I live to code, love to design.

  174. Pingback: Responsive Design Patterns | Html5 Tutorials

  175. Pingback: Responsive Design Patterns | Design Library

  176. Pingback: What is responsive web design and how does it work? | Dragon Web Tech Blog

  177. Pingback: Responsive Web Design: Because one size does NOT fit all | StraightArrow Creative Process Outsourcing

  178. Pingback: Responsive Web Design 01

  179. Responsive web design existed before it was given a fancy moniker. It was called “percentages” in HTML and it was also possible in Flash 10+ years ago, you could define it in your publish settings to scale the site based on percentages. The only thing really new is the snapping to a new layout based on specific sizes.

  180. Incredible article, I appreciate this.

    I really like the resources you provided, I liked your “in a nutshell” description of what it was and how it started, and appreciate the beginning tips like which resolutions to start at.

    I’m 100% recommending this page to a group of students who are going to be doing responsive web design this semester. Very nice article

  181. hi
    thank you very much for providing such a great info with us. i need to design such type of responsive website. and i have searched some data after then i found your blog i found every thing what i need in it.
    so thank you for sharing such a great information……

  182. Thanks for your great information, the contents are quiet interesting.I will be waiting for your next post. Seo Service………………………