Image Credit: Andersson-Wise Architects from Designmodo
Know the priority of content (if content is available)
If you know what content is most important, it’s a lot easier to make design decisions about the placement of that content. This especially applies to responsive design when some sections are shifted down to another level on a mobile device.
Make sure all text on graphics is still readable at half the size
Most of the time, graphics will be resized and if you have text on those graphics, you need to make sure users will still be able to read it.
Design Multiple versions of your navigation
Create your initial version like you normally would, but then consider how to incorporate a dropdown list for viewers using phones, and maybe an in-between option for tablet screens.
Start Development early
A lot of time spent on redesigning graphics and layouts can be saved by starting the development stages right after the basic layout is designed. It’s much easier to make minor changes based on display complications early on than to have to go back in and redesign major graphics and page elements.
Use One .psd for all your layouts
Create your .psd for the dimensions of your largest viewport and create folders for each smaller size on top of each other (as backgrounds for the content). Having it all in the same .psd makes it much easier for you to visualize how the content will need to shift depending on the decreasing or increasing pixel-width of the user’s device.
Consider using “Style Tiles” http://styletil.es/
Since most of the content will be moved around and displaying differently on different devices, Style Tiles are a way to get together your primary design elements that will be the same on all versions of your design.
