A brief Introductions
Responsive websites by the name goes responds to the width of the devices. With the single site, the site works good on all the devices whether its is a mobile device, or whether its tablet or desktop.
Mobile websites whereas on other hand are targeted specifically for mobile devices. Mobile websites are hosted as part of sub domain of main site. And hence mobile site is different entity to desktop site.
How are Responsive Sites and Mobile websites Developed
Responsive websites are developed by writing series of media queries for different breakpoints. Media queries refer to the css written for different screen sizes.For example if we want to target a mobile device between 320 to 480 pixels, we write css media queries targeting these screen sizes. Breakpoints refers to these screen sizes we are targeting via media queries. For example screen sizes between 320-480 pixels is a breakpoint so as 680-979px.
Mobile sites on other developed using popular frameworks like Jquery and Sencha, or by custom written CSS. They normally target single break points.
Recommendations for using Responsive or Mobile websites
Responsive websites works very well for small to medium sized website. In case if showing all of the website content or majority of website content is main priority, responsive websites are the way to go. To top it up, its in the google recommendations for SEO. Since responsive websites uses the same url whichever devices its viewed on there is no extra headache in doing SEO for different urls. And also the maintenance is also relatively easy
as we will be only looking after a single site.
Mobile websites on other hand wins if we want to show only subset of a site to the visitors. The advantages for using mobile websites are that its relatively fast to load and user can be directed around website with more ease.