Approaching responsive design requires more attention to detail than just scaling down images or text to fit within a certain screen size. It requires the art of understanding not only how a design will look at various viewports, but how it will be built in a way that will work flawlessly across any screen size.
Mobile first
I firmly believe in the mobile first approach because it forces you to design around the core features of what you need to provide to your audience. Good design is clean, but great design is nothing more than what is needed. Mobile design forces us to design in an environment where we can create perfect web design that scales from a handheld mobile device (with minimal real estate) all the way out to large beautiful displays.
Now, this isn’t to say that the look can’t be beautiful and full of great visual design as the scaling-up increases, but there is something beautiful about design typography, text, colors and content in a way way that makes us want to consume it all. The focus relies on utilizing the grid, golden ratios, balanced use of typography and color palettes.
Performance driven
Every second counts on a mobile device. Lightweight mobile experiences will keep readers coming back if you consider their data as well. Make it fast. Make it readable. Make it function.
“Mobile-first doesn’t mean starting with a 320 pixel wide design, it means starting with a low bandwidth experience.” – Daniel Ryan, Frontend Director for Obama for America
http://net.tutsplus.com/articles/interviews/chatting-with-obama-for-americas-director-of-frontend-development-daniel-ryan/
People use their mobile devices to get information as quickly as possible. Don’t be the barrier of getting people to the content by making poor design choices that will bloat the markup or add unnecessary javascript to a project.
Design for functionality
Consider touch, swipe, and tap experiences when designing for mobile touch devices. Touch events are becoming standardized (http://www.w3.org/standards/history/touch-events) and you should familiarize yourself with the capabilities that each device and platform will allow in a mobile browser. Hover isn’t an option for mobile devices just as much as swiping isn’t a viable experience on a desktop. Be pragmatic and intentional with the various devices you are designing for and make it functional for the audience experiencing your content on specific devices.
Design for code
Responsive design is about front-end development, UX, content and visual design working together seamlessly to provide a fast, performance driven experience that will deliver quality content on any device. Start with clean, beautiful code and keep it functional.
“Everything should be as simple as it can be, but not simpler.” – Albert Einstein
Design isn’t just about making things pretty, its about making things work. Start with a stripped down coded version of your layout and work out from there. Keep it simple and make only necessary decisions from a visual perspective to add things at various screen sizes.