Edwi Jonk: We regard to mobile sites there are basically three option, namely:
* Responsive Design: In short the web site responds to the width of the screen on the same URL.
* Dynamic HTML: In short the CMS serves different HTML to mobile users then to desktop users on the same URL.
* M Dot Site: In short this is a dedicated site to mobile users, frequently served on a sub-domain "m".
All these three options are supported by Google. The dynamic HTML and the m dot site are dedicated to the mobile user and they are frequently better optimized for mobile users. However they are more complicated, in the sense that you probably want/need to sniff user agents and let the server respond the right way, and thereby it might not be the best option for the "average" user. Responsive design on the other hand is a little less complicated in the sense that you edit your CSS/HTML code. Therefore with responsive design you don`t really need to touch the server side, i.e. you leave it over to the client-side.
So to me responsive design is a better option, not because it is better (in contrast), because it is a little easier to implement and manage. For more information, please check the "Reference links".
Always try and design for responsive first, it's always a pain to try and convert a desktop site back to responsive - it obviously can be done though. (this obviously depends on how complex your current site is!)
Decide what you don't need - page speed is import with responsive design, if you have a rotating gallery with 5+ slides, consider trimming that down to 2 or 3, make your site as lean as possible.
Learn about other speed saving techniques.
test, test and test again.
Keep on learning.
Or, hire an agency or freelancer ; - )
Dave Elliott: basically, what andy said! Just choose a framework rather than do it from scratch, saves so much time, especially seeing as you haven't done one before. We are currently favouring bootstrap 3.
Jelani Burton: Thanks +Andy Wigglesworth. ;Do you think using js for image resizing is the best way to go? ;Also, I heard that there can sometimes be problems with responsive sites on iPhones & iPads because they automatically resize webpages to fit the screen.
+Dave Elliott ;Thanks for the tip! ;I'll look into it!
Andy Wigglesworth: I've never needed to use js for image resizing, from memory, I just use css
img { max-width:100%; }
That makes any image fit 100% within any containing div.
So, to break that down -
Say you have your container div at 100%
Inside that you have two divs floated, one left, the other right, both set to 50% - ;
Any image in one of those left or right would automatically be set at 50%.
As for iphones & ipads, not had a problem personally, but I would suspect the wrong viewport may have been used - probably best to google that...
Hope that helps...
Search Lab Marketing: Hi Jelani, +Andy Wigglesworth ; Is right. ;You don’t need to use js for image resizing. ;With 99.999% of website designs these days you’re going to have a body container housed within a wrapper. ;If you set div.img’s width to max-width: 100% you’re ensuring that the images within that section can only be 100% of the container’s width, so no more runoff images on mobile.
When working with multi-device websites and responsive designs you can use media queries to specify the display for certain viewports, allowing you to set say 100% for items on smaller devices but 50% (in the case of two side-by-side divs) for resolutions between 800 – 1200px (or whatever set you need to adjust on).
Any thoughts on designing a mobile website? Anyone have experience w/ responsive design? 
