Both, responsive website design and a standalone mobile site, when done properly, will transform a website to be accessible to end-users on all types of devices and screen sizes; They both offer an optimized version of your full site, mobile friendly navigation and quicker load time. So what exactly are the differences?, let's go into more detail and see the cons and pros of both mobile solutions below.
With responsive web design, the desktop website and the mobile website are both one and the same website, whereby the underlying code automatically adjusts the web page layout according to the users device and screen size (large or small), and by orientation (portrait or landscape). Responsive design shifts your site between these layouts on-the-fly.
PROS: No new content needed. - Same URL for every device. - All features from full site still available. - Can be highly customized for mobile users. - Adheres fully to Google guidelines.
CONS: More expensive. - Takes longer to produce. - Users can NOT opt to view full desktop site.
LIVE DEMO: Plorex.com is entirely responsive design, shrink your browser window to about the size of any mobile device, and watch this website layout and navigation adjust to fit its new size. - However, there are still some design components that only users on actual mobile devices will experience, so make sure to also test view Plorex.com on your mobile device for optimal mobile results.
Standalone mobile websites, are essentially a limited version and a copy of your full site, designed to fit and quickly load on mobile devices of all types and sizes. They use a separate set of webpages, stylesheets and even equivalent URL's, they still deliver the same content from the same database as the desktop site. By following annotation guidelines set by Google we are able to let the search engines know when to serve the alternate mobile URL for mobile optimized content, or the default canonical desktop URL.
PROS: Can be designed much faster. - Less expensive. - Users can opt to view full desktop site. - Can be highly customized for mobile users. - Adheres fully to Google guidelines.
CONS: Can end up out of sync with your full site. - Often missing important features from full site. - Different set of URL's.
LIVE DEMO: http://www.elmajewellery.co.uk/mobile_index.php -
EMULATOR: Another very cool option of testing your or any website display for how they function in many different mobile devices, you can enable that via this Mobile Emulator by COWEMO, or the Emulator by Google Chrome.