A quick note none of this is set in stone, find your own way that works and use that. This is just a guide from what has been found best practices and what generally works.
To design responsive the work flow can take some adjusting. The process is not really any longer a 2 step process, designing the layout > passing to the coder to code. Responsive design can take a bit more collaboration as the developer should be able to tell you straight away what will work and what won’t or may prove problematic. Sometimes it can also be the case that as the developer builds the site things are not quite “working” as you may have intended at certain screen sizes resulting in more in browser revisions.
Scamps / Quick sketches
Personally this helps me know what is possible straight away. By simply drawing out a few boxes that will represent different screen resolutions and then “fitting” the content in place can save a lot of time in adjusting it when it comes to the actual design. For example you may know you need 3 columns that have a panel in each that sit side by side but then when you get to mobile portrait view these need to become 1 single panel so instantly you know it would be best for these panels to be no larger than 320px in width or 33.33333% if you like. However if you have 4 columns what do they need to do as the screen gets smaller? Are you happy for these to become single columns and therefore stretch wider or do you want them to go into 2 columns and have the widths most likely get smaller, will the content still fit? Remember it is not just 320px for the iPhone (although it is probably your most important) you want to think about here the galaxy s2 has a width of 600px will the layout you intend work the same for both viewports? If not, why not? Is it the layout that needs to be different or just how you intend the layout to change? That is why it is also important too…
Know your viewpoints
When starting a project it is important to know your viewports and what ones you want to work.
Your standard viewports are (obviously the landscape modes of these devices are the opposite way around ):
600px x 320px for Samsung galaxy phones
320px x 480px or 520px for iPhone 5
768px x 1024px tablets mainly iPad but should work fine for others
Designing
When it comes to actually creating the mock-ups you don’t want to have to create 4 or 5 different versions for each viewport right? Didn’t think so!
This is where it is vital to get a working grid in place, this could and perhaps should come from your scamps. It is extremely useful to have your layout work across an equal column layout whether it is 3, 4, 8 or whatever. This makes it so much easier for your layout to be divided up and set out to work across the viewports, it is likely then to be as easy as knowing something goes across 4 columns on the large version then when it shrinks to 320px wide it goes down to 2 and then with the other 2 columns we have a wealth of choices, we can hide them completely, wrap them underneath make them be less prominent e.g. just text strips that go full width.
A quick fire way I find to know if a layout will work is to use masks (I use photoshop but I am sure something similar can be used in indesign) I have my initial layout and then mask off the viewport size. This way I can see what columns will fit and ones that don’t and then can imagine what I would expect them other columns to do. Using this way, even if you are creating multiple layouts, really helps to show you what you will need to change and what you think would be best for it to do when changing, should it wrap, vanish change appearance etc?
Mobile first or progressive enhancement vs. graceful degradation
This is a tricky subject and arguments for every option are valid.
Mobile first or progressive enhancement
This is where the designer and/or developer designs and builds a site to work and fit best on a mobile device. Keeping images, scripts etc to as minimal as possible and giving the user a very nice and quick experience. Then, for larger devices, bringing in more content or adding more to it. An interesting approach and really takes the guess work out of whether a larger layout will work on a smaller device. I wouldn’t say we are at that stage yet, mobile users are growing fast and it is predicated soon that there will be more mobile browser users than desktop. As a developer when I look at a design I instantly think of whether it will work on a mobile device. So in essence this is not a bad approach to take elements from, it should always be in your mind and in your thinking as you design or build.
Graceful degradation
This is pretty much what we do at the moment but could be smoother. This is where you give the site all the whizz bang large graphics and whatever else you want and make the desktop version first and then bring that all back as the screen and device changes. Remember just because that image looks smaller the actual physical size is still as big as the original so that mobile user will be downloading that huge image. This is the drawback to that approach your mobile device has to load in everything that is essentially there for a larger desktop browser. But I think as long as these are compressed as best as possible then this is the way to go. If things like drop shadows etc can also be used with just CSS and not physical images, then even better degradation can happen, as this is a lot less heavy on the loading, but the drawback is ie8 and below will not see these shadows.
I think a combo of the 2 approaches above if possible is the way forward. Obviously first and foremost if you have that powerful desktop browser with a wicked fast internet connection and huge screen you might well want to make your site as pretty as can be. BUT whilst you are doing that it is sticking to that all important grid that will work as you go down screen sizes and always having in your mind “will this work on mobile? Or how will this look/work on mobile?” The easy answer I know but hey that is just what I do. Again each designer can be different so it is what works for you and as long as it is all conveyed correctly from the designer to the developer then all should be well.
Remember the detail
So wire framing and knowing this block will go here, these columns will go here, this main header slider will shrink is fine. But remember when it comes to the content of each area will all the content in that area fit nicely? Does it need to fit? Can we hide elements? What is most important about that section? What should happen to the bits that get chopped out should they be accessible somehow?
A great example of this is hero sliders, it is generally not just an image and if it is then it is a generally a nice big sparkly image that you might not want to just shrink. When areas like these are shrunk they generally end up going from the biggest most important part on the page to a thin strip that looks a little lost and all your other panels have become a lot bigger in comparison and may draw the eye more. So you need to think about how to get around that can the image lose some of the less important parts? If the layout has an important part on one side and the other side taken up by some text or a title maybe we can hide half of that image so the important part is still large and of importance. Then what happens to the content? Do we just hide it? Is it important? Do we need that title and or text? If so what should we do with it? Again this will comes down to not thinking of one area take up the whole width so we can do what we like with it, it is including that in the grid whether it is half’s, thirds and how they can also wrap, hide etc or not as the case may be if you are happy for all of that 960px wide content to simply shrink to 320px wide.
Above all else just think fluid as you design, imagine that page on your mobile device will it fit as is? Probably not so how would you best like to see it? Then take inspiration, there are a lot of great examples out there now and it wouldn’t take long to find something that would help you with your challenge. Responsive design is now pretty much the norm and not the exception so inspiration is everywhere. And of course collaborate with your developer they should know more of how things will work on devices and advise on what might work or not work.