What I enjoy about programming responsive / fluid designs.

First and most important to me is the possibility of making the website designs work for most computer resolutions, most tablets and most mobile devices. Let me elaborate, a few years back before HTML5 made fluid/responsive design a possibility, getting a website’s design working for different resolutions was close to impossible. To start we had to choose a dimension that worked for the most popular resolution. Then we would have to try tweaking it so that it worked with one or two of the most popular resolutions smaller and larger than the default resolution chosen. This always seemed to be a futile effort. At the same time the website could appear way too big on some screens, while on others it was barely readable. The ability to program Fluid/Responsive design has made the life of website design so much easier and feasible. The website can now look great and be very readable on most devices and many different resolutions.

Related to what I mentioned in the previous paragraph, because of the possibility to make designs work for all resolutions and devices, it also looks a lot cleaner when you are browsing the different pages with the different devices. It is both satisfying and a joy to see your website work with all these devices without having to create separate pages for each device, which is how it had to be programmed in the past. As a programmer, not only can you keep the designs clean and precise as they were meant to be, your HTML and CSS is organized and the code stays clean and neat, as well.


Recently I discovered the bootstrap framework, there are others out there, but this is the most popular one for developing responsive designs. I am still learning a lot about it, but I can say so far that it makes responsive a lot easier to work with. It includes many CSS classes that can be used functioning as fluid/responsive. One of the biggest responsive aspects of bootstrap is the responsive grids, (rows / cols), the columns are divided in up to 12 cells in a row, and what is cool about it, is that you can specify how many columns you need for the different sizes. For example, you might want large screens to have 4 items in a row, in medium size screen to have 3, in small to have 2 and in extra-small to have 1 per row. Bootstrap makes this a snap to accomplish without having to specify different media queries in your stylesheet. Of course, in some cases you will still need to specify your own media queries depending on what you are trying to accomplish. There are other CSS classes and even JS calls included with Bootstrap that are really interesting and are all customized to work responsively. Some examples of these are navigation, carousels, modals, buttons, tables and so many more.


Lately, I have also started using Sass (Syntactically Awesome Stylesheets) more often. As its name suggests I have found it to be awesome in its capability to structure all your CSS classes and tags so it is nicely grouped with its proper parent/child structures. Another fun thing about Sass is that you can create mixins to help call some CSS lines that require different browser syntax, like border-radius, box shadows, gradients.... It is very useful, as well, for specifying global values, like colors or specific widths that are used throughout the site. Updating becomes a breeze, just update it in this one file instead of everywhere.


If, like myself, you enjoy front-end programming and have spent time frustrated by trying to make designs appear the way they should on different devices and different browsers, jump in and start using HTML5 and the many tools available for programming Fluid/Responsive designs. I have mentioned only a few of the tools that I have started using to enhance my programming experience and I am looking forward to learning more and sharing with my peers.

Comments (1) -

  • web design course

    7/21/2017 2:33:39 AM |

    responsive is very important because 70% of most users use mobile phone to browse all over the web. So this is very helpful tips thanks for sharing. Also visit the course i found online https://www.skillshare.com/browse/design