The main difference between responsive web design and mobile-first design is how the designer approaches the website. A responsive website is reactive — the design moving fluidly to fit devices. A mobile-first website is when the mobile website planned and designed in tandem with the desktop site, making proactive changes to the overall design to ensure the mobile experience is just as good as the desktop experience.
Mobile First:
Mobile first is a looking at the needs for mobile users, from speed, content, icon sizes, text and creating a design focused on the users needs, then creating a responsive fluid design that responds to larger devises as it expands responsively to fit larger screens. Mobile first focuses on the need and speed at displaying the content the user is looking for. Stripping back the site to the essential information first.
Responsive design:
Responsive design is more of a technical processes where the website changes to the device display sizes
Working from the desktop design and shrinking to fit each screen size. This is an effective way to ensure all screen sizes are covered. The website can be changed to hide content and to change at different screen sizes. making proactive changes to the overall design to ensure the mobile experience is just as good as the desktop experience.
People buy a lot of goods online, and connect socially via apps and chat platforms. And the pandemic has only served to fast-track this trend, with everything from groceries to clothes now being delivered from online orders in quantities never before considered.