Responsive Web Design, most complete guide

Sep 13th/2011     336

• coding
• css
• tutorials
• useful
• ux
• web design

Comments and suggestions in here

Thanks for leaving us your comments and suggestions

• 
• 
• 
• 
• 
• 

If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.

But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design.

So, what’s responsive web design?

Firstly introduced by Ethan Marcotte on his article “Responsive Web Design” for A List Apart, the initial concept behind responsive design was based on the emerging responsive architecture, in which rooms and spaces have the capacity of automatically adjusting according to the number and flow of people within it.

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user’s actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, no matter how many devices are released on the future, responsive websites will always be able to provide a proper response.

But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. This concept requires a thoughtful process where the designers and developers work together to determine how to redistribute the elements according to resolution, which elements may be eliminated and how to maintain the concept while simplifying the structure.

According to many internet gurus, the future of the internet will rely on mobile devices (tablets, smartphones, portable consoles) rather than desktops and laptops. More and more people are starting to acquire cutting edge technologies and the tablets’ battle is on, so it’s indispensable that you start seeing these devices as an important part of your audience. But this increment on the amount of mobile devices does not mean that desktops are doomed, in fact we can see how everyday larger monitors are released, and these are highly appreciated by designers, visual artists and producers, thus at least for them, a tablet will never be able to replace a desktop computer.

Flexible grid

The first element we have regarding responsive web design is dubbed flexible grid. Before this concept became popular, most websites were designed using a fixed width style and centered content, which was an effective method as most computers worked under the same screen resolution. Now that screen resolutions have changed so much, a fixed width design is not the best solution for your designs and therefore liquid layouts are the new answer.

But the concept of flexible grid goes beyond the liquid layout concept, where the elements are essentially resized and kind of rearranged. A flexible grid makes a complete overhaul in terms of proportions, making that all the elements in a layout are resized in relation to one another when stretched or contracted.

The essence of flexible grids relies on stop thinking in fixed pixels and start considering percentage units. To recalculate an element’s proportions accordingly, you must take the element’s width and divide it by the full grid’s size e.g. 200 px / 960 px = 0.2083, then take this result and multiply it by 100 (0.2083 * 100 = 20.83 %), that we you get the percentage value that needs to be applied over the element in order to perform a correct resizing.

Although fluid grids can be helpful for performing an accurate resizing when moving from one resolution to another, it can get a little troublesome when you have multiple column systems and you want to make them fit in a smartphone screen, fortunately this problem has been solved with media queries, of which we’ll be talking about later.

An alternative solution that developers/designers have proposed is developing a mobile version and a desktop version to reduce the developing times and still provide a good navigation to the user, the problem with this is that screen resolutions keep changing and new devices are released all the time, so if you use this method you’ll be forced to continuously upgrade your mobile version or release more than one version to support different mobile devices. Another issue that this solution carries is that you cannot share a mobile version to a desktop user because it will look awful on his 1900 x 1200 screen.

The whole idea of responsive web design is developing sites and applications that are able to respond to the context where they’re currently being viewed and provide an optimized version for that display specifically, this can also be configured through media queries, but first we want to discuss some other aspects regarding responsive design.

Screen resolution

Having explained the fluid grid concept, it’s convenient to discus an aspect that goes along with it, and that’s screen resolution. Although fluid grids can help you create sites that adjust to all the different resolutions, sometimes it’s not necessary to cover all possible resolutions if you know that only certain screen resolutions are used by your visitors.

Currently the most popular screen resolution is 1024 x 768, and the reason for this is that the well-known iPad works under that resolution, besides there are still many places where these monitors are still operating. In any case, before thinking about using a fluid grid, make sure that your site looks perfect in the resolution that most of your visitors currently have.

Even if most of your users have 1024 x 768 monitors, consider that they don’t always maximize their browsers or they might eventually switch to a larger screen, so make sure that you implement an effective fluid grid system that can anticipate to all events.

Aspects to consider

Once you start to develop your fluid grid system to make your site look good and work in all kinds of resolutions (works with a percentage systems that adjusts appropriately), it’s important to mention three essential aspects that you must always keep in mind at the moment of creating your fluid grid:

Regardless of the screen size, always make sure that all the key information remains visible to the users without having to scroll, this can be achieved by simplifying buttons, reducing words and removing elements.

The text must be easy to read despite of the amount of columns, either if you have three wide columns or a single and narrow column.

More than a simple resize, the site actually suffers a thoughtful reorganization when the screen resolution varies, keeping all the elements easy to find and the navigation easy and organized.

The largest version of your site must provide a larger amount of information prior the scrolling becomes necessary while maintaining a good structure for smaller viewers.

Responsive Typography

Typefaces play an important role in responsive web design, you can base the entire layout in the font size using ems (percentage units), that way the site will remain resolution independent and will easily adapt to different environments. A List Apart has include a really nice demo on this.

It’s also important to use the max-width property to define the line length of the paragraph in order to make it as readable as possible (approximately 66 characters per line). This can vary according to the font you use, though something that goes around 30em will usually work just fine.

On the following example, the body type is shrinked as the browser width decreases. Since the font size is declared in ems and thus everything remains relative to the body, resulting in a cascade effect that affects all the layout elements.

body {
    font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
@media screen and (max-width:800px) {
    body {
        font-size:0.8em;
    }
}
@media screen and (max-width:400px) {
    body {
        font-size:0.7em;
    }
}

Flexible images

The second component in responsive design is flexible images. In regular liquid pages, images are simply resized through width and height attributes, which helps to keep the information organized indeed but does not optimize the loading times. Another method for fitting images into different screen resolutions is using CSS’s overflow property for cropping them dynamically as the containers are modified to fit new environments.

You can also create multiple versions of an image and store them in your server, then you can ask the website to call the fittest image depending on the current screen size, this exercise can be done using a detection feature in tandem along with DOM manipulation.

One of the most popular methods for resizing images was proposed by Richard Rutter, who said that CSS’s max-width property can be an effective solution. This property works great as long as no other width styles override this rule, what it does is tell the image to load in its original size unless the current screen is smaller than the original width, in that case the image’s maximum width will readjust to fit the current screen size, this trick allows you to perform a good image resizing regardless of the screen resolution as it focuses on the browser’s size instead. The problem with this technique is that the image rendering gets affected when the image must be resized to very small scales, though there’s a JavaScript solution for this. You can ready more about this technique on this great article published on Unstoppable Robot Ninja.

Filament Group’s solution

A solution that seems to work very well was proposed by the Filament Group. On their proposal, images are resized accordingly and image resolution is reduced when displayed in mobile devices, which results in an optimization of load times.

To use this technique you’ll have to download a few files from Github. The first one is a JavaScript file, then a .htaccess file and finally an image file. You just need some HTML lines to reference both the small and large versions of the image, the great thing about this technique is that it reduces load times considerably and is supported by all main web browsers, IE included.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute, defined in the files included on Github. Everytime you’re viewing the site on a screen whose resolution is wider than 480 pixels, the larger image will load, whilst in mobile and tablet devices, the small image will load automatically.

What the JavaScript file does is inserting a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms and only the large or small images are loaded according to the current screen resolution, hence this technique can become a great bandwidth saver.

The iPhone / iPod Touch issue

If you have had the chance of navigate using an iPhone or iPod Touch, then you know that by default, these devices rescale a website to make it fit their small screen, then the user can easily zoom in to visualize the different elements across the page. The problem is that even if you have configured your site, the browser will continue to resize your images, affecting the rest of the layout.

To fix this problem, you need to use an Apple’s specific meta tag, the meta tag must be placed below the site’s <head> section in the following way:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

By setting the initial-scale value to 1, it overrides the default parameter to resize images proportionally, whilst leaving them as if their width is the same as the device’s width in both portrait and landscape mode. You can read more about this in Apple’s documentation on viewport meta tag.

Responsive borders on images

While making the research for this article, we stumbled upon a nice trick on CSS Wizardry that shows how to implement responsive borders in your images. Because borders cannot be specified as percentages, you need to perform a simple trick to make them behave responsively, the trick works like this:

img{
  max-width:98%;
  padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
  background:red; /* Color of the faux border. */
}

Media queries

The third element of the responsive design triad is CSS media queries. If you’re not very much into developing and programming but more into design, then this concept may seem a little tangled for you. Media queries allow you to collect data about the visitor and utilize it to apply the CSS styles that can provide the best user experience to the visitor.

In the case of responsive web design, media queries are used for establishing the min-width parameter, which allows you to apply specific CSS styles according to the current browser size, hence if the screen size drops below a certain size, a new CSS is applied instead of the previous one. to give you an example, this is how a default media query might look like:

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

Although these are the most common resolutions of these days, you might not need to use a 1900px query if you’re developing a high school website or a health care page, they will probably have 1200 monitors as maximum, so we suggest you to parse your target before start entering code lines, that will probably save you a lot of time.

With media queries, designers can build multiple layouts using single HTML documents and selectively provide stylesheets based on different features such as browser size, orientation, resolution or color. Although media queries provide a great solution for developing highly responsive websites, there’s still a lot to work with in order to offer a complete solution for mobile devices.

Conditional IE Style Sheets

This is one of the most popular techniques in responsive web design. On this process, an unique stylesheet is loaded to browsers that actually understand media queries for Internet Explorer. In the case of mobile devices, the normal procedure is to load a basic stylesheet that sets up a multicolumn layout for large screens.

This simple technique works effectively for supporting IE on your desktop while also providing support for mobiles due the fact that it loads a light and appropriate linear layout. The only problem with this is that you cannot run this procedure under browsers that don’t support CSS3 media queries.

You can utilize this method when your media queries are simple enough to be included within a single stylesheet, this also works if your desktop IE requires a multicolumn layout, at expense of speed.

JavaScript

In case that you’re developing for devices that don’t support CSS3 media queries, JavaScript can be an effective solution. There’s a JavaScript library that makes older browsers support CSS3 media queries, then you just have to grab a copy of the library and include it in the mark-up css3-mediaqueries.js .

And in case you want to try a more advanced solution, there’s a jQuery snippet that detects browser width and changes the CSS accordingly, so let’s take a look at it:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(window).bind(“resize”, resizeWindow);

function resizeWindow(e){

var newWindowWidth = $(window).width();

// If width width is below 600px, switch to the mobile stylesheet

if(newWindowWidth < 600){                 $(“link[rel=stylesheet]“).attr({href : “mobile.css”});                 }             // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){

$(“link[rel=stylesheet]“).attr({href : “style.css”});

}

}

});

</script>

Width considerations

This is something that most people don’t notice unless they’re pixel-precision curators. When your browser window is reduced, the max-width that you have specified kicks at different points in Safari, Firefox and the other main browsers. This difference goes around 15 pixels, which apparently is related to the vertical scrollbar, though in the end it seems that the problem is that besides Firefox and Opera, neither Webkit browser is following the spec.

Under normal circumstances, the width should be including the vertical scrollbar, which is something that Safari is not doing. This indicates that the webkit behavior might be better for developers in a certain way because the scrollbar width can vary from one browser to another.

Responsive emails

With the boom of responsive web design, many sites are focusing their attention on designing for mobile devices, however it seems that not too many have considered developing responsive emails. Many people spend more time with their smartphones that in front of their desktops, hence they tend to read most of their emails through these elements, so it’s necessary to develop a special structure for all your emails.

If you have tried to check your inbox in an iPhone or a similar mobile, then you’ve probably noticed how the text is automatically rescaled to an almost unreadable size and the design looks all cluttered and messy, also when you have large images within your email, an horizontal scrolling becomes necessary. Thanks to media queries, you can create a separate style directed to emails specifically that behaves just like if you were configuring a regular site. In case that the device does not recognize the query, it will degrade gracefully by simply reverting to your default styles.

The previous picture shows an example of an email design that has been set up to fix into an iPhone screen (portrait mode). Here’s the mobile stylesheet in the <head> section of the email:

@media only screen and (max-device-width: 480px) {
     .page {
          padding: 0px 10px 5px 10px !important;
     }
     body {
          padding: 10px !important;
     }
     #airmail-line {
          margin: 0 -10px !important;
     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot {
          width: 275px;
          height: 190px;
     }
}

What these code lines say is, “Only use these styles if the screen dimensions are 480px or less” (480px being the width of a “flipped” iPhone’s display). Then, using the !important declaration to override any inline styles, change the padding of the body and the .page DIV, alongside the font-size of certain text when these styles are invoked. This maintains the pretty layout of the email and keeps the headings from being too large on the small screen.

Now let’s take a look at the screenshot at its original 550 x 380px in a desktop email client:

And here it is resized to 275 x 190px for a mobile display:

Resizing your images can prevent the sort of layout breakage or unnecessary scrolling that can appear when an image is too large for the mobile devices’ viewport.

A final tip is the addition of -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text. For example, the iPhone scales small fonts up to 12px, so it can be used to override this. That said, all your text should be above 12px and desirably, 17-22px. =

This method is not only simple but largely supported by most devices that offer media query support, e.g. let’s take a look at an email opened in an Android and then a Palm device:

Considerations for different devices

We have seen how responsive design can help designers to provide a comfortable experience to their users regardless of the medium they’re navigating through. Establishing a fluid grid and using flexible images along with media queries are the three main components behind any responsive site, we have also seen the importance of typefaces and how to create a responsive email template. Now we like to talk a little more about the different devices and resolutions that most users work with.

Mobile-first responsive design

First proposed by Luke Wroblewski, the concept of mobile-first emphasizes the necessity of prioritize the mobile context at the time of developing user experiences. The reason that sustains this concept has among some other points:

More than 70% of the world population has a mobile device and 85% of the mobiles sold the last year come with web browser incorporated.

Designing for mobile involves much more than just the layout, as mobiles incorporate additional features such as applications, touch events and more.

One of the differences between desktops and mobile is that while desktop conserves a similar structure from one device to another, the mobile world includes smartphones, tablets, eReaders and more, offering a bigger challenge for both designers and developers. The idea of mobile-first suggests a concept of progressive enhancement opposite to the gradient gracefully concept that we mentioned before.

Progressive enhancement states that by starting for mobile you will insure that the site will look well in all larger environments, which certainly makes sense because mobile is the most restricted medium where designers/developers need to work at, therefore you can include additional features as the medium becomes larger and offers a better support for most media queries and additional options.

According to the brilliant article by A List Apart, following the recent rise of mobile Webkit, media queries became a popular client-side technique for delivering tailored stylesheets for the iPhone, Android phones and mobile devices in general. To do so, you need to incorporate a query into a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

The query contains two components:

a media type (screen), and

the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).In other words, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

Good practices

Moving away from the coding part, there are some key aspects that you need to consider at the time of setting up the mobile version of your site using responsive web design techniques. Following these guidelines will help you assure a great navigation experience to the user, so let’s see what they are about:

Use single column systems as the main structure for your mobile layouts. This structure helps you manage the reduced amount of space and also allows an easy scaling between different device resolutions as well as flipping between portrait and landscape mode. Thanks to responsive web design, you can turn a multi column layout into a single column system and vice versa.

In case your site has a lot of information that needs to be presented asap, one of the easiest ways of organizing all the information is utilizing a collapsible navigation, harnessing the single column system that we already talked about. You can insert the information on multiple folding modules that allow the user to only open the content they’re actually interested in while keeping the rest hidden.

Mobiles and tablets work differently to desktops and laptops, not only in terms of size and structure but navigability. While computers utilize mouse or pen tablets, mobiles require a direct finger-screen interaction. Therefore, you need to evaluate all the clickable events of your site and make them work during a tap event in a mobile device.

Designing for tablets

There’s not much difference between tablets and mobiles other than the size fact, which means that all the mobile guidelines that we shared before can be applied in tablet design and those we’re about to add can be used in mobile design as well. Designing for tablets and mobiles requires a correct separation of content and presentation, doing this requires a correct usage of semantic markup to properly transport meaning to the markup without having to add additional CSS or JavaScript components. Semantic markup creates a better separation of style and content, providing a better accessibility and less code that eventually translates in smaller size.

Other good practices include removing unnecessary images from the HTML code, though they help to reinforce meaning they’re not absolutely indispensable. Use tags that represent the content’s meaning such as <em> for extra emphasis or <abbr> for abbreviation. The <div> tag should only be used to define large portions of content that are directly related to each other

Although tablets can work under large resolutions, they still can’t match those humongous resolutions of 1600 x 1300 and beyond, so focus on the essential content and provide a simplified version of the site that is easy to navigate and yet provides all the important information regarding the site.

Load times are very important when a person is browsing through a tablet or mobile, these devices were designed for portability and quick access, hence a website that takes a while before loading is not offering a correct mobile support. To improve load times, avoid using too many images and make sure that the ones you use are optimized, also use less amount of text, keep just the essential.

One difference between desktops and mobile units is that the last ones don’t have hover states, so don’t even bother in using them. Instead of that you can use buttons instead of underlined text, icons and elements that indicate about a link condition; gradient textures, beveled lines or dot grids can also be helpful. Anything on a tablet screen can be touched, pushed or moved, hence there is no need to use scroll bars to indicate vertical or horizontal movement because that’s implicit, so think of your mobile site as a giant content gallery and think about how the user can navigates through that gallery.

Content and navigation

Although the comfortable type size on large displays goes around 14px, it actually increases in mobile devices, which represents a reduction in the amount of available space for information. Some of the things you can do include removing irrelevant information, use simpler terms and phrases, reduce the line breaks usage and insert ‘more’ buttons in case you cannot place all the information on a single page.

Because tablets and smartphones are smaller, people tend to get closer to them while navigating, hence the colors tend to look brighter, which can produce some eyestrain. Consider lowering the color intensity, avoid neon colors and reduce saturation while keeping contrast high.

In the end, a good responsive design should not only resize but to consider all these elements in order to provide an actual “responsive” experience that offers the best look and functionality to the user.

Further touchscreen thoughts

Although we have already discussed most of the considerations regarding touchscreen devices, we want to make emphasis on this as we consider that technology is definitely turning towards touchscreens gradually. Now let’s take a look at some of the main considerations that you must keep into account when developing for touchscreen devices:

Despite the lately increase on huge screens sales with resolutions that go up to 1900 x 1200, the classic 1024 x 768 resolution remains as valid as always due the raise of tablets. The height is something that you can easily control through media queries and good design, the one that really must be evaluated is the width.

Don’t make sites that fit exactly into this resolution but try instead smaller grids such as the famous 960grid system, which allows you to leave some margin in both sides and make the site look as if it was originally designed for that resolution. Then you can harness media queries to create responsive sites that fit into different touchscreen devices.

Fingers are not as precise as mouse cursor, therefore you should probably space out your links and items to make them easier to reach, include white space areas to help the user navigate without hitting on a button accidentally. Another think you must remember is that most users are right handed but you cannot forget left handed users, in that case you may want to implement a browser detection feature that switches elements to a certain position where both users can navigate with ease.

Finally, add visual feedback to help the user to guide, this can be achieved by adding different color states, include loading states, icons and more elements that can emulate things like the hover effect.

Widescreen considerations

If we place mobile users aside and only focus on desktops, the latest studies have revealed that more than 73 % of desktop users are working with resolutions above 1024 x 768, so this screen resolution will soon be replaced by larger ones. Despite of this increment of widescreen users, the main market still focuses in mobile devices, but anyway, let’s see how to proceed in case you need to design for the largest resolutions.

Widescreen users are mostly designers and people on that field, which covers graphic designers, filmmakers, photographers, animators, 3D artists, etcetera. The sector also includes tech addicts who are always buying the latest equipment, including widescreen monitors of course; another sector that uses widescreen monitors is the one compounded by Apple fans, the latest MacBook, iMac and other Apple products possess screen resolutions of at least 1280 x 800 (excluding mobile devices obviously).

Non-widescreen users

So far we have determined that there are many people acquiring mobile and tablet devices but there are also many others who are opting for purchasing larger and larger screens. If you consider these two focus groups you have covered almost the whole spectrum, however, there’s a considerable sector that does not fit in neither of these two.

Probably the major concentration of these third group can be found in schools. These places often buy equipment that lasts for a decade due the high costs, so if a school purchased all the equipment in 2004, they probably have 1024 x 768 monitors mostly and even smaller ones. This is an important aspect because if you are going to design an application that is going to be used by the school only, there’s no need of wasting time and effort on developing a complex responsive website.

Think global, the reason why 1024 x 768 remains as the most popular screen resolution is because not every person around the world can afford a large monitor or buy a smartphone / tablet. Many people navigate through netbooks, whose resolution oscillates between 1024 x 600 and 1024 x 728 pixels.

Third world countries also run lots of old equipment that does not support large resolutions. Large corporations based on these countries are not able to afford major upgrades, so it’s probable that most of their computers are still old 1024  768 computers. These considerations are very important if your website is going to be viewed in different countries and by multiple sectors.

Does your site need to be responsive?

Responsive design is definitely a alluring idea that many people is willing to try on their designs, but have you thought if responsive web design is actually the best option for your site?. While making this research, we found lots of articles where designers and developers defend and attack responsive design, with both postures presenting very valid points.

Creating separate versions

Before you decide whether to make a responsive design or not, is important to understand the difference between the users that access your site through a mobile and those who do it via desktop. A good example can be found in restaurant websites, whilst desktop users usually want to see the menu, check pictures of the dishes and the restaurant and even take a video tour, mobile users enter the site to find the address, a telephone or make a reservation.

On this case it’s better to create an entirely separate site for mobile visitors as they will not be searching for the same information and resources. You may be thinking “but this means I’ll have to do twice the work”, well actually, making a separate mobile version is easier than making a quality responsive site, besides, the content is coming from a single database, which means that you don’t require many duplicate entries.

When you have cases such as the one we mentioned regarding the restaurant, the mobile version is going to need less data, specially images and things like that, which in case that you make a responsive design will still be loaded despite the resizing. Therefore, developing independent versions can guarantee an optimal performance in both environments.

Although the developing phase might be simpler, eventually this will require a bigger job because you’ll be updating different templates and stylesheets and the maintenance will have to be done separately, include a tablet version to the formula and you’ll have three different sites to work on.

One of the reasons why you should create a separate site is that you’re absolutely sure (after checking analytics and more) that a considerable (or most) percentage of your visitors are landing in your site through mobile devices. Some of the benefits of creating a separate mobile site is that you can use smaller images without having to use the display=none property (might be hidden but still consumes bandwidth), also less content has to be loaded which results in a faster load time and better performance.

Another aspect regarding separate sites is that you can mount the mobile version on a specific domain or subdomain, that way the user will know that he’s visiting the mobile version and will be able to switch to the desktop version at any time. Finally, there’s another alternative though it might be a little cumbersome due the amount of systems, that option is creating an app for the different devices, which will prevent the users from having to use a browser and instead just open the application directly.

Choosing responsive

Even when there are many cases in which creating a separate site is the best solution, this doesn’t mean that responsive design is useless because actually, both concepts can easily go hand in hand. So does responsive web design become a good option for your site?. The reason that we found the most whilst making our research is that responsive web design works amazingly well in widescreen devices rather than mobiles and tablets.

Nowadays, the most popular grid is probably the 960 system, which works wonderfully indeed, but what happens with those massive monitors of 1900 x 1200 and beyond?. Using the 960 system will leave a bunch of empty space on both sides when the site is visualized in these large screens, so that’s when responsive design comes to save the day.

With responsive web design, you can harness these additional areas to include information that has been placed after scrolling down or even adding an additional column. Another case is that there are screens that have a large width but the height is not so much, in that case you can take advantage of that extra width to place the missing information that the user can only find by scrolling down.

Another case when responsive design can suit you well is when your site does not have too much information that might slow down the site while viewing in a mobile, this occurs in places such as blogs when everything is mostly text and therefore developing a whole new site is not worthy.

Contras

Responsive design has many great pros that make it a completely valid answer to the current diversification of browsing mediums and resolutions. The fact of being able to develop a site that reacts differently according to the user’s current screen is just great, however there are some problems that might persuade you from using responsive web design all the time.

It’s certainly a major improvement being able to see the site perfectly rearranged and resized to fit any mobile instead of having to zoom in and zoom out. However, responsive design also presents a few problems that is important that you know about, so let’s see which ones they are:

Crafting a fully functional, well designed and cross browser responsive design involves a considerable amount of work, specially during the CSS creation. Although media queries facilitate a lot the developer’s job, in order to do it right you’ll have to create a complete stylesheet and additional ones for all different sizes.

Because creating a responsive website requires a bigger amount of work, it could also carry extra costs that the client may not want to afford. Another aspect that can increase the costs is having to design multiple mockups and layouts to generate the site’s look.

Adopting a responsive web design presents an issue regarding advertising. People are paying for a 125 x 125 banner that will look smaller as responsive design is applied, hence it could be seen as a mislead. In that case it will be better to adopt an AdWords system.

If you want to read about other facts why responsive web design is not always the best choice, we recommend you our article 11 reasons why Responsive Design isn’t that cool !.

Great examples

So, this whole responsive web design thing is a very captivating thing indeed, but it’s hard to know where to start without having some references of how other designers have approached this concept in order to develop compelling websites that include the responsive design concept. So now let’s take a look at some great examples to give you an idea of how can you make your first responsive site.

A List Apart: Article Example

Glitch

Trent Walton

Think Vitamin

Deren K.

Clear Air Challenge

Do Lectures

About.com

Sasquatch Festival

320 and Up

Earth Hour

The Modern Gentleman

Naomi Atkinson

Converge SE

Sleepstreet

Alsacréations

Simon Collison

Sweet Hat Club

Lapse

Useful responsive web design resources

For the final part of the article, we have gathered some useful articles, tools and resources that can really help you out at the time of developing a responsive web design. We have included useful charts, grids, frameworks and many more great tools, if you know any other resource that might come handy.

Image / Video adjust

Optimizing images is something that when is not done properly can turn out in slow load times, messy structure and navigation problems. Same thing happens with video, specially in respect of the data transfer aspect, so in this section we have included a few useful tools that can help you out.

Fluid Images

A must-read article by Ethan Marcotte that makes a complete study about the fact of working with fluid images by using media queries (max-width), the article also covers the technique for making fluid images to work on Internet Explorer.

Experimenting With Context-Aware Image Sizing

On this article the people of Filament Group propose a method that allow designers to generate responsive layouts that serve different image sizes at different resolutions, therefore it becomes a good strategy for creating mobile-friendly websites.

Responsive Images and Context-Aware Image Sizing

On this method proposed by Craig Russell, a server-side script (PHP-based) is utilized to serve up images at multiple resolutions. The concept states that inside the PHP script, a nested array is utilized to list image files and their relative percentage scale values. The complete information can be found by visiting the original link.

Responsive Images Right Now

On this article, Harry Roberts presents the idea of using the img element for the smaller of two images, which usually is going to be the mobile one. The method uses divs to hide and display images and only show the one that suits the best in the current device.

Responsive Images Using CSS3

To continue with the experts’ opinion, Nicolas Gallagher suggests a method based on media queries, CSS3-generated content and additional extensions. With this method you can make an attribute value to be interpreted as the URL part of a url () expression.

Responsive Images Using Cookies

On this method proposed by web expert Keith Clark, cookies are used to serve smaller images to mobile users. Everytime the browser requests a file from the server, it automatically forwards any cookie data along with the request. The trick also includes some JavaScript elements that you can read about on the original link.

CSS: Elastic Videos

Harnessing the max-width: 100% snippet and applied to videos, Nick La manages to produce HTML5 videos and iFrame-embedded videos that are responsive. On the official link you can find all the documentation to learn how to take advantage of this neat method.

Resizable Images (At Full Resolution!)

On this tutorial from CSS-Tricks you can learn how to easily resize images without affecting resolution.

Email newsletters

To complement the information that we already shared regarding the elaboration of responsive email newsletters that can be visualized in both mobile devices and large widescreens, we have found a couple of helpful links that you might want to keep within your bookmarks.

Responsive Design for Email, the Largest Mobile Audience

On this article posted by Eugene Fedorenko you can read how the development team behind Beanstalk used screen-size-specific media queries to target styles and what was the design process behind the construction of a better mobile email experience.

Media Queries in HTML Emails

This article makes a great study over media queries and how to take advantage of them for creating appealing and functional mobile-based email clients.

Guide to CSS Support in Email

An amazing chart by Campaign Monitor to save you time and effort. With 24 different email clients tested, the chart covers all the popular applications throughout desktops, web and mobile email.

Previewers

Not all developers have the luck of owning a widescreen computer, a tablet and a smartphone at the same time to perform tests and see if their responsive designs are looking good. Fortunately you don’t have to have all these fancy gadgets as there are fully functional testers that you can find online, let’s take a look at some of them:

Resize My Browser

A great tool to instantly check your site under the main screen resolutions. Just choose one resolution and see how your site looks like, besides you can also customize your own resolutions in case your working for other devices. The tool shows some problem with Chrome and Opera because of the ResizeTo event.

Responsive Design Testing

A neat tool that helps you perform a quick and easy testing of your website in multiple screen widths and/or mobile versions to see how other peoples are perceiving it.

Media Query Bookmarklet

This tool shows you the exact size of the current viewport and which media query has just been fired. You can drag it to your bookmarks bar and use it anytime you want.

Adobe Device Central

Adobe Device Central is a great alternative for those who are not able to check their websites on the different devices directly. The application includes many great features that makes it more than just a previewer, to use Device Central just enter the URL of your site and start switching between the different devices.

Templates and Frameworks

On this section you can find lots of useful resources to help you build your responsive websites. Grid systems, mobile boilerplates and more great elements that you might want to keep within your bookmarks at the time of constructing responsive websites.

320 and Up

This boilerplate runs under the mobile-first principle, where designs are specifically built for mobile screens initially, then 320 and up expands them for tablets and widescreens.

Media Queries for Standard Devices

An useful template for media queries usage in standard devices, the site also covers placeholders for targeting devices and attributes that you might be interested in when making responsive designs.

Mobile Boilerplate

Mobile Boilerplate is custom made template for creating rich and functional mobile web apps. You get cross-browser consistency among A-grade smartphones and fallback support for legacy Blackberry, Symbian and IE Mobile.

Fluid 960 Grid System

If you’re fan of the 960 Grid System by Nathan Smith, then you should take a look at this fluid adaptation of the original project. If you’re comfortable with the original 960.gs, then you already know how to use Fluid 960 Grid System.

Skeleton

Skeleton is a small collection of CSS and JavaScript files that can help you develop websites with ease that look beautiful at any size, either if it’s a 17-inch laptop or an iPhone. Skeleton’s grid is responsive right down to mobile, it’s well organized, well structured and provides most basic styles.

1140 CSS Grid

1140 CSS is an optimized grid to work on screens that can range from mobile size to 1280 pixels wide. It’s a simple flexible grid system that uses media queries for smaller screens, essentially stacking columns on top of one another.

Inuit

This CSS framework was built to provide a solid foundation for designs on small screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort. It also has a custom grid system builder for creating fluid grid systems.

Flurid

Flurid is a liquid grid layout with up to 16 columns.

Gridless

If a grid system for web page layouts seems too restrictive to you, check out Gridless. Gridless is built to be leaner than other grid systems and was constructed with responsive designs in mind. The Gridless code bases its philosophy on the much-discussed mobile first method for crafting websites that must be delivered to a multitude of device environments.

For designers seeking more of a barebones, content-focused approach to responsive web design, you may find yourself quite at home with Gridless.

FluidGrids

FluidGrids is a cross-browser CSS grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.

Less Framework 4

A CSS grid system for creating adaptive layouts. It includes four basic layouts that include tablet, mobile and wide mobile, plus three sets of typography presets.

Fluid Grid System

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.

Tiny Fluid Grid

Tiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths, and percentage-based gutters.

Additional tools

And finally we have all those tools that don’t fit on any of the previous category or perhaps can be included in more than one. Typography tools, additional documentation and more are part of this final excerpt of this article dedicated to responsive web design.

Lettering.js

Lettering.js is a jQuery plugin for controlling the appearance of web types. Whether you’re working with a responsive web design or not, having this kind of control over your web type can help you craft a truly creative look without falling onto image-based solutions.

FitText

FitText helps you make your headlines responsive while assuring that your display text appears optimally on various devices. Despite its simplicity, the plugin’s flexibility leaves the creativity in your hands and is easy to implement.

PXtoEM

Converting absolute units of measurements (i.e. px and pt) into relative units of measurement such as ems and percent (%) for typography, spacing or container widths must be one of the most boring tasks for web developers. Now you have PXtoEM, a tool that provides users with a simple conversion tool to help them with all the math. The site also allows designers the ability to quickly and easily change the base font size of their layout to something that leads to more manageable math.

Web Developer

Web Developer is a browser extension available for Firefox and Chrome, this extension provides designers with several tools that come in handy when developing responsive or fluid websites.

CSS Transitions and Media Queries

Elliot Jay Stocks provides insights into the combination of CSS media queries and CSS transitions under the basic premise of using media queries to design responsive websites that adapt in layout according to browser width.

Responsive Data Tables

This link shows you how Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. By default, data tables can be quite wide, and necessarily so. You could zoom out and see the whole table, but then the text size would be too small to read.

Convert a Menu to a Dropdown for Small Screens

On this link Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow.

WebPutty: Scientific Progress CSS Editing

WebPutty is a web-based CSS editor with auto-save feature and a real-time preview of your website. WebPutty also has CSS selector highlighting and SCSS support (for Sass and LESS), as well as Compass support. To use the tool, just embed a link tag at the end of your website’s head tag.

Debugging CSS Media Queries

On this post the web design expert Johan Brook shares a quick tip for indicating through pure CSS which media query has kicked in. The article also provides a mixing for developers using Sass.

Fluid Grid Calculator

A great and yet simple calculator and fluid grids generator for your responsive designs developed by Harry Roberts. Just provide the number of columns, the width of one column and the width of the gutters, and the tool will generate a fluid grid system in CSS for you.

The Responsive Designer’s Workflow

On this like you can find Luke Wroblewski’s conference notes on Ethan Marcotte’s presentation about applying responsive web design principles and workflows to the redesign of a major newspaper website.

The Goldilocks Approach to Responsive Web Design

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Content Choreography

Useful article where you can read how to properly plan your site to live according to today standards. Begin to choreograph content proportional to size to serve the best possible experience at any width.

Media Queries

A galore of well designed websites that have been created using media queries and responsive web design, definitely a great site to look for inspiration.

Responsive Web Design

And finally we have what might be considered the Holy Bible of responsive web design. Written by Ethan Marcotte and published by A Book Apart, this book is a brilliant resource for learning how to design responsive websites. It covers all the basics behind responsive web, flexible grid systems, flexible images and media queries.

That’s it for this article, we hope this can help you resolve all your doubts regarding responsive web design. Although is not the only way of approaching mobile devices while presenting a good design and functionality, this is definitely one of the most effective solutions nowadays.

Note: Don’t forget to follow us via our Google Plus profile , RSS channel, Facebook page and Twitter so you can find useful resources for web professionals. If you don’t have a Google+ profile yet, please ask for an invitation in the comments :).

 

 

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock

   

336 Responses to “Responsive Web Design, most complete guide”

1. David
   September 13th

   Excellent super mega article!!

   So useful info that my brain is going to explode very soon LOL

   I love it

   Reply
   • WebDesignShock
     September 13th

     Hi David! We’re glad you find this helpful!
2. kiwus
   September 14th

   I absolutely love you guys. Each entry is spot on and sooooooooo useful!

   Reply
   • WebDesignShock
     September 14th

     Thanks Kiwus. keep stopping by for more great articles!
3. Injection Mould
   September 14th

   Very powerful article. I never think about so much articles about website design, and it’s not easy to create a responsive website. Thank you!

   Reply
   • WebDesignShock
     September 14th

     We’re glad you like it mate!
4. Web Design Middlesbrough
   September 14th

   hi thanks for sharing this great article its really helpful to me. there are many things which we can learn from your article. in fact many new things and really liked it. 

   Reply
   • WebDesignShock
     September 14th

     Thanks mate, it’s great you learned with this article!
5. Eric Lenhard
   September 14th

   WOW! This is the longest post i’ve read… and it was so worth it!  Great insight. Thanks.

   Reply
   • WebDesignShock
     September 14th

     Thanks Eric, it’s cool you like it!
6. shan
   September 14th

   Really great information..love your article..thanks for such a nice information..

   Reply
   • WebDesignShock
     September 14th

     We’re glad you like it and find it useful for your projects Shan!
7. Sivo
   September 14th

   The most impresive guide about responsive web design.

   I’m glad to find that kind of guides for novice people like me :D Thanks!

   Reply
8. Claude
   September 14th

   Excellent post! Thank you.

   Reply
   • WebDesignShock
     September 14th

     You’re welcome Claude!
9. web design ft lauderdale
   September 15th

   Oh great, what a collection. Thanks.

   Reply
10. lanny
    September 15th

    This is really good information I have visited this blog to read something fresh and I really admire you efforts in doing so.

    Reply
    • WebDesignShock
      September 15th

      Thanks Lanny, keep visiting the blog every day for more great content!
11. Lauren
    September 15th

    I would like to call this blog as the “Wikipedia blog of web designing”. Every thing is explained very well and in detail. Can we have a similar post on search engine optimization and search engine marketing?

    Reply
    • WebDesignShock
      September 15th

      hehe Thanks Lauren! we are pleased you like this article and sure we will bring you articles about those important subjects!
12. dashaft
    September 16th

    Wau! Super complete article. I’m a web designer 6 years ago, and the budget is never enough to invest so much time to develop all this things. Very good article however

    Reply
13. Cheap Web Design Hosting
    September 17th

    Nice post! Fantastic!!! Bookmarked this web page that has this striking guidance. Will arrive back to see if there are any updates. You, the author, are a master. Many thanks.

    Reply
    • WebDesignShock
      September 19th

      Thanks Mate, and that is awesome that you come back for more great articles!
14. Web Design Studio Shindiri
    September 18th

    Uaaao. In my personal opinion, this is a top-notch article about responsive web design. The ultimate one, really excellent written, comprehensive, with a lot of additional information, can be a real-time saver.
    Thanks for sharing this with us and keep up the good work.

    Reply
    • WebDesignShock
      September 19th

      Thanks mate, Glad you like it, feel free to share it!
15. Gonzo the Great
    September 18th

    Hi,

    thanks for using my picture for the new responsive webdesign of gonzoblog.nl (just under the “Considerations for different devices” title)

    Cheers & Ciao ..

    Reply
16. Nora Reed
    September 24th

    Very nice examples, like it :)

    Reply
    • WebDesignShock
      September 27th

      Glad you liked them Nora!
17. sheena
    September 26th

    Might want to also include the FitVids javascript plugin which allows for fluid videos, similar to FitText.

    http://fitvidsjs.com/

    Reply
    • WebDesignShock
      September 27th

      Thanks Sheena, that is actually very useful. Thanks for sharing it with us
18. Umer
    September 28th

    I was just looking for this. Thanks for sharing.

    Reply
    • WebDesignShock
      October 27th

      Hi Umer, we’re happy you found us!
19. designCo
    October 27th

    You have a catchy site and I have learn some ideas with this. It help me understand how to what is web design. Thank you..

    Reply
    • WebDesignShock
      October 27th

      thanks mate!
20. Terrance
    November 8th

    This is a great article for diving into responsive design. I read a good article here about workflows that might be helpful to others interested in responsive design. 

    Reply
21. Shahbaz Mughal
    November 26th

    Very best Web Site About Web Designing …..

    Reply
    • WebDesignShock
      November 29th

      thanks :)
22. James
    November 29th

    I love this post, really good stuff. I am so passionate about responsive design right now I have created a website based on the skeleton framework that makes it super easy to set up a responsive layout.

    Check it out http://www.responsivedesign.co.nz/

    Cheers

    Reply
    • WebDesignShock
      November 29th

      James, nice work, would you like to write a tutorial explaining how you achieve it ? we can publish it in webdesignshock adding your links to give you great exposure, and we can also include it in our responsive web design guide ;)
    • James
      November 29th

      I would love to have it published in webdesignshock :)
      I’ve added a very basic video tutorialhttp://www.responsivedesign.co.nz/about.html
      I will work on uploading a higher definition video that comes with sound and a lot more detail in the next few days.
      Thanks,James
    • WebDesignShock
      November 30th

      Great james, even better if it’s a text tutorial too :)
23. Thanushka
    November 29th

    Nice article. Thanks for the info.

    Reply
    • WebDesignShock
      November 29th

      You are welcome :)
24. cynthia nelson
    December 20th

    There are so many post on Css3 with Java script and Html5 that really great for web design.

    Reply
    • WebDesignShock
      December 20th

      You’re welcome, always glad to see that our pieces are of great use to visitors’ projects. Best regards
25. Pavlos Linos
    January 10th

    Great resource article! Congrats.

    Reply
26. Web Design El Paso
    January 16th

    As the design is an core issue of any web site.
    The major aim is to get the intention from the users which puts a lot off stress on web designers. & make their work challenging.
    A nice post shared, Thanks for sharing the helping one stuff.

    Reply
27. Bharat
    February 9th

    Awesome article and every web designer must read this…

    Reply
    • WebDesignShock
      February 9th

      Be on the lookout for upcoming posts on the matter. Best regards
28. 車買取
    February 14th

    Thank you very much for sharing this kind of useful information.

    Reply
    • WebDesignShock
      February 14th

      Always glad to see that our pieces are of great use to visitors’ projects. Best regards
29. IT Training Nepal
    February 17th

    nice collection! gives a lot of motivation for designers to start with responsive designs

    Reply
    • WebDesignShock
      February 20th

      Always glad to see that our pieces are of great use to visitors’ projects. Best regards…..!
30. Prodyot
    February 18th

    This is awesome.
    Thanks for keeping me busy for the next 30 days in reading your write-up.
    Good to find the entire list in one place.
    I need not hunt the web-world now to find information on Responsive web designing.
    Thanks for sharing the list.

    Reply
    • WebDesignShock
      February 20th

      Always glad to see that our pieces are of great use to visitors’ projects. Best regards!
31. water rice
    February 21st

    thank you bubby

    Reply
    • WebDesignShock
      February 27th

      Best regards! Don’t forget to follow us on Facebook and Twitter.
32. Shree
    February 29th

    You are super awesome man.
    What a documentation… amazing!

    Reply
    • WebDesignShock
      February 29th

      Shree, thanks and great u like it
33. web dizajn
    March 1st

    A lot of nice resourse and information in this post, thx a lot!

    Reply
34. Web Development
    March 2nd

    Good work done ..
    Responsive web design really brought the web design field into a new arena..
    Nice sharing , thanks for the info..

    Reply
35. Mani
    March 5th

    Really use full  Guidance 

    Reply
    • WebDesignShock
      March 7th

      There’s a lot of discussion surrounding Responsive Web Design, we wanted to give a fresh point of view. Don’t forget to follow us on Facebook and Twitter to check out our latest updates.
36. meladerm reviews
    March 8th

    Simply giving you thanks guys , pertaining to expressing this specific subject , i looked for this specific article for a weeks I appreciate you sharing this.

    Reply
    • WebDesignShock
      March 12th

      Hope it’s of great use in your up coming projects in design. Don’t forget to follow us on Facebook and Twitter. have a good one!
37. Ryan
    April 27th

    Very good details. I have been seeking for anything such as this for some time. Responsive web design is probably the hottest topic in the design community right now. I think responsive web design is a great thing. Thanks for sharing it with us.

    Reply
    • WebDesignShock
      April 27th

      Yes dude, responsible web design became very important since nowadays sites are viewed from computer as from mobile devices.
38. Satbox
    May 2nd

    Awesome! I’m just in the process of designing an new site with PSD layouts and this article has answered a lot of my concerns about browsers and the inevitable spread of hand held and mobile technologies. You definitely made life a little easier

    Thanks

    Reply
    • WebDesignShock
      May 3rd

      Thanks a lot Satbox, we hope you finish your design the best way.
39. James
    May 6th

    I must say thank you for this extremely educational website, i know someone learned a lot from this blog thanks for sharing.

    Reply
    • WebDesignShock
      May 7th

      Thanks for this comment James, learning is one of the main purposes of our site! Best wishes!
40. uat
    June 29th

    Great Article !!! Thanks a Lot…

    Reply
41. Graphic logo designer
    August 27th

    thanks for sharing such a informative post so far i was looking for that kind of information that’s why i just book marked this site for my future ambitions.thanks once again to the author of this amazing post. :)

    Reply
    • WebDesignShock
      September 21st

      Thanks, we are always to help you, feel free to check our future posts.
42. DesignFacet
    August 28th

    Very comprehensive article. Thank you for sharing.

    Reply
43. Ravi
    November 17th

    Grate Website . you have shared helpful post for webdesign.

    Reply
44. Web Development
    February 8th

    Responsive web design is the buzz word in 2013, these websites open equally well in all size screens may it be I pads, tablets, smartphones, laptops, desktops.

    Reply
    • WebDesignShock
      April 10th

      Glad you liked it! Thanks for your input.
45. longbeachwebdesign
    February 24th

    thanks for sharing an awesome list of website. they are really awesome and i think they are probably one of the best. keep up the good work.

    Reply
    • WebDesignShock
      April 10th

      Thanks for your input! Glad to hear you liked it. Cheers.
46. prasanna
    April 8th

    nice article

    Reply
    • WebDesignShock
      April 10th

      Thanks! we hope you enjoy our future posts. Stay tuned.
47. incontinence products
    February 9th

    Nice post.I like the way you start and then conclude your thoughts. Thanks for this information .I really appreciate your work, keep it up.

    Reply
48. Designer's Parade (@Designerparade) (@Designerparade) says:

    September 13, 2011 at 2:40 pm

    #Responsive #WebDesign, most complete guide http://t.co/QivQo8z (via @webdesignshock)

    Reply
49. Troy King (@KingWebServices) says:

    September 13, 2011 at 3:51 pm

    RT @webdesignshock: Responsive Web Design, most complete guide http://t.co/SNRnwgB

    Reply
50. Susanne Nilsson (@Infomastern) says:

    September 13, 2011 at 4:44 pm

    Responsive Web Design, most complete guide http://t.co/CGZDbA7

    Reply
51. Andy Baltes (@andybaltes) (@andybaltes) says:

    September 13, 2011 at 5:43 pm

    RT @mlane: A Complete Guide to Responsive Web Design http://t.co/ZaHYdKT

    Reply
52. Artem Pereverzev (@pereverzev) says:

    September 13, 2011 at 6:44 pm

    RT @Infomastern: Responsive Web Design, most complete guide http://t.co/CGZDbA7

    Reply
53. Renzo Kuomo (@renzokuomo) (@renzokuomo) says:

    September 13, 2011 at 7:20 pm

    Responsive Web Design, most complete guide http://j.mp/ptW11m

    Reply
54. Puya Turkiyan (@pehlavoon) (@pehlavoon) says:

    September 13, 2011 at 8:47 pm

    responsive web design http://ht.ly/6ttQ6 #newmedia #media #webdevelopment #webdesign #design #inspiration

    Reply
55. Justin Roselt (@justinroselt) says:

    September 13, 2011 at 9:44 pm

    Responsive Web Design, most complete guide http://t.co/lPLZvT4

    Reply
56. Vijay (@vijayanathan) says:

    September 13, 2011 at 10:53 pm

    RT @jquerybuzz: Responsive Web Design, most complete guide http://t.co/QOQMxUW

    Reply
57. Tayyab (@tayyabzzz) (@tayyabzzz) says:

    September 13, 2011 at 11:40 pm

    Responsive Web Design, most complete guide http://t.co/xtpR00e via @webdesignshock

    Reply
58. SpaceCraft (@Go_SpaceCraft) says:

    September 14, 2011 at 12:44 am

    The self-proclaimed ‘most complete guide to responsive web design’: http://t.co/Fzk80z4

    Reply
59. Y.Takei (@magorock) says:

    September 14, 2011 at 1:28 am

    RT @kachibito: レスポンシブWebデザインの総まとめ的な記事＞ Responsive web design http://t.co/oDOB13X

    Reply
60. LeandroBerna (@LeandroBerna) says:

    September 14, 2011 at 2:06 am

    RT @themeshock: Responsive web design: The most complete guide, full of tools, resources and articles http://j.mp/nfeKWY by @webdesignshock

    Reply
61. Joebemar Talisic (@iambulleteens) says:

    September 14, 2011 at 3:28 am

    Responsive Web Design, most complete guide http://t.co/jDooMzO via @webdesignshock

    Reply
62. Ayelen (@itzelzaa) says:

    September 14, 2011 at 4:33 am

    Responsive Web Design, most complete guide http://t.co/kodDoGu vía @webdesignshock cc @jckitter

    Reply
63. Toni DG (@unique3w) (@unique3w) says:

    September 14, 2011 at 5:50 am

    Guia para el desarrollo de webs sensibles http://t.co/11yZZUX (vía webdesignshock)

    Reply
64. Marc Garriga (@Marc_Garriga) says:

    September 14, 2011 at 6:43 am

    Responsive Web Design, most complete guide http://t.co/tQKxHMx @responsivewebdesign [the online future is here]

    Reply
65. fyunS (@fyuns) says:

    September 14, 2011 at 7:37 am

    RT @thinker88: Responsive Web Design, most complete guide http://t.co/53o39tA

    Reply
66. Francesco Acerbi (@kina_it) says:

    September 14, 2011 at 8:41 am

    consiglio la lettura RT @JuliusDesign: Responsive Web Design – The most complete Guide http://t.co/oaiKM3P

    Reply
67. Andrea Cardinali (@andreacardinali) says:

    September 14, 2011 at 9:49 am

    @andreapernici responsive web design http://t.co/XDqi2eK

    Reply
68. website berlin (@websiteberlin) (@websiteberlin) says:

    September 14, 2011 at 10:50 am

    Responsive web design http://t.co/Gbosbrk #website

    Reply
69. Robert Williams (@jarobusa) says:

    September 14, 2011 at 11:26 am

    RT @bdconf: Responsive Web Design, a complete guide http://t.co/lUCKiyx

    Reply
70. Ethan Brown (@ethanjbrown) says:

    September 14, 2011 at 12:53 pm

    RT @bdconf: Responsive Web Design, a complete guide http://t.co/lUCKiyx

    Reply
71. Nei Guanlao (@neiguanlao) says:

    September 14, 2011 at 1:50 pm

    Responsive Web Design, most complete guide http://j.mp/ptW11m via @renzokuomo

    Reply
72. Alberto Alfaro (@alberto_alfaro_) says:

    September 14, 2011 at 2:42 pm

    Responsive Web Design, most complete guide
    http://t.co/Yfp9E8x

    Reply
73. trunal (@trunal) says:

    September 14, 2011 at 3:37 pm

    Responsive Web Design, most complete guide http://t.co/xMGp9J9 via @zite #in

    Reply
74. Paul Underwood (@paulund_) says:

    September 14, 2011 at 4:48 pm

    Responsive web design http://t.co/vOAxdy6 awesome in-depth post about responsive web design.

    Reply
75. Manuel Grifalconi (@quirkyweb) says:

    September 14, 2011 at 5:49 pm

    Interessantissimo articolo sul responsive web design http://t.co/Gomz2wt #webdesign

    Reply
76. Andrei (@matzipan) says:

    September 14, 2011 at 6:33 pm

    Responsive Web Design, most complete guide http://t.co/zlWujq3 via @webdesignshock

    Reply
77. Gustavo Morales (@gmoralesc) says:

    September 14, 2011 at 7:39 pm

    RT @jestrade: Responsive Web Design, most complete guide http://t.co/1fBOoc8 via @webdesignshock

    Reply
78. Social Genius® (@SociallyGenius) says:

    September 14, 2011 at 11:28 pm

    RT @_Fleur__: Responsive Web Design, Most Complete Guide – http://ow.ly/6uJ7S #design

    Reply
79. Tammy Jensen (@TKJensen) says:

    September 15, 2011 at 2:02 am

    Responsive Web Design, most complete guide http://t.co/4N1i6xvH via @webdesignshock

    Reply
80. Guido (@muehlwitz) says:

    September 15, 2011 at 3:17 am

    The most Complete Guide of #Responsive #Webdesign! http://t.co/knhycrwm

    Reply
81. Arun Kumar Dadhwal (@arunkrdadhwal) says:

    September 15, 2011 at 4:14 am

    Responsive Web Design, most complete guide http://t.co/DRGzSuCm via @webdesignshock

    Reply
82. David Knaack (@d10avi24d) says:

    September 15, 2011 at 5:05 am

    RT @muehlwitz: The most Complete Guide of #Responsive #Webdesign! http://t.co/knhycrwm

    Reply
83. Hisateru Tanaka (@tanakahisateru) says:

    September 15, 2011 at 6:51 am

    Responsive web design http://t.co/XcHfvvD0

    Reply
84. uxcoosa (@uxcoosa) says:

    September 15, 2011 at 7:52 am

    Responsive Web Design, most complete guide http://t.co/mCKqPFhX

    Reply
85. pixelmuffin (@pixelmuffin) says:

    September 15, 2011 at 8:26 am

    RT @WebFandom: Responsive Web Design – The most complete Guide http://t.co/kU6aS8rZ

    Reply
86. punktweb (@punktweb) says:

    September 15, 2011 at 10:30 am

    Responsive web design: http://t.co/epBl0oQ0

    Reply
87. Stefano Guglielmi (@b4z81) says:

    September 15, 2011 at 1:29 pm

    Responsive Web Design, most complete guide http://t.co/dk5ztG5H

    Reply
88. Erast (@SmiRast) says:

    September 15, 2011 at 3:08 pm

    Responsive Web Design, most complete guide http://t.co/5SEGQ8yM

    Reply
89. tom_tymate (@thb19) says:

    September 15, 2011 at 4:15 pm

    ♺ @charlesbertrand: Responsive web design http://j.mp/nfeKWY

    Reply
90. Stoyan Shishev (@Shishev) (@Shishev) says:

    September 15, 2011 at 8:15 pm

    RT @HTMLBasicTutor Responsive Web Design, most complete guide http://t.co/uSSbv9O7 http://t.co/d64bIZ0f

    Reply
91. Patrik Olsson (@mr210) says:

    September 15, 2011 at 8:34 pm

    Responsive Web Design, most complete guide http://t.co/JqNK22vS via @zite

    Reply
92. Hernan Beati (@hernan_beati) says:

    September 15, 2011 at 8:46 pm

    La introducción más completa sobre #responsive web design: http://t.co/cU8L1xB9

    Reply
93. Nate Ferguson (@TheNateFerguson) says:

    September 15, 2011 at 8:51 pm

    Great article on Responsive Web Design. If you design or develop for web, this is a good refresher. #Design http://t.co/N1tKhpwi

    Reply
94. Pablo Grippo (Paul) (@pablogrippoOk) says:

    September 15, 2011 at 8:56 pm

    “@hernan_beati: La introducción más completa sobre #responsive web design: http://t.co/6ofUT29L” // EXCELENTE!! Muy recomendado para leer.

    Reply
95. Genemix Multimedia (@Genemix_Houston) says:

    September 15, 2011 at 8:56 pm

    RT @pablogrippoOk “@hernan_beati: La introducción más completa sobre #responsive web design: http://t.co/hqI7NAMn” // EXCELENTE!! Muy recomendado

    Reply
96. Nate Ferguson (@HumbleWork) says:

    September 15, 2011 at 8:59 pm

    RT @TheNateFerguson: Great article on Responsive Web Design. If you design or develop for web, this is a good refresher. #Design http://t.co/N1tKhpwi

    Reply
97. StudioDino (@studiodino) says:

    September 15, 2011 at 9:00 pm

    Responsive Web Design, most complete guide. #webdesignright
    http://t.co/0ax524fL

    Reply
98. stevewenrich (@stevewenrich) says:

    September 15, 2011 at 11:03 pm

    RT @jquerybuzz: Responsive Web Design, most complete guide http://t.co/QOQMxUW

    Reply
99. Genemix Multimedia (@Genemix_Houston) (@Genemix_Houston) says:

    September 16, 2011 at 12:08 am

    RT @ThaliDesigner Responsive Web Design, most complete guide http://t.co/hqI7NAMn via @webdesignshock #design #web

    Reply
100. iconshock (@iconshock) (@iconshock) says:

     September 16, 2011 at 5:01 am

     Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
101. Pablo Angeletti (@angeletti) says:

     September 16, 2011 at 5:29 am

     Responsive web design http://t.co/5o4V6QD2 // muy claro el articulo

     Reply
102. Israel Medina (@ikioteck) says:

     September 16, 2011 at 5:33 am

     RT @angeletti: Responsive web design http://t.co/tDNZy0XL // muy claro el articulo

     Reply
103. WebDesignShock (@webdesignshock) (@webdesignshock) (@webdesignshock) says:

     September 16, 2011 at 6:00 am

     Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
104. webdesignergeeks (@webdesignergeek) (@webdesignergeek) says:

     September 16, 2011 at 6:02 am

     RT @webdesignshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
105. Star Windows Lymm (@starwindowslymm) says:

     September 16, 2011 at 6:19 am

     RT @webdesignshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
106. Carolina Ratri (@RedCarra) says:

     September 16, 2011 at 6:25 am

     Responsive Web Design, most complete guide http://t.co/nwftPxZS #webdesign

     Reply
107. Stoyan Shishev (@Shishev) (@Shishev) says:

     September 16, 2011 at 6:26 am

     RT @RedCarra Responsive Web Design, most complete guide http://t.co/sv9WkYot #webdesign http://t.co/vlqoPTxc

     Reply
108. Catalin Rosu (@catalinred) says:

     September 16, 2011 at 6:45 am

     Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
109. Enrico Bock (@sichtweise_) says:

     September 16, 2011 at 6:51 am

     #Responsive Web Design, most complete guide http://t.co/m9fB3xg0 via @webdesignshock

     Reply
110. Hubert SABLONNIERE (@hsablonniere) says:

     September 16, 2011 at 6:52 am

     RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
111. Square One (@squareonemd) says:

     September 16, 2011 at 6:54 am

     A comprehensive guided to responsive web design. http://t.co/TmRZJwbH

     Reply
112. elliottrichmond (@elliottrichmond) says:

     September 16, 2011 at 6:54 am

     Responsive Web Design, most complete guide http://t.co/CRrVE233 via @webdesignshock

     Reply
113. ThemeShock (@themeshock) (@themeshock) says:

     September 16, 2011 at 7:04 am

     Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
114. Marine Dominé (@MarineDomine) says:

     September 16, 2011 at 7:38 am

     RT @themeshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
115. Jake Howlett (@jakehowlett) says:

     September 16, 2011 at 7:40 am

     RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
116. Genemix Multimedia (@Genemix_Houston) (@Genemix_Houston) (@Genemix_Houston) says:

     September 16, 2011 at 7:41 am

     RT @jakehowlett RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
117. Elisa (@elisamu) says:

     September 16, 2011 at 8:03 am

     Responsive Web Design, most complete guide http://t.co/ENCQ5Uf7 via @webdesignshock

     Reply
118. Design Links (@tasty_links) says:

     September 16, 2011 at 8:15 am

     Responsive web design: http://t.co/r7BPHBac

     Reply
119. Christoph K. (@derLobster) says:

     September 16, 2011 at 8:32 am

     RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
120. Per Henrik Lausten (@perlausten) says:

     September 16, 2011 at 9:01 am

     RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
121. John Jardin (@John_Ukuvuma) says:

     September 16, 2011 at 10:19 am

     Very Cool article!! RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
122. Paul Hannan (@pdhannan) says:

     September 16, 2011 at 10:36 am

     RT @John_Ukuvuma: Very Cool article!! RT @catalinred: Responsive web design – a comprehensive guide http://j.mp/nfeKWY

     Reply
123. Colin Kuo (@ColinKuo) says:

     September 16, 2011 at 10:57 am

     Responsive web design http://t.co/V4V4rfev

     Reply
124. quanturium (@quanturium) says:

     September 16, 2011 at 11:00 am

     RT @webdesignshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
125. Francis Suarez (@codex73) says:

     September 16, 2011 at 11:40 am

     Responsive Web Design, most complete guide http://t.co/q8jVMWUS @beep @dandenney @frontendconf @chriscoyier

     Reply
126. Jason (@ecuageek) says:

     September 16, 2011 at 11:51 am

     RT @iconshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
127. Anant Rohankar (@an2r) says:

     September 16, 2011 at 12:33 pm

     Responsive Web Design, most complete guide http://t.co/A4aiVQpT via @webdesignshock

     Reply
128. Facundo Abbiatti (@fabbiatti) says:

     September 16, 2011 at 12:44 pm

     Responsive web guide http://t.co/brXRkRbR

     Reply
129. e-Planner (@e__Planner) says:

     September 16, 2011 at 12:51 pm

     Novo conceito em Web!! O que é Web Design Responsável? http://ht.ly/6wefn

     Reply
130. Pascal Larocque (@pascallarocque) says:

     September 16, 2011 at 1:14 pm

     Responsive web design
     http://t.co/qsFEBLW3

     Reply
131. Twist Image (@twistimage) says:

     September 16, 2011 at 1:22 pm

     Everything you need to know about responsive web design (via @pascallarocque)
     http://ow.ly/6wgrK

     Reply
132. Dan Denney (@dandenney) says:

     September 16, 2011 at 1:24 pm

     RT @codex73: Responsive Web Design, most complete guide http://t.co/hDKApvXT #myin

     Reply
133. Pavlo Kosmos (@PavloKosmos) says:

     September 16, 2011 at 1:28 pm

     Great examples at the bottom !RT @twistimage: Everything you need to know about responsive web design http://ow.ly/6wgrK

     Reply
134. Ivor (@madebyivor) says:

     September 16, 2011 at 1:33 pm

     RT @dandenney: RT @codex73: Responsive Web Design, most complete guide http://t.co/hDKApvXT #myin

     Reply
135. Dave Wilhelm (@davewilhelm) says:

     September 16, 2011 at 1:35 pm

     Reading > Responsive Web Design, most complete guide http://t.co/ZVLTwY3O

     Reply
136. kioskstudio (@kioskstudio) says:

     September 16, 2011 at 1:36 pm

     RT @codex73: Responsive Web #Design, most complete guide http://t.co/OZOYMJR9 #myin

     Reply
137. Benjamin Marte (@benmarte) says:

     September 16, 2011 at 1:41 pm

     Awesome read | RT @dandenney: RT @codex73: Responsive Web Design, most complete guide http://t.co/jcoV6bfq #myin

     Reply
138. Luis (@larsinet) says:

     September 16, 2011 at 1:47 pm

     RT @iconshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
139. Genemix Multimedia (@Genemix_Houston) (@Genemix_Houston) (@Genemix_Houston) says:

     September 16, 2011 at 2:15 pm

     RT @100paces Responsive Web Design, most complete guide http://ow.ly/6w0te

     Reply
140. Rob Lloveras (@RobLL) (@RobLL) says:

     September 16, 2011 at 2:30 pm

     RT @webdesignshock: Responsive web design: Knowing all the secrets with this complete guide http://j.mp/nfeKWY rt Please

     Reply
141. Ronnie (@ronniemcgibbon) (@ronniemcgibbon) says:

     September 16, 2011 at 7:24 pm

     Responsive Web Design, most complete guide http://ow.ly/6w0sh via @1985R

     Reply
142. 100 Paces Web Design (@100paces) says:

     September 17, 2011 at 12:15 am

     Responsive Web Design, most complete guide http://ow.ly/6w0u4

     Reply
143. madebyross (@madebyross) says:

     September 17, 2011 at 12:02 pm

     RT @nithou: Responsive Web Design, most complete guide http://t.co/gq98nRbM via @webdesignshock

     Reply
144. Líam Ferguson (@lmfrgsn) says:

     September 17, 2011 at 2:40 pm

     This is great – Responsive Web Design, most complete guide http://t.co/FcX8bXm9 via @webdesignshock

     Reply
145. Paul /// Egg (@shakerinthedark) (@shakerinthedark) says:

     September 17, 2011 at 3:06 pm

     Fascinating. For web geeks anyway! #webdesign "Responsive web design" http://j.mp/nfeKWY

     Reply
146. Marc Custers (@marccusters) says:

     September 17, 2011 at 4:00 pm

     Responsive Web Design, Most Complete Guide – http://ow.ly/6tRM0 – @WebDesignShock RT @_Fleur__ #design

     Reply
147. reznik_e (@reznik_e) says:

     September 17, 2011 at 4:05 pm

     RT @VandelayDesign: Responsive Web Design, most complete guide – http://ow.ly/6x5F3 (via @WebDesignShock)

     Reply
148. POTG Design (@POTGDesign) says:

     September 17, 2011 at 4:06 pm

     RT @VandelayDesign: Responsive Web Design, most complete guide – http://ow.ly/6x5F3 (via @WebDesignShock)

     Reply
149. Romy azta (@romykedai) says:

     September 17, 2011 at 4:07 pm

     Responsive Web Design, most complete guide – http://t.co/Yc792dR6 (via @WebDesignShock)

     Reply
150. SkyRam (@skyraam) says:

     September 17, 2011 at 4:11 pm

     RT @VandelayDesign: Responsive Web Design, most complete guide – http://ow.ly/6x5F3 (via @WebDesignShock)

     Reply
151. JPR (@JorikPrins) says:

     September 17, 2011 at 4:30 pm

     “@VandelayDesign: Responsive Web Design, most complete guide – http://t.co/qpxZhY8q (via @WebDesignShock)”

     Reply
152. DeborahEdwards-Onoro (@redcrew) says:

     September 17, 2011 at 4:35 pm

     Great resource: #Responsive Web Design from @WebDesignShock: http://t.co/7LXmCXfL #webdesign

     Reply
153. Genemix Multimedia (@Genemix_Houston) (@Genemix_Houston) (@Genemix_Houston) says:

     September 17, 2011 at 4:35 pm

     RT @redcrew Great resource: #Responsive Web Design from @WebDesignShock: http://t.co/v8Q9F1qn #webdesign

     Reply
154. Peter Maleh (@petermaleh) says:

     September 17, 2011 at 5:13 pm

     RT @redcrew: Great resource: #Responsive Web Design from @WebDesignShock: http://t.co/7LXmCXfL #webdesign

     Reply
155. Design Vibe Studio (@designVibeWeb) says:

     September 17, 2011 at 5:21 pm

     Responsive Web Design, most complete guide http://t.co/qmLmWhz2

     Reply
156. marcvandaele (@marcvandaele) says:

     September 17, 2011 at 6:24 pm

     RT @marccusters: Responsive Web Design, Most Complete Guide – http://ow.ly/6tRM0 – @WebDesignShock RT @_Fleur__ #design

     Reply
157. Nick DiStefano (@npdistefano) says:

     September 17, 2011 at 8:58 pm

     Responsive Web Design, most complete guide – http://ow.ly/6x5F3 (via @WebDesignShock)

     Reply
158. Ben Sky (@Ben_Sky) says:

     September 17, 2011 at 9:13 pm

     Responsive Web Design, most complete guide – http://ow.ly/6x5F3 (via @WebDesignShock)

     Reply
159. mehul khokhani (@mehulk) says:

     September 17, 2011 at 9:26 pm

     Responsive Web Design, most complete guide http://t.co/oAa6KExj via @zite

     Reply
160. Dries Bultynck (@DriesBultynck) says:

     September 18, 2011 at 6:59 am

     @xavez heb hier al een goeie leidraad. Ben alleen niet zo bekend met fluid grids etc. http://ow.ly/6xrRd

     Reply
161. Jan Rajtoral (@gonzodesign_) says:

     September 18, 2011 at 7:15 am

     .. cool, my picture of the gonzoblog is used here (http://t.co/j7CmL31y) ~ Responsive web design | http://t.co/g3LhP8cn – webdesignshock

     Reply
162. Raoul van den Berg (@raoulvandenberg) says:

     September 18, 2011 at 4:23 pm

     Complete Guide to Responsive Web Design http://t.co/bU1DXhxP

     Reply
163. สฤณี อาชวานันทกุล (@Fringer) says:

     September 19, 2011 at 2:39 am

     RT @thainetizen: Responsive Web Design @media query ตรวจขนาดหน้าจออุปกรณ์ http://t.co/TnUrbDfp

     Reply
164. DKl3in (@dkl3in) says:

     September 19, 2011 at 5:31 am

     Responsive web design, most complete guide http://t.co/l7D76lfI

     Reply
165. arjun/aj (@arjun_aj) says:

     September 19, 2011 at 11:07 am

     Responsive Web Design, most complete guide http://t.co/z8cRdEcC

     Reply
166. matt (@engmatthew) says:

     September 19, 2011 at 1:26 pm

     Breakdown on Responsive Web Design. http://t.co/2eF8b4WV

     Reply
167. Creative Services (@creativeservice) says:

     September 19, 2011 at 1:26 pm

     Breakdown on Responsive Web Design. http://t.co/t9eX2tPf

     Reply
168. Jasper (@worldstarman) says:

     September 19, 2011 at 5:11 pm

     Responsive Web Design, most complete guide http://t.co/9q2Li8kc via @webdesignshock

     Reply
169. Brandon Setter (@bsetter) says:

     September 19, 2011 at 8:35 pm

     @_jeremyharris good article on responsive design http://t.co/HlgNV2Yh

     Reply
170. webdeveloper_topics (@webdev_topics) says:

     September 19, 2011 at 10:42 pm

     Responsive web design http://t.co/x8bFHfYp

     Reply
171. vonstark (@vonstark32) says:

     September 20, 2011 at 12:28 am

     開發網站,手機? 一次設計. 全部適用的好文. http://t.co/pjGE9qQ3 (via WebDesignShock)

     Reply
172. WebDesignShock (@webdesignshock) (@webdesignshock) says:

     September 20, 2011 at 4:00 am

     All you have to know (really) about responsive web design http://t.co/XCf6TivT RT please

     Reply
173. Alfonso Navarro (@datainfoweb) says:

     September 20, 2011 at 4:09 am

     RT @webdesignshock: All you have to know (really) about responsive web design http://t.co/XCf6TivT RT please

     Reply
174. iconshock (@iconshock) (@iconshock) says:

     September 20, 2011 at 5:50 am

     All you have to know (really) about responsive web design http://t.co/3RtNaNLv RT please

     Reply
175. ThemeShock (@themeshock) (@themeshock) says:

     September 20, 2011 at 6:10 am

     All you have to know (really) about responsive web design http://t.co/SetD4cca RT please

     Reply
176. Paul Andrew (@speckyboy) says:

     September 20, 2011 at 6:35 am

     Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
177. viktoriana (@komiska) says:

     September 20, 2011 at 6:36 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
178. Manuel Ressel (@manuelressel) says:

     September 20, 2011 at 6:38 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
179. Wouter Mellaart (@tdme) says:

     September 20, 2011 at 6:39 am

     "Responsive web design" http://ow.ly/6ziu5

     Reply
180. Jorgen H. (@_Jorgen) says:

     September 20, 2011 at 6:41 am

     (Web)designers mustread: RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE #design #html5 #css3

     Reply
181. Eclipse Creative (@eclipse_agency) says:

     September 20, 2011 at 6:41 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
182. Alexander Gut (@dair_media) says:

     September 20, 2011 at 6:43 am

     RT @manuelressel: RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
183. Unik Experience (@UnikExperience) says:

     September 20, 2011 at 6:43 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
184. Bastien Heynderickx (@hachbe) says:

     September 20, 2011 at 6:44 am

     Responsive Web Design, most complete guide (EN) – http://t.co/7HC2bII2 (via @speckyboy) #responsive #Webdesigner #Webdesign #webdeveloper

     Reply
185. Enrico Dell'Oste (@smartpixel_it) says:

     September 20, 2011 at 6:45 am

     RT @speckyboy: responsive #webdesign – The most complete guide http://ow.ly/6y6ZE

     Reply
186. TheGraphicPost (@TheGraphicPost) says:

     September 20, 2011 at 6:48 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
187. Justin Mulder (@JustinMulder) says:

     September 20, 2011 at 6:51 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
188. Emiel Kwakkel (@eKwakkel) says:

     September 20, 2011 at 6:53 am

     The complete responsive webdesign exposition. http://t.co/7MQxNxer #css #mobile #ux

     Reply
189. Kateme (@KatemeMad) says:

     September 20, 2011 at 6:53 am

     Responsive Web Design, most complete guide http://t.co/vdlWVVOX vía @webdesignshock

     Reply
190. Internet Logistics (@InternetLogis) says:

     September 20, 2011 at 6:53 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE – handy guide to keep in mind when designing a site

     Reply
191. Andy Baltes (@andybaltes) (@andybaltes) says:

     September 20, 2011 at 6:54 am

     Responsive Web Design, most complete guide http://t.co/7ExKTmmi

     Reply
192. Diego Magalhães (@dgomesbr) says:

     September 20, 2011 at 6:58 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
193. Nadeem Akbar (@NadAkbar) says:

     September 20, 2011 at 6:59 am

     RT @speckyboy Responsive Web Design – The most complete guide http://ow.ly/6y6ZE >> quality hints and tips

     Reply
194. Web Design Filter (@WebDesignFltr) (@WebDesignFltr) says:

     September 20, 2011 at 6:59 am

     RT @speckyboy Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
195. Christopher McCann (@letterpress_se) says:

     September 20, 2011 at 7:14 am

     Responsive Web Design, most complete guide http://t.co/LES00qws #ux

     Reply
196. Joseph Morrison (@Drive85) says:

     September 20, 2011 at 7:17 am

     Good tips and advice on responsive #webdesign: http://t.co/HLdGjNWo better #UX and #UI no matter what device viewed by the end user.

     Reply
197. Deodato Tanus (@deodato_tanus) says:

     September 20, 2011 at 7:19 am

     Guia Completo para Web Design – Desenvolvendo site com diferentes resoluções de tela
     http://t.co/u4vjpECi via @webdesignshock

     Reply
198. Pablo Liz (@pabloliz) says:

     September 20, 2011 at 7:32 am

     Bookmark this: Complete guide to Responsive Web Design http://t.co/8ZIsBKSS Info reciente, detallada y completa.

     Reply
199. Nat Al-Tahhan (@NatAltDesign) says:

     September 20, 2011 at 7:43 am

     Excellent article on responsive web design, worth a read for both designers and devs: http://t.co/j0g0jyjy #webdesign

     Reply
200. Nicola Jones (@aMixedmedia) says:

     September 20, 2011 at 7:45 am

     RT @NatAltDesign: Excellent article on responsive web design, worth a read for both designers and devs: http://t.co/j0g0jyjy #webdesign

     Reply
201. Andy Fuller (@designbull) says:

     September 20, 2011 at 7:51 am

     RT @NatAltDesign: Excellent article on responsive web design, worth a read for both designers and devs: http://t.co/j0g0jyjy #webdesign

     Reply
202. Brian (@brianlabs) (@brianlabs) says:

     September 20, 2011 at 8:32 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
203. Sambacine Produções (@Sambacine) says:

     September 20, 2011 at 8:41 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
204. Ivan (@helvetious) says:

     September 20, 2011 at 8:50 am

     All you have to know (really) about responsive web design http://t.co/sUheoOrR

     Reply
205. Rebecca Odim (@bexodim) (@bexodim) says:

     September 20, 2011 at 8:58 am

     RT @webdesignshock: All you have to know (really) about responsive web design http://t.co/XCf6TivT RT please

     Reply
206. Matt Zimmermann (@influxweb) says:

     September 20, 2011 at 10:11 am

     RT @iconshock: All you have to know (really) about responsive web design http://t.co/3RtNaNLv RT please

     Reply
207. PelFusion (@pelfusion) says:

     September 20, 2011 at 12:00 pm

     Responsive Web Design – The most complete guide http://ow.ly/6zirX

     Reply
208. Rudo S. Cox (@EXEDoN) says:

     September 20, 2011 at 12:04 pm

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
209. Web Design Filter (@WebDesignFltr) (@WebDesignFltr) says:

     September 20, 2011 at 12:06 pm

     RT @pelfusion Responsive Web Design – The most complete guide http://ow.ly/6zirX

     Reply
210. Volodymyr (@vl2r) says:

     September 20, 2011 at 1:01 pm

     RT @pelfusion: Responsive Web Design – The most complete guide http://ow.ly/6zirX

     Reply
211. Gunter Hasse (@comstreet_de) says:

     September 20, 2011 at 2:42 pm

     RT @speckyboy
     #Responsive #Web #Design – The most complete guide http://ow.ly/6y6ZE

     Reply
212. Ahmed (@odigital901) says:

     September 20, 2011 at 2:43 pm

     Responsive Web Design, most complete guide http://t.co/Z4E4ox14 #webdesign #webdev #CSS3

     Reply
213. Caroline Huet (@karodesignFR) says:

     September 20, 2011 at 3:00 pm

     Responsive Web Design, most complete guide http://t.co/p10po7OL via @webdesignshock

     Reply
214. Abel Castillo (@neneholic) says:

     September 20, 2011 at 6:04 pm

     Responsive Web Design, most complete guide http://t.co/rehaTAzm

     Reply
215. PatNarciso (@PatNarciso) says:

     September 20, 2011 at 8:50 pm

     RT @dandenney Responsive Web Design, most complete guide http://t.co/DAgvCMjz

     Reply
216. Martin Risgaard (@Risgaard) says:

     September 21, 2011 at 1:50 am

     RT @beantin: Detailed monster post! RT @letterpress_se: Responsive Web Design, most complete guide http://t.co/DZqNKIK6 #ux

     Reply
217. AndreasHeissenberger (@AHeissenberger) says:

     September 21, 2011 at 3:20 am

     Responsive web design: If you’ve been work­ing in the web design field for the past cou­ple of years you sho… http://t.co/zhL2lrHJ #gr

     Reply
218. Fabio Volpe (@lazydevorg) says:

     September 21, 2011 at 5:14 am

     RT @speckyboy: Responsive Web Design – The most complete guide http://ow.ly/6y6ZE

     Reply
219. SoHo (@SoHoTwitt) says:

     September 21, 2011 at 7:50 am

     Responsive Web Design, most complete guide http://t.co/2IhhPKzo

     Reply
220. Glucone (@Glucone) says:

     September 21, 2011 at 7:53 am

     RT @SoHoTwitt: Responsive Web Design, most complete guide http://t.co/2IhhPKzo

     Reply
221. Alonso Arias (@AlonsoKellogs) says:

     September 21, 2011 at 4:03 pm

     Responsive Web Design, most complete guide http://t.co/8GEKaA3K vía @webdesignshock

     Reply
222. Vox Teneo (@voxteneo) says:

     September 21, 2011 at 8:03 pm

     #Responsive #WebDesign, most complete #guide – http://t.co/4ixG97NC

     Reply
223. Laurent DEMONTIERS (@L_Demontiers) says:

     September 22, 2011 at 12:15 pm

     Responsive Web Design, most complete guide http://t.co/KSLAqAUj #fav

     Reply
224. Franck Maurin (@franckmaurin) says:

     September 22, 2011 at 12:17 pm

     RT @L_Demontiers: Responsive Web Design, most complete guide http://t.co/SXobipCU #fav

     Reply
225. emery (@semantiqueweb) says:

     September 22, 2011 at 12:19 pm

     RT @L_Demontiers: Responsive Web Design, most complete guide http://t.co/KSLAqAUj #fav

     Reply
226. Jeffwebdesign (@Jeffwebdesign) says:

     September 22, 2011 at 12:20 pm

     RT @L_Demontiers: Responsive Web Design, most complete guide http://t.co/KSLAqAUj #fav

     Reply
227. Olivier Nourry (@OlivierNourry) says:

     September 22, 2011 at 12:25 pm

     bravo @alsacreations , cité dans Responsive web design http://t.co/sms0vVzc ! #rwd #in #v ping @goetter @PhilippeVay @diou

     Reply
228. Walker Richardson (@wjrichardson) says:

     September 22, 2011 at 12:53 pm

     this is my new conquest, my new obsession: http://t.co/Ii7uJWeQ

     Reply
229. Omar Heron (@purstudios) says:

     September 22, 2011 at 4:54 pm

     @jivanium this is what i wanted to send this to you earlier. Enjoy: http://t.co/r0rG1KoZ

     Reply
230. Tim Klapdor (@timklapdor) says:

     September 23, 2011 at 5:26 pm

     Responsive web design http://j.mp/nrRseD (via Instapaper)

     Reply
231. Traci Toguchi (@tracitoguchi) says:

     September 24, 2011 at 2:51 pm

     Responsive Web Design Guide http://t.co/uS0Rfbtm #awesomesauce

     Reply
232. Brian Lacey (@FreedomNutz) says:

     September 24, 2011 at 4:00 pm

     Responsive Web Design, most complete guide http://t.co/MnX9luXM via @webdesignshock

     Reply
233. SpaceCraft (@Go_SpaceCraft) (@Go_SpaceCraft) says:

     September 24, 2011 at 7:26 pm

     The self-proclaimed ‘most complete guide to responsive web design’: http://t.co/FoANDdGC

     Reply
234. Ahmed (@odigital901) says:

     September 25, 2011 at 6:47 pm

     Responsive Web Design, most complete guide http://t.co/Z4E4ox14

     Reply
235. Bluemoon (@buumoon) says:

     October 9, 2011 at 11:19 pm

     [bookmark] วิธีทำเว็บเรสปอนซีฟ http://t.co/HCb2aUbW #aroi

     Reply
236. I'm Gorn, Nattakorn (@ntklp) says:

     October 9, 2011 at 11:21 pm

     RT @buumoon: [bookmark] วิธีทำเว็บเรสปอนซีฟ http://t.co/HCb2aUbW #aroi

     Reply
237. Lh (@everysundays) says:

     October 9, 2011 at 11:43 pm

     RT @buumoon: [bookmark] วิธีทำเว็บเรสปอนซีฟ http://t.co/HCb2aUbW #aroi

     Reply
238. Domenico de Feo (@mantizlab) (@mantizlab) (@mantizlab) says:

     October 10, 2011 at 5:19 pm

     Responsive web design http://t.co/PWUPzOBy

     Reply
239. Seba Contreras (@eseceve) says:

     October 10, 2011 at 10:59 pm

     Responsive Web Design, most complete guide http://t.co/zhw3IadL A simple vista se ve buena. Durante la semana la tendré que leer

     Reply
240. Katalin Horvath (@muanyagtanyer) says:

     October 11, 2011 at 8:08 am

     Responsive Web Design, most complete guide http://t.co/6BDgQisO via @webdesignshock

     Reply
241. Lorena Ruiz Rios (@lore_kalos) says:

     October 12, 2011 at 10:35 am

     Responsive Web Design, most complete guide http://t.co/90zApboX #web #design

     Reply
242. Cid Equihua Ortiz (@CidEquihua) says:

     October 12, 2011 at 10:37 am

     RT @lore_kalos: Responsive Web Design, most complete guide http://t.co/90zApboX #web #design

     Reply
243. Blind Sheep (@BlindSheeps) says:

     October 12, 2011 at 2:02 pm

     http://t.co/Nq2ebpJi very good read on responsive web design principals http://t.co/rnab6VcD

     Reply
244. Robert Visser (@PageRankSEO) (@PageRankSEO) says:

     October 12, 2011 at 9:54 pm

     Responsive Web Design, most complete guide /via @WebDesignShock http://t.co/B5KhQQPz #responsive_design

     Reply
245. Joomla Sydney - Pete (@astroboysoup) says:

     October 12, 2011 at 10:09 pm

     RT @PageRankSEO: Responsive Web Design, most complete guide /via @WebDesignShock http://t.co/B5KhQQPz #responsive_design

     Reply
246. Morten Skogly (@mskogly) says:

     October 13, 2011 at 3:17 pm

     Reading Responsive web design http://t.co/LYCT7s4N

     Reply
247. Emily (@BlshngHarlequin) says:

     October 13, 2011 at 5:01 pm

     Responsive Web Design, most complete guide http://t.co/aho76Ghe via @webdesignshock

     Reply
248. Synerg'heTiC (@synerghetic) says:

     October 14, 2011 at 7:04 am

     Guide très complet du responsive design (EN) http://t.co/xS9F62pN

     Reply
249. Loïc Huvé (@LoicUV) says:

     October 14, 2011 at 7:59 am

     RT @synerghetic: Guide très complet du responsive design (EN) http://t.co/xS9F62pN

     Reply
250. Miguel Alas (@Grafowebdesign) says:

     October 14, 2011 at 12:36 pm

     Responsive Web Design, most complete guide http://t.co/jhQqBllr via @webdesignshock

     Reply
251. eric delcroix (@erdelcroix) says:

     October 15, 2011 at 6:11 pm

     Responsive web design http://t.co/OUU6emcn

     Reply
252. Glynn Phillips (@GlynnPhillips) says:

     November 7, 2011 at 8:20 am

     Not read it all but it seems to cover a lot. responsive design complete guide
     http://t.co/EXJjQvDi via @webdesignshock

     Reply
253. Kennosuke Yamaguchi (@K14) says:

     November 8, 2011 at 2:03 am

     Responsive Web Design,のまとめエントリー。リファラーから役立つTipsまとめまであります。凄い。 http://t.co/fQGzGcLK

     Reply
254. Mari Taoka Hurst (@mariqtaro) says:

     November 9, 2011 at 5:07 am

     PC/Mobile/Smart phoneなどマルチディバイスに対応できる、Responsive Web Designは、デジタルメディアのデザインプロセスにおいて、今後非常に重要な手法になると思う。
     http://t.co/VJKXUVkL

     Reply
255. Mustafa Darwish (@1MustafaDarwish) says:

     November 9, 2011 at 12:04 pm

     Responsive Web Design, most complete guide http://t.co/xjKI91SC via @webdesignshock

     Reply
256. Andreas Komodromos (@NYAndreas) says:

     November 9, 2011 at 4:01 pm

     #Responsive #WebDesign, a complete guide for optimizing websites for iOS/Android tablets and phones http://t.co/3XkdwBBk via @webdesignshock

     Reply
257. Noumaan Yaqoob (@noumaan_) says:

     November 10, 2011 at 8:54 am

     Responsive Web Design http://t.co/J3xPMRBa

     Reply
258. Alexandrino Santana (@alexandrinosan) says:

     November 10, 2011 at 3:02 pm

     Responsive Web Design: http://t.co/tAigDyor

     Reply
259. Mathieu.B (@Matteobz) says:

     November 11, 2011 at 1:22 pm

     Responsive Web Design, most complete guide http://t.co/cuIHsyT9 via @webdesignshock

     Reply
260. Sylvain FIX (@truffo) says:

     November 11, 2011 at 3:59 pm

     Guide complet sur Responsive Design http://t.co/915OmSWB #webdesign

     Reply
261. Laurent DEMONTIERS (@L_Demontiers) (@L_Demontiers) says:

     November 11, 2011 at 5:23 pm

     RT @truffo: Guide complet sur Responsive Design http://t.co/KSLAqAUj #webdesign

     Reply
262. J.David DOS-SANTOS (@ptitdoss) says:

     November 11, 2011 at 5:55 pm

     RT @L_Demontiers: RT @truffo: Guide complet sur Responsive Design http://t.co/KSLAqAUj #webdesign

     Reply
263. MyWebShop (@_mywebshop) says:

     November 12, 2011 at 3:37 am

     http://t.co/eHHJaMYR : Très bon article pour comprendre et mettre en pratique des design réactifs dans ses proejts…

     Reply
264. Zed (@greenyDeath) says:

     November 12, 2011 at 4:24 am

     Responsive Web Design, most complete guide http://t.co/JXnH2WZW via @webdesignshock

     Reply
265. Martial Marel (@martialmarel) says:

     November 12, 2011 at 7:19 am

     Responsive Web Design, most complete guide http://t.co/kEYKIntw via @webdesignshock

     Reply
266. Creativ e Motion (@creative_motion) says:

     November 12, 2011 at 10:52 am

     Responsive Web Design, most complete guide http://t.co/6UjPnZrk via @webdesignshock

     Reply
267. Bastien Gandouet (@b4stien) says:

     November 14, 2011 at 3:47 am

     RT @L_Demontiers: RT @truffo: Guide complet sur Responsive Design http://t.co/KSLAqAUj #webdesign

     Reply
268. kalle (@keikei) says:

     November 14, 2011 at 6:39 am

     #Responsive #Web #Design, most complete #guide http://t.co/CHIVpeis #article #link

     Reply
269. Mejdi Touati (@MejdiT) says:

     November 15, 2011 at 5:52 am

     RT @L_Demontiers: RT @truffo: Guide complet sur Responsive Design http://t.co/KSLAqAUj #webdesign

     Reply
270. gaucher (@julienGaucher) says:

     November 16, 2011 at 3:10 am

     RT @nicolasgot: Responsive Web Design, most complete guide http://t.co/CUGBDQcA via @webdesignshock

     Reply
271. 9bitStudios (@9bitStudios) (@9bitStudios) says:

     November 23, 2011 at 8:10 am

     Responsive Web Design, most complete guide http://t.co/pQl49rNM via @webdesignshock

     Reply
272. User Experience SE (@uxs) says:

     December 25, 2011 at 1:31 pm

     Responsive web design http://t.co/yK8XDocg #ux

     Reply
273. Stoyan Shishev (@Shishev) (@Shishev) says:

     December 25, 2011 at 1:33 pm

     RT @uxs Responsive web design http://t.co/dtXd6aIO #ux http://t.co/eNsUKEWt

     Reply
274. Gilberto Ang (@Gil_ang) says:

     December 29, 2011 at 11:45 pm

     Responsive Web Design, most complete guide http://t.co/qi4qpWkE via @webdesignshock

     Reply
275. Jeremy Glover (@jagwire16) says:

     January 6, 2012 at 9:38 am

     Responsive Web Design, most complete guide http://t.co/grX6com5 via @webdesignshock

     Reply
276. Matt Brown (@themattbrown) says:

     January 6, 2012 at 11:06 am

     RT @jagwire16: Responsive Web Design, most complete guide http://t.co/grX6com5 via @webdesignshock

     Reply
277. carlos cubillos (@_onihachi_) says:

     June 15, 2012 at 11:56 am

     Responsive Web Design, most complete guide – for real http://t.co/zlqAmT5n via @webdesignshock

     Reply
278. Víctor Gómez (@machbel) says:

     June 21, 2012 at 3:40 am

     Adaptando http://t.co/ONhzNKJ0 a un diseño fluido. Una guia muy util en http://t.co/42yOxR5i

     Reply
279. Francisco Vargas (@haripako) says:

     June 30, 2012 at 5:07 am

     So, what’s Responsive web design? http://t.co/8Xms7kds via @kippt

     Reply
280. Mohammad Jeprie (@desaindigital) says:

     July 3, 2012 at 6:45 pm

     Responsive web design http://t.co/8zjkM9Jx

     Reply
281. tocateunvals (@tocateunvals) says:

     July 7, 2012 at 10:46 am

     Análisis y galería de Responsive Web Design, muy buenos ejemplos http://t.co/uHWOmD00

     Reply
282. Stoyan Shishev (@Shishev) (@Shishev) says:

     July 7, 2012 at 10:46 am

     RT @tocateunvals Análisis y galería de Responsive Web Design, muy buenos ejemplos http://t.co/sv9RNonz http://t.co/DhAmIQ3r

     Reply
283. Sébastien Touzé (@sebtouze) says:

     July 19, 2012 at 9:54 am

     @antoinefink tu as cherché du côté du responsive design par ex. http://t.co/qeBzlycl ? Ou tu cherche uniquement pour les hautes densités ?

     Reply
284. Eric R. Shinn (@eric_shinn) says:

     July 25, 2012 at 9:38 pm

     Responsive Web Design, most complete guide http://t.co/PrYyebBs via @webdesignshock

     Reply
285. David Lee (@davidleedesign) says:

     August 14, 2012 at 4:32 am

     Responsive Web Design, most complete guide http://t.co/t5jvqY3g via @webdesignshock – A very long and detailed article but worth reading!

     Reply
286. Epic 4 Media (@Epic4Media) says:

     August 16, 2012 at 6:35 pm

     Responsive web design | Web Design Shock | – most complete guide http://t.co/256uDhRG

     Reply
287. Grupo Turé (@GrupoTure) says:

     August 31, 2012 at 10:55 am

     Es importante tomar en cuentas las diferencias de diseño al crear una página web y una móbil http://t.co/N8Hcg4Wd excelente artículo!

     Reply
288. My life as Ana (@anarueda_soccer) says:

     August 31, 2012 at 11:00 am

     RT @GrupoTure: Es importante tomar en cuentas las diferencias de diseño al crear una página web y una móbil http://t.co/N8Hcg4Wd excelen …

     Reply
289. Moisés Gutiérrez (@mogurod) says:

     September 15, 2012 at 4:43 am

     Mi manera de divertirme el fin de semana. Aprendiendo sobre Responsive Design: http://t.co/4C5ksZZv

     Reply
290. Jérôme COMMARET (@jcommaret) says:

     September 18, 2012 at 6:44 am

     Un très bon post sur le responsive web design : http://t.co/pwDRo28L

     Reply
291. Stéphane (@KoleGramyst) says:

     September 18, 2012 at 6:52 am

     RT: @jcommaret: Un très bon post sur le #responsive #webdesign : http://t.co/54MCz8nB #ressources #rwd

     Reply
292. Ángel Sánchez (@angelcreative) says:

     February 11, 2013 at 6:29 pm

     Responsive Web Design, most complete guide http://t.co/6CCkiMOg vía @webdesignshock

     Reply
293. Maggy Rivera (@ppicara) says:

     March 1, 2013 at 10:14 am

     Responsive Web Design, most complete guide http://t.co/r7q4jCVFsR via @webdesignshock

     Reply
294. Alexander Abramov (@abramov_a_m) says:

     March 16, 2013 at 2:31 am

     It’s very interesting and useful! Responsive #WebDesign, most complete #guide #vk #b24 http://t.co/0bIEfkqssx via @webdesignshock

     Reply
295. Adrian Zoe (@zoeindesign) says:

     March 17, 2013 at 3:28 am

     Responsive Web Design, most complete guide http://t.co/9zC80cFumX via @webdesignshock

     Reply
296. Hans van Gent (@jcvangent) says:

     March 18, 2013 at 8:38 am

     Responsive web design, awesome and very complete guide #responsive #webdevelopment http://t.co/i7UTLnUCd7

     Reply
297. Zedimage.com (@zedimage) says:

     March 19, 2013 at 8:04 pm

     > Everything you need to know about responsive webdesign http://t.co/KpVjnUsJK3

     Reply
298. Onion-Nake (@onionnake) says:

     March 26, 2013 at 6:07 am

     RT @butthun: บทความนี้มีประโยชน์กับคนพัฒนาเว็บมาก ออกแบบเว็บแบบ Responsive Web Design ฉบับสมบูรณ์มากๆ http://t.co/rSuEWcnh #Aroi #DigiMedia

     Reply
299. Tutu (@AkhilasGilmart) says:

     March 28, 2013 at 4:59 am

     Responsive Web Design, most complete guide http://t.co/TVzH33TBQE via @webdesignshock

     Reply
300. Mika Mäkelä (@mika_makela) says:

     April 8, 2013 at 2:15 am

     Responsive Web Design, most complete guide http://t.co/MJI1GM9VOg via @webdesignshock

     Reply