Responsive design is a fairly recent approach to creating a product or page that responds to the different devices on which it appears. The same page will resize or reformat to be appropriate for a mobile phone, a tablet, and a desktop. There are some beautiful examples of this and it’s easy to see how it works by just resizing your browser. The big benefit to responsive design is that you can build one product or site and maintain one product or site (rather than one for each device or device category).
The promise of mobile-first is that it forces you to think differently about the design. It really started as an observation by Luke Wroblewski, that more often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. So Wroblewski asked himself what would happen if the order was flipped. By designing for the mobile screen first you’ll need to prioritize what’s on that screen because of the size constraint. There are other constraints as well. You might have bandwidth issues, distracted users, fat fingers. Similarly, the capabilities of mobile allow for innovative interactions that aren’t possible on the desktop. It’s these constraints and capabilities that create change. ..