Creating A Better Responsive Design In Susper
A lot of work has been done on making Susper, a wonderful search-engine and still more work have to be done on it. To become a good competitor in the market, one should make their website UI design such that: It should be eye-catching for the users on the first-time visit to the website. It should be easy to use with simple UI features rather than having more complex UI features. We have been more oriented towards the material design. We have used Bootstrap technology for designing UI. Earlier, we proposed an idea of creating a UI using Angular Material v2 but it was dropped due to time limitations and other issue priorities. To make Susper a better competitor in the market, we made sure it should be responsive as well on the following devices: Mobile screen devices: 320px - Smaller screen size. 375px - Medium screen size. 425px - Larger screen size. Tablets: 768px - default screen size for tablets. Laptops: 1024px - Smaller screen size. 1440px - Larger screen size. 4K: 2560px - Default screen size. We targeted these devices using @media queries in CSS3. For e.g. if I want to make a site responsive for the mobile devices, I will be using: @media screen and (min-width: 320px) and (max-width: 425px) { // do something } Here, min-width: 320px means that the screen size should be greater than and equal to 320px and max-width: 425px means that the screen size should be less than and equal to 425px. It is not necessary to use only these dimensions. Suppose if there is break in UI design between 320px and 425px then, one can add that screen size using @media query. In this case, nested @media queries play a quite good role. @media screen and (min-width: 320px) and (max-width: 425px) { // do something // let's say, break in UI design is observed at 375px // add nested @media query @media screen and (min-width: 375px) { // do something } } We’re still improving our CSS code at present following this grid pattern. One can check UI code at Susper repository hosted on GitHub: https://github.com/fossasia/susper.com We have also used a lot of breakpoints which are not nested. But it’s good practice to break points in nested form. This will be solved while improving our CSS code. Here are some screenshots of the current responsiveness of Susper: Mobile screen devices: Tablet devices: Laptops: 4K display: Resources: Good resolution values to use with media queries: https://stackoverflow.com/questions/11384720/what-are-good-resolution-values-to-use-with-media-queries How to use media queries in responsive web design by Ryan Riddle: https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/
