Responsive Website Design

The screen size is a little off for the iPad. You want 1024 x 768 for what you are going to create in front of you. What you have posted is how many pixels the device has but when creating it you want to keep that 1024 x 768 layout.

I hope I can suggest this but as someone who once planned everything in Photoshop I found designing in the browser to be more efficient and real. I always found that things never ended up the same as what photoshop presented to me. It also doesn't take into account issues that would arise from coding. I still do a rough sketch on paper so I know where things are going to be placed but I find the process moves along faster when you don't spend hours moving things around in PS and instead spend it on the final product.

If you want to give this a try start with the mobile version of the website first and just shrink your browser down to that layout. From there just focus on content and then when you expand to tablet size do the same then move on to desktop. There is a project here on Treehouse called Build a Responsive Website Project taught by Allison It can help explain a little more about designing with responsive in mind.

Ricardo, many thanks for your answer, ok I'll set it up as the dimensions you mentioned. Looking at those dimensions there from the iPad 2, not the retina, so when designing we shouldn't use the retina dimensions - they just have more PPI? I take it I should mock up the mobile (iPhone 5) at 568px x 320px? Or should I leave it at 640px x 1136px?

Also thanks for your advice on designing in the browser, will bare that in mind for the project - will check out the tutorial too.

Yes correct and also your very welcome. :)

Mobile portrait (320x480), Small tablet portrait (600x800), Tablet portrait (768x1024) or by ratio; Mobile 3:2, Tablet 3:4, Desktop ~16:9

I second Ricardo wire on paper then build in browser. All my projects start out at 320x480 and then I break up, that way it covers most smartphone screens even the non iphone.