GIF Credit to Sandjis Ruluks from blog.froont.com
When creating a website, many developers and designers have to make a decision. What should be the focus of the website: design or content, user friendliness or scalability? It all depends on the creativity and objectives of the developers and their website.
Responsive Web Design
Responsive web design or desktop first design focuses on the desktop version of the website and consists of “fluid” columns and elements. When one opens such site on other devices like tablets and phones, all the elements fit into the screen and react to the screen size changes. This approach to web design is also known as “Graceful degradation”.
Responsive web design allows the same desktop site to be readable on tablets and mobile devices. It scales down. The smaller the screen, the less content may be displayed, and the functionality of the webpage may be reduced. When developing a website using responsive design, the developer makes a single website that he simply makes to fit the screen of the device said website is browsed on. For developers, creating and maintaining one page for all platforms saves a lot of headaches. On the other hand, it takes some troubleshooting and column readjustments to make sure the website works on most of the platforms.
Here are examples of responsive designed sites:
Wired.com - Viewed on a laptop
Wired.com - Viewed on an Android phone
Mashable.com - Viewed on a laptop
Mashable.com - Viewed on an Android phone
Mobile First Web Design
Mobile first design focuses on the content, rather than design and other features due to constraints and function of the web page. This development style is also known as “Progressive enhancement”
Such method of design allows building up of the webpage, brick by brick, starting from the phone screen and evolving to tablet and computer monitors. Of course, the desktop version of mobile first webpage should not look like a stretched out mobile webpage. Although as the webpage is adapted to more functional and unrestrained platforms, the web page designer may use his creativity to expand on functionality and focus of the initial mobile page. Rather than rescaling the website down to the other sizes from the desktop webpage, mobile first design provides an efficient mobile webpage that may be built up to larger platforms.
Mobile first design often provides better user experience based on functionality of the mobile devices and step by step addition of content across platforms.
Below are some examples of mobile first designed websites:
Huffingtonpost.com - Viewed on an Android phone
Huffingtonpost.com - Viewed on a laptop
SAP - Viewed on an Android phone
SAP - Viewed on a laptop
Every website serves a unique purpose and portrays the vision of the developer. If one designs a mobile online store, it would make sense to use mobile first design to tune the web page to customer’s needs. On the other hand, a larger website with a lot of content would rather be made for desktops first and then adapted to other devices gradually. It all depends on the purpose and requirements of the website.