Responsive Design Lab

Featuring Grumpy Cat: Tardar Sauce

Pure HTML/CSS Responsive Design Page (Part A)

HTML/CSS Responsive Design

Bootstrap Responsive Design Page (Part B)

Bootstrap Responsive Design

Comparison of Part A and Part B

After using both the pure HTML/CSS repsonsive design method and the bootstrap responsive design, I would have to say that I liked the bootstrap method more. Some challenges I encountered were organizing the elements into one row using the whole width of the row. On bigger screen this looks fine, but as soon as the screen real estate becomes smaller, the elements are squished together and shrunk. However, due to the media queries, the font size becomes bigger, making the text look even more squished. Overall, it takes more time and effort to nicely arrange the elements using the pure HTML and CSS responsive design.

For the bootstrap method, when we open the site on a device with a smaller screen real esate, the elements rearrange and stack on top of each other. Making it easier to read and keeps the page attractive for smaller devices. The bootstrap method took less time because each row does not need to have all the 12 columns, it just rearranges them to fit the width of the screen. However, one issue I faced with the bootstrap method was the font size, so to fix it I added media queries so it could adjust to the different screen sizes.