Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Responsive Web Design, most complete guide

Comments and suggestions in here

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.

responsive01

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.

responsive02

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.

responsive06

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.

    responsive10

    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.

    responsive03

    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.

    responsive04

    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.

    responsive09

    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.

    {title}

    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:

    {title}

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

    {title}

    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:

    {title}

    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.

    responsive11

    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.

    responsive12

    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.
  • responsive13

  • 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.
  • responsive14

  • 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.
  • responsive15

    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.

    responsive16

    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.

    responsive17

    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:

    responsive18

    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).

    responsive07

    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.

    responsive08

    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.

    responsive19

    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.

    responsive20

    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

    responsive63

    Glitch

    responsive64

    Trent Walton

    responsive65

    Think Vitamin

    responsive66

    Deren K.

    responsive67

    Clear Air Challenge

    responsive68

    Do Lectures

    responsive69

    About.com

    responsive70

    Sasquatch Festival

    responsive71

    320 and Up

    responsive72

    Earth Hour

    responsive73

    The Modern Gentleman

    responsive74

    Naomi Atkinson

    responsive75

    Converge SE

    responsive76

    Sleepstreet

    responsive77

    Alsacréations

    responsive78

    Simon Collison

    responsive79

    Sweet Hat Club

    responsive80

    Lapse

    responsive81

    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

    responsive22

    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

    responsive23

    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

    responsive24

    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

    responsive25

    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

    responsive26

    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

    responsive27

    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

    responsive28

    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!)

    responsive29

    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

    responsive30

    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

    responsive31

    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

    responsive32

    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

    responsive33

    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

    responsive34

    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

    responsive35

    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

    responsive36

    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

    responsive37

    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

    responsive38

    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

    responsive39

    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

    responsive40

    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

    responsive41

    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

    responsive42

    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

    responsive43

    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

    responsive44

    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

    responsive44

    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

    responsive45

    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

    responsive46

    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

    responsive47

    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

    responsive48

    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

    responsive49

    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

    responsive50

    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

    responsive51

    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

    responsive52

    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

    responsive53

    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

    responsive54

    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

    responsive55

    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

    responsive56

    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

    responsive57

    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

    responsive58

    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

    responsive59

    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

    responsive60

    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

    responsive61

    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

    responsive62

    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 :).


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

    1. Excellent super mega article!!

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

      I love it

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

    3. 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!

    4. 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. 

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

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

    7. The most impresive guide about responsive web design.

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

    8. Excellent post! Thank you.

    9. Oh great, what a collection. Thanks.

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

    11. 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?

      • hehe Thanks Lauren! we are pleased you like this article and sure we will bring you articles about those important subjects!

    12. 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

    13. 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.

    14. 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.

    15. Hi,

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

      Cheers & Ciao ..

    16. Nora Reed
      September 24th

      Very nice examples, like it :)

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

      http://fitvidsjs.com/

    18. I was just looking for this. Thanks for sharing.

    19. 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..

    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. 

    21. Very best Web Site About Web Designing …..

    22. 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

      • 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 ;)

      • 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

      • Great james, even better if it’s a text tutorial too :)

    23. Nice article. Thanks for the info.

    24. cynthia nelson
      December 20th

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

      • You’re welcome, always glad to see that our pieces are of great use to visitors’ projects. Best regards

    25. Great resource article! Congrats.

    26. 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.

    27. Bharat
      February 9th

      Awesome article and every web designer must read this…

    28. 車買取
      February 14th

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

    29. IT Training Nepal
      February 17th

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

    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.

    31. water rice
      February 21st

      thank you bubby

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

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

    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..

    35. Really use full  Guidance 

      • 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. 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.

    37. 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.

      • Yes dude, responsible web design became very important since nowadays sites are viewed from computer as from mobile devices.

    38. 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

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

      • Thanks for this comment James, learning is one of the main purposes of our site! Best wishes!

    40. Great Article !!! Thanks a Lot…

    41. 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. :)

    42. Very comprehensive article. Thank you for sharing.

    43. Grate Website . you have shared helpful post for webdesign.

    44. 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.

    45. 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.

    46. nice article

    47. Responsive web design is an attractive option – thank you for including the contras in regards to this though. Currently busy with my business, when I have time to devote to it I will invest in a responsive site. Thanks for sharing – love the examples! :)

      • Designer
        July 8th

        Thanks a lot for your input. We hope you have found this useful. Stay tuned for more!

    48. thanks

    49. very informative tutorial.
      thanks for sharing this, excellent work.

      • Designer
        August 15th

        You are welcome. Stay tuned for more posts like this.

    50. It’s good as your other blog posts , thank you for putting up.

    51. Interested in your varied homepage themes. Please keep us posted via email. Am now studying your site. Expect to have an initial draft in a week.

    52. Really nice responsive and good design , very little else we need

    53. Anonymous
      January 27th

      Very good information for people like me new to this. Thnaks!.

    54. wow thanks for this article, I will refer back to it once I get started on my responsive design

      • Designer
        January 28th

        Glad to know that. Stay tuned for more

    55. just wow this is quite long tutorial, but detailed as well. I think the easiest way to create web design using frameworks, in that case you will get some zeroed values to start from. After make some changes by your own wishes and thats it. Now it is about 50% of ebsites all over the world using cms like wordpress.
       On the other hand there are situations when you have something specific/special -then coding becomes very very long and expensive job

      • Designer
        February 3rd

        true, fortunately, web design has evolved so much since the creation of this post that responsive design is something very easy to achieve in in certain way, a must.

    56. this all template are looking very nice thanks for sharing it

    57. Great for mobile devices! Thanks!

    58. Estoy de acuerdo que en los días de hoy es muy importante tener paginas preparadas para móviles y tabletas, gracias.

    59. Wow, talk about a MEGA Post. None come quite as comprehensive as this one :)

      Although it was written a while ago now, so many point ring true with the design standards currently in play today.

      Its more important than ever to have a mobile friendly responsive design today. Most search engines will look at that and factor it in their algorithm. While only a small weight is added, it still is important to tick this box when considering a redesign.

      We’ve recently gone through and implemented many of the points raised in your post. 

      Thanks for sharing.

      Mark

    60. I really like how you mentined that designers should focus on mobile users first when creating a responsive website. Thanks for this as it is still relevant in 2014.

    61. This is perfect guide to explain what is responsive web designing.

    62. An ultimate guide on responsive website design.

    63. Thank you for the amazing article !

    64. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    103. 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    209. 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    260. @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 ?

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

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

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

    264. 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!

    265. 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 …

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

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

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

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

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

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

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

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

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

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

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

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

    278. Post completíssimo sobre o que é Responsive Web Design, algo tão falado atualmente – http://t.co/Nt0IT0rbI6 #soudev

    279. RT @erichideki: Post completíssimo sobre o que é Responsive Web Design, algo tão falado atualmente – http://t.co/Nt0IT0rbI6 #soudev

    280. Post completíssimo sobre o que é Responsive Web Design, algo tão falado atualmente – http://t.co/LQOF5fVqtZ

    Leave a Reply

    Comments

    *