With constant releases of new smartphones, mobile browsing has become a daily activity for most people. It is important for web designers and developers to create websites using responsive web design so that everyone can enjoy a pleasant web browsing experience across different devices. If you want to learn more about the general concept of responsive web design, please check out these detailed articles here and here!
In order to know why mobile first design is the better approach to responsive web design, we need to know the different approaches to building a responsive website. People may choose to start big by building a desktop version of the website first and then work their way to mobile version or they can choose to start small and build a mobile version of the website first. The two common approaches to responsive web design are Desktop First Design and Mobile First Design.
Desktop First Design
With Desktop First Design, designers and developers begin by creating a desktop version of the website. The desktop version usually contains the most functions and content, since desktops have faster processors and larger screens than tablets and smartphones. When considering slower and smaller devices (tablets and smartphones), designers and developers will remove functions and content in order to scale down to the available resources within each device.
The advantage to this approach is that it usually results in faster development time. Since the beginning of the web era, designers and developers have been used to developing websites that are meant for desktops. All they have to do now is trim down their original website while keeping a pleasant browsing experience so that it fits better on smaller devices. This graceful degradation approach makes a lot of sense, right?
Although it makes a lot of sense, Desktop First Design does come with some critical disadvantages. If people initially visit the desktop version of a website, the tablet and mobile version of that same website will appear as a major downgrade to them. Functions and content that they can find on the desktop version may not be found on other versions because they have been removed. The website is also prone to accidental removal of vital features and content. A classic example would be content that displays upon hover over an element on a web page on a desktop browser.
If we simply scale down the size of the element without modifying the implementation on the mobile version, content is lost because there is no such thing as “hover” on most mobile devices. Even if people catch this error during their development process, developers will have to ask designers to redesign the webpage in order to make the content fit somewhere on the mobile version. I won’t even go into detail about finding alternative plugins and extensions that are actually not “mobile friendly,” malfunctioning in mobile devices! In the end, the whole process can become a total mess.
Mobile First Design
For Mobile First Design, designers and developers begin by creating a mobile version of the website. Since smartphones are usually more limited than tablets and desktops in terms of resources, like screen size and speed, designers and developers will progressively enhance the website as they move to bigger devices (mobile->tablet->desktop).
This progressive enhancement approach is different than the traditional approach that most designers and developers are accustomed to. This approach demands a higher learning curve and is often slower to develop than Desktop First Design. However, the advantages of Mobile First design definitely outweigh the disadvantages.
Data speed and screen size are limited on smartphone devices in comparison to desktops. Furthermore, people that browse the web on their smartphones are either looking for urgent information or they have some time to kill and just want a few distractions. In light of a device’s limitations and conditions, designing a mobile version first forces us to focus on the most vital parts of website.
Mobile First Design also allows us to discover new capabilities for mobile web. We have already discussed mobile limitations, however, there are some features that are exclusive to smartphones and tablets. By starting on mobile first, designers and developers are focused on delivering the best browsing experience for an array of devices instead of just constantly degrading from the best version of a website. Other mobile exclusive features, such as GPS, allow a website to know exactly where a user is located.
The check-in function on the mobile version of the Facebook website makes good use of the location tracking feature on smartphones. Built-in camera and microphone on mobile devices can also be used in different ways for users to provide information to a website. Finally, capabilities such as touch input and accelerometer are useful in making mobile web browsing fun and unique.
Responsive Web Design is without a doubt the biggest web design trend right now and will continue to be so in the future. There are two approaches to developing responsive websites, Ready Artwork uses Mobile First Design because we care about quality. Even if it takes a bit longer, it is important that we do things right. Contact us today if you want a responsive website for your business!