Responsive web design is more critical than ever, given that over half of the visits to your website are made via mobile devices. Search engines give higher priority to websites that are optimized for mobile devices. While developers, designers and website owners have struggled with creating websites optimized for hundreds of possible devices, the actual principles of responsive web design can be pretty easily implemented.
What is mobile first?
While mobile first could be considered a general design principle, it literally means put the mobile styles first in your style sheet, along with site-wide styles like colors and typography. You can then add the tablet media query section and then the styles for desktops. This way, your site is optimized for mobile first and then for more common viewport situation like browsers being used on desktop PCs and laptops. You can also end up with less CSS code.
Best Guides and Resources