When I’m developing sites, the working browser window usually starts out small. It’s like 350px wide. As the elements on the page take shape, I slowly expand the browser window. Routinely, this available space allows quite a few of these elements to jump around the screen, sometimes settling in unpredictable ways. It’s usually not a huge problem though, and I can fix discrepancies that occur by adding a media query somewhere in the site’s CSS script. Then once more, I expand the browser window again to observe the behaviour of elements on the page. If there’s anything I don’t like, I once again add another media query at the end of my CSS styling. This behaviour happens recursively until I max out the available width of my computer screen or feel confident enough to have put the relevant styling for major screen sizes. It’s really fun stuff.
Strangely, the hardest part about learning foundational web development for me was what I’ve just described to you: responsive design. It’s funny to talk about because I had no issue with the theory though at the time. My mind found it easy to grasp that there were media queries to chuck in, a viewport meta tag somewhere, some fluid images here and there and maybe some flexbox to make it easy to spin up nice layouts. It didn’t initially seem like a big deal.
In practice, however, I found it very easy to dread the task of making my elements responsive. My fingers would tense up when it was time to resize my desktop window and analyze the site’s behaviour. It’s hilarious now to think retrospectively and realise that this was the reason I sometimes procrastinated finishing whole projects. That uncertainty at not knowing what each new viewport would bring to the site’s behaviour was initially so unsettling. I didn’t want to feel frustrated when I realized that there was now an element hanging uncomfortably at some point on the screen, or that there was some animation on the site finding it difficult to adjust effectively.
But this isn’t even a unique feeling, and resizing browser windows and chucking in media queries is most of what I (have to) do with my life. As humans, we’re always growing and changing, stepping into spaces that quite often feel bigger, weird, and initially uncomfortable. And in many ways, the spaces (like a viewport) around us do have the ability to dictate how the elements in us behave. I guess the anxiety I would often feel when expanding my browser window was akin to how one feels when it is time to step into a space that’s larger. You’re initially unsure of what each new experience brings, uncertain about how it might change you, and unable to predict how the elements in you might jumble up and transpose.
My secondary school is probably the biggest space I’ve been in yet. Reflectively, a lot of the elements in me moved and reacted to that change in environment. It was unusual, and I suppose being in such a diverse space with diverse people will naturally do that. A lot of this change has been good, though some bad as well. Luckily media queries also exist in the real world—models that we willingly put in our psyche to consciously steer us in the direction we want to be.
When developing sites nowadays the way I add queries is less sporadic than it used to be. Before I even start writing the code, I usually choose my “breakpoints” and then map out the overarching theme on Figma before the code writing starts. But still ever so often there’s another media query I add to fix something wrong that I didn’t initially plan to add. For the most part, the only way to find out whether there are enough queries in the script is to, well, resize the window. In essence, to identify issues with responsiveness, I have to allow my page elements to interact at different screen sizes. Only then can I truly inflect, see what’s wrong and add in the necessary lines to fix things that are wrong.
I’m learning to love all of this now, both when I’m writing code and settling into a new space. For the most part, my mind sees the prospect of settling in a new environment as an opportunity to add a media query to my CSS script. It’s a chance to correct some part of me that possibly hasn’t been reacting all too well. Also, sometimes there is a media query I might have added in the past that I realize I don’t need. When this happens, I just remove it. It’s the same way that although I might have added some model/framework to my psyche at a point, growth happens and it’s okay to remove what no longer serves me.
I have to keep growing, changing environments and creating new models to complement that growth, whilst removing old and outdated ones that no longer serve me. That's the game.
When I’m developing sites, the working browser window usually starts out small. It’s like 350px wide. As the elements on the page take shape, I slowly expand the browser window. Routinely, this available space allows quite a few of these elements to jump around the screen, sometimes settling in unpredictable ways. It’s usually not a huge problem though, and I can fix discrepancies that occur by adding a media query somewhere in the site’s CSS script. Then once more, I expand the browser window again to observe the behaviour of elements on the page. If there’s anything I don’t like, I once again add another media query at the end of my CSS styling. This behaviour happens recursively until I max out the available width of my computer screen or feel confident enough to have put the relevant styling for major screen sizes. It’s really fun stuff.
Strangely, the hardest part about learning foundational web development for me was what I’ve just described to you: responsive design. It’s funny to talk about because I had no issue with the theory though at the time. My mind found it easy to grasp that there were media queries to chuck in, a viewport meta tag somewhere, some fluid images here and there and maybe some flexbox to make it easy to spin up nice layouts. It didn’t initially seem like a big deal.
In practice, however, I found it very easy to dread the task of making my elements responsive. My fingers would tense up when it was time to resize my desktop window and analyze the site’s behaviour. It’s hilarious now to think retrospectively and realise that this was the reason I sometimes procrastinated finishing whole projects. That uncertainty at not knowing what each new viewport would bring to the site’s behaviour was initially so unsettling. I didn’t want to feel frustrated when I realized that there was now an element hanging uncomfortably at some point on the screen, or that there was some animation on the site finding it difficult to adjust effectively.
But this isn’t even a unique feeling, and resizing browser windows and chucking in media queries is most of what I (have to) do with my life. As humans, we’re always growing and changing, stepping into spaces that quite often feel bigger, weird, and initially uncomfortable. And in many ways, the spaces (like a viewport) around us do have the ability to dictate how the elements in us behave. I guess the anxiety I would often feel when expanding my browser window was akin to how one feels when it is time to step into a space that’s larger. You’re initially unsure of what each new experience brings, uncertain about how it might change you, and unable to predict how the elements in you might jumble up and transpose.
My secondary school is probably the biggest space I’ve been in yet. Reflectively, a lot of the elements in me moved and reacted to that change in environment. It was unusual, and I suppose being in such a diverse space with diverse people will naturally do that. A lot of this change has been good, though some bad as well. Luckily media queries also exist in the real world—models that we willingly put in our psyche to consciously steer us in the direction we want to be.
When developing sites nowadays the way I add queries is less sporadic than it used to be. Before I even start writing the code, I usually choose my “breakpoints” and then map out the overarching theme on Figma before the code writing starts. But still ever so often there’s another media query I add to fix something wrong that I didn’t initially plan to add. For the most part, the only way to find out whether there are enough queries in the script is to, well, resize the window. In essence, to identify issues with responsiveness, I have to allow my page elements to interact at different screen sizes. Only then can I truly inflect, see what’s wrong and add in the necessary lines to fix things that are wrong.
I’m learning to love all of this now, both when I’m writing code and settling into a new space. For the most part, my mind sees the prospect of settling in a new environment as an opportunity to add a media query to my CSS script. It’s a chance to correct some part of me that possibly hasn’t been reacting all too well. Also, sometimes there is a media query I might have added in the past that I realize I don’t need. When this happens, I just remove it. It’s the same way that although I might have added some model/framework to my psyche at a point, growth happens and it’s okay to remove what no longer serves me.
I have to keep growing, changing environments and creating new models to complement that growth, whilst removing old and outdated ones that no longer serve me. That's the game.