Responsive Images

Issues which provided the neccessity for Responsive Design or in our case, Responsive Images :

Art Direction Problem - Rendering images specific for browser/device size
Resolution Switching Problem - Same images to be displayed in differing number of pixels based on browser/device size

Surprisingly, the solution to either of the problems mentioned above is to add images of different resolutions, detail and orientation as follows :

Resolution Switching Problem - Use <img> element and its srcset and sizes attributes, OR SVG images if not too complex
Art Direction Problem - Crop images as required for different layouts and use <picture> and <source> elements with media and srcset attributes.

Hence, not much to display under this topic.

Takeaways from Responsive Design

However, in my own research and exploration I found that my design was already responsive.

Mistakes made were:

Building a very stiff desing with <div> elements within a container
<div> element classes - .grid-container, .media-column and .text-column which complicated the setup for a responsive layout
Over complicating the layout with too many <div> elements

Mistakes were corrected by simplifying the layout by :

Removing the excess <div> elements within HTML
Remove the over-complicated CSS for each of the classes - .grid-container, .media-column and .text-column
Adding simple flex display for .grid-container with defining properties
Adding min- and max- height and width properties for .imageclass, <video> and <iframe> elements
Adding float property to <iframe> element for the text to freely flow around the image for responsiveness
Verification of HTML design and CSS style from Codeium

Other considerations :

Grid - applicable for 2 dimensional layouts, very specific for grid-based content, but has limited support across different browsers
Flexbox - applicable for 1 dimensional layout (either horizontal or vertical), has better support across different browsers
ALWAYS check labeling!

PS : These are mostly notes for myself :)