Website design in RWD technology – four, in my opinion, the most interesting frameworks and responsive libraries.
Looking through the statistics for 2017 regarding the information on the percentage of users browsing websites, I came up with an idea to write an article about the most interesting CSS frameworks that are used to design websites in the so-called RWD technology, i.e. from English “Responsive Web Design”.
Okay, but actually what is Responsive Web Design?
So let’s start from the very beginning. The technology was created as a result of the appearance of the first mobile phones that had a large display and gave the ability to browse internet resources.
Responsive web design allows responsive use of information about screen size, screen position and platform. According to a source on Wikipedia:
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.
It was first described in the A List Apart blog by Ethan Marcotte on May 25, 2010.
This article has completely changed the approach to web design. What’s more, it opened the door to new concepts such as User Experience Design for websites. Today we know that this is a key approach to writing applications. The concept of “Mobile First” forces the web designer to design applications first on phones with the lowest screen resolution, then switching to the next larger screens.
Statistics show that most people using the internet use cell phones for this. Therefore, every page must be responsive. Only a few years ago interactive agencies and web developers tried to write responsive styles themselves. Today, there is no justification because you can use excellent frameworks and libraries for this. I would like to introduce to you some of the best of them.
In my opinion the best framework for designing websites based on the “Mobile First” approach.
Bootstrap was written by a Twitter development team. It has very well described documentation.
I did not check the statistics but it seems to me that this is the most commonly used framework, or rather better to say frontend library. The library differs from the framework in that we can use any component separately. In the framework we have to use the whole thing. And this is probably another element in favor of Bootstrap.
Bootrap’s main and biggest rival is Foundation. Excellent mature framework with many options for building responsive websites. Very often used, easy to learn and with great documentation. It gives great opportunities to build modern interfaces in web applications. Thanks to the Foundation, website design is very fast.
Material UI is a solution for people programming websites in ReactJS. The library is written in the form of components for React. It is a great solution for projects that are to be a SPA application or “Single Page Application”. This is a very modern approach to building websites, rather designed for slightly larger projects, e.g. in terms of building CRM.
Skeleton
Skeleton is a very simple and light framework built primarily for mobile devices. It’s really light, the source code consists of 400 lines. Does not require any additional libraries. All you have to do is connect it to the project and you can design a responsive website.
It seems to me that these are the most interesting solutions related to responsive websites. There are many others that we have missed but maybe I will write about them next time :).