Mobile First = Content First
The heart of any website is its content, and what users are there for. Because of the restrictions that accompany. a mobile design, a mobile-first approach naturally leads to a design that is more content-focused -- and therefore, user-focused.
Mobile devices with their limitations such as bandwidth and screen size force designers to prioritize content in order work within theese parameters. Designing for the smallest screens crystallizes a site's most essential features, creating the core of its UX.
Stripping away extraneous elements doesn't mean that they aren't necessary; they just aren't necessary for your mobile users. UI elements that are absent from a mobile design can still be added to enhance a desktop design. On a traditional desktop website, white space or large scale images are used more widely whereas collapsible menus and widgets are more likely to appear on a mobile design. This is because content is context dependent and frequently, desktop users will have different needs from mobile users.
Mobile First vs. Responsive Web Design
Mobile First Design and Responsive Design are two different approaches a designer can take when designing for multiple devices on the web. A designer can start with either desktop or mobile in mind, and ensure that all other devices' screensizes are responsive from those respective starting points.
Responsive design begins with a desktop screen in mind, usually with a starting resolution of 1920x1080, which then scales down to the size of the screen the user is acessing it with. Even though the site will fit on a user's phone, it was not designed with smartphones in mind, and will usually be more complex with more niche media than a site that was designed with mobile access in mind.
Mobile first design is almost the exact opposite, with the interface and content of the site being designed with a more streamlined approach that can scale easily to a larger screen, incrementally increasing enhancements and complexity with the increasing screen size.
Progressive Enhancement vs. Graceful Degradation
Progressive enhancement focuses on the experience of users across devices and can obtain the value and content they desire, regardless of the device they use. Today, browsers are embedded in everything -- smartphones, gaming consoles, laptops, smartwatches, and even refrigerators. Each of these has a different screen size, browser-supported features and capabilities, making for a unique experience from device to device. Progressive enhancement as a concept involves designing for the most simple device, with the most restraints, then adding complexity and enhancements as other devices’ browsers can support it.
Graceful degradation is the practice of designing for the modern browser, while ensuring that it remains functional in as many simpler, or older, browsers as possible. Graceful degradation is the opposite of progressive enhancement in that focuses on modern, more advanced browsers before ensuring functionality on more basic devices, by progressively removing features.
Both progressive enhancement and graceful degradation try to do the same thing: making websites available and useful to every user. Progressive enhancement takes more planning from the outset and is a more stable means of achieving that end. Graceful degradation can be more easily used as a patch for an existing website; it requires less initial work, but will make maintenance more challenging.
Which is the Best Approach for Your Project?
sdfsadf